В наши дни всё больше людей выходят в онлайн с помощью своих смартфонов и планшетов – и поэтому веб-дизайнерам и разработчикам необходимо учитывать, как их сайты отображаются на этих устройствах. В этой статье представлены несколько компонентов, которые позволят оптимизировать сайты для современных мобильных платформ.
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=»72×72″ href=»touch-icon-ipad.png» />
<link rel=»apple-touch-icon» sizes=»114×114″ 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.
Вот что сдерживает трёхмерную печать – технологию, которая способна навсегда изменить промышленное производство и бесчисленное множество других индустрий: патенты. Однако в феврале 2014 истекает срок действия ключевых патентов, которые в настоящее время предотвращают конкуренцию на рынке самых продвинутых и функциональных 3D-принтеров.
