«ДИСТАНЦИОННОЕ И ВИРТУАЛЬНОЕ ОБУЧЕНИЕ», №4 (94), 2015

, ,

Первостепенность дизайна для мобильных устройств.

       

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

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

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

  Резиновая верстка - это отображение сайта на всю ширину экрана и изменение ширины сайта при изменении ширины экрана. Рассмотрим все грани резиновой верстки, а также советы при разработке web-сайтов.

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

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

        Первое, что можно рекомендовать при создании резинового макета - это задать ему минимальную и максимальную ширину. Это можно сделать для body или основного контейнера:

body {

  min-width: 800px;

  max-width: 1500px;

}.                

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

div {

  margin: 0 auto;

}

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

        Расcмотрим другой вариант верстки сайта для мобильных устройств - отдельный css-файл. Для этого используется атрибут media для определения типа устройств. В теге <head> сайта подключаете два css-файла - для мониторов и телефонов(смартфонов):

<link href="/site. css" media="screen" rel="stylesheet" />

<link href="/mobile. css" media="handheld" rel="stylesheet" />

Более надежный путь — использование адаптивного дизайна во время разработки сайта. Он гарантирует пользователям как персональных компьютеров, так и мобильных девайсов доступ к одному и тому же URL (адресу сайта). Адаптация страницы к устройству, при этом, осуществляется за счет CSS-разметки.

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

Разработка самостоятельной мобильной версии сайта. Пользователи перенаправляются на другой адрес сайта. Показ посетителям разного HTML-кода, который зависит от устройства, на котором он просматривается. Пользователи, переходя на один и тот же адрес сайта с разных устройств, видят разный код. Адаптивный дизайн. Код сайта (HTML) и адрес (URL) не меняются в зависимости от девайса, с которого осуществляется просмотр. Адаптация сайта к устройству, в этом случае, осуществляется за счет технологии каскадных таблиц стилей CSS.

       Для тестирования адаптивной верстки лучше всего использовать различные мобильные устройства (планшетные ПК, коммуникаторы), но если они недоступны, можно воспользоваться плагинами для браузеров:

Internet Explorer — Microsoft Internet Explorer Developer Toolbar (встроен в браузер, начиная с версии 8) Firefox — Firesizer, (начиная с 16-ой версии «Инструменты» → «Веб-разработка» → «Адаптивный дизайн») Google Chrome — Windows Resizer Safari — ResizeMe

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

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

  Адаптивный дизайн, таким образом, наилучший метод оптимизации сайтов под трафик с мобильных устройств.