7 простых советов по оптимизации сайтов для мобильных устройств | Gearmix
11.09.2013 20:01
Источник перевод для gearmix ()

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

web-mobile-wireframe

1. Тег Meta Viewport

 
Meta Viewport – это HTML тег для указания ширины окна и управления масштабом зума страницы. С помощью этого тега можно установить зум страницы при первой загрузке, максимальный зум, или вообще отключить эту возможность.

Пример применения:

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

Также его можно добавить в таблицу стилей вот таким образом:

@-viewport {

width: device-width;

}

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

2. Media Queries

 
Media Queries позволяют вам менять стили вашего сайта в конкретные моменты времени. Не всё содержимое сайта может корректно поместиться в узкое окно на экране мобильного устройства.

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

Вы можете вставить Media Queries в ссылку таблицы стилей:

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

Или вставить напрямую в таблицу стилей:

@media screen and (max-width: 960px) {

/** Style Rules here **/

}

3. Modernizr

 
Modenizr – это Java-скрипт для определения свойств браузера/устройства. Браузеров много и они могут поддерживать или не поддерживать определённые свойства. Создавая сайт для мобильных устройств, вы, скорее всего, будете использовать передовые возможности CSS3 и HTML5, которые, к сожалению, не поддерживаются более старыми браузерами.

Modenizr позволяет вам задать резервные функции и представления для старых браузеров посредством добавления наборов методов и дополнительных HTML классов в тело тега.

4. TouchSwipe

 
TouchSwipe – это jQuery плагин для добавления вебсайтам тач-интерактивности. Он поддерживает набор распространённых жестов вроде Swipe, Pinch, Zoom и Scroll.

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

5. Иконки iOS

 
Первое, что вы увидите, разлочив свой  iPhone (или iPad) – это иконки приложений. Помимо них iOS также отображает иконки для вебсайтов, которые были добавлены на Home-экран.

Чтобы добиться этого для своего сайта, просто добавьте следующий элемент к <head> тегу:

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />

<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />

<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone-retina.png" />

В качестве альтернативы, вы можете удалить эти элементы, но удостоверьтесь, что иконки сохранены в корневой директории, и сопровождены префиксом apple-touch-icon-* в своём имени.

6. Splash Screen

 
Splash Screen – это первое изображение, которое видит пользователь, когда запускает приложение.  Оно говорит ему, что приложение загружается. Также его часто используют как возможность подчеркнуть бренд разработчика.

Чтобы добавить Splash Screen на свой сайт, просто вставьте следующую строку в <head> тег:

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

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

И хотя показ бренда при помощи Splash Screen считается несколько не комильфо, однако до тех пор, пока он хорошо спроектирован и загружается очень быстро – он может обеспечить лучший пользовательский опыт и добавить дополнительный стилистический фактор на ваш сайт.

7. Pin-иконка Windows 8

 
Windows 8 и RT также имеют возможность добавлять сайту иконку, когда он прикреплён к Home-экрану. В Windows 8 она называется Pin-иконкой.

В отличие от iOS, которая использует линк-элементы, Windows 8 использует для добавления иконок мета-теги. Вот пример:

<meta name="msapplication-TileColor" content="#000"/>

<meta name="msapplication-TileImage" content="icon.png"/>

Заключение

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

  1


ПОХОЖИЕ ЗАПИСИ


© Gearmix 2013
Права на опубликованный перевод принадлежат владельцам вебсайта gearmix.ru
Все графические изображения, использованные при оформлении статьи принадлежат их владельцам. Знак охраны авторского права распространяется только на текст статьи.
Использование материалов сайта без активной индексируемой ссылки на источник запрещено.

Понравилась статья?
Поделись с друзьями!

x

Comments are closed.