Адаптивный дизайн — легко

Здравствуйте уважаемые начинающие веб-мастера. Продолжим тему Адаптивный дизайн

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

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

Самый простой ответы на эти вопросы я нашёл у Константина Кирилюка.

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

Приступим.

Первое, что нужно сделать — это добавить в область тега <head>, мета-тег vievport.

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

Мета-тег vievport сообщает браузеру о том, как именно обрабатывать размеры страницы, и изменять её масштаб.

Атрибут тега content имеет два значения, указанные через запятую:

1. width=device-widthd, где width — ширина контента, а device-widthd — константа, которая задаёт его ширину в соответствии с шириной экрана.

2. initial-scale=1 — начальный масштаб страницы. Единица определяет масштаб 1:1. Если не указать это значение, то браузер в мобильных устройствах уменьшит все размеры на столько, на сколько уменьшится экран.

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

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

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

Получить этот файл можно здесь. Скачайте архив mobilefriendly.zip, распакуйте его, и загрузите в папку с Вашей темой оформления, файл mob-style.css.

Это и есть нужная нам таблица стилей.

Теперь, чтобы файл заработал так, как сказано выше, необходимо в код шаблона, перед закрывающим тегом </body> добавить скрипт, который будет определять, является ли браузер мобильным, и если нужно, отключать основную таблицу стилей, и включать mob-style.css.

Код скрипта:

<script>
function mobilefriendly() {
  if ( !(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) ) return;
  var styles = document.styleSheets;
  if ( styles.length > 0 ) for ( i = 0; i < styles.length; i++ ) styles[i].disabled = true;
  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.type = 'text/css';
  link.href = 'mob-style.css';
  document.head.appendChild(link)
}
</script>

Осталось добавить в открывающий <body>, атрибут onload в значении которого указать вызов JavaScript функции mobilefriendly

<body onload="mobilefriendly()">

На этом всё. Увидеть новый адаптивный дизайн можно только на мобильном устройстве, так как mob-style.css будет подключаться только не нём.

Можно в этом файле что-то подправить или добавить, но это уже для тех, кто понимает css.

Проверить правильность работы файла и скрипта можно в инструментах Google для веб мастеров, в разделе «Удобство просмотра на мобильных», или в PageSpeed Insights.

Адаптивный каркас сайта < < < ◊ > > > Меню для адаптивных версий сайта

Желаю творческих успехов.

Запись опубликована в рубрике SEO. Добавьте в закладки постоянную ссылку.

9 комментариев на «Адаптивный дизайн — легко»

  1. stariс говорит:

    Спасибо. Вот она невнимательность.

  2. Владимир говорит:

    У Вас в тексте статьи досадная «очепятка»: вместо viewport дважды написано wievport (а в примере кода — все верно).
    А за Ваш сайт и отсутствие мелькающих баннеров — спасибо!

  3. Василь говорит:

    Дык, я Борисова точно так же и воспринимаю..)))) .. пиарится в последнее время парень, прям в лом. Ну, ему семью кормить, а мы уж люди обстоятельные, все с чувством, с расстановкой. Да и на простой заманушке нас не проведешь…))))
    Спасибо за «вкусности»
    С уважением к труду.

  4. stariс говорит:

    Антиспам у меня не сложный — плагин Kama SpamBlock, он есть в WordPress.org, можно скачать оттуда. Но он настолько крутой, хоть и маленький, что блокирует не только автоспам, но и сообщения о новых комментариях, которые WP отправляет на мой майл. Так что приходится комменты проверять вручную. Ну зато автоспаму стена, пока не пробиваемая. Интересно, как Вы мой антиспам просекли?

    Подписку я убрал. Посещаемость пока не высокая — 450, комментов не много, желающих подписаться тоже, чуть больше соти, новые статьи выкладываю редко, так что не сложно проводить рассылку в ручную через mail.ru из Контактов. То-же самое и с Subscribe To Comments. А скрипт вот, а это плагин для GIMP. Пользуйтесь на здоровье.

    Насчёт Борисова — личность известная. Парень фонтанирует эмоциями. Только не забывай что он инфобизнесмен, а инфобизнес на 80% замешен на лукавстве. Так что нужно тщательно отделять зёрна от плевел.

  5. Василь говорит:

    И еще.
    Поделитесь как вы такой классный антиспам сделали????
    Очень нужно.
    С уважением.

  6. Василь говорит:

    Отличные статьи на всем блоге!
    Я сам старпёр, уже 55…))), поэтому вас читать вдвойне интереснее.
    Про проверку под мобильные, то есть замечательный сервис quirktools.com.
    Под любые форматы проверяет и даже под заданные.
    Я не пиарю. Просто делюсь.
    ( на мой сайт можете не смотреть: 5-й проект с нуля почти. Просто в свете выхода рекомендаций Ал. Борисова проще было вообще все заново начать)
    А вот формы подписки я у вас так и не нашел. И обещанные «вкусности» ваши так и не получил…

  7. PromoRu.net говорит:

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

  8. stariс говорит:

    Получится то получится, но имейте в виду, что «легко» и «красиво» понятия не совсем совместимые. Я же говорю, что мобильные стили простейшие, хотя Google они вполне устраивают. То есть такие требования как размер шрифта, размер активных элементов, область просмотра, и размер контента — выполняются. А вот красоту придётся наводить самому.
    Посмотрел Ваш сайт. Дизайн красивый. Но действительно, проблемы есть, как и у меня кстати. У всех, наверное есть проблемы. У Вас, например слишком рано включаются @media. На 1100 пикселях ещё можно оставаться на резиновом варианте, где-то до 650 — 750 пикселей, а потом уж начинать перестановки. И ещё, баннер закрывает название сайта с тех же 1100 пикселей. С этим тоже нужно что-то делать. И вообще, почти все рекламные баннеры вылезают, и блоки кнопок соцсетей. Рекламу на мобилах, наверное вообще лучше отключить. Или уж переделать на резиновую.
    Что-то нужно делать со скоростью загрузки. Всё в желтых и красных тонах. Например «Можно ли заработать в интернете, и как это сделать», грузится 5.5 секунд. 3 секунды — это уже много, а для мобил вообще катастрофа.
    Хотя, по моим наблюдениям, на сайты, подобные этим нашим, с мобил процент заходов очень маленький, учатся в основном на десктопах, так что наверное можно не париться. Вот на строительный сайт у меня с мобил 50%, поэтому приходится напрягаться.
    Кстати посмотрите http://sekretymastera.ru/ на сжатом экране. Я там удачную менюшку сайдбара сверху сделал. Если понравиться, могу обьяснить как у Вас сделать подобную. Туда и «Похожие статьи» можно засунуть, и вообще весь сайдбар.
    Может убрать всю имеющуюся у Вас адаптацию, да сделать самой по новой? Не так уж и сложно. Основной красивый дизайн у Вас есть, Думаю уж Вам-то будет вполне по силам его адаптировать. С моими подсказками.

  9. Людмила говорит:

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *