адаптивный дизайн


Адаптивный дизайн сайта

адаптивный дизайн

Это первая статья в интернете, где в одном месте собраны все необходимые инструменты для построения адаптивного сайта: от начала и до конца. Она поможет вам выбрать правильный способ построения адаптивного сайта с учетом ваших целей и не запутаться в море лишней информации.

Из статьи вы узнаете.

1. Что такое адаптивный дизайн.
2. Как делать адаптивный сайт на основе фреймворков в зависимости от его целей и задач.
3. Основные инструменты для проверки и коррекции кода и работы адаптивного сайта в различных браузерах/

Адаптивный дизайн: за и против

С тех пор, как веб-аналитик Пьер Фар рекомендовал адаптивный дизайн, споры среди веб-мастеров не утихают.

Напомним принцип - один URL, один HTML-документ, где с помощью CSS устанавливаются стили для различных расширений входящего устройства и разный дизайн.

Google за адаптивный дизайн: один URL облегчает пользователю работу с сайтом, а поисковику его индексацию, и следовательно, дальнейшую оптимизацию, сайт приобретает желаемую независимость от постоянно меняющихся требований к новым мобильным устройствам.

Colin Proctor, Smashing Ideas против:

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

Адаптивный дизайн: построение на основе фреймворков

Надо сказать, что технология существовала задолго до появления знаменитой книги Responsive Web Design и технологии media queries.

Многие до сих пор пользуются прежней проверенной техникой - jQuery Mobile framework для создания сайтов под тач-скрин устройства.

В первую очередь нужно осилить книгу Ethan Marcotte. Затем идем в наиболее популярный на сегодняшний день сервис Bootstrap и находим там адаптивные шаблоны и стили со всеми необходимыми функциями.

Есть и еще довольно неплохие адаптивные фреймворки, такие как Skeleton. Его легко подогнать под пользовательский дизайн и создать сайт для различных устройств - от 17 дюймового лаптопа до iPhone.

Еще один фреймворк из этой серии - Foundation 3 многие ставят даже выше популярного бутстрап. Отличается гибкой сеткой и разнообразием настроек и элементов.

Если вам нужен простой адаптивный дизайн - то компактный 320 and up - CSS media queries boilerplate - это то, что вам нужно. Фреймворк реализует принцип "mobile first". Содержит только CSS стили: reset, color и typography. CSS стили содержат настройки для расширений экрана 480, 768, 992 и 1382px. Фремворк может быть использован как дополнение к HTML5 Boilerplate, так и самостоятельно и допускает использование нескольких настроек одновременно, таких как Selectivizr, Respond.js и др.

Если стоит задача создать простой сайт визитку, где есть несколько статических страниц и вам не нужно будет расширять его и ставить на CMS, то в этом случае будет достаточно простого шаблона Simpliste. Адаптивный дизайн присутствует, есть стили для мобильных устройств и печати. В комплекте прилагается несколько готовых тем.

Недавно на github появился новый, более современный и удобный фреймворк Wirefy.

Помним про хаки: Respond.js и css3-mediaqueries-js для поддержки CSS3 media queries в старых версиях браузеров.

Не забываем также про рекомендации Google для смартфонов:

@media only screen and (max-width: 640px) {...}

Для пользователей WordPress в популярных фреймворках существуют специальные темы: BootstrapWP, Skeleton WordPress Theme, jQMobile WordPress Theme

Тестирование адаптивного сайта

Тестирование адаптивного дизайна

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

Еще один хороший источник для тестирования - инструмент Matt Kersley. Сайт можно простестировать как в сети, так и загрузить специальный скрипт для тестирования на свой компьютер.

Не лишним будет проверить код в специальном валидаторе для мобильных устройств.

Финальную проверку кода и юзабилити сайта Google рекомендует выполнять с помощью своего инструмента. Использование новых технологий положительно повлияет и на посещаемость сайта.

Адаптивный дизайн готов. Мои поздравления!

12 июля 2012 г.
Подготовила Ольга Мараева.
При использовании статьи ссылка на сайт автора обязательна.

Google