Адаптивная верстка сайта или Как не стать мамонтом


Сегодня львиная доля всемирного трафика генерируется с помощью мобильных устройств. Национальный статистический комитет Беларуси подсчитал, что еще в начале 2013 года около 70% белорусов активно использовали Интернет, а каждый третий пользователь ищет информацию в сети с помощью мобильной связи. С каждым годом эти цифры только растут. Если ваш веб-ресурс не оптимизирован под современные гаджеты, то вы теряете больше половины потенциальных пользователей.

01 02

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

7810b20967953fd3a27181337a67cb3d

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

Плюсы адаптивной верстки:

  • Один URL. Единый адрес полной и мобильной версии сайта способствует более эффективному продвижению и поисковой оптимизации.
  • Универсальность. Адаптивная верстка не привязана к определенному разрешению, сайт автоматически занимает всю ширину экрана гаджета как в горизонтальном, так и вертикальном положении.
  • Простота в поддержке сайта. Любые внесенные на сайт изменения будут видны сразу на всех устройствах, например, не нужно дважды добавлять один и тот же материал на два сайта.

Минусы адаптивной верстки:

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

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

Кроме адаптивной верстки, при разработке версий сайта для мобильных устройств используют еще два способа: отдельная мобильная версия сайта и RESS (Responsive Design + Server Side). Все из перечисленных способов также имеют свои плюсы и минусы.

mobile site

Отдельная версия для мобильных устройств

Чаще всего представляет собой «краткое содержание» основного сайта: оставляется только тот функционал, который в первую очередь необходим владельцам портативных гаджетов.

Главный плюс отдельной мобильной версии сайта — это комфорт для пользователя: простая навигация, нужная информация не спрятана за тысячами ссылок, быстрая загрузка страниц (что особенно важно тем, у кого GPRS или слабый 3G), право выбора (если в мобильной версии нет нужной информации, всегда можно перейти на основную. Минусов у отдельной мобильной версии сайта всего два: первый — несколько адресов усложняют работу с поисковиками, что может вызвать некоторые трудности с оптимизацией и поисковым продвижением; второй — мобильная версия в какой-то степени ограничивает пользователя и усложняет работу владельцам сайтов, т.к. при создании отдельного мобильного сайта иногда приходится отказываться от части контента и функционала, который может тормозить загрузку. Отдельная мобильная версия сайта хорошо подходит для крупных проектов, например, Amazon использует именно этот способ.

1338887909_ress

RESS

Включает в себя свойства как адаптивной верстки, так и отдельной мобильной версии сайта. Этот способ разработки верстки для мобильных устройств дает возможность выполнять часть задач адаптивного сайта за счет ресурсов сервера. Изначально загружается только тот шаблон, который соответствует настройкам гаджета. Следовательно, в разы уменьшается количество загрузок скриптов, которые его обслуживают. Server Side не только позволяет хранить данные на серверной части, но и выполнять там часть процессов, что значительно экономит трафик пользователей и увеличивает скорость обработки запросов. Из минусов RESS — сложности в разработке и определении мобильных устройств (очень часто некоторые гаджеты не определяются как мобильные устройства). В принципе, это тот же адаптивный сайт, только немного усовершенствованный, учитывающий технические особенности взаимодействия мобильного устройства и сервера.

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


+ Нет комментариев

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