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

Мобильные приложения

6

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

1. Тэг meta viewport — ширина страницы в мобильном браузере

web-mobile

Мета-тег meta viewport представляет собой HTML-тэг, необходимый для определения ширины окна просмотра и управления масштабированием страницы. При помощи этого тега мы можем устанавливать масштаб страницы при первичной загрузке, указывать максимально допустимое увеличение, а также полностью отключать увеличение.

Ниже хочу привести пример того, как обычно тэг meta viewport добавляется внутрь тэга.

1
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

Вы также можете добавить его внутрь ваших каскадных таблиц стилей:

1
2
3
 @-viewport {  width: device-width; 
 }

Тэг meta viewport – это незаменимый тэг (вместе с Media Queries), если вы собираетесь разработать адаптивный веб-сайт. Однако технически вы можете использовать тэг и в неадаптивных дизайнах.

2. Media Queries

Media Queries позволяет вам изменять стили вашего сайта при помощи определенных точек преломления. Ведь не все компоненты вашего традиционного веб-сайта уместятся на небольшом экране мобильного устройства.

Используя Media Queries, вы можете добавлять определеннные стили для экранов конкретной ширины. Мы также может добавлять различные стили, основываясь на ориентации устройства и его плотности отображения пикселей.

Вы можете встроить Media Queries либо напрямую в код страницы при помощи ссылки:

1
<link href="style.css" rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 960px), projection" />

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

1
2
3
 @media screen and (max-width: 960px) {  /** Style Rules here **/ 
 }

3. Modernizr

Modernizr – это javascript-инструмент для определения способностей браузера/устройства. Браузеры отличаются друг от друга, и предлагает не идентичную поддержку свойств. При разработке веб-сайта для мобильных устройства, вы, возможно, захотите воспользоваться современными и удобными свойствами CSS3 и HTML5, которые, к сожалению, поддерживаются далеко не всеми браузерами (сегодня еще не все используют последние версии браузеров).

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

4. Сенсорное управление на сайте.

TouchSwipe представляет собой jQuery-плагин, который позволяет вам реализовать поддержку сенсорного управления на сайте (на мобильных устройствах или планшетах). Он поддерживает набор их самых популярных жестов вроде проведения, щепотки, увеличения и прокрутки.

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

5. iOS иконки

Первое, что вы видите при разблокировке вашего iPhone (или iPad), – это иконки приложений. Кроме иконок приложений, в iOS также можно видеть иконки вебсайтов, которые были добавлены на экран “Домой”.

Чтобы создать такую иконку и для вашего веб-сайта, просто добавьте следующую ссылку в раздел head в коде вашего сайта:

1
2
3
 
<link href="touch-icon-iphone.png" rel="apple-touch-icon" /> 
 
<link href="touch-icon-ipad.png" rel="apple-touch-icon" sizes="72x72" /> 
 
<link href="touch-icon-iphone-retina.png" rel="apple-touch-icon" sizes="114x114" />

С другой стороны, вы можете просто удалить эти ссылки, только при этом убедитесь, что иконки сохранены в корневом каталоге и имеют приставку apple-touch-icon-* в названии.

6. Экран заставки

Экран заставки – это первое изображение, которое отображается при запуске приложения. Этот экран информирует пользователей о текущей загрузке приложения. Зачастую рекомендуется использовать такие заставки, которые также рекламировали бы ваш бренд.

Чтобы добавить такую заставку на ваш сайт, просто вставьте следующие строки в head.

1
 
<link href="splash-screen.png" rel="apple-touch-startup-image" />

Когда пользователь будет открывать ваш сайт через экран «Домой», изображение, указанное в этой ссылке, будет быстро отображаться на экране устройства.

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

7. Windows 8 иконки

Windows 8

Windows 8 и RT также предлагают возможность добавлять иконки в виде блоков на экране «Домой». В Windows 8 эти блоки называются Pin Icon.

В отличие от iOS, где используется элемента link, Windows 8 использует мета-тэг. Давайте посмотрим на пример.

1
<meta name="msapplication-TileColor" content="#000" /><meta name="msapplication-TileImage" content="icon.png" />

Первый мета-тэг определяет цвет ячейки, второй отвечает за изображение иконки. Существует сайт под названием Build My Pinned Site, который позволяет вам без труда генерировать подобные мета-тэги.

В завершение

Революция мобильных устройств изменила то, как мы, веб-разработчики, создаем сайты. И теперь вам следует учитывать как минимум те компоненты, о которых мы сегодня говорили. Конечно же, если вам хочется, чтобы ваши сайты отлично смотрелись на устройствах, работающих на iOS и Windows 8.

6 комментариев

по хронологии
по рейтингу сначала новые по хронологии
Ирина

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

Зыков Никита

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

Пахомов Михаил

Современные плагины действительно помогают быстро и без особых усилий оптимизировать сайт под мобильные устройства и я этими плагинами активно пользуюсь.

Дима

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

Виктор Пучешкин

Уважаемый, строка с мета тегами и линками - не помещается на экране моб. телефона iOS.
Если Вы пишите, как надо делать, то сделали бы корректно собственный сайт.

А что проще сделать на 100 страничном сайте поставить новый адаптивный шаблон или адаптировать текущий?

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Более 6 лет опыта работы

Отвечу в течении 24 часов

Минимальная сумма заказа 1000Р

Ваше сообщения отправлено
Ваше сообщения отправлено успешно