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

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

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

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

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

    @-viewport {  
        width: device-width;  
    }  

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

2. Media Queries

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

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

 @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 в коде вашего сайта:

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

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

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

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

7. Windows 8 иконки

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

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