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

Responsive-web-design-1

По статистики в 2014 году мобильный трафик на вебсайты составляет не менее 30%. Важный факт – Google заявил о том, что в поиске будет отдавать предпочтение адаптивным веб-ресурсам и с 24 апреля 2015 года он вводит специальный алгоритм, пессимизирующий неадаптивные сайты. Итак, как же создать адаптивный сайт?

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

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

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

Преимущества создания адаптивного сайта по сравнению разработкой мобильной версии очевидны. Мобильный сайт это фактически другой ресурс, с другой вёрсткой, дизайном и контентом. Он имеет отдельный URL адрес – поддомен m.site.com или папка site.com/m. На него происходит перенаправление (редирект) пользователя с основного проекта, если тот использует телефон или планшет.

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

Основные правила адаптивного сайта:

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

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

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

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

Пример отображения на разных устройствах

Компьютер или ноутбук

site-1

Планшет

site-2

Мобильный телефон

site-3

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


Фиксированная верстка. Веб-сайт не меняют свою ширину при изменении расширения экрана. На мониторах с маленьким разрешением появляется горизонтальная полоса прокрутки.

Резиновая вёрстка.  Web-сайт и его элементы меняют свою ширину в зависимости от размера окна браузера. Она может принимать максимальное и минимальное значение (свойство max-width). Но нельзя по мере уменьшения экрана из 50% сделать 100%.

Адаптивная вёрстка. Создается с помощью @ media или благодаря скриптам. Заточена под конкретные широко распространенные устройства с разрешением экрана: 320, 768, 1024, т.д.. Любое изменение происходит рывками, после достижения одного из указанных уровней.

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

Отзывчивая верстка

Отзывчивая верстка сайта впервые появилась в 2010 году, а ее автором является Ethan Marcotte. Позже он написал книгу об этом методе верстки, называется она "Responsive web design" и до сих пор является авторитетным источником информации.

Отзывчивость верстки в этом случае основывается на трех техниках:

  1. Гибкая сетка макета (Fluid grid)
  2. Гибкие медиа (Flexible media)
  3. Медиа запросы (Media queiries)

Со временем понятие отзывчивой верстки было расширено, первым это сделал Jeffrey Zeldman – достаточно знаменитый веб разработчик, а за ним Aaron Gustafson дополнил это понятие и написал книгу "Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement". Он ввел такое понятие как прогрессивное улучшение.

Смысл понятия прогрессивного улучшение сводится к тому, что вебсайт сначала верстается под самые старые и слабые браузеры, например IE 8, а затем верстка делается под современные браузеры. В итоге он корректно отображается во всех браузерах.

Адаптивную верстку можно разделить на четыре этапа:

  1. HTML разметка страниц
  2. Простой CSS сетка расположения блоков на экране
  3. CSS 3 добавление визуальных эффектов
  4. Добавляется JavaScript – добавление функционала и динамики.

Говоря об отзывчивой верстке, нельзя не упомянуть о концепции "Сначала мобильные", которая была предложена разработчиком Luke Wroblewski. Суть этой концепции заключается в том, что дизай и верстка начинается с мобильных устройств.

Сначала дизайнер, верстальщик и разработчик определяют как будет выглядеть web-сайт для мобильных устройств, упрощают функционал, выстраивают весь контент в один столбец, а далее разработка идет по методу прогрессивного улучшения. Здесь активно используются медиа запросы (media queiries), которые позволяют разделять информацию для разных браузеров.

Заключение

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


Создание сайта начинаем с маркетинга

Разработка сайтов – тренды создания сайтов

Создание порталов – разработка сложных сайтов

Есть ли цели у вашего интернет маркетинга?

Приемы написания продающих текстов для сайта

SEO продвижение умерло, или как сейчас продвигают сайты


Отзывы: поделитесь своим мнением

ЧИТАЙТЕ В БЛОГЕ

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

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

Сегодня мы хотим обсудить три главные тенденций в навигации по веб-сайту, которые будут доминировать 2015 году. Воспользуйтесь нашими советами, если вам предстоит заказать сайт в этом году. Это удивительно, насколько много вариантов дизайна может...

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