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

Адаптивный дизайн на протяжении нескольких последних лет усовершенствовался, в 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:




<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+("devicePixelRatio" in window ? ","+devicePixelRatio : ",1")+'; path=/';</script>



Media queries

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

Для внешних файлов CSS


<link rel="stylesheet" media="screen and (min-width:320px) and (max-width:480px)" href=
http://pixelcom.crimea.ua/"css/mobile.css" />



В основной таблице css


@media screen and (min-width:320px) and (max-width:480px){
/* Style Declarations For This Width Range */
}



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

Все HTTP-запросы отправляются для каждого устройства, их можно уменьшить и снизить время загрузки DOM. В этом поможет ресурс, такой как Сompass .

Сompass — это CSS framework, он помогает разработчикам создавать чистую разметку, спрайты и расширения.

Инструменты для JavaScript, такие как UglifyJS бесценны, они сжимают код JavaScript.

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

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

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

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

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

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

Например:


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


Заключение

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

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>