Без рубрики

12 российских сайтов с адаптивным дизайном

Дарья Калинская

Выпускающий редактор SEOnews

В последние годы адаптивная верстка стала очевидным фаворитом среди других вариантов mobile-friendly сайтов. В Справке Google это единственная версия, у которой нет недостатков, а Яндекс, отвечая на наш «Вопрос недели», отметил, что в Рунете заметна тенденция «снижения количества отдельных страниц для мобильных (m.site.ru) в пользу адаптивного дизайна и динамического показа».

А раз есть спрос, то нужны и идеи. Помня об успехе прошлогодней подборки «12 примеров сайтов с адаптивным дизайном», редакция SEOnews решила собрать еще несколько интересных сайтов с адаптивной версткой, но на этот раз мы обратились к российским компаниям. И вот что мы увидели.

Издательский дом «Коммерсантъ»

Как оказалось, большинство наших коллег из СМИ предпочитают мобильные сайты, а некоторые и вовсе еще не озадачились вопросом своей мобилопригодности. Редким исключением из правила стал «Коммерсантъ». В результате на главной адаптивного «Коммерсанта» читателя встречают два варианта новостей – краткий и подробный, а еще статьи, анонсы к которым написаны довольно мелким шрифтом серого цвета. Кажется, не лучший выбор для версии сайта, который будут просматривать с мобильных устройств.
Веб-версия сайта ИД Коммерсант.png
Адаптированная версия сайта ИД Коммерсант

Meduza.io

В Meduza точно знают, что пользователи любят читать с мобильных именно новости. Поэтому адаптивный сайт издания – это такая длинная лента новостей, которые разбавляются вставками из других рубрик. Впрочем, в «Меню» есть возможность зайти отдельно в каждую из них.
Веб-версия сайта Meduza
Адаптивная версия сайта Meduza

Сбербанк

«Сбербанк» решил сохранить в адаптивной версии все возможности, которые есть у посетителей десктопного сайта. И есть ощущение, что размещали они функции в порядке востребованности мобильными пользователями. Прямо в шапке возможность перейти в «Сбербанк Онлайн», раздел «Контакты», где есть не просто контактный центр, но и ближайшие отделения и банкоматы, и «Меню», в котором можно выбрать актуальную задачу. Отдельно телефоны контактного центра дублируются в первой прокрутке.
Так выглядит веб-версия сайта Сбербанка
А это адаптированная версия сайта Сбербанка

Альфа-Банк

А вот сайт «Альфа-Банка» – это своего рода мобильный лендинг, на котором вы можете выбрать необходимую услугу. Выглядит довольно лаконично. Но, несмотря на отсутствие картинок, не считая фона, страницы грузятся довольно долго, а при выполнении некоторых операций вас просто перебрасывает на веб-версию сайта.
Веб-версия сайта Альфа-Банка
alfa bank.jpg

Тинькофф Банк

Как и на десктопе, адаптивная версия Тинькофф Банка встречает баннером, который занимает добрую половину экрана, зато заставляет пролистать дальше, чтобы узнать условия предложения. В целом сайт очень напоминаем своих западных собратьев, где крупные привлекательные изображения замещают длинные описания, а текст используется очень функционально.
Веб-версия сайта Тинькофф Банка
Адаптивная версия сайта Тинькофф Банка

Aviasales

Достойный пример услугового сайта. В отличие от банков, которым нужно уместить в ограниченном пространстве мобильного экрана множество опций для разных категорий клиентов, Aviasales может показать все своих услуги уже в первой прокрутке экрана. По кнопке меню открываются дополнительные возможности для поиска дешевых билетов. Те, кто все-таки решит пролистать вниз, могут почитать отзывы и информацию о компании.
Веб-версия сайта Aviasales
Адаптивная версия сайта Aviasales

М.Видео

Странно, но далеко не все онлайн-ретейлеры оказались готовы к переходу в mobile. И далеко не все из них оценили прелести адаптивной верстки. «М.Видео» у себя на сайте сосредоточились на акциях и популярных товарных категориях, что вполне логично для интернет-магазина. Немного удивляет разве что отсутствие в пределах видимости хоть какого-нибудь телефона для связи (или любой другой формы) и раздел «Магазины», который по умолчанию показывает московские филиалы, даже не уточняя местоположение пользователя.

Веб-версия сайта М.Видео

Адаптивная версия сайта М.Видео

Wikimart

Wikimart встречает большой формой поиска, кнопкой «Каталога товаров» и своими конкурентными преимуществами. Дальше идут товары по со скидками и акции, которые перемежаются предложениями зарегистрироваться на сайте или войти. И во всем этом нет ничего удивительного, но телефона снова нет. К слову, важная страничка с информацией о «Доставке и оплате» оказалась внизу страницы, в разделе «Покупателям», и ведет на десктопную версию сайта.

Веб-версия сайта Wikimart

Адаптивная версия сайта Wikimart

LADA

Да, у «АВТОВАЗА» есть сайт с адаптивной версткой. На нем можно относительно удобно ознакомиться с модельным рядом автомобилей и даже сконфигурировать что-то для себя. В обзоре некоторых автомобилей даже есть возможность «осмотреть салон изнутри». И о наболевшем – телефон клиентской линии спрятан в футере.

lada-web.png

Адаптивная версия сайта Lada

Мегафон

Единственный из лидеров мобильной связи, у которого есть адаптивная версия. «Мегафон» сходу предлагает клиентам решить сразу несколько актуальных проблем вроде пополнения счета или получения информации о роуминге и мобильном интернете. Правда, выглядит это так, будто на сайте не подгружаются картинки. В этой мысли еще больше укрепляешься, долистываешь до предложения купить смартфон или планшет. И да, на сайте мобильного оператора нет телефонов контактного центра.

Веб-версия сайта Мегафон

Адаптивная версия сайта Мегафон

Яндекс

Кажется, с адаптивной версткой Яндекс чувствует себя даже лучше, чем в веб-версии. Здесь на одной странице уместились почти все Я.Сервисы, причем выглядят они иногда даже более привлекательно, чем на десктопе. Главное, чтобы пользователи не уставали листать.

Веб-версия сайта Яндекса

Адаптивная версия сайта Яндекса

И, как всегда, приглашаем вас делиться своими примерами адаптивных сайтов в комментариях. 

.