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

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

Недавно на глаза мне попались ролики на ютюбе по адаптивной верстке и это не спроста. Просто на моём втором блоге шаблон (бесплатный из паблика) уже адаптирован под мобильные устройства: когда зайти с планшета, или телефона, то он красиво подстраивается под размер экрана. А на этом блоге seodnevnik.ru дела плохи. И я решил тоже в этом шаблоне что-нибудь подправить.

CSS-стили под разное разрешение экрана и устройство

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

Перед тем, как приступить к написанию стилей, убедитесь, что между тегами <head/>, вашего шаблона, прописана meta-строчка:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

Итак, в зависимости от размера экрана, мы можем прописать отдельные стили в файле сss: основной стиль для компьютера, потом для размера ниже 992px и 768px (для планшетов), и для 480px и 320px (для телефонов).

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

Пример:

.content{background-color: #FBFBFB; position: relative;margin: 0;padding: 0;border: 0;float: left;overflow: hidden; max-width: 768px; width: 100%;}
.sidebar1{background-color: #FBFBFB; position: relative;margin-right: 0;padding: 0;border: 0;float: left;overflow: hidden; width: 100%; max-width: 268px;}
blockquote{margin:10px 10px 10px 35px;}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
  .content{max-width: none; width: 100%;}
  .sidebar1{max-width: none; width: 100%;}
  blockquote{margin:10px;}
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
  .content{max-width: none; width: 100%;}
  .sidebar1{max-width: none; width: 100%;}
  blockquote{margin:10px;}
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
  .content{max-width: none; width: 100%;}
  .sidebar1{max-width: none; width: 100%;}
  blockquote{margin:10px;}
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {

}

То есть, для телефона не обязательно показывать сайдбар — его можно убрать вниз, а контент по ширине вытянуть на 100%. Для планшета сделать сайдбар тоже снизу, но по-красивее. Можно еще чего-нибудь намудрить в стилях и показывать тот или иной вид шаблона в зависимости от устройства с которого заходит пользователь.

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

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

http://quirktools.com/screenfly/
quirktools

http://ipadpeek.com/ — как выглядит на iPad, iPhone.
сайт на ipad и iphone

http://responsive.is/ (не актуален — сервис перестал работать, используйте другие)
responsive.is

А также здесь: http://www.viewlike.us/operator/?url=seodnevnik.ru и в других подобных сервисах.

Для Хрома есть расширение «Window Resizer». А также можно использовать стандартную фишку — нажав F12, кликните по значку телефона и вы попадете в такую среду:

консоль в браузере

Для чего нужна адаптация? Дело в том, что если пользователю неудобно находиться на сайте с мобильного устройства, то он быстро закроет страничку и уйдет. Соответственно, уменьшается время нахождения, просмотры, или проще говоря — ухудшаются поведенческие факторы. А также и CTR рекламных объявлений, если они тоже как-то криво показываются на планшетах и телефонах.

Читайте также как пройти проверку если Google пишет «Страница не оптимизирована для мобильных устройств».


Вот те видеоролики, о которых я упомянул вначале заметки:

P.S. На этом блоге я только начал пробовать адаптировать. Может что и получится smile

Поблагодарите автора репостом:
Предыдущие статьи:

2 комментария к записи “Адаптация шаблона сайта под мобильные устройства”

  • Денис
    http://fotovideoeffect.ru

    Сейчас попробуем это проделать, спасибо!

  • Сергей
    http://www.mobile-version.ru/

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

Прокомментировать

Наверх ▲