Оптимизация адаптивного дизайна

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

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

Изображения должны быть оптимизированы

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

Определит размер экрана
Автоматически отобразит уменьшенную версию изображения

Такой вариант определит размер экрана и автоматически отобразит уменьшенную версию изображения, и не нужно будет менять разметку <scr> или <img>.

Достаточно добавить в htaccess:
RewriteCond %{REQUEST_URI} !assets
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
RewriteCond %{REQUEST_URI} assets
RewriteRule \.(?:jpe?g|gif|png)$ server-root/my-website/adaptive-images/adaptive-images.php
Файл PHP adaptive-images.php
$resolutions = array(1382, 992, 768, 480);
$resolutions = array(1200, 768, 480); 
$jpg_quality = 80; 
$jpg_quality = 50; 
$cache_path = "ai-cache"; 
$cache_path = "subdirectory/my-website/adaptive-images/cache"; 
$watch_cache = TRUE; $watch_cache = FALSE; 
$sharpen = TRUE;

Для дисплеев с высокой плотности пикселей iPhone 4 и IPad 3 используйте JavaScript:

document.cookie='resolution='
+Math.max(screen.width,screen.height)
+("devicePixelRatio" in window ? ",
"+devicePixelRatio : ",1")
+'; path=/';
к меню ↑

Медиа-запросы

Медиа-запросы — это вызов свойств CSS на основе размера экрана. Свойства CSS можно использовать двумя способами: в виде внешних файлов CSS или в основной таблице стилей.

Для внешних файлов CSS
<link rel="stylesheet" media="screen and (min-width:320px) and (max-width:480px)" href="css/mobile.css" />
В основной таблице CSS
@media screen and (min-width:320px) and (max-width:480px){
/* Style Declarations For This Width Range */
}

В HTML5 существует тег <picture>, тег работает на основе Media Queries. Предназначение элемента picture выбирать оптимальное изображение относительно окна просмотра.

к меню ↑

Уменьшить количество HTTP-запросов

Все HTTP-запросы отправляются для каждого устройства их можно уменьшить и снизить время загрузки DOM. В этом поможет ресурс, такой как Сompass. Сompass — это CSS framework, он помогает разработчикам создавать чистую разметку, спрайты и расширения. Инструменты для JavaScript, такие как UglifyJS бесценны, они сжимают код JavaScript. Также важно понимать что влияет на производительность приложения, узнать об этом можно используя следующее API: User Timing API, Navigation Timing API.

к меню ↑

Условная загрузка

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

ZurBlog указывает что:

… что бы загрузить иконки социальных сетей Facebook, Twitter и Google выполняется 19 запросов и занимает 246.7k пропускной способности.
На перспективу, более чем в два раза пропускную способность, и в 3 раза количество запросов, необходимых для полной загрузки, уменьшает foun framework.

Это не будет работать если вы используете социальные сети для SEO. Потому, что совместное использование URL используется только для обмена, а не для добавления.

Но URL адреса могут быть включены в таблицу стилей для мобильных устройств.

Например:
<a href="http://www.facebook.com/sharer.php?u=URL&amp;t=TITLE">Ссылка на изображение</a>
к меню ↑

Заключение

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

Вы можете использовать плагин jQuery FitText, он автоматически обновляет размер шрифта.

Интерактивный дизайн — это инновационный и рекомендуемый подход к дизайну для нескольких устройств, Google smartphone-sites это лучший способ создания мобильных сайтов.