|
|
|
|
|
Адаптивному дизайну в последнее время было посвящено множество статей, но действительно ли адаптивный дизайн станет общепринятым стандартом?
Если коротко: да.
Целью адаптивного дизайна является универсальность сайта для различных устройств. Для того, чтобы сайт было удобно просматривать с устройств различных разрешений и форматов, по технологии адаптивного дизайна не нужно создавать отдельные версии сайта для отдельных видов устройств. Один сайт может работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет.
Учитывая, что в 2012 пользователей только одних смартфонов стало больше на 55% больше, можно уверенно сказать, что за адаптивным дизайном будущее.
Как он работает?
Слишком хорошо, что бы быть правдой? Все началось со статьи Итана Маркотта "Responsive Web Design" в 2010 году. Вместо создания страницы размером 800 пикселей и растягивания ее на экране, адаптивная страница сама подстраивается под размеры экрана.
Рассмотрим в качестве примера решетку, состоящую из 9 квадратов, под буквами A–I. На маленьком экране вроде планшета или старого компьютера с малым количеством пикселей, элементы будут иметь вид решетки 3 x 3.
.PNG)
Когда экран шире, решетка растягивается.
Если уже, соответственно сжимается.
Теперь реальный пример с сайта Microsoft.
Когда экран уменьшается, эти секции складываются как кубики.
Для большей наглядности перейдите на сайт www.microsoft.com и поиграйте с разными браузерами.
В своей мобильной версии, Microsoft сохранила все элементы десктопной. Но на это идут не все. Одно из отличий мобильной версии - малый объем памяти браузера и соответственно возникают трудности с размещением больших объемов контента на экране. Посмотрите, как Smashing magazine избавились от лишней информации.
Десктопная версия:
Полноразмерная страница имеет два уровня навигации слева, основной контент расположенный по центру, поле поиска и рекламу слева.
Вот как ее увидит обладатель iPad.
Когда размеры экрана ограничены, Smashing Magazine оставили рекламу и поиск поиска слева но передвинули навигацию наверх. Там меню по прежнему заметно, но занимает гораздо меньше места.
А вот как она выглядит для владельца Kindle Fire.
От рекламы пришлось избавиться т.к. она занимала слишком много пространства. Поиск переместился наверх, а двухуровневое меню растянулось в одни линую, чтобы дать место основному контенту.
А теперь, мобильный телефон.
С мобильной версии исчезла реклама вместе с кнопками социальных сетей. Навигационное меню превратилось в маленькую кнопку с раскрывающимся списком
Влияет ли адаптивный дизайн на SEO?
Попытаемся ответить на вопрос о том, способствует ли использование адаптивного дизайна оптимизации конверсии.
Юзабилити.
Основная цель Гугла — находить сайты, которые нужны пользователям. Если посетители заходят на ваш сайт и сразу же возвращаются к поисковой выдаче, это сигнализирует Гуглу о том, что на вашей сайте что-то не в порядке.
Если мобильная версия вашего сайта значительно отличается от того, что пользователи привыкли видеть на десктопной или у вас нет мобильной версии, вы уже потеряли 61 % пользователей, которые вернуться в Гугл, что бы найти более читабельный сайт. В любом случае, ваш показатель отказов будет расти, а позиции снижаться. С адаптивным дизайном ваши посетители получат все что им требуется в нужном формате.
Дублированный контент.
Не волнуйтесь, даже если контент на мобильной версии сайта дублирует основной, вы не попадете под Панду. Но факт остается фактом: у вас 2 версии сайта и посетители могут случайно попасть не туда. Использование адаптивного дизайна означает, что контент расположен только в одном месте в сети Интернет.
Ранжирование.
Сам Гугл говорил, что сайты оптимизированные под мобильный поиск ранжируются выше. Он рекомендует адаптивный дизайн, разъясняя: сайты, использующие адаптивный дизайн, будут ранжироваться так же хорошо, как сайты, разработанные специально для мобильных устройств. Это особенно хорошо для:
Построение ссылок.
Используя адаптивный дизайн, при постановке ссылки на основной сайт, вы получаете ссылку и на мобильную версию. Мобильные сайты — относительно новое явление и соответственно у ваших конкурентов будет меньше обратных ссылок. Это даст вам преимущество.
Примеры.
Вот несколько замечательных примеров таких сайтов.
http://blogs.adobe.com/digitalmarketing/digital-marketing/mobile/responsive-web-design-and-web-analytics/
http://inspirationfeed.com/inspiration/websites-inspiration/60-examples-of-responsive-website-design/
http://www.clicknewz.com/5984/benefits-of-responsive-web-design-examples/
Ну и конечно же Microsoft и Smashing Magazine уже упоминавшиеся ранее.
Результаты.
Как вы уже догадались, если ваш сайт еще не был оптимизирован под мобильные устройства вы заметите снижение показателя отказов от пользователей этих устройств. Так, владелец сайта Distiller утверждает, что с внедрение адаптивного дизайна число посетителей в месяц выросло на 400%.
Что интересно, отключение адаптивного дизайна на Distiller не привело к обратным результатам. Тем не менее, этот пример свидетельствует о том, что использование адаптивного дизайна в нужное время способно привести к удивительным результатам.
Минусы.
Адаптивный дизайн это не панацея от всех проблем. Необходимо знать о некоторых недостатках, прежде чем решиться на его использование.
Временные затраты.
Разработка адаптивного дизайна весьма дорогостоящая и сложная процедура. Переход на на новый дизайн займет гораздо больше времени и сил, чем любая другая модернизация сайта. С другой стороны, к тому времени когда другие только расчехлятся на новый дизайн, у вас уже все будет готово.
Большие страницы.
Если у вас на странице много контента, использование адаптивного дизайна означает, что он ВЕСЬ будет отображен на экране мобильного устройства. Только представьте, как вот ЭТО поместится на экран мобильника.
Вот почему сайты вроде NYTimes.com и CNN.com имеют отдельные мобильные версии, где отображена только основная информация. Если у вас такой же огромный сайт, имеет смысл задуматься об отдельной мобильной версии сайта.
Малые размеры экрана.
Имейте ввиду, что ваши мобильные пользователи имеют дело с маленьким экраном и вместо мыши используют собственные пальцы. И если у вас сложный интерактивный сайт, то добраться до контента привычным способом будет затруднительно. В этом случае, для облегчения жизни пользователям лучше сделать мобильную версию сайта.
Нужен ли мне адаптивный дизайн?
Если у вас тяжелый и интерактивный сайт, то вам больше подойдет облегченная мобильная версия (и у вас вероятно уже есть). Но если у вас маленький сайт и еще сомневаетесь, стоит ли переходить на адаптивный дизайн, самое время обратиться к статистике.
Данные Google Analytics.
Зайдите во вкладку Mobile Overview в разделе Audience. Если число мобильных пользователей меньше 5%, не стоит заморачиваться. Если их больше, кликните на Goal Set или Ecommerce metrics (они показывают конверсию) вверху страницы под вкладкой Explorer.
Кто конвертится лучше? Если конверсия мобильных посетителей меньше половины от конверсии десктопных посетителей, то эти показатели ниже обычных и вам следует заняться оптимизацией.
Как мой сайт выглядит на экране мобильных устройств?
Перейдите во вскладку Standard Reports > Audience > Mobile > Devices и измените разрешение экрана (“Screen Resolution”). Там представлены 10 наиболее распространенных разрешений экрана, которые используются вашим посетителям. Можно использовать Screenfly, что бы видеть свой сайт на разных устройствах.
Довольны ли посетители мобильной версией?
Проверьте показатель отказов во вкладке Standard Reports > Mobile > Overview. Он должен быть примерно таким же, как и у десктопных посетителей. Если позволяет время, проведите полноценный аудит вашей мобильной версии. В State of Search недавно был опубликован подробный мануал, рассказывающий на что конкретно нужно обратить внимание.
Советы по использованию адаптивного дизайна.
Итан Маркотт, в своей статье подробно рассказывает о возможностях адаптивного дизайна и рекомендует использовать облегченные темы популярных CMS (примеры для WordPress, Drupal and Joomla).
1. Используйте сжатые изображения.
74% мобильных посетителей покидают сайт через 5 секунд ожидания загрузки страницы. Smush.it — хороший сервис для сжатия картинок.
2. Ориентируйтесь на все размеры экранов.
Многие дизайнеры были бы рады сделать 1 вариант для мобильных телефонов, 1 для планшетов и 1 для компьютеров, а затем показывать соответствующий дизайн. На самом деле, мобильные устройства намного многообразнее. Есть большие и маленькие смартфоны, планшеты от Kindle Fire до Samsung Galaxy и декстопные мониторы размером до 30 дюймов.
3. Всегда показывайте весь контент.
Кажется невозможно поместить весь контент с экрана компьютера на экран мобильного телефона. Но это именно то, что делает адаптивный дизайн. Как вы могли видеть из вышеприведенных примеров, единственное чем жертвовали — это реклама и многоуровневая навигация. Весь контент остался на месте.
4. Оптимизируйте под сенсорные телефоны.
Если вы до сих пор не используете onmouseover JavaScript, имейте ввиду что пользователи планшетов не всегда пользуются мышью, а десктопные пользователи могли установить Windows 8, поддерживающую сенсорный ввод.
5. Тестируйте на всех браузерах.
Помните старые добрые времена, когда вы жаловались, что вам приходится тестировать сайт и на IE и Firefox? Теперь у вас есть:
Компьютер:
IE9 для Windows 7
IE10 для Windows 8
Firefox
Chrome
Safari
Планшет/мобильный
Safari
Default Android browser
Chrome beta
Dolphin
Opera
Firefox
И это только самые популярные! А вам еще придется проверить на них разные разрешения. Но поверьте, это того стоит.
Адаптивный дизайн позволяет, обходясь минимальным набором инструментов, сделать мобильную версию вашего сайта. На сегодняшний день это уже по-настоящему важно. Возможно, вы даже сейчас читаете эти строки с планшета или с мобильного телефона. И количество мобильных интернет-пользователей будет только расти. Мобильные устройства в свою очередь, отличаются разнообразием разрешений, и уже невозможно просто оптимизировать сайт под несколько самых популярных разрешений. Адаптивный дизайн — это, вероятно, наиболее перспективный подход к решению этой проблемы.
Оригинал статьи на английском языке: http://www.seomoz.org/blog/seo-of-responsive-web-design |
|
|
|
|
|
|
|
| Цитата: |
1. Используйте сжатые изображения.
74% мобильных посетителей покидают сайт через 5 секунд ожидания загрузки страницы. Smush.it — хороший сервис для сжатия картинок.
|
Обзор инструментов для сжатия изображений |
|
|
|
|
|
|
|
Отличная статья по теме и совсем без воды.
Сравнение методов создания мобильных версий сайтов |
|
|
|
|
|
шикарная инфа - думаю новая ветка в развитии
чтобы не делать по 100 дизов под разные версии |
|
|
|
|
|
| HTML5 CSS3 LESS рулят. Из коробки уже есть в Joomla3 и последнем WordPres |
|
|
|
|
|
|
|
|
