Адаптивный дизайн был любимым веб-дизайном в течение нескольких лет, хотя он действительно достиг пика в 2013 году. Это неудивительно, конечно. Сайт, который может адаптироваться к любому устройству, делает все намного проще, чем беспокоиться об отдельном мобильном сайте.
Тем не менее, единственной областью, где реагирование не помогает, является скорость . Без оптимизации адаптивный сайт будет доставлять все HTTP-запросы для полного рабочего стола, даже если они скрыты. Это, конечно, значительно замедляет мобильный или планшетный сайт. Итак, что вы можете сделать, чтобы сделать это быстрее?
Несколько вещей, как это происходит. Старый добрый веб изобилует инструментами и советами, чтобы помочь, поэтому вот некоторые из них.
(Источник изображения: Сет Уэйт )
Изображения должны быть должным образом оптимизированы
Мы все знаем, что изображения часто являются основной причиной, когда дело доходит до медленной загрузки, и это так же верно для отзывчивых сайтов. Есть несколько способов подойти к этому, и самый быстрый и простой способ — использовать Adaptive Images . Это определяет размер экрана и автоматически создает, кэширует и доставляет уменьшенную версию изображения без необходимости изменять разметку <scr> или <img>.
Облегченное решение PHP, программное обеспечение должно использоваться вместе с методами Fluid Image и может реально помочь сократить время. Он использует файл htaccess, один файл PHP и одну строку JavaScript для определения размера экрана посетителей.
Вы также можете настроить программное обеспечение и установить качество изображений и кеширование в браузере.
Медиа-запросы
В Интернете можно найти множество достойных платформ, которые избавляют от необходимости использовать медиа-запросы, такие как Bootstrap , например. Но значит ли это, что вы не должны беспокоиться о них узнать? Нет, слишком много знаний не может быть плохой вещью, и вы действительно хотите полагаться исключительно на чужой код?
Медиа-запрос в адаптивном дизайне — это объявление CSS, которое используется для вызова других объявлений в зависимости от размера экрана на целевых устройствах. Вы можете использовать их двумя способами: как внешний вызов или тот, который пишет непосредственно внутри таблицы стилей.
Внешний код
<link rel="stylesheet" media="screen and (min-width:320px) and (max-width:480px)" href="css/mobile.css" />Прямой вызов
@media screen and (min-width:320px) and (max-width:480px){
/*Style Declarations For This Width Range */
}
Оба из этих способов — сделать объявления CSS, которые будут вызваны, когда устройство находится между 320px и 480px. Как видите, экран @media запускает запрос, а параметры максимальной и минимальной ширины задают параметры.
Похоже, много проблем? Проверьте ProtoFluid , который позволяет создавать адаптивный CSS без необходимости тестировать его на каждом устройстве.
Другие ресурсы, на которые стоит обратить внимание, — это CSS-фреймворк Unsemantic , который позволяет вам работать с процентами, а не с колонками и Screenfly , который позволяет создавать каркасы непосредственно в браузере, а также полезен для тестирования.
Минимизация HTTP-запросов
Как упоминалось ранее, все HTTP-запросы отправляются на каждое устройство, если только вы не скажете ему об этом, так что можно сделать, чтобы уменьшить их и сократить время загрузки DOM? В этом могут помочь ресурсы JavaScript и CSS, такие как Compass .
Это среда разработки CSS с открытым исходным кодом, которая позволяет разработчикам создавать чистую разметку и создавать спрайты и расширения просто и легко.
Для JavaScript такие инструменты, как UglifyJS , неоценимы, поскольку он сжимает код, позволяя автоматизировать работу с JavaScript.
Условная загрузка
Это идеально для того, чтобы мобильные и планшетные устройства не загружали все виды контента, включая изображения, карты и т. Д. Это особенно верно в отношении сторонних сценариев, таких как граватары и значки социальных сетей, поскольку они обычно ориентированы на более крупные устройства.
ZurBlog указывает, что
… Для загрузки кнопок социальных сетей Facebook, Twitter и Google в общей сложности 19 запросов требуется 246,7 тыс. Пропускной способности.
Ради перспективы, это вдвое превышает пропускную способность и в 3 раза превышает количество запросов, необходимых для загрузки полной минимизированной версии всей платформы Foundation .
Действительно ли необходимо иметь все эти нагрузки для социальных сетей? Это зависит на самом деле. Если вы полагаетесь на социальные сигналы для SEO, то использование простого URL-адреса для общего доступа на самом деле не сработает для вас. Это связано с тем, что URL-адрес общего доступа предназначен только для обмена, а не для добавления лайков или G + + 1.
Однако для этого всегда есть ваш основной сайт, и URL-адреса могут быть включены в таблицу стилей для мобильных и планшетных устройств.
Например:
<a href="http://www.facebook.com/sharer.php?u=URL&t=TITLE">link or image</a>
(источник ZurBlog)
Тестирование, тестирование …
Какие бы методы и ресурсы вы ни использовали, самым важным аспектом создания адаптивного сайта должно быть тестирование . Как упоминалось ранее, вы можете использовать такие ресурсы, как Screenfly, но также неплохо бы протестировать его на максимально возможном количестве реальных устройств.
Спросите семью, друзей, коллег по работе, кого угодно, но тщательно протестируйте их на как можно большем количестве устройств. Одной из вещей, которые вы должны иметь в виду, является удобство использования, поэтому убедитесь, что он не просто хорошо выглядит, но и проходит тест большого пальца, прост в навигации и, желательно, имеет сильный призыв к действию в верхней части страницы.
Посмотрите и на текст, правильно ли он отображается или выглядит сжато и выталкивает другой контент в странные места на экране. Вы можете использовать FitText для решения этой проблемы, это плагин JQuery, который автоматически обновляет размеры шрифта, предоставляя опции для минимального и максимального размеров.
Он позволяет игнорировать размер шрифта CSS и должен использоваться только для заголовков, а не для текста абзаца.
Адаптивный дизайн — это инновационный и рекомендуемый подход к дизайну в эпоху нескольких устройств, несмотря на то, что некоторые называют его современным Flash. Тем не менее, я не думаю, что мы все взволнованы без всякой на то причины, и даже Google говорит, что это лучший способ для создания мобильных сайтов.
Все дело в удобстве использования, когда речь заходит о мобильных устройствах и планшетах, поэтому вы всегда должны разрабатывать их с учетом этого, и один из способов решения этой проблемы — создание сайта с мобильных устройств, а не с настольных компьютеров.
В настоящее время минималистичный дизайн является чем-то вроде тенденции, так почему бы не подумать о том, чтобы сочетать минимализм с адаптивным дизайном, чтобы обеспечить быстрый, эстетичный и простой в использовании сайт?