Мобильная верстка сайта

Мобильная версия сайта или адаптивный дизайн?

С началом эры бума мобильных устройств разработчики оказались перед выбором: оставлять ли мобильные версии своих сайтов наряду с «полноценными», или сайты должны стать адаптивными и самостоятельно подстраиваться под разные размеры экранов?
На текущий момент при построении мобильных версий сайтов существуют 3 основных способа их построения:

  • Адаптивный дизайн;
  • Отдельная мобильная версия сайта;
  • RESS (Responsive Design + Server Side).

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

Для реализации адаптивного дизайна обычно используются CSS3 Media Queries. В зависимости от размера экрана, пользователь будет видеть разную картинку:
@media screen and (max-width: 1600px) { div.for-example {width: 1500px;} } @media screen and (max-width: 1280px) { div.for-example {width: 1100px;} } @media screen and (max-width: 1024px) { div.for-example {width: 980px;} }

Преимущества адаптивного дизайна

  • Удобство разработки — при адаптивной верстке вся структура сайта автоматически подстраивается под различную ширину экрана. Для того, что бы получить рабочий продукт не нужно писать все с нуля — достаточно лишь подправить CSS и HTML… С учетом наличия фреймворков, подобных Bootstrap подобная разработка не является очень сложной при стандартной реализации. К тому же, поддержка такого продукта будет относительно простой задачей.
  • Один URL — избавляет нас от ненужных редиректов, и надобности пользователю запоминать адрес мобильной версии (пусть даже это просто приставка m. ). Так же наличие единого адреса позитивно скажется на продвижении сайта, поскольку поисковикам будет «удобнее» работать.

Недостатки адаптивного дизайна

  • Разные задачи — типовые задачи «мобильных» пользователей крупных сайтов обычно отличаются от задач пользователей ПК. Если вы являетесь клиентом банка, то, скорее всего, в мобильной версии сайта вас будет интересовать очень ограниченный спектр информации — адреса ближайших отделений, банкоматов и т.д.
    В целом, при адаптивной верстке самый распространенный подход — делать копию обычного сайта, реализовать в верстке под телефоны потребности всех групп целевой аудитории. Но тогда о юзабилити можно забыть. Нужные пяти процентам посетителей второстепенные разделы создадут неудобства для основной массы клиентов.
  • Медленная загрузка — «вес» сайтов остается серьезным препятствием для пользователей мобильных телефонов. Это означает, что некоторые типичные для десктопных сайтов активные элементы, в том числе embedded-карты, ролики, кредитные калькуляторы и меню с анимацией на мобильных сайтах должны быть заменены на более легкие альтернативы. Может ли адаптивный дизайн дать нам такую возможность? В популярной реализации пользователь с маленьким экраном должен загрузить страницу целиком, чтобы увидеть лишь ее часть. Например, если десктопная версия верстки главной весит 200 Кб, а мобильная — еще 50 Кб, для просмотра придется скачать 250 Кб. Конечно, можно использовать сжатие кода страницы, но лишние запросы к серверу все равно будут идти.
  • Безысходность — Одно из неоспоримых преимуществ мобильной версии: если не нравится, ее можно отключить, перейти на обычный домен. Сайты с адаптивным дизайном не дают этого простого, но важного выбора. Если адаптированная верстка неудобна, забагована или если она скрывает важный элемент навигации, пишите пропало: вы ничего не можете сделать, чтобы увидеть его снова. Придется бежать искать десктоп или сайт конкурента. Можно придумать «костыли» для обхода этого ограничения (использовать cookie и подключать разные таблицы стилей). Но такой подход усложняет разработку.

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

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

Чтобы сделать сайт удобным для мобильных пользователей часто создают так же отдельные версии сайтов — специально ориентированные на пользователя со смартфоном/планшетом. Наиболее распространена практика — перенаправление мобильных пользователей на специальный поддомен (m.example.com, mobile.example.com и т.д.). Наверное, в 99% случаев, мобильная версия представляет собой урезанную основную версию — лишь с тем функционалом, который, по мнению разработчиков, будет необходим и полезен пользователям мобильных устройств и планшетов.

Преимущества мобильной версии

  • Легкость в изменениях — поскольку сайт существует, де-факто, отдельно от основной версии, вносить в него правки, связанные только с мобильной версией значительно проще, поскольку мобильная версия чаще всего не предоставляет избыточного, ненужного функционала.
  • Удобство для пользователя — мобильная версия обычно сильно упрощена по сравнению с десктопной версией, поэтому пользователю не нужно будет далеко ходить за нужной ему информацией.
  • Быстрота — из-за того же упрощения сайта, мобильная версия грузится быстрее. Это существенно для пользователей, которые все ещё ходят через GPRS или слабый 3G.
  • Выбор- чаще всего, в мобильной версии есть возможность перейти на основную версию сайта.

Недостатки мобильной версии

  • Несколько адресов — для десктопной и мобильной версии разные адреса. Для одних это может оказаться плюсов, для других же — крайне раздражительным фактором, когда для того, что бы удобно посмотреть сайт, нужно запоминать ещё один адрес. Так же есть проблемы и с поисковиками: во избежание дублированного контента SEO-специалистам нужно использовать мета-теги rel=»alternative» и rel=»canonical». Кроме того, когда пользователь мобильного поиска Google кликнет по ссылке в результатах, он попадет на десктопную версию или перенаправлен на мобильную. Но если мобильная версия этой страницы не существует, он получит сообщение об ошибке.
  • Неудобство для пользователя — для десктопной и мобильной версии разные адреса. Для одних это может оказаться плюсов, для других же — крайне раздражительным фактором, когда для того, что бы удобно посмотреть сайт, нужно запоминать ещё один адрес. Так же есть проблемы и с поисковиками: во избежание дублированного контента SEO-специалистам нужно использовать мета-теги rel=»alternative» и rel=»canonical». Кроме того, когда пользователь мобильного поиска Google кликнет по ссылке в результатах, он попадет на десктопную версию или перенаправлен на мобильную. Но если мобильная версия этой страницы не существует, он получит сообщение об ошибке.
  • Ограниченность — создание отдельного мобильного сайта означает избавление от части содержания и функциональности. Кроме того, у вас может быть два различных набора контента, который может негативно сказаться на общей информационной картине.

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

Сам Google, хоть и поддерживает использование веб-мастерами адаптивного дизайна, однако в своих продуктах использует иную систему. Если зайти, к примеру, на главную страницу под разными User-Agent-ами, то можно увидеть различный HTML для различных устройств. RESS — Responsive Design + Server Side. Пример реализации, набросанный «на коленке»:
$DS = DIRECTORY_SEPARATOR; require_once( dirname(__FILE__) . $DS . ‘libraries’ . $DS . ‘browser.php’); $device = BBrowser::detectDevice(); if($device == DEVICE_TYPE_MPHONE){ $tmpl = ‘template.m.php’; } else if($device == DEVICE_TYPE_TABLET){ $tmpl = ‘template.t.php’;} else{ $tmpl = ‘template.php’; } include( dirname(__FILE__) . $DS . ‘templates’ . $DS . $tmpl);

Плюсы RESS

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

  • Минимизация трафика — Ненужные JavaScript могут быть удалены из HTML, который освобождает CPU, память и кэш на мобильном устройстве. Так же может быть специально оптимизирована html и css.
  • Возможно использовать таргетирование — например, для Android-устройств предлагать скачать приложение с GooglePlay, а для Apple – с iTunes. Для каждого устройства можно сделать свою вёрстку.

Минусы RESS

  • Сложность в разработке — подобный метод потребует соответствующей настройки сервера и труда большего количества программистов. Так же необходимо будет делать несколько различных вариантов верстки.
  • Механизм определения устройств — к сожалению, даже в наше время ещё не доведен до совершенство. Истории с тем, как чей-то редкий телефон не определился как мобильное устройство, всплывают довольно часто.

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

Резюме

На мой личный взгляд — идеального варианта, который бы стоило использовать всем, нет. Лучший вариант для меня — это RESS. Однако, это один из редких вариантов, поскольку требует больших усилий для реализации. В целом же все 3 варианта имеют свои плюсы и минусы, причем в зависимости от сути и направленности сайта.

Наступила эра мобильных устройств, которые практически полностью заменили домашние ПК. В связи с этим, многим разработчикам приходится выбирать, сделать ли дизайн адаптивным, либо же подстраиваться только под мобильную версию.

В любом случае, требуется создавать мобильную версию сайта. Существует 3 способа построения мобильных версий:

  1. Создание адаптивного дизайна.
  2. Создание отдельной версии сайта для мобильных устройств.
  3. RESS

В этой статье мы подробно рассмотрим все 3 способа, а также их основные преимущества и недостатки.

Адаптивный дизайн

Начнем с самого популярного способа. Смысл в том, чтобы создавать элементы, которые будут подстраиваться под разрешение экрана пользователя. Для этого веб-разработчики используют CSS3 Media Queries.

Пример использования медиа запросов:

Теперь давайте подробно рассмотрим преимущества и недостатки адаптивного дизайна.

Плюсы:

  1. Удобство — при создании адаптивного дизайна, элементы будут сами подстраиваться под нужное разрешение. Вам не нужно будет создавать отдельные селекторы и стили для изменения размеров объекта. Даже если и потребуется изменить некоторые элементы, достаточно подправить код.
  2. Простота использования фреймворков. Если вы используете Bootstrap или другой фреймворк, то разработка упрощается.
  3. Единый URL-адрес. Первое — удобство для поисковика. При создании отдельной мобильной версии приходится создавать отдельный адрес. Поисковикам намного проще работать с одним адресом, чем с несколькими, что положительно сказывается на продвижение в топы.

Недостатки:

  1. Разное количество информации. Пример — возьмем двух пользователей, первый использует ПК версию, а второй мобильную. На сайте располагается полная информация о сайте и его услугах.
  2. Пользователю, который заходит с телефона, она может не понадобится. В связи с этим, мобильная версия сайта является неполной и содержит лишь необходимую информацию.

    Это не очень удобно, потому что приходится адаптировать сайт под разные задачи, а также хорошо знать свою аудиторию.

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

Несмотря на то, что такой подход имеет существенные недостатки, он является самым популярным.

Мобильная версия сайта

Некоторые разработчики не являются любителями адаптивной верстки, а поэтому создают сразу несколько версий сайта. При таком подходе, мобильная версия является обязательной.

Отдельная версия очень удобна для пользователя. Иногда мобильная версия намного удобнее чем адаптивный дизайн.

Мобильная версия является урезанной версией сайта, которая содержит наиболее полезную и необходимую информацию для пользователя.

Преимущества мобильной версии:

  1. Сайт легко редактировать. Из-за того, что мобильная версия находится в отдельном HTML-документе, её можно свободно изменять, не меняя контент десктопной версии. Очень удобно, так как позволяет удалить весь ненужный функционал сайта.
  2. Удобство для пользователя. Как мы уже говорили, мобильная версия является упрощенной, а значит будет содержать самую полезный контент в сжатом виде. Пользователю не придется долго выискивать нужную информацию.
  3. Быстрота. Вот самое главное отличие от адаптивной версии — для загрузки сайта со смартфона не придется загружать все элементы сайта.
  4. Можно перейти на основную версию сайта.

Недостатки:

  1. Разные адреса. Этот недостаток не является решающим, но из-за него может возникнуть целый ряд проблем. Во-первых — поисковики дольше обрабатывают информацию сайта, что плохо сказывается на продвижении сайта.
  2. Неудобство SEO-оптимизации. Ещё одним недостатком является то, что при SEO-оптимизации сайта приходится использовать дополнительные meta-теги. Кроме того, за счет нескольких страниц, работа над оптимизацией сайта будет проходить намного дольше.
  3. Ограниченная версия не будет содержать в себе все функции сайта. Разработчики оставляют только те функции, которые кажутся им наиболее значимыми. При плохом знании аудитории, у пользователей сайта может возникнуть целый ряд проблем.
  4. Как видим, данный подход также не является идеальным и имеет целый ряд недостатков. Мобильная версия лучше всего подходит для крупных проектов, например интернет-магазинов.

RESS

RESS — Responsive Design + Server Side. Данный метод менее популярен нежели два вышеперечисленных, но не менее удобен. Компания-гигант Google, в своих разработках, старается использовать RESS.

Как и остальные методы, RESS имеет свои преимущества и недостатки.

Преимущества:

  1. Меньшее потребление ресурсов. В случае необходимости, из HTML-документа удаляются ненужные скрипты. Это помогает освободить ресурсы мобильного устройства — CPU, ОЗУ, кэш-память.
  2. Верстка для определенного устройства. Это очень сложный элемент, но он позволяет создавать уникальные элементы для каждого устройства. Например, на сайте можно разместить GooglePlay и iTunes, которые будут отображаться на Android и Apple устройствах.
  3. Возможность оптимизации HTML и CSS кода.

Недостатки RESS

  1. Повышенная сложность. Во-первых, при использовании данного подхода вам потребуется создавать несколько вариантов верстки. Кроме этого, потребуется отдельная настройка сервера. Для данной работы потребуется большая команда веб-разработчиков.
  2. Проблемы с определением устройства. Данный метод введен относительно недавно, а значит имеет некоторые ошибки. У некоторых пользователей возникала такая проблема: «мобильное устройство не определено». Надеемся, в будущем данная проблема будет решена.

Если сравнивать 3 метода разработки, то RESS является наилучшим, но для него потребуется намного больше сил. Из-за больших затрат данный метод используется только крупными компаниями.

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

Вы можете использовать любой из этих методов, главное помните о проблемах каждого из них. Возможно у вас получится обойти их и создать качественный и удобный продукт для своей аудитории. Желаем удачи в разработках!

Теги: CSS html Уроки

Как сделать мобильную версию сайта?

Разработчики понимают, что во время бума мобильных устройств без мобильных версий сайтов никак не обойтись. Они стоят перед выбором, что лучше: сделать сайт адаптивным к просмотру с гаджетов или создать отдельный мобильный сайт? В этой статье мы с вами рассмотрим, как создать каждую из таких версий, а также их преимущества и недостатки.

Итак, существует три способа построения мобильных версий сайтов:

  1. Адаптивный дизайн. Страница сайта в данном случае не меняется, но CSS-файл применяет другие правила, в зависимости от ширины окна браузера, и “адаптируется” под него.
  2. Отдельный мобильный сайт. Он размещается на поддомене или в подкаталоге, иногда основной и мобильный сайт имеют одинаковый URL. Загрузка HTML-кода зависит от значения user-agent («динамической выдачи»). Если URL разный, то структура страниц обычно сохраняется, но ничто не мешает их изменить, так как эти версии сайтов хранятся в разных каталогах. Отличный пример – мобильный сайт ВКонтакте (m.vk.com).
  3. Мобильная версия сайта или RESS (Responsive Design + Server Side). Этот метод сложный в разработке, но включает в себя преимущества как адаптивного дизайна, так и отдельного мобильного сайта.

Прогрессивные веб-приложения

Как создать мобильную версию сайта

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

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

По длине страницы ограничений нет. Поэтому при прокрутке на экране должны показываться тезис за тезисом для удержания внимания.

Тенденции веб-дизайна

  1. «Mobile First»

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

  1. Навигация

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

  1. Размеры экрана

Большинство смартфонов имеют расширение 320 пикселей. Многие ориентируются на 240. Чтобы все элементы были в рамках страницы, нужно установить 100% в табличке стилей CSS, тогда они будут подстраиваться под ширину экрана.

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

  1. Тачскрин

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

Кроме того, пока сайт подгружает страницу по ссылке, пользователь должен понимать, что ссылка нажата, и не кликать по ней несколько раз. Для этого отлично подойдут вдавленные кнопки или ссылки, которые меняют цвет, что сигнализирует о принятии команды.

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

  1. По возможности нужно отказаться от ввода текста.
  2. Не пренебрегайте такими возможностями платформы, как функция «click to call» или адрес компании в виде ссылки (загрузка карты с маршрутом).

Как сделать адаптивную верстку

При адаптивном дизайне используется один HTML-код для всех размеров экранов. Все элементы меняются в зависимости от правил, которые прописывают в файле CSS media.

Медиа запросы для мобильных устройств используются тогда, когда нужно применить CSS-стили для гаджетов, что отличаются по типу отображения, ширине окна браузера и внешнего освещения. Это очень важный инструмент, обеспечивающий корректную работу сайтов.

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

Правила верстки

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

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

Поисковую строку лучше заменять иконкой «увеличительное стекло». А верхнее меню сделать выпадающим. Это обеспечивает удобство использования и экономит пространство.

Что такое Progressive Web Apps

Любую реорганизацию начинают с ключевых блоков, а менее значимые элементы не отображают на усмотрение дизайнера.

Самым распространенным способом мобильной верстки является создание макета с одной колонкой. При этом весь контент нужно разделить на отдельные блоки. Например:

  • Весь контент находится в одной колонке, но разделяется на блоки с подсказками. В верхней части располагают элементы навигации;
  • «Гармошка» — прием, когда контент скрывается под заголовками в виде кнопок.

Все блоки, которые удалены с мобильной версии, необходимо внести в HTML-код и скрыть их отображение на определенных устройствах.

Что касается разрешения для адаптивной верстки, то нужно просмотреть аналитику самых популярных моделей разных устройств или зайти на Firefox -> Открыть меню -> Разработка -> Адаптивный дизайн. Кроме того, можно использовать растягивание с шагом по 100 пикселей.

Удачные примеры адаптивных сайтов:

  1. New Adventures In Web Design Conference 2012

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

  1. Ribot

Дизайн этого сайта удобен для экранов всех гаджетов и отображает всю информацию о компании и сервисе.

  1. Adaptive Web Design – рекламный сайт книги, которая ответит на все вопросы об адаптативном дизайне. Естественно, выполнен сайт на высшем уровне.

Если же массив данных огромен, то есть смысл сделать отдельный сайт для мобильных устройств.

Преимущества и недостатки этих способов разработки

Преимущества Недостатки
Адаптивный дизайн ● Удобство разработки. Вся структура сайта подстраивается под разную ширину экранов;

● Не нужно писать сайт с нуля, достаточно внести изменения в CSS и HTML;

● Простая поддержка такого продукта;

● Наличие одного адреса позитивно сказывается на продвижении сайта.

● Разные задачи мобильных пользователей и пользователей ПК;

● Медленная загрузка;

● Адаптивный сайт нельзя отключить и перейти на обычный домен.

Мобильный сайт ● Так как он существует отдельно от основной версии, в него легко вносить изменения;

● Удобен для пользователей;

● Быстрая загрузка;

● Есть возможность перехода на основной сайт.

● Разные адреса десктопной и мобильной версии;

● Ограниченность, так как при создании мобильного сайта приходится избавиться от части контента и функционала.

Заключение

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

Учитывая нынешние тенденции использования мобильных устройств, создание мобильной версии просто необходимо, так как большинство пользователей заходят в Интернет через гаджеты. Если у вас ограниченный бюджет и вы не хотите тратить деньги на создание мобильного приложения для вашего сайта — компания Google рекомендует новую технологию Progressive Web App или прогрессивные веб-приложения.

Технология позволяет совместить качества мобильного сайта и приложения. Пользователь заходит на сайт и сразу же получает предложение установить его на рабочем столе. Установка происходит по одному клику (ярлык сохраняется на рабочем столе). PWA занимает минимум места (до 200 Кб) и не тратит ресурсы мобильного устройства, работает в режиме оффлайн и при плохой Интернет-связи, автоматически обновляет контент при наличии хорошего интернет-соединения, загружается мгновенно (!).

Кроме того, в технологию «вшита» функция push-уведомлений, которые возвращают посетителей на сайт, напоминая им о нем. Наконец, раскрутка сайта с PWA происходит по той же схеме, что и раскрутка обычного сайта (не приложения — иметь дело с Интернет-магазинами приложений даже не придется) при помощи обычных маркетинговых инструментов, без задействования дополнительного бюджета. Если учесть, что уже с лета компания Google анонсирует введение ранжирования мобильных страниц по скорости загрузки, то становится ясно — супербыстрые прогрессивные веб-приложения PWA помогут добиться лидерских позиций в этом рейтинге.

Как сделать мобильную версию сайта? 5 (100%) на основе 1

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *