Адаптивный дизайн. Just do it
Вечером иногда очень хочется пиццы. Это желание охватывает прямо утром и терзает одичавший желудок весь день: пока едешь в метро, весь день в офисе и по пути домой. И вот, уже в маршрутке, рука тянется к телефону и открывает заветный адрес любимой пиццерии. Но что-то пошло не так. Ничего не видно. Малюсенькие квадратики раздражающе мелькают перед глазами, чтобы прочесть состав, приходится увеличивать страницу вручную. И ведь ещё нужно умудриться попасть на кнопку «Заказать».
Именно так выглядит столкновение суровой реальности с резиновыми сайтами. Под оркестр расстроенно урчащего живота. Но не нужно грустить, пиццу уже готовят, вот только в другом ресторане. В ресторане с нормальным сайтом.
В общем и целом для мобильных версий есть несколько вариантов сайтов. Резиновый сайт (сайт неудачливой пиццерии), адаптивный сайт (сайт ресторана, чья пицца будет сегодня на ужин) и мобильные версии сайтов, о которых будет рассказано чуть ниже.
Чем плох резиновый сайт?
Вообще, конечно, это обычный сайт. Просто для него создана «резиновая» вёрстка. Это не значит, что у сайта плохой дизайн или плохо подобранный контент. Это может быть даже сайт уважаемой фирмы. Но вот в чём проблема. Такая вёрстка, не меняя содержимое сайта, подстраивает его под размер экрана. И если на планшете текст ещё может быть похож на читабельный, то на смартфоне вам придётся изрядно потрудиться, чтобы понять, о чём вообще идёт речь. И останется только увеличивать, увеличивать и ещё раз увеличивать.
Приверженцы старой школы говорят, что «резиновая» вёрстка помогает сохранить всю важную информацию для любого носителя. Но какой в этом смысл, если самую важную информацию, которой так дорожат владельцы, не может прочесть обычный пользователь?
Что такое мобильная версия?
Мобильная версия сайта — это уже совсем другая история. По своей сути это новый проект, который имеет свой отдельный домен, дизайн и структуру. С вашим главным сайтом его объединяет разве лишь логотип в шапке.
Сильной стороной мобильной версии является то, что вся информация на ней не привязана к основному контенту с главного сайта. Вы можете изменять её в любое время и даже при необходимости отключить мобильную версию сайта и скрыть от глаз пользователей.
Однако стоит заранее оценить масштаб финансовых вложений, которые потребует мобильная версия. Мало того, что это совершенно новый проект, его придётся ещё и оптимизировать под разрешения и операционные системы (IOS, Android, Windows Phone) всех мобильных устройств. Следовательно, данный процесс является более затратным, чем реализация адаптивной версии для основного сайта.
Адаптивная вёрстка. Почему мы её так советуем?
Чтобы понять суть адаптивной вёрстки, на минуту попробуйте мыслить как верстальщик.
Обычный сайт представляет собой группы информационных блоков. Есть блок шапки, в который входят блоки с логотипом, контактным телефон и, например, кнопкой раздвигающегося меню. Есть блок слайдера. Затем блок, состоящий из трёх-пяти сегментов, включающих в себя основные услуги или категории товара. И вот на такие квадратики и прямоугольники можно с лёгкостью разделить все страницы.
Адаптивная вёрстка делает так, чтобы все эти блоки находились не в фиксированном состоянии, как у резиновых сайтов, а перестраивались в нужной последовательности в зависимости от того, на экране какого размера их открывают.
Всё это значит, что пользователь, который попадает на ваш сайт с планшета или смартфона, всё прекрасно видит. Для адаптивной версии маленьких размеров вы можете исключить всю лишнюю информацию и оставить только то, что важно аудитории. Например, если это пиццерия, то нужен только телефон, каталог, кнопка заказа и, конечно же, логотип. И не нужно переживать, что кто-то чего-то не увидит. Если будет интересно, на ваш сайт обязательно вернутся вновь и уже с других устройств. Главное, в нашем деле — не испортить впечатление.
Конечно же, адаптивная вёрстка — это не совсем дешёвое удовольствие. Сами посудите, дизайнеру нужно будет нарисовать макеты под каждую версию сайта. А верстальщику подготовить их для программирования. Но это того стоит. За потраченные усилия благодарная аудитория вам заплатит сполна.
