8-800-250-65-58
Приветствую!
Меня зовут Сферикс! Я знаю много об iМаркетинге и с радостью поделюсь своими знаниями :) А если вы хотите получать полезные знания регулярно, просто подпишитесь на рассылку.

Адаптивная верстка сайта: приводим примеры, разбираем тенденции

08.09.2017

Юзабилити

«Выживают не самые сильные и не самые умные, а самые быстро адаптирующиеся к переменам».

Чарльз Дарвин

Сегодня мы заходим в Интернет не только с компьютеров, но и с планшетов, мобильных телефонов и даже часов. И это кардинально изменило требования к сайтам. Теперь мало просто запустить сайт, важно, чтобы он умел адаптироваться под разные типы устройств. Иначе говоря, иметь сайт без адаптивной верстки – это как открыть огромный магазин, чтобы продавать в нем одежду только одного размера и удивляться потом: «Почему у меня так мало клиентов, ведь товар-то хороший?!»

Что такое адаптив?

Адаптивная верстка позволяет сайту подстраиваться под различные устройства (смартфоны, планшеты, ноутбуки и т.д.) и делает просмотр удобным на практически любом экране. Мы взяли для примера свои работы: сайт российской компании, занимающейся производством упаковки – завода «Ламбумиз» и сайт ЗАО «Алейскзернопродукт», одного из крупнейших производителей муки, макарон, круп и масла.

Главная страница сайта ЗАО «Алейскзренопродукт» на стандартном мониторе компьютера.

А так, благодаря адаптивной верстке, сайт подстраивается под экран планшета (iPad Pro) с портретной ориентацией:

А вот пример страницы «История» завода «Ламбумиз».

А вот как эта же страница выглядит на экране смартфона.

Вы можете легко проверить, как адаптируется ваш сайт сразу на разных экранах. Для этого даже не нужно окружать себя кучей больших и малых мониторов, за пару секунд тест сделают за вас специальные сайты, например, www.quirktools.com или www.deviceponsive.com.

Немного истории и психологии

Сам термин «адаптивный дизайн» появился относительно недавно, сначала программисты употребляли понятие «отзывчивый дизайн». И первым его ввел американский разработчик Итан Маркотт. Он написал книгу «Responsive Web Design», в 2012 году издание было напечатано на русском языке. (Книгу можно прочитать по ссылке).

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

Есть несколько веских причин сделать сайт адаптивным, если даже сейчас это не так.

Причина №1

Мобильные покупки в тренде.

С каждым годом все больше пользователей Интернета совершают покупки не со стационарного компьютера, а с мобильного устройства.

Согласно данным аналитической компании Data Insight, в продажах российских онлайн-ретейлеров рост мобильных заказов в 2016 году составил 40%. По данным Google в 2016 году 44% пользователей искали товары со смартфона. Из них 7% пользователей принципиально совершают покупки только со смартфона.

Если ваш сайт (а тем более Интернет-магазин) не адаптирован под смартфоны, вы теряете приличный поток клиентов.

Причина №2

Адаптация сайта делает ваш Интернет-ресурс максимально удобным для посетителей, т.е. для потенциальных клиентов. Сайт – это ваш виртуальный офис, и о комфорте клиента здесь вы должны заботиться так же, как о реальном офисе. Все мы понимаем: если офис/кафе/магазин удобен (до него легко добраться, рядом хорошая парковка, внутри располагающий интерьер, нет очередей и т.д.), то клиенту хочется вернуться. То же самое и с вашим сайтом. Чем удобнее и проще будет посетителю, тем чаще ему захочется к вам заходить. Классический пример приводит web-дизайнер Итан Маркотт. Вечером, уставший после работы, вы будете заезжать за пиццей только в ту пиццерию, до которой вам быстрее и легче добраться. А вот ваши дети будут заказывать пиццу только на том сайте, где самое понятное меню и удобная кнопка заказа.

Например, для экранов мобильных телефонов увеличена кнопка «Заказать обратный звонок», чтобы нажать ее можно было одним прикосновением пальца.

Причина №3

Адаптивный web-дизайн считается одним из главных показателей качества сайта. Сейчас все больше и больше пользователей, заходящих на сайт с мобильных устройств, просто уходят с сайта, если он не адаптирован.

Сайт – элемент вашего имиджа. Даже если вы не интернет-магазин, а компания, работающая только на b2b-рынке, и вы уверены, что ваши клиенты вряд ли будут рассматривать прайсы через мобильный телефон, все равно вы не можете пренебрегать современным web-дизайном.

Причина №4

Адаптация упрощает продвижение сайта.

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

На что нужно обращать внимание, заказывая адаптивную верстку для сайта?

Основная ошибка недобросовестных программистов – это создание миникопии вашего сайта, которая просто масштабируется под разные экраны, но не отличается функционалом. Не скрывается меню, не убираются лишние модули, не выравниваются колонки, текст и т.д.

Качественная адаптивная верстка гарантирует:

– Все элементы на сайте изменяют размеры и положение на странице в зависимости от экрана, тем самым позволяя пользователю увидеть весь объем информации страницы без каких-либо затруднений.

Страница каталога сайта выглядит следующим образом на экране ноутбука:

А так она выглядит на смартфоне.

– Некоторые элементы (ссылки и кнопки) укрупняются, чтобы по ним легче было попасть пальцем при нажатии даже с небольшого экрана.

– Главное меню превращается в современное меню-"гамбургер", и при нажатии на него появляется удобная панель с навигацией.

Для справки

Меню-"гамбургер" – это особая графическая иконка из трех параллельных линий, напоминающих слои гамбургера. Придумал ее программист Норм Кокс для Xerox Star, первого в мире компьютера с графическим пользовательским интерфейсом. В 2010 году «гамбургер» стали активно использовать Apple, Facebook, Reeder, Path. Сегодня большинство адаптивных сайтов используют «гамбургер» в качестве кнопки-меню.

Что будет дальше?

Адаптивная верстка – это только первый этап трансформации сайтов. Уже сегодня можно наблюдать примеры адаптивного брендинга, что ломает классические представления о нерушимости единственного начертания логотипа.

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

Трансформация логотипа Pepsi

Компания Starbucks, обновив логотип, убрала из него все буквы, оставив только образ русалки. Дизайнеры посчитали, что так логотип будет больше походить на иконку, а значит, его популярность в социальных сетях будет расти.

Еще одна тенденция. Сейчас при создании сайтов стал очень популярным подход «Mobile First», когда дизайн разрабатывают сначала для смартфонов и планшетов, а только потом его подстраивают для остальных устройств (ноутбуков и стационарных компьютеров).

Контент тоже должен быть адаптивным: размер шрифта и длина текста заголовков подстраиваются под размер экрана устройства (адаптивная типографика).

Летом 2017 года компания Google презентовала новый шрифт Spectral, который можно назвать адаптивным – он подстраивается под дизайн любой страницы.

В общем, если вы еще не адаптировали свой сайт, самое время этим заняться.

Добавить комментарий:

Ваш e-mail не будет опубликован.

Имя:

E-mail:

Комментарий*:

Введите символы, изображённые на картинке: *
Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности.

Отправьте нам свой номер телефона,
и мы вам перезвоним!

Нажимая на кнопку, вы даете согласие на обработку персональных данных и соглашаетесь c политикой конфиденциальности.