Что такое адаптивный дизайн сайта и почему это так важно?
Адаптивный дизайн сайта под мобильные устройства сейчас является основным показателем качества верстки сайта и поведенческих факторов, которые влияют на поисковый трафик. Поэтому в данной статье я расскажу вам про адаптивный дизайн, что это такое и каким он должен быть. Я дам вам сервис, с помощью которого вы сможете проверить дизайн своего сайта, а также я приведу примеры хорошей и плохой верстки сайта. Узнавши и применивши данные советы, вы будете вооружены перед вашими конкурентами за место под солнцем.
Мы с вами живем в удивительном мире. Научно-технический прогресс шагает по планете семимильными шагами, безапелляционно вторгаясь в любую отрасль человеческой деятельности. Разве могли мы представить еще несколько лет назад такое разнообразие планшетов, нетбуков и смартфонов? За кошельки покупателей разворачиваются нешуточные войны, а проигравшие безжалостно вытесняются с рынка. С каждым годом гаджетов становится все больше и больше. И с каждым годом многомиллионная аудитория их владельцев только расширяется. Теперь уже пользователи разделились на два лагеря: те, кто для выхода в интернет использует стационарный компьютер, и те, кто путешествует по сети при помощи гаджетов.
Но все ли сайты удобны для просмотра на маленьком экране?
Я более чем уверен, что ответ на предыдущий вопрос будет отрицательным. Многие владельцы ресурсов слышали про адаптивный дизайн юзабилити сайта, но далеко не все считают нужным подгонять свои сайты под сенсорные экраны с небольшой диагональю. Это в корне неверная позиция, потому что она ведет в тупик, ограничивая количество посетителей. Дизайн и должны быть дружественны по отношению к разным мобильным устройствам. Только в этом случае пользователи будут чувствовать себя комфортно на его страничках.
Создание интернет сайтов с адаптивным дизайном намного превосходит мобильные версии. Его неоспоримыми достоинствами являются:
- Автоматическая интеллектуальная подстройка навигации и контента под конкретную модель гаджета.
- Отпадает необходимость в поддержке нескольких версий сайта (мобильной, для обычного персонального компьютера, планшетов и так далее). Зачем продуцировать столько усеченных клонов вашего ресурса, когда можно обойтись единым гибким решением?
- Отсутствие статичности. Сам ресурс и его верстка выполнены под заданное разрешение экрана. Более крупные или более мелкие экраны отображают сайт некорректно.
- Не нужен дополнительный единый локатор ресурса (URL). Наличие такового в мобильной версии ведет к проблемам с перенаправлением (редиректом). Зачастую переадресация с главной на мобильную версию сайта, а также наоборот, не прорабатывается по всей глубине архитектуры ресурса. Это неизбежно скажется на доступности какой-то части контента и его эффективном отображении в поисковых программах. В итоге о таком понятии, как качественная «поисковая оптимизация» следует забыть.
Теперь давайте заглянем на один сайт, где вы можете проверить адаптивность дизайна своего сайта. Для этого перейдите по такому адресу http://quirktools.com/screenfly/ и вы увидете строку ввода адреса сайта, где вам нужно ввести url адрес проверяемого сайта.
После того, как вы ввели адрес сайта и нажали на кнопку Go, у вас чуть ниже основного меню появиться активное меню, с помощью которого вы и будете проверять свой введенный сайт на адаптивность его дизайна под различные устройства, а их здесь предостаточно, чтобы сделать соответствующий вывод.
Здесь вы можете переключаться к различным устройствам, будь-то: мониторы, телефоны, планшеты, смартфоны и т.д. и смотреть результат — адаптивный дизайн сайта или нет. Если нет, то желательно эту ошибку исправить, если все хорошо, то отлично. Лично я всегда, когда верстаю свои сайты, то проверяю их на адаптивность под мобильные устройства, так как были случаи, что на компьютере все было ОК, но когда я посмотрел результат на смартфоне, то получил совсем другой результат, который меня не устраивал.
А теперь давайте я приведу примеры адаптивного дизайна своего сайта.
Адаптивный дизайн сайта на примере.
|
Вариант №1. Адаптивный дизайн под мобильные устройства с прокруткой. |
Вариант №2. Не адаптивный дизайн под мобильные устройства без прокрутки. |
 |
 |
Как вы можете наблюдать из скриншотов, что у варианта №1 есть прокрутка как горизонтальная, так и вертикальная, которая позволяет увидеть весь сайт целиком на мобильном устройстве. А если это так, то значить верстка сайта сделана верно.
У варианта №2 нет прокруток, и сайт выглядит, как пазл, который нужно собрать и вся остальная часть выпадает, то есть мы не видим полную структуру сайта, а это очень плохо и говорит о том, что качество верстки сайта ужасное.
Я сам, очень, много путешествую по интернету через свой смартфон и часто натыкаюсь на подобные сайты, которые показаны в варианте №2. Поэтому задумайтесь над этим вопросом и немедленно исправьте ошибки, если это еще возможно. Ведь от этого вы можете потерять большое количество посетителей и ухудшить поведенческие факторы своего сайта и как вследствие падений позиций и трафика.
Создание сайтов с адаптивным дизайном, которые и через пять лет будут отличаться актуальностью дизайна и удобством работы, – цель всех веб-дизайнеров.
Пока вы пребываете в раздумьях, стоит ли заниматься созданием адаптивным дизайном сайта, другие действуют и получают нужный результат. Если вы хотите, чтобы конкуренты смотрели вам в спину, действуйте немедленно и создавайте адаптивный дизайн для своих сайтов. Иначе потом будет поздно.