Перевод responsive web design

Содержание

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

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

Что такое адаптивный дизайн сайта

Адаптивный веб-дизайн — это английский термин «responsive web design», определяющийся как стиль интернет-страницы, который имеет особенность в виде возможности загружаться на различных устройствах, имеющих выход в интернет.

Иными словами, это специальное расширение для всех web-страниц позволяющее им конвертироваться по конкретному разрешению экрана на различных как стационарных, так и мобильных платформах.

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

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

Суть адаптивного дизайна

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

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

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

Примеры адаптивного и не адаптивного дизайна

Пример адаптивного дизайна достаточно простой. Для этого лишь нужно перейти на любой сайт через мобильную платформу, и открыть его на другом устройстве, к примеру, на персональном компьютере либо ноутбуке. Разницу можно заметить по конструкции самого отображаемого сайта.

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

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

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

Размеры экранов

Разработчики web-интерфейса, сразу, при разработке сайта с адаптивным дизайном устанавливают для себя определённые параметры в виде разрешения экранов, которые будут поддерживаться при просмотре содержимого. Есть большое количество различных мобильных и стационарных платформ.

Ноутбуки и мониторы	Планшеты	Смартфоны
От 10 до 31 дюйма	От 600×800 до 2560×1600 пикселей	От 240х320 до 2160х3840 пикселей

В таблице выше представлены востребованные разрешения при верстке под разные типы экранов и мониторов.

Также, стоит не забывать и о смене ориентации экрана при его развороте портретного режима на ландшафтный.

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

Мобильная версия, адаптивный дизайн и отзывчивый дизайн

Существуют и разработанные дизайны под мобильные платформы. Они делятся на:

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

При этом, данные виды входят в адаптивный дизайн.

Чаще всего они используются при разработке сайтов, которые в будущем будут поддерживать мобильные платформы, а именно резиновые верстки.

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

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

Как сделать сайт адаптивным

Всё больше пользователей выходит в интернет и посещают различные ресурсы только через мобильные платформы, такие как смартфоны и планшеты. Поэтому при наличии собственного портала необходимо сделать его активным.

Реализовать это можно только при наличии определенного уровня знаний CSS/HTML, или через уже готовые сервисы, позволяющие сделать большинство операций по адаптации меню сайта и его содержимого в автоматическом режиме, к примеру, Web Builder.

Можно также попытаться найти уже готовые шаблоны и просто перенести всё содержимое в них.

Последний наиболее затратный способ — это обратиться к разработчику Web-дизайнов или фрилансеру.

Работаем с HTML и CSS

Каскадные таблицы стилей или CSS позволяют формально описывать внешний вид и дизайн объекта или сайта. Для этого необходимо заполнять определённые команды в связке с кодами HTML.

Вот несколько важных переменных и кодов, которые используются при разработке адаптивного дизайна:

max-width, используемый в CSS, позволяет изменять размеры загружаемых изображений;
раздел используется для добавления адаптивных шрифтов и библиотек;
шапки страниц применяются для размещения элементов в виде логотипов и другой графической информации;
— блоки с кратким содержанием статей, позволяющие их сворачивать для экономии места при просмотре сайта с мобильной платформы;
боковые колонки содержат разделы меню и навигацию.

Создать адаптивный сайт можно только при наличии необходимых знаний в языках веб-программирования.

Без них самостоятельно сконструировать и запустить кроссплатформенный портал будет невозможно.

На Web Builder

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

Главная особенность такого онлайн конструктора — полностью визуальное проектирование.

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

При этом есть возможность устанавливать режим кроссплатформенности, который и создаёт в дальнейшем при интеграции на нужный домен адаптивный дизайн под разные разрешения экранов.

Как из не адаптивного шаблона сделать адаптивный

В первую очередь, при редактировании шаблона необходимо установить мета-тег . Его основная задача заключается в определении размера экрана, с которого будет просматриваться сайт. Далее, устанавливается «резиновая» ширина блоков в процентах.

Для этого используется правило @media, которое прописывается в css-файле.

По такому же принципу редактируются и остальные элементы, которые должны будут либо расширяться, либо сужаться.

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

WordPress сайт с адаптивным дизайном

Платформа WordPress предлагает на выбор большое количество плагинов и различных шаблонов, которые можно быстро и легко применить к сайту. Большинство из них имеют адаптивный дизайн.

Это позволяет увеличить аудиторию посетителей.

При помощи следующих плагинов можно быстро провести настройку дизайна под разные типы разрешений:

Jetpack.
WPTouch Mobile Plugin.
WordPress Mobile Pack.
Lightbox
Responsible.
Hammy.
Responsive Widgets.

Кроме этого, в открытых интернет-источниках представлено более миллиона вариантов различных типов шаблонов, готовых к применению.

Бесплатные шаблоны с адаптивным дизайном

Многие шаблоны, находящиеся в свободном доступе, скачивались тысячи раз. Дело в красивом оформлении и в функциональности. К примеру, рекорд в русскоязычном сегменте интернета поставил такой шаблон, как Bridge. Он имеет составную конструкцию и легко подходит под разные тематики. Есть и шаблоны на конкретные темы.

Если сайт специализированный, то стоит посмотреть в открытых каталогах именно подходящее для тематики оформление.

В дополнение пользователи получат стилизованные иконки и другие модули с плагинами, позволяющими развивать ресурс в сети эффективнее.

Важность адаптивного сайта

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

С каждым годом всё больше интернет-трафика приходится именно на смартфоны и планшеты.

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

Наличие адаптивного дизайна даёт возможность не разрабатывать дублированный сайт на другом домене именно для мобильной платформы.

Удобства пользователя

В сети можно найти сайты разных направлений. Теперь в интернете представлены и различные онлайн порталы государственных структур и частных компаний.

Большой процент людей использует мобильные платформы для удобства.

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

Изменение позиций в Яндексе

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

Чем больше будет пользователей просматривать на телефонах и планшетах информацию, тем выше в рейтинге поисковых запросов Яндекса этот ресурс будет. А это в свою очередь несёт и коммерческую пользу.

Сегодня практически нет отдельных мобильных сайтов, которые используются для телефонов и планшетов. Именно адаптивный дизайн произвёл революцию, связанную с возможностью интеграции «резиновых» колонок и шаблонов, которые автоматически подстраиваются под конкретное разрешение.

Это полезно не только самим пользователям, но и владельцам сайтов. Читатели могут просматривать информацию с любого гаджета, а разработчики получают ещё больше аудитории.

Источник

Впервые понятие отзывчивого веб-дизайна (англ. responsive web-design ) ввел Итан Маркотт [1] в одной из своих статей в мае 2010 года [2] . Впоследствии он выпустил книгу под названием «Responsive Web Design», посвященную данной технологии [3] .

Джеффри Зельдман (англ.) русск. предложил расширить понятие Итана Маркотта, чтобы оно покрывало любые подходы, обеспечивающие ясное визуальное восприятие независимо от характеристик экрана и других ограничений пользовательского устройства [4] .

С другой стороны, Аарон Густафсон выпустил книгу «Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement» [5] , которая рассматривает метод «постепенного улучшения» англ. progressive enhancement (ненавязчивый JavaScript) как важную составляющую адаптивного дизайна.

В результате среди веб-дизайнеров стали понимать адаптивный дизайн (англ. adaptive design , не путать с англ. adaptive layout ) как более широкое понятие, включающее отзывчивый дизайн (в качестве одной из реализаций адаптивности) и постепенное улучшение [6] [7] .

Предпосылки

Главными причинами возникновения и развития технологий адаптивного веб-дизайна стали:

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

Основные принципы

Сначала мобильные («Mobile first»)

Проектирование начинается с адаптивной версии веб-сайта для мобильных устройств. На этом этапе дизайнеры стремятся правильно передать смысл и основные идеи с использованием небольшого экрана и всего одной колонки. Содержимое при необходимости сокращают, удаляя второстепенные информационные блоки и оставляя самое важное [10] .

В качестве иллюстрации пригодности данного подхода можно процитировать бывшего разработчика мобильных приложений для Facebook:

Изначально я рассматривал мобильное веб-приложение только в качестве вспомогательного сервиса для facebook.com, но, познакомившись с платформой, я быстро убедился, что можно создать версию, которая будет гораздо лучше, чем основной сайт! (Джо Хьюитт)

My goal was initially just to make a mobile companion for the facebook.com mothership, but once I got comfortable with the platform I became convinced it was possible to create a version of Facebook that was actually better than the website! (Joe Hewitt)

Известные сайты, созданные по технологии адаптивного веб-дизайна

Сайт The Boston Globe был модернизирован с использованием технологии адаптивного веб-дизайна в конце 2011 года [12] .
Известный англоязычный сайт для дизайнеров Smashing Magazine стал адаптивным в начале 2012 года [13] .
Сайт французского часа землиWWF[14] .
Сайт университета Ланкастера [15] .
Сайт мобильного браузера Nokia [16] .

Примечания

↑Итан Маркотт — персональный сайт (англ.) . Архивировано из первоисточника 9 сентября 2012.Проверено 13 января 2012.
↑Статья Responsive Web Design by Ethan Marcotte (англ.) . Архивировано из первоисточника 9 сентября 2012.Проверено 13 января 2012.
↑Marcotte, 2011
↑L. Jeffrey Zeldman, Responsive Design. I don’t think that word means what you think it means.
↑Gustafson, 2011
↑Viljami Salminen, Adaptive vs. Responsive, what’s the difference?
↑Jared Ponchot, Responsive & Adaptive Web Design, 2011
↑Маркотт, 2012, с. 15
↑Сайт группы исследователей мобильных веб-разработок (англ.) . Архивировано из первоисточника 9 сентября 2012.Проверено 13 января 2012.
↑ 12Вроблевски, 2012
↑Joe Hewitt, iPad
↑Globe unveils new website (англ.) . The Boston Globe (30 November 2011). Проверено 13 января 2012.
↑Smashing Magazine (англ.) . Архивировано из первоисточника 9 сентября 2012.Проверено 13 января 2012.
↑Earth Hour (фр.) . Архивировано из первоисточника 9 сентября 2012.Проверено 13 января 2012.
↑Lancaster University (англ.) . Архивировано из первоисточника 9 сентября 2012.Проверено 13 января 2012.
↑Nokia Browser promo website (англ.) . Архивировано из первоисточника 9 сентября 2012.Проверено 13 января 2012.

Литература

Ethan Marcotte Responsive Web Design. — A Book Apart, 2011. — 143 с. — ISBN 978-0-9844425-7-7
Итан Маркотт Отзывчивый веб-дизайн = Responsive Web Design. — М .: Манн, Иванов и Фербер, 2012. — 159 с. — (Актуальные книги для тех, кто создает сайты). — ISBN 978-5-91657-385-5
Люк Вроблевски Сначала мобильные! = Mobile first. — М .: Манн, Иванов и Фербер, 2012. — 176 с. — ISBN 978-5-91657-388-6
Ben Frain Responsive Web Design with HTML5 and CSS3. — Packt Publishing Ltd, 2012. — 324 с. — ISBN 9781849693189
Aaron Gustafson Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement. — Easy Readers, 2011. — 144 с. — ISBN 978-0-9835895-0-1

Ссылки

Wikimedia Foundation . 2010 .

Смотреть что такое «Адаптивный веб-дизайн» в других словарях:

Веб-дизайн — Эта статья или раздел нуждается в переработке. Пожалуйста, улучшите статью в соответствии с правилами написания статей. Веб дизайн … Википедия

Веб-разработка — Веб разработка процесс создания веб сайта или веб приложения. Термин включает в себя веб дизайн, программирование для веб на стороне клиента и сервера, а также конфигурирование веб сервера. Содержание 1 Основные этапы веб разработки … Википедия

Веб-мастер — Веб мастер человек, занимающийся разработкой веб сайтов в Интернете или корпоративных приложений в интернете. Веб мастер это «управляющий» сайтом. В зависимости от размера коллектива разработчиков, он может объединять в себе… … Википедия

Веб-программирование — Веб программирование. Бурно развивающийся раздел программирования, ориентированный на разработку динамических Internet приложений. Языки веб программирования это соответственно языки, которые в основном предназначены для работы с интернет… … Википедия

Веб 2.0 — Для улучшения этой статьи желательно?: Переработать оформление в соответствии с правилами написания статей. Викифицировать статью. Найти и оформить в виде сносок ссылки на ав … Википедия

Веб-страница — Эта статья или раздел нуждается в переработке. Пожалуйста, улучшите статью в соответствии с правилами написания статей. Веб страниц … Википедия

Веб 1.0 — Web 1.0 является ретронимом понятия, которое относится к статусу WWW и любому стилю дизайна веб сайта, используемому перед появлением термина Web 2.0. Это общий термин, который был создан, чтобы описать Сеть перед явлением взрыв пузыря… … Википедия

Веб-сервер — Архитектура серверов фонда Викимедиа Веб сервер это сервер, принимающий HTTP запросы от клиентов, обычно веб браузеров, и вы … Википедия

Веб-служба — У этого термина существуют и другие значения, см. Служба. Веб служба Веб служба, веб сервис (англ. web service) идентифицируемая веб адресом программная система со стандартизированными интерфейсами. Веб службы могут взаимодействовать… … Википедия

Веб-форум — У этого термина существуют и другие значения, см. Форум. Снимок экрана форумного скрипта phpBB Веб форум класс веб приложений … Википедия