Всеобщая «мобилизация»: переходим на адаптивный дизайн

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

А вы знаете, каким видят ваш сайт пользователи мобильных устройств? К счастью, для проверки есть отличный сервис — responsinator.com

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

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

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

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

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

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

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

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

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

В зависимости от вашего бюджета и знаний CSS/HTML, вариантов может быть несколько.

Заказать адаптивную верстку у фрилансера

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

Найти готовый дизайн

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

  • www.templatemonster.com — одна из самых популярных коллекций платных шаблонов для разных CMS и просто HTML-сайтов.
  • www.templatemo.com — множество бесплатных вариантов современного дизайна.

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

Использовать фреймворки

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

Огромный список адаптивных фреймворков на любой вкус вы найдете на Хабре. Но большинство из них достаточно сложные в использовании и тяжелые в объеме. Поэтому тем, кто любит минимализм я рекомендую другой список легких адаптивных фреймворков от Beloweb.ru. Заодно присмотритесь к блогу, здесь очень много полезных «вкусняшек» для дизайнеров и верстальщиков.

Сделать верстку самому

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

Мета-тег viewport
Который определяет тип устройства, с которого посетитель зашел на сайт и установит верную ширину экрана. Просто скопируйте этот код в head своего сайта.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Правило @media
Благодаря которому мы можем прописать разные стили для одних и тех же блоков в своем css-файле. Выглядит это примерно так:

#left{
	width: 600px;
	float: left;
	margin-right: 10px;
	}
#right{
	width: 400px;
	float: right;
	}	
	
@media only screen and (max-width: 1010px){ 
	#left, #right{
		width: 98%;
		float: none;
		margin: 10px auto;
		}
}

В этом примере блок #left имеет ширину 600 пикселей и будет располагаться слева от блока #right шириной 400 пикселей. Но если разрешение монитора меньше 1010 пикселей, мы убираем обтекание у обоих блоков и растягиваем их на 98% ширины экрана.

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

  • 320px дляiPhone 3-5 в вертикальном положении
  • 480px для iPhone 3-4 в горизонтальном положении
  • 568px для iPhone 5 в горизонтальном положении
  • 384px для смартфона в вертикальном положении
  • 600px для смартфона в горизонтальном положении
  • 768px для iPad в горизонтальном положении
  • 1024px для iPad в вертикальном положении

Полный список разрешений можно найти на responsinator.com или в отчете Яндекс.Метрики для вашего сайта (раздел Технологии/Разрешения дисплеев). Одним словом, тем, кто знаком с версткой сайтов, не трудно будет разобраться в этом вопросе.

Но если вы не совсем уверены в своих силах, рекомендую курс Михаила Русакова HTML5 и CSS3 с Нуля до Гуру.

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

Кстати, если читаете статью с мобильного, напишите, все ли на месте, все ли удобно? А на сегодня все. Если у вас остались вопросы или дополнения — добро пожаловать в комментарии, они как обычно открыты для всех.

  • http://trickythoughts.ru/ Кай

    Хороший намек…:-) и рекомендованный сервис.
    Понятно конечно, что нужен адаптированный под мобильные устройства дизайн, но как вы правильно заметили стоит он копеечку… надо думать. Судя по тому что у вас дизайн изменился, вы уже приобрели опыт. Без особого раскрытия тайн, не подскажете в каких ценовых пределах это удовольствие будет стоить?

    • Ольга

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

      • http://trickythoughts.ru/ Кай

        Да, шаблон у меня сложноватый. Но я его планирую менять попозже. Уже надо…
        надо мозговать.:-)

    • http://апогея.рф Илья

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

      • http://trickythoughts.ru/ Кай

        О, спасибо за ценовую прикидку, в принципе нормально…

    • http://artabr.ru Артем

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

      • http://trickythoughts.ru/ Кай

        Хорошо, постучусь, в принципе как временный вариант было бы самое ТО!:-)

      • Ольга

        Артем, а html-шаблоны там есть? :)

        • http://artabr.ru Артем

          Есть и хтмл, тебе нужно?

          • Ольга

            Конечно нужно, я никогда не откажусь подсмотреть новые идеи :)

            • http://artabr.ru Артем

              Тогда лови, привет от Ларисы))) http://themes-store.ru/

              • Ольга

                ааааа, ты про этот сайт :) он мне знаком)))

              • http://artabr.ru Артем

                Есть еще сайты, но вот так сразу не найду. Как найду, стукнусь…

  • http://апогея.рф Илья

    Посмотрел с телефона — сайт не плохо смотрится :) Что касается использования @media, internet explorer его по сей день не поддерживает :(

    • http://artabr.ru Артем

      Почему не поддерживает, последние версии все поддерживают, а вот с 8-ой и выше нет поддержки тут вы правы, но кто сейчас пользуется 8-ой версией ИЕ?

      • http://trickythoughts.ru/ Кай

        Все компании, которые сидят на лицензионной софте и очень большая толпа простых пользователей…:-))) Так что, поверь, очень много народу…

        • Ольга

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

          • http://trickythoughts.ru/ Кай

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

          • http://trickythoughts.ru/ Кай

            кстати, у вас реально классный дизайн получился и в мобильном варианте и основной. Кнопки соцсетей вообще — зачет!:-)

            • http://artabr.ru Артем

              Что-то ты утрируешь. У нас в конторе весь софт лицензионный, да Хрюн стоит, но это не мешает пользоваться 9 ИЕ, который почти все поддерживает и хромом. А если в конторе до сих пор 7 ослом пользуются, то это надо сисадмину по башке настучать за то что не вовремя обновления делает

        • http://wpixel.ru Denis

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

    • Ольга

      А мы не поддерживаем exploer! Серьезно, процент тех, кто заходит с него мизерный, стоит ли доставать бубен…

  • http://pasagir.ru Pasagir

    Отличный пост! Да-да..пожалуй, создавая следующий проект — буду задумываться уже об адаптации под мобильные устройства.. ну и так все проекты проверить надо..

    • Ольга

      Главное — проверить статистику. Если процент посетителей с мобильников небольшой, то можно отложить этот вопрос. Если больше трети — я бы задумалась уже сейчас)))

  • http://mir-domohozyaiki.ru Галина

    Ольга, поздравляю с обновкой!

    У меня стоит плагин WPtouch Mobile, и по-моему не плохо справляется. Заходила на свой сайт с планшета и с айфона, может быть не так суперски выглядит, как у Вас сейчас, но вполне-вполне читаемо. Совсем не так, как показывает сервис responsinator.com.

    Мысли поменять шаблон уже есть, и, пожалуй, Вы правы, нужно рассматривать адаптивный. Спасибо за статью!

    • Ольга

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

  • http://i-shipilov.ru Иван

    Могу порекомендовать сервис собственной разработки:
    http://webable.ru/seo/mobileview
    (по крайней мере, он русскоязычный)

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

    • Ольга

      Иван, вы — молодец :) спасибо за ссылку.

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

  • http://i-shipilov.ru Иван

    Ольга а что насчет ежемесячного отчета? Не будет?

    • Ольга

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

  • http://ideafox.ru Дмитрий

    Привет, Ольга)
    А ты rss отключила? У меня в ридере вообще нет уведомлений с твоего блога. Пользусь feedly + greader. Короче нет обновлений твоей rss-ленты

    • Ольга

      Привет, Дима! Специально с RSS ничего не делала, если только случайно «задела». раньше все было ок? Я только что проверила feedly и не заметила никаких изменений, все статьи у меня отобразились и старые, и вот эта.

  • http://ideafox.ru Дмитрий

    смотри, webhow.ru/feed все нормально
    через фидбурнер не работает

    • Ольга

      Ты имеешь ввиду http://feeds.feedburner.com/webhow_ru ?
      Дима, ты не мог бы или на почту скрин проблемы прислать или тут ссылки оставить на ридеры, в которых пропал мой фид? Буду очень благодарна, а то теперь места себе не нахожу )))

  • http://ruskweb.ru/ Сергей

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

    Но зато благодаря твоей статье сподвигся верстку на 5й хтмл перевести)

    • Ольга

      Привет, Сережа! Меня саму сподвигла статья Димы-лемура)))

      • http://ideafox.ru Дмитрий

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

        • Ольга

          Приятно слышать =) Спасибо! Давно оперой не пользуюсь, а в мобильных браузерах даже не пыталась разобраться. Стоит что-то по умолчанию и ладно))) А ведь целая тема: у мобильных браузеров свои лидеры, свои особенности.

  • http://ideafox.ru Дмитрий

    а нечего скриншотить, Оля.
    В фидли просто не было анонсов через фидбурнер. Вот и все. через /feed все нормально.

  • vinc

    Привет, а что-то типа финстрипа будешь делать за июнь или июль? Хотелось бы посмотреть, как твои дела. Хорошо пишешь ;)

    • Ольга

      Привет! Финальный отчет по марафону будет в начале августа или в конце июля.

  • http://tazbih.com Serj

    Чтото я прочитал пост, залез к себе в шаблон и решил ничего не трогать!

    • Ольга

      Все верно, у вас шаблон и без правок адаптивный =)

  • http://adobe-master.ru Владислав

    У меня он сразу был адаптирован)

  • http://zenpr.ru Zenpr.ru

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

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

  • https://plus.google.com/112554913236914203713 Андрей Назыров

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

  • https://plus.google.com/115265093375890553734 Alexey Zakharov

    Для создания адаптивного дизайна сайта с чистой семантической вёрсткой используйте MACAW !!! Всем рекомендую !!!

  • https://www.facebook.com/app_scoped_user_id/1586427004978318/ Teach Teach

    Привет, я проверяю здесь:

    https://www.google.com/webmasters/tools/mobile-friendly/