Стоит ли переходить на адаптивный дизайн сайта?

Пользователи интернета – это уже давно не только те, кто сидит в сети с компьютера.

Вы задумывались об остальных пользователях? О тех, кто выходит онлайн с мобильных телефонов и планшетов?

Определение

Адаптивный дизайн – это дизайн сайта, который будет автоматически адаптироваться под размеры экрана того устройства, с которого пользователь вышел в сеть. По-английски его называют Adaptive Web Design либо Responsive Web Design (отзывчивый дизайн, термин впервые был использован в мае 2010 года; адаптивный дизайн – более полное, общее и используемое название).

Адаптивный дизайн нужен для того, чтобы сайт корректно отображался на всех устройствах; потребность в мобильной версии сайта отпадает.

Важно подчеркнуть – сайт будет удобно смотреть на устройствах всех форматов: то есть на экране мобильного вам не придется расширять области, чтобы нажать на кнопку, прочитать что-то и т.д. На экране сохраняется весь контент, который корректно масштабируется на большом и на маленьком экране.

Это относительно новая тенденция в создании сайтов, однако сейчас отсутствие у сайта адаптивной верстки (или хотя бы мобильной версии) уже является показателем некачественного сайта.

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

Почему это хорошо

Адаптивный дизайн предполагает один домен (против наличия поддомена для мобильной версии), один код сайта (против отдельного написания мобильной версии сайта) и одно наполнение. Можно выделить следующие преимущества адаптивного сайта:

1. Гибкость: контент сохраняется на экране, но меняет свое расположение в зависимости от разрешения экрана;
2. Производительность: сайт доступен пользователю на любом устройстве, и ему будет комфортно его просматривать;
3. Сокращение времени на разработку: адаптивный дизайн экономит время и средства, необходимые для разработки сайта; не нужно создавать две версии сайта – десктопную и мобильную;
4. Оптимизация: у вас будет один сайт с адаптивным дизайном, и продвигать нужно будет тоже только его (против десктопной и мобильной версий сайта, если вы разрабатываете версии сразу для двух устройств).

Почему это плохо

Есть у адаптивного дизайна и противники, которые считают, что вариант разработки такой версии сайта далеко не самый удачный. Их основные аргументы:

1. Так как большое количество трафика генерируется на мобильных устройствах, то у сайта должна быть версия, рассчитанная именно на мобильные устройства (и такая версия сайта будет удобнее, чем адаптивный дизайн). Адаптивный дизайн подразумевает, что вне зависимости от того, с какого устройства вы заходите на сайт, на ваше устройство будет загружен весь контент, вся информация, которая может быть совершенно не необходима в случае с мобильными устройствами, но в то же время вес сайта может быть критичен, если пользователь вышел в интернет в местности со слабым сигналом. То есть мобильная версия будет загружаться куда быстрее и выигрывать по времени загрузки у адаптивного сайта.
2. При адаптивном дизайне пользователи не могут переключиться на полную версию. В то время как на сайтах для мобильных устройств внизу обычно есть возможность перейти на полную версию сайта. Чаще всего пользователи пользуются полной версией сайта, если привыкли посещать его с компьютера и видеть его десктопную версию – им проще в ней ориентироваться. И в этом случае им будет неудобно привыкать к новому, адаптивному дизайну сайта, который они увидят на экране мобильного телефона без возможности выбора. К тому же адаптивный дизайн может иметь какие-нибудь недоработки (которые вы не сразу заметите), а у пользователя даже не будет возможности перейти на полноценную версию.
3. Мобильная версия, как правило, проще, и пользователь сможет быстрее там найти нужную информацию. А если не сможет – возвращаемся к предыдущему пункту – он может перейти на полную версию сайта.
4. Если у вас уже есть сайт, то при переезде на новый, адаптивный дизайн вы можете потерять тот трафик из соц. сетей, который уже имеете. Поэтому если вы хотите сохранить этот трафик, вам будет удобнее сделать отдельную версию для мобильных телефонов. При этом разработка мобильной версии сайта может быть дешевле, чем разработка полноценного адаптивного сайта.
5. Если основная часть посетителей вашего сайта заходит на него с десктопных устройств, есть ли смысл что-то менять? В первую очередь необходимо думать о бизнесе и лишь затем вносить изменения, а не переходить на адаптивную верстку только потому, что это «модно и современно».

Однако вышеперечисленные аргументы говорят не о том, что вам не нужно ничего менять на вашем сайте, а о том, что альтернативной адаптивного сайта может стать отдельная мобильная версия.

Кстати, будет несправедливо не выделить тут заодно и минусы мобильной версии сайта (по сравнению с адаптивным дизайном). Это:

• отдельный адрес для мобильной версии. Неудобно для пользователей, т.к. им нужно запоминать адрес мобильной версии сайта. Неудобно для поисковых систем, т.к. они посчитают эти ресурсы как два разных сайта, один из которых будет содержать дублирующий контент (SEO-специалистам обязательно нужно учесть этот момент);
• ограничение информации. Мобильная версия, как правило, содержит только важное, то есть информации на мобильной версии меньше, чем на полноценном сайте. Это может быть как плюсом, так и минусом – в зависимости от того, как это воспримут клиенты.

В общем и целом есть мобильный трафик на ваш сайт действительно значителен, то у вашего сайта обязательно должна быть мобильная версия.

Кстати, некоторые ресурсы вообще уходят от каких-либо версий и создают для мобильных устройств отдельное приложение. Как правило, приложение подходит тем, кто предлагает пользователям услуги (например, поиск или продажа чего-нибудь). Но тут есть тоже важный минус – это необходимость скачивать и устанавливать приложение на свое устройство (что будут делать далеко не все пользователи).

Вернемся к адаптивному дизайну.

Принципы адаптивной верстки

1. Mobile first. В первую очередь идет проектирование сайта для мобильных устройств.
2. В разработке применяется гибкий (flexible) дизайн на основе сетки.
3. Также применяются гибкие изображения.
4. Идет работа с медиазапросами.
5. Применяется принцип постепенного улучшения.

Если вы решили перейти на сайт с адаптивной версткой (или сделать новый), то вам будет полезно узнать о том, какие макеты существуют.

Типы макетов

1. Резиновый – при уменьшении размера экрана блоки просто сжимаются; на мобильном устройстве могут выстраиваться в одну длинную ленту.
2. Перенос блоков – при уменьшении разрешения экрана блоки переносятся в нижнюю часть экрана.
3. Несколько макетов – для каждого разрешения экрана создается свой макет. Наиболее удобный и в то же время трудоемкий способ.
4. Масштабирование сайта – если у вас несложный сайт (например, лендинг), то его можно просто масштабировать.
5. Панели – дополнительное меню, похожее на те, которые используются в мобильных приложениях.

Вывод

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