Сайты для мобильных устройств

RSS, Twitter, Vkontakte, Facebook

Новости

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

Автор: Владимир Ткаченко

Источник: Обучение в интернет

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

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

Другой метод предназначен для создания адаптивных сайтов, т.е. сайтов настольных версий, адаптированных под мобильные устройства. Адаптивные сайты имеют одинаковые HTML-коды для настольной и мобильной версий, но различные CSS, которые определяют размеры элементов и расположение их в потоке в зависимости от области отображения браузера или разрешения девайса.

Третий метод - для создания динамических сайтов с серверными компонентами (RESS: Responsive Design + Server Side Components) или адаптивных сайтов, созданных с применением метода верстки RESS, изложенного на сайте http://www.lukew.com/ff/entry.asp?1392. В RESS версиях сайтов на запрос пользователя веб-сервер формирует мобильную или настольную версии веб-странички в зависимости от устройства, обратившегося к нему.

Адаптивные и RESS версии сайтов имеют единые с настольными версиями сайтов URL. Мобильные, адаптивные и RESS версии сайтов - это сайты с различной версткой. Все типы сайтов для мобильных устройств имеют свои преимущества и недостатки.

В данной работе рассмотрен подход к созданию адаптивного сайта «desktop first» («сначала — для настольных ПК»). Сайт для настольных ПК с фиксированной шириной 1000px создан с использованием HTML5, CSS3, JS и HTML5 Boilerplate v5.1.0, адаптирован под определенную область отображения браузеров и разрешения мобильных устройств.

Проблема решается за счет "отзывчивого" веб-дизайна (http://alistapart.com/article/responsive-web-design - responsive web design), который является составной частью адаптивного веб-дизайна (http://adaptivewebdesign.info/ - adaptive web-design) к изменению ширины окна или области отображения браузера и к изменению разрешения мобильных устройств. Отзывчивый веб-дизайн обеспечивает изменение расположения элементов в потоке при изменении области отображения браузера (max-width) или разрешения девайса (max-device-width).

Отзывчивый веб-дизайн реализуются с помощью медиа-запросов CSS3 (http://www.w3.org/TR/css3-mediaqueries/ - Media Queries), адаптивных единиц (em), ширины (width) в %, адаптивных изображений (max-width в %), и значения float:none. Следует отметить, что медиа-запросы снижают скорость загрузки веб-страниц, поэтому их должно быть как можно меньше в CSS файле.

В процессе верстки адаптивного сайта возникла проблема, под какие устройства и разрешения экранов можно оптимизировать сайт? Из анализа сайта https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ - Media Queries for Standard Devices следует, что наиболее распространенные форматы для Galaxy Phones - 320х640px и 360х640px, т.е. min-device-width:320px и max-device-width:640px, для iPhones - min-device-width:320px и max-device-width:736px. Для Tablets iPads в портретном режиме портретное (portrait) разрешение: min-device-width:768px и для Galaxy Tablets портретное разрешение: min-device-width:800px.

Учитывая, что для современных 5-ти дюймовых мобильных устройств максимальное ландшафтное разрешение 640px, а для 7-ми и 10-ти дюймовых планшетных компьютеров максимальное портретное разрешение - 800px (при плотности экрана 2-3), целесообразно применить один медиа-запрос для контрольной точки 800px под смартфоны и планшетные устройства (с ориентацией планшета - Portrait).

В результате мобильные устройства и планшетные компьютеры получат определенный набор стилей CSS в диапазоне изменения разрешения (320-800px). В настоящее время я применил один медиа-запрос для контрольной точки 640px под смартфоны в портретном и ландшафтном режиме и под небольшие планшеты в портретном режиме c разрешением 600px. На скриншоте (рис.1) представлена страничка адаптивного сайта "Обучение в интернет" с показателями: 88/100 - "скорость загрузки" и 99/100 - "удобство для пользователей" (тестирование проведено с помощью ресурса PageSpeed Insights).

screen samsung j5
Рис. 1 Страничка адаптивного сайта "Обучение в интернет" в мобильном устройстве

Сайты для мобильных устройств должны отвечать определенным требованиям по скорости загрузки веб-страницы и по удобству работы с сайтом. Многие сайты для мобильных устройств отвечают требованиям по удобству для пользователей, но имеют очень низкую скорость загрузки. Поэтому в процессе верстки сайта под мобильные устройства необходимо учитывать множество факторов, чтобы сайт отвечал, предъявляемым к нему требованиям. Чтобы сократить время загрузки, необходимо использовать один интегрированный файл CSS, а JS применять в асинхронном режиме и т.д.

Для выполнения корректной верстки сайтов, адаптированных под мобильные устройства, необходимо в процессе его создания осуществлять тестирования: на валидность HTML5 и CSS3. Кроме того, необходимо проверять скорость загрузки веб-страниц и "Удобство для пользователей" на ресурсе PageSpeed Insights. Для быстрой проверки верстки адаптивного сайта целесообразно применять сервис http://www.responsinator.com/ - Responsinator.

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

screen samsung j5 - облачные вычисления screen samsung j5 - поисковая система google
Рис. 2. Скриншоты мобильных сайтов, созданые смартфоном Samsung J5

На одном скриншоте (рис. 2) представлен интерфейс поисковой системы Google, а на другом - преставлена страничка адаптивного сайта "Обучение в интернет".