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

Так называемый адаптивный дизайн (adaptive design) появился отнюдь не вчера, но всерьез о нем заговорили лишь недавно, благодаря тем усовершенствованиям, которые он способен привнести в пользовательский опыт.

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

Респонсивный веб-дизайн

Респонсивный веб-дизайн — это масштабирование интерфейса под устройство пользователя за счет media-queries, или модуля CSS3, позволяющего задавать разные стили (или даже таблицы стилей) в зависимости от разрешения экрана, его размеров и прочих характеристик.

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

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

1. Одинаковый внешний вид ресурса в разных браузерах и на различных платформах
2. Наличие у сайта одинакового URL, что способствует SEO-оптимизации
3. Разработчикам необходимо обслуживать лишь один сайт, что позволяет сократить время, затрачиваемое на дизайн и контент

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

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

Адаптивный веб-дизайн

Адаптивный дизайн функционирует немного иначе. Он сегментирует пользователей на категории в зависимости от того, с какого устройства они просматривают сайт.

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

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

Иными словами, сервер берет на себя всю «тяжелую» работу, вместо того, чтобы заставлять сайт оптимизировать самого себя. Среди достоинств адаптивного дизайна можно выделить следующие:

1. Изображения загружаются намного быстрее, так как они сжимаются и адаптируются под устройство пользователя
2. Загрузка сайта происходит быстрее, так как сервер определяет тип устройства пользователя и загружает соответствующий ему программный код
3. Разработчики пользуются свободой творчества, ведь они могут создавать различные версии сайтов и подгонять их под соответствующие типы устройств, чтобы сделать их более удобными для мобильных пользователей.

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

Какой вариант и для чего подходит?

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

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

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

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

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

Понятие адаптивности

«Что такое адаптивный дизайн и к чему он адаптируется?» - может спросить человек несведущий. Я вам отвечу: к виду используемого устройства. Адаптивный дизайн обеспечивает хорошее восприятие веб-страниц на различных гаджетах, подключенных к интернету.

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

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

Стратегия «Mobile First»

Данная стратегия разработки была предложена еще в 2009-м году Люком Вроблевски - автором книг и статей по веб-дизайну, руководителем социальной сети Bagcheck, которую всего через 9 месяцев после создания приобрела компания Twitter Inc.

Предложенный Люком Вроблевски подход к разработке получил название «Mobile First» («Первым делом мобильные») по трем причинам:

мобильная среда позволяет фокусироваться и избавиться от беспорядка, возникающего вследствие «захламления» большого количества места на экране;

мобильный рынок имеет тенденцию к развитию бешеными темпами;

мобильная среда связана с множеством возможностей (камера, мультитач-жесты, GPS, акселерометр, геолокация).

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Таким образом, обеспечивается инновационная и эффективная работа всех видов устройств. Разработчики сайта фокусируются на нуждах пользователей, создают оптимизированные и высокоскоростные страницы, обращают внимание на важный контент. Кстати, подходом «Mobile First» пользуется даже Google.

Контентная стратегия «Content out»

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

Многие из тех, кто не использует стратегию «Первым делом мобильные», отдают предпочтение стратегии «Первым делом контент». Это, конечно, дело правильное, однако, не стоит воспринимать этот призыв буквально и считать, что не следует начинать разработку дизайна до тех пор, пока не будет готов весь контент.

Наполнение должно непрерывно создаваться и обсуждаться как на этапе создания адаптивного дизайна сайта, так и после его завершения! Как сказал известный дизайнер Cennydd Bowles, «дизайн и контент должны идти рука об руку». Они должны дополнять друг друга.

Совсем другое дело - стратегия «Первым делом структура контента». В первую очередь, вам нужно точно определиться с миссией сайта, что он пытается сообщить миру. А уж затем тщательно продумать структуру его наполнения, способы создания, типы и предназначение каждого элемента, при этом во главу угла нужно ставить именно пользователя.

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

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

Уделите время созданию скетча и прототипа

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

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

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

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

Надеюсь, данная статья была полезна как опытным, так и начинающим веб-дизайнерам.

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

P.S.: а вы уже подписались на обновления нашего блога?

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Наличие адаптивного дизайна необходимость – жизнь это доказала своими граблями, никакая Mobile Joomla не даёт такого эффекта, как прямая адаптация сайта. Сегодня я поведаю, как сделать адаптивный дизайн через правку стилей CSS с помощью своей головы и пальцев рук. Разложить всё по полочкам не получится, так как каждый шаблон имеет нюансы, но толчок для начала адаптации я дам.

Адаптация под десктоп

Для начала делаем адаптацию под десктоп. Это базовый этап, от него потом и начинаются танцы с бубном. Многие ошибочно воспринимают мир, думая, что с отображением сайта на обычных компьютерах у них нет проблем, так как шаблон кто-то верстал, и он ровно смотрится при обычном разрешении. При разрешении вашего монитора да, а как на большем экране, как вы смотритесь с absolute и пикселями на экране с разрешением 1920x1080? Цель адаптации дизайна – нормальное отображение сайта на мобильных и отсутствие косяков на больших экранах.

Что делаем? Главное – переводим все большие значения в css шаблона из пикселей (px) в проценты (%). Тут есть несколько правил:

1. - Изменяем px на % только для больших значений, менять 5 px на 1% (для примера) не надо,
2. - Все работы делайте через Файербаг, потом переносите значения в реал.

Немного для общего понимания. У вас есть сайт, на котором ширина страницы 1000 px, в ней есть три блока – центральный 800 px и два боковых сайтбара по 100 px. Значит после замены на проценты размер страницы станет 100%, центральный контейнер 80% и боковые блоки по 10%. Грубо, но понятно. Теперь чуть больше конкретики.

У меня до адаптации (сохранил для истории старый файл CSS) основной контейнер был прописан в стилях так:

#container{margin:0 auto;width:1100px; …

После адаптации стал таким:

#container{margin:0 auto;width:77%;overflow: hidden !important; …

Топ-меню изменилось с:

Top-menu>ul>li ul{width:155px; …

Top-menu>ul>li ul{width:90%; …

А смещение блока content реализовано с:

#content{margin:0 220px; …

#content{margin:0 20% …

Обратите внимание на код:

overflow: hidden !important;

Им мы убираем прокрутку по горизонтали, это пригодится для мобильной адаптации, иногда имеет смысл указывать только запрет горизонтальной прокрутки с помощью:

overflow-x: hidden !important;

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

CSS под мобильные устройства

Базу создали, кстати, это самый сложный этап, теперь надо добиться, чтобы сайт корректно отображался во всех мобильных устройствах. Предыдущих манипуляций мало, так как под маленький экран все сжать в процентах не получится. Согласитесь, разглядеть на смартфоне при разрешении 320 px по ширине сайтбар в 10% невозможно.

Нам понадобится использовать @media screen and, которые вносят изменения в стили для устройств с конкретным разрешением. Я вначале определил с помощью уменьшения экрана браузера, на каком разрешении у меня начинаются проблемы с отображением. Сужая экран, я нашёл свою точку «кривизны», она начинается при ширине 1000px, значит прописывать основные мобильные стили надо отсюда – всё, что больше будет отображаться в стилях обычного десктопа, что меньше отдельными стилями.

Пример @media screen and

Я прописал CSS под мобильные устройства на шаблоне Joomla 1.5 так:

@media screen and (max-width:500px){body, tbody{-moz-hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;}

@media screen and (max-width:400px){td{word-break:break-all;}

@media screen and (max-width:1000px){td{word-break:break-all;} .page-numbers, #footer, #navigation, #header,.logo,.nav-box {display: none !important;} #content {position: auto; width: 80%;margin-bottom: 0;margin-left: 10%;margin-right: 20%;} #container { width: 90% !important;} .content-box {widht:110%} .content-box h1 {font-size: 130%;} .content-box h2 {font-size: 110%;} .content-box h3 {font-size: 120%;} .content-box h4 {font-size: 100%;} .top-menu>div {padding-right: 0px !important;} img{max-width:96% !important;height:auto !important;}

Немного конкретики по коду.

При ширине экрана меньше 1000 px у меня перестают отображаться боковые сайтбары, шапка, пагинация и футер. Моё имхо – они в мобильной версии не нужны. Это делает код:

Page-numbers, #footer, #navigation, #header,.logo,.nav-box {display: none !important;}.

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

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

img{max-width:96% !important;height:auto !important;}.

Для них указано, что максимальный размер картинки по ширине 96% (с отступами красиво), а высота идёт на автомате.

Конкретика закончилась, ещё раз по общему смыслу адаптации сайта (дизайна) через CSS.

1. - Изменяем большие значения px на %,
2. - Прописываем отдельно @media screen and для мобильных устройств.

Через @media screen and обязательно закрывайте ненужные для мобильного блоки для вывода, но переводите в % те значения, которые некорректно отображаются, так как их оставили в пикселях в десктопной версии CSS.

Как результат – удобство для пользователя при работе с Joomla Mobile было 65-70%, при адаптивном дизайне на CSS, стало 99%. Выводы на лице – проверка Яндекса и Goole на адаптивность не проходилась, сейчас проходит на ура.

Адаптивный дизайн современного сайта является одним из основных показателей его качества.

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

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

К тому же и поисковые системы ранжируют сайты, адаптированные для мобильных устройств более лояльно. Особенно это относится к ПС Google, которая прямо предъявляет к сайтам такие требования.

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

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

Основными критериями оценки удобства просмотра являются:

1. Зона просмотра.
2. Ширина контента.
3. Размер шрифтов, картинок, окон для видео.
4. Активные элементы.

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

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

Для обеспечения адаптивности сайта к просмотру на устройствах с различным разрешением экрана есть несколько способов. Основными их них являются:

• Адаптивный шаблон сайта.
• Мобильная версия сайта.
• Установка специального приложения на устройстве пользователя.

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

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

Но при эксплуатации добавляются действия для поддержания актуальности мобильной версии сайта, синхронизации информации с основным сайтом. Да и для СЕО продвижения добавляются дополнительные вопросы с дублями и т.п.

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

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

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

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

Адаптивная верстка сайта

Для создания адаптивного дизайна придется прибегнуть к технологии адаптивной верстки. Ее суть состоит в следующем:
Сделать шаблон «резиновым»

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

Для этого ширина страницы задается свойством css max-width вместо width, а уже относительно этой величины, ширину других элементов подбирают в процентах (%).

Определить «контрольные точки» ширины экрана

Определиться с контрольными точками (КТ) ширины экрана необходимо для планирования дальнейших действий.

Например.
Максимальная ширина экрана 1000 пикселей. Ширина экрана планшета – 800 пикселей, смартфона – 420 пикселей.

Эти контрольные точки (КТ) могут быть разными для различных типов сайтов. Иногда достаточно одной, к примеру 600 пикселей, а качество просмотра на более мелких разрешениях обеспечивается за счет «резиновости» шаблона.

Планирование компоновки экрана для каждой КТ

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

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

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

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

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

@media only screen and (max-width:520px) { .art-Header-jpeg{ height: 80%; display: none; } .art-Logo{ position: fixed; top: 10px; } .art-Logo-text{ display: none; } ........... операторы css ..... }

Адаптивный шаблон для блогов на WordPress

Адаптивный шаблон для своего блога на WordPress можно обеспечить несколькими способами.

1. Установить соответствующий плагин.
2. Купить готовый адаптивный шаблон.
3. Адаптировать существующий шаблон самостоятельно или заказать услугу специалисту.

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

Купить современный адаптивный шаблон в интернете тоже довольно просто, были бы деньги. Но надо, чтобы и сам шаблон Вам понравился и отвечал всем Вашим пожеланиям.

Короче я остановился на третьем варианте и решил адаптировать свой шаблон самостоятельно.

Адаптивный шаблон для WordPress самостоятельно

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

И уже начал склоняться к покупке готового шаблона, но в этот момент получил информацию о курсе двух Андреев Бернацкого и Кудлая «WordPress-Мастер от Личного блога до Премиум шаблона». Один из блоков этого курса содержал уроки по адаптации готового шаблона для мобильных устройств.

Цена на курс была сопоставима с ценой нового современного адаптивного шаблона. И я решил потратить эту сумму на приобретение курса и получить вместо готового шаблона – знания. Считаю. Что вложение было правильным и себя полностью оправдало.

Сервис Google по проверки скорости загрузки сайта для мобильных и стационарных устройств — https://developers.google.com/speed/pagespeed/insights/
Здесь же нам дают рекомендации по мероприятиям для ускорения загрузки Вашего сайта.

Хотел кратко описать еще несколько сервисов. но наткнулся на толковую подробную статью и решил не напрягаться, а дать Вам ссылку на нее — http://habrahabr.ru/post/189726/ .

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