Сегодня я расскажу про адаптивную вёрстку и мобильные версии сайтов. Для начала разберемся в том, что такое мобильная версия сайта. Первое, что нужно сказать о мобильной версии — она не обязательно должна повторять или содержать структуру основного сайта. Более того, контент может значительно отличаться от десктопной версии. Логика простая: если пользователь ограничен особенностями своего девайса, то и контент нужно подготовить другой, компактный, без излишеств. Мобильная версия сайта — это эволюция WAP-версии сайта, технологии давно ушедшей и забытой.
Но устройства развивались параллельно с интернетом. Сейчас смартфоны способны справляться с просмотром полноценных сайтов. Остается лишь проблема размера экрана и навигации (экраны — маленькие тачскрины — сильно ограничены по сравнению с клавиатурой и мышью). Сегодня пришло понимание необходимости представлять контент в адаптированном для определенных устройств виде. Также, в последствии, выяснилось, что появился еще один подводный камень в мобильной версии — линейка мобильных популярных устройств стала расширяться, новые смартфоны стали выходить чуть ли не каждую неделю, вендоры не всегда придерживались стандартов w3c, ломались надстройки, и жертвой пал Adobe Flash. В результате многие вещи в мобильных браузерах работают по-разному. Это зависит от марки производителя устройств, версии операционной системы, разрешения экрана, браузера, дефолтных настроек, положения устройства. Число элементов всех этих параметров создает невероятное количество комбинаций. И в связи с этим назревал вопрос о нескольких мобильных версиях. Как я говорю в таких случаях: «Я не могу переписывать свой код с каждым выходом нового устройства», поэтому мы пришли к тому, что имеем сейчас responsive design — адаптивные сайты. Идея заключается в том, что сайт подстраивается под конкретное устройство, максимально эффективно используя свободное пространство дисплея.
Зачем все это нужно:
• Появляется возможность использования одной версии сайта для всех устройств.
• Информация выводится всегда в удобном виде.
• Исчезает проблема смены панорамного режима.
• Появляется возможность добавления элементов управления, подходящих конкретному устройству.
Прелесть адаптивной верстки еще и в том, что представление контента отделено от его содержания. Шаблон сайта динамически и интерактивно изменяется прямо «на лету» средствами браузера. Необходимость догадываться, как будет выглядеть сайт в конкретном устройстве, полностью пропадает. Элементы и блоки — сами «определяют» параметры устройства и «находят» свое место на странице.
При адаптивном подходе мы заранее не знаем точно, как будет выглядеть контент сайта, но мы можем гарантировать, что он будет представлен максимально эффективным способом.
Это были плюсы, теперь о случаях, когда адаптивность не нужна:
1. landing page: при создании посадочных страниц наибольшую эффективность имеет область сгиба страницы, (нижняя часть экрана), так как она больше всего привлекает внимание пользователей. Но мы помним, что точно знать, где будет располагаться конкретный блок просто невозможно. Адаптивный landing page — скорее плохая практика, чем хорошая.
2. Сайт с готовым контентом: таблицы, прайс-листы , изображения, видео, тексты с форматированием.
В большинстве случаев контент, созданный для обычных, не responsive, сайтов содержит части его представления. Такие, как: теги заданных размеров, теги и объекты (изображения, видео, flash), смешанные с текстовыми данными. И это плохо! Так как адаптивная вёрстка предполагает отделение контента от представления: любые блочные элементы в контенте способны сломать позиционирование всей страницы.
Адаптивность контента.
При публикации различных материалов принято пользоваться визуальными редакторами. Все просто: мы добавляем текст, область контента выглядит, как прямоугольный лист. Контент добавляется вместе с оформлением, и это самая большая ошибка при визуальном подходе к созданию контента.
В идеале редактор для создания адаптивного контента функционально очень ограничен. Все данные должны быть максимально отделены от их представления, данные должны быть сконструированы и упорядочены.
К тому же, добавлять всю информацию в визуальном редакторе быстрее, чем по отдельности заполнять множество полей.
А теперь можно проанализировать 2 плюса, которые я описал выше, и внимательно их сравнить.
• Возможно, landing page и будет работать, но, как правило, второй вариант более качественный.
• На выходе мы получим структурированный контент, который сможем использовать как угодно, в том числе за пределами нашего сайта — мобильные приложения, агрегаторы контента, email рассылки.
• В любой контент можно добавить презентационные материалы со своей разметкой, средствами различных хештегов-плейсхолдеров.
Какие еще могут возникнуть проблемы?
Часто происходит так, что я слышу что-то вроде этого: «Менеджер не сможет справиться с контентом». Что я об этом думаю человек, не желающий учиться, должен питаться объедками (шутка) :-) На самом деле, нужно понять простую вещь — визуальный редактор не панацея. Допустив ошибку в атрибутах какого либо элемента, это не будет отраженно в визуальном редакторе. Он не поможет, не найдет и не исправит ошибку за вас. Только понимание того, что вы делаете, способно дать хороший результат.
P.S.Хорошие практики напоследок.
• Адаптирование контента под устройство.
• Предоставление только тех элементов, которые устройство способно воспроизвести.
• Изучение MVC.
• Структурирование контент.
• Разделение больших блоков контента на части.
• Валидация вводимых данных.
• Использование маркеров в контенте.
