Адекватный web-design

    Когда то были скромные по нынешним понятиям мониторы, дюймов на 15, теперь диагональ в 24 дюйма это норма на вашем столе. И тут встал вопрос перед дизайнером web-сайта - а надо ли вообще что-то показывать на всю ширину такого монитора. Судя по всему решили что не надо. Поэтому так много сайтов у которых по сторонам содержимого просто пустые области, но зато есть что прокручивать вниз или вверх. Другие же вышли из положения тем, что разместили по боках кучу информеров и рекламных блоков. Такие сайты напоминают игру "Пятнашки". 

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

   Часть дизайнеров пошла по минимуму – при первом входе на сайт его полный размер уменьшается (zoom out) до размеров экрана, чтобы пользователь хотя бы оценил общий вид и определил для себя куда ему двигаться по экрану. А далее решаешь сам – либо перемещаешся и увеличиваеш (zoom in) нужное место либо сначала увеличиваешь и далее перемещаешся. Получается этакая web-бродилка.) 

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

С утверждением CSS3 и HTML5 появилась новое направление – адаптивный дизайн. Такой web-дизайн называется как адаптивным так и отзывчивым. Есть споры что это разные стили web-дизайна, но для пользователя гаджета, по моему, все равно как он называется. Он видит одно – сайт, структура которого меняется в зависимости от того на каком экране он его смотрит. Но главное не это, а то каким образом на таком маленьком экране донести до пользователя главную информацию с сайта с первого шага. И это не обязательно должна быть ссылка «Главная». Пользователю иногда приходится долго елозить по экрану пальцем пока он найдет то что ему нужно. Если еще найдет. 

Кстати отзывчивый web-дизайн можно сравнить с «резиновым» дизайном. Знаете такой, где большинство параметров в CSS-стилях задается в %? 

В середине 2012 года на официальном блоге Google была высказана окончательная позиция Google по оптимизации сайтов для смартфонов и планшетов. Из всех предложенных вариантов Google выявил один тип в качестве предпочтительного решения - отзывчивый дизайн. 

Теперь Google отдает предпочтение сайтам, которые: 

• имеют одну версию сайта, обслуживающую все устройства, 

• имеют один набор url-адресов, 

• не имеют дублей страниц, 

• используют CSS медиа-запросы для определения устройства, с которого зашел пользователь. 

Отзывчивый дизайн (responsive web-design) - дизайн, который подстраивается под любые разрешения экрана. Т.е. сайт отлично отображается и удобно пользоваться на всех мобильных устройствах. 

Основные характеристики отзывчивого дизайна: 

1. Шаблон трансформируется под разрешение экрана. 

2. Текст на мобильных устройствах легко читается без zoom in. 

3. Нет горизонтальной прокрутки. 

Замечу что горизонтальный скроллинг для сайта уже рассматривается также негативно как использование недавно оператора “goto” в ООП. 

Как это сделать? У вас есть два варианта: 

1. Самостоятельно прописывать медиа-запросы в css и прописывать стили для сетки. 

2. Использовать фреймворк (framework). Фреймворк - это готовый набор инструментов, в вашем случае для создания отзывчивого дизайна. При этом вам не нужно быть профессионалом в web-верстке. Всю самую сложную работу за вас уже проделали, сэкономив вам большое количество времени.

На сегодняшний день быстрым инструментом для создания отзывчивого дизайна является фреймворк под названием Twitter Bootstrap. 

Что такое Twitter Bootstrap? 

Это простой и легко-настраиваемый инструментарий для верстки дизайна сайта. Twitter Bootstrap облегчает верстку шаблонов, позволяя создать красивый и отзывчивый шаблон за несколько дней. В Twitter Bootstrap прописаны все необходимые стили и java-скрипты для оформления современного сайта. Дизайнеру остается только заниматься версткой самого шаблона. Как по быстрому использовать Twitter Bootstrap описано в новом курсе Александра Куртеева.  

Адаптивный дизайн (adaptive web-design) сайта представляет собой направление в дизайне, которое предусматривает максимальную адаптацию сайта к различным типам, видам и размерам экранов, их ориентации и различным платформам мобильных устройств пользователя. Это достигается за счет использования различных специальных слоёв, сеток и изображений, а также выбора в качестве весьма существенного дополнения CSS3 медиа запросов (media queries), что позволяет пользователю получать максимально качественное изображение сайта, которое каждый раз подстраивается под размеры любых возможных экранов. 

Как это сделать? 

1. Использование полезных и практически незаменимых свойств max-width CSS, позволяет менять изображения на сайте. А для того, чтобы они также меняли своё положение на странице сайта, в разработке дизайна весьма эффективно используется CSS media queries. 

2. Меняя разрешение экрана, также следует менять и макет всего сайта в целом. Делают это дизайнеры с помощью CSS media queries. 

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

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

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

Вдохнуть новую жизнь в резиновую вертстку решил Андрей Бернацкий в новом курсе «ПРАКТИКА ВЕРСТКИ ПОД МОБИЛЬНЫЕ УСТРОЙСТВА». И назвал ее резиново-адаптивной. 

 Почему именно резиново-адаптивная? 

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

Пять основных преимуществ резиново-адаптивной верстки: 

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

2. Высокие позиции в ПС Google. Вне зависимости от используемого устройства, у адаптивного сайта сохраняется единая структура URL, без дублирования контента. Облегчается индексация, плюс первоначальная версия сайта получает дополнительную ссылочную массу с адаптивной версии. 

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

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

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

Какой тип верстки и инструмент выберете вы? А может вы просто найдете дизайнера который это все сделает за вас?) 

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

Подробнее о тестерах в следующий раз.