Адаптивная верстка с чего начинать. Адаптивная вёрстка — как побороть боль? При помощи чего и как создается адаптивная верстка

Оставьте комментарий 6,950

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

Для тех, кто не в танке и впервые слышит об этой новомодной (с 2012 года) фишке, краткое пояснение:

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

Здесь следует дать одно очень важное разъяснение касательно различных похожих определений в современном веб-дизайне, а именно: адаптивный (adaptive) и отзывчивый (responsive) веб-дизайн . Очень многие ошибочно полагают, что это одно и то же. Но это не так.

Адаптивный (adaptive) vs отзывчивый (responsive)

Во-первых, необходимо различать адаптивный веб-дизайн (adaptive web design) и адаптивную верстку (adaptive layout) . Это совершенно разные понятия. Адаптивный веб-дизайн - это глобальный подход к проектированию сайта, тогда как адаптивная верстка - всего лишь частный случай способа верстки для отзывчивого (responsive) веб-дизайна .

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

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

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

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

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

Преимущества адаптивной верстки

Адаптивная верстка сайта имеет в своем арсенале два главных оружия:

1. Все элементы верстки являются «резиновыми» (flexible) - их размеры зависят от размера экрана отображающего устройства.

2. Медиа-запросы (Media Queries) - отдельная часть файла стилей, задающая различные стили в зависимости от размеров экранов отображающих устройств и их расположения в пространстве (portrait или landscape).

Что касается «резиновости», то эта плюшка задается старым добрым способом:

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

#content {
max-width: 1200px;
}

Это если вы не хотите, чтобы ширина сайта превышала 1200 пикселей (на ваше усмотрение). В этом есть определенный сенс. Дело в том, что комфортная ширина читаемого текста не более 10 – 12 слов в строке. Если статья будет растягиваться (например, при просмотре сайта на телевизоре) от края до края, то читать такой текст будет весьма затруднительно.

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

img, embed, video {
max-width: 100%;
}

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

А вот о медиа-запросах мы поговорим подробно в следующий раз. Оставайтесь на связи!

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

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

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

Проверить отображение страницы на мобильных устройствах можно на сервисах и .

Рис. 1. Мобильная выдача Яндекса и Google с пометкой о дружелюбности сайта к мобильным устройствам Что такое адаптивная вёрстка

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

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

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

Вёрстка главной страницы

Страница состоит из трёх основных блоков: верхний колонтитул (шапка), контейнер-обёртка для основного содержимого и сайдбара, и нижний колонтитул (футер). В качестве переломных точек дизайна возьмём 768px и 480px .

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

Рис. 2. Пример адаптивной верстки 1. Метатеги и раздел

1) Добавим в раздел необходимые файлы — ссылку на используемые шрифты, библиотеку jQuery, а также плагин prefixfree (чтобы не писать для свойств браузерные префиксы):

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

2. Шапка страницы

В шапке страницы поместим следующие элементы-контейнеры:
логотип ;
кнопку для показа/скрытия главного меню ;
главное меню

;
форму поиска по сайту .

L O G O

Анонс статей обернём элементом :

Дизайн Весна

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

В боковую колонку добавим список категорий, последние записи и форму подписки на рассылку:

Категории

В подвале страницы разместим информацию о копирайте, кнопки социальных сетей и ссылку на электронную почту:

Общие стили, сброс стилей браузера по умолчанию:

*, *:after, *:before { box-sizing: border-box; padding: 0; margin: 0; transition: .5s ease-in-out; /* добавим плавность переходов для всех элементов страницы*/ } ul { list-style: none; } a { text-decoration: none; outline: none; } img { display: block; width: 100%; } h1, h2, h3, h4, h5, h6 { font-family: "Playfair Display"; font-weight: normal; letter-spacing: 1px; } body { font-family: "Open Sans", arial, sans-serif; font-size: 14px; line-height: 1; color: #373737; background: #f7f7f7; } /* добавим очистку потока для всех контейнеров, внутри которых задано обтекание дочерних элементов */ header:after, .container:after, footer:after, .widget-posts-list li:after, #subscribe:after { content: ""; display: table; clear: both; } /* стилевой класс, который управляет шириной контейнера сетки*/ .container { margin: 0 auto; width: 100%; max-width: 960px; padding: 0 15px; }

Подвал сайта разделим на три равных столбца:

Footer { padding: 30px 0; background: #3C3D41; color: white; } .footer-col { width: 33.3333333333%; float: left; } .footer-col a { color: white; } .footer-col:last-child { text-align: right; } .social-bar-wrap { text-align: center; } .social-bar-wrap a { padding: 0 7px; font-size: 18px; }

За показ-скрытие верхнего меню при клике на кнопку (переключается высота меню - от нулевой до равной её содержимому) отвечает код jQuery, который мы ранее добавили в разметку страницы перед закрывающим тегом :

$(".nav-toggle").on("click", function(){ $("#menu").toggleClass("active"); });

Всем привет!

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

Недавно мне дали сверстать макет мобильного приложения и я решил наконец попробовать побороть эту боль, сделать красиво и лаконично - использовать rem. Это показалось мне самым простым решением, 100% мобильных браузеров поддерживают эту единицу. Суть в том, что мы пишем несколько строк media queries для тега html, указывая лишь базовые размеры шрифтов в пикселях, пропорционально тому, как должен выглядеть у нас макет в разных разрешениях, а остальную вёрстку без media queries верстаем как обычно, только вместо пикселей используем rem. Данная методика легко масштабируется и подгоняет макет в зависимости от базового размера шрифта.
Минимизация кода и лёгкость адаптивной вёрстки таким способом просто колоссальна!

Был единственный минус такого способа: нужно было вести постоянный пересчёт пикселей psd макета в rem, но я быстро решил эту проблему - написал специальную функцию и верстал как раньше в пикселях, препроцессор сам переводил в rem.

Но! Основной прикол в том, что я верстал такой методикой адаптивное мобильное приложение, где дизайн был одинаковый.

Когда я вернулся к адаптивке для обычных сайтов - боль ко мне вернулась ещё с больше силой, чем прежде, ведь как правило мы имеем от 3-х до 6 разных дизайнов:
1) Десктоп большой 1600-1920 пикселей
2) Десктоп маленький/ноутбук ~1100-1400 пикселей
3) Старый моник / планшет - 768-1024 пикселей
4) Недопланшет/ смартфон-переросток ~600 пикселей
5) Смартфон 300-480
6) Старый смартфон 250 пикселей.

Я конечно преувеличил, но как минимум три вёрстки делать нужно это точно.

Так вот вопрос №1 и самый главный: как минимизировать адаптивную вёрстку и сделать код красивым? Как уменьшить т.н. энтропию кода? Существует ли какой-нибудь клёвый подход/методика?

Посмотрел разные сайты крутых веб студий, в целях найти ответ там и увидел что все верстают как попало, то есть вообще не заморачиваясь.
Единственное, видел что некоторые зачем-то используют em и проценты для шрифтов вместо привычных пикселей. Вроде как для масштабирования текста, хотя непонятно как это уменьшает код для адаптивки, по моему только всё усложняет - нужно вести расчёты в зависимости от размера шрифта родительского блока и даже препроцессоры скорей всего не помогут... Незнаю зачем нужно париться задавая размеры шрифтов em единицами, заморочки с rem ещё куда не шло... Может я плохой верстальщик... Кстати особо упоротые из тех сайтов использовали em для margin и прочих box-size свойств...
Вопрос №2:
В чём смысл использовать em?
И cразу вопрос №3:
Неужели нет единой методики, неужели в вёрстке всё так плохо, что каждый как хочет так и д....чит? Или я видел неудачные примеры (хотя искал среди топовых тем themeforest и сайтов топовых веб студий)?

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

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

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

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

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

О чем вообще идет речь, адаптивная верстка что это такое. На вашем сайте должен быть ЕДИНЫЙ адаптивный дизайн, в котором используется ОДИН код с корректировкой по размеру экрана. Переключатель на мобильную версию уже не проходит, это не правильно. Можно открыть руководство от Гугла и прочитать информацию более детально.

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

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

Конечно не каждый из нас имеет под рукой монитор, планшет и телефон. Чтоб проверить ваш сайт на адаптацию, иметь в наличии все виды устройств не обязательно. Если вы используете браузер Google Chrome, можете установить себе расширение, которое называется Window Resizer . С его помощью можно быстро проверить большинство вариантов вашего адаптивного дизайна.

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

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

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

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

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

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

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

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

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

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

Как самому сделать адаптивную верстку.
Что такое медиа запросы.
Как правильно использовать медиа запросы.
Как сделать адаптивное меню.
Как сделать адаптивную галерею.
И многое другое.

Если вы надумали вникнуть в данную тему и хотите попробовать ее изучить, для начала вполне подойдут уроки из книги Бена Фрейна, которая называется Html5 и CSS3 Разработка сайтов для любых браузеров и устройств. В ней вы узнаете все про адаптивный дизайн, благодаря чему сайты будут показываться красиво на всех устройствах. Очень хорошая книга, в которой идет описание всего процесса от А до Я.

Media Queries — это медиа запросы, которые используются при адаптивной верстке сайта. Именно про них идет речь в книге Бена Фрейна. Если сказать простыми словами, это код, в который помещаются CSS стили для заданного разрешения экрана. Таким образом подгоняются все возможные варианты дизайна.

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

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

@media (max-width: 1010px) and (min-width: 992px)

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

Создаем новый файл со стилями (подключаем его к главной странице) или добавляем в уже существующий файл медиа запросы. @media (max-width: 770px) — максимальная ширина экрана 770 пикселей. И добавляем в этот контейнер все необходимые изменения, которые нужны для данной ширины экрана.

@media (max-width: 770px) { body, html { overflow-x:hidden; min-height: 960px; background-size: 100%; } #mail_bg_horizontal div { left: 274px; position: relative; top: 40px; width: 340px; } #mail_bg_horizontal .module_subscribe figure { padding-top: 46px; } #footer_menu { display: none; } #header {background-size: 100%; padding-top: 48%;} #logo-site { top: -60px; font-size: 7vw; width:100%; margin: 10px;} #logo-site span{display:inline-block; padding-left:10px;} #slogan{ top: -77px; font-size: 3vw; margin: 10px;}

@ media (max - width : 770px ) {

body , html {

overflow - x : hidden ;

min - height : 960px ;

background - size : 100 % ;

#mail_bg_horizontal div {

left : 274px ;

position : relative ;

top : 40px ;

width : 340px ;

#mail_bg_horizontal .module_subscribe figure {

padding - top : 46px ;

#footer_menu {

display : none ;

#header {background-size: 100%; padding-top: 48%;}

#logo-site span{display:inline-block; padding-left:10px;}

Теперь идем дальше, максимум 770 пикселей прошли, переходим к более меньшей ширине. @media (max-width: 650px) — добавляем все изменения, которые нужны для расширения 650 пикселей. Все происходит так же само, только уже для максимальной ширины 650 пикелей. Все необходимые изменения добавляются в один общий контейнер по данному медиа запросу.

@media (max-width: 650px) { #related_posts { border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; padding-top: 20px; width: 545px; } border: medium none; height: 28px; left: 93px; position: relative; top: -12px; width: 159px; } #header .wrapper { width: 100%;} #header .wrapper > nav ul > li { float: none; width: 100%; margin-left: 0; text-align: center; }}

@ media (max - width : 650px ) {

#related_posts {

padding - top : 20px ;

width : 545px ;

#mail_bg_horizontal .module_subscribe button {

border : medium none ;

height : 28px ;

left : 93px ;

position : relative ;

top : - 12px ;

width : 159px ;

#header .wrapper { width: 100%;}

#header .wrapper > nav ul > li {

float : none ;

width : 100 % ;

margin - left : 0 ;

text - align : center ;

После этого переход к следующей ширине, например 500 пикселей. Вносим в этот контейнер все необходимые свойства, которые должны помещаться в экран под максимальную ширину 500 пикселей. @media (max-width: 500px).

@media (max-width: 500px) { body > #content > .wrapper .navigation > .next { background: rgba(0, 0, 0, 0) url("images/bow_right.png") no-repeat scroll 0 0; display: none; float: left; height: 30px; margin-left: 1px; margin-top: -4px; width: 34px; } #mail_bg_horizontal .module_subscribe button { border: medium none; height: 28px; left: 96px; position: relative; top: -12px; width: 159px;}}

@ media (max - width : 500px ) {

body > #content > .wrapper .navigation > .next {

background : rgba (0 , 0 , 0 , 0 ) url ("images/bow_right.png" ) no - repeat scroll 0 0 ;

display : none ;

float : left ;

height : 30px ;

margin - left : 1px ;

margin - top : - 4px ;

width : 34px ;

#mail_bg_horizontal .module_subscribe button {

border : medium none ;

height : 28px ;

left : 96px ;

position : relative ;

top : - 12px ;

width : 159px ; } }

В конце еще уменьшаем ширину в медиа запросе к 400 пикселям. В этом контейнере указываем все необходимые изменения по заданной ширине. @media (max-width: 400px). После каждого добавления проверяем, что получается. В любой момент можно изменить и внести свои корректировки в файл со стилями.

@media (max-width: 400px) { #header { padding-top: 61%;} #mail_bg_horizontal div { top: 11px; left: 37px; width: 174px; font-size: 13px;} #mail_bg_horizontal .module_subscribe { position:relative; top:-15px; left:-69px;} #mail_bg_horizontal .module_subscribe button { top: -10px; left: 18px;} #mail_bg_horizontal { height: 186px;} #related_posts { border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; padding-top: 1px; width: 255px; }}

@ media (max - width : 400px ) {

#header { padding-top: 61%;}

#mail_bg_horizontal div { top: 11px; left: 37px; width: 174px; font-size: 13px;}

#mail_bg_horizontal .module_subscribe { position:relative; top:-15px; left:-69px;}

#mail_bg_horizontal .module_subscribe button { top: -10px; left: 18px;}

#mail_bg_horizontal { height: 186px;}

#related_posts {

border - bottom : 1px solid #ccc;

border - top : 1px solid #ccc;

padding - top : 1px ;

width : 255px ;

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

После обновления, Гугл рекомендует открывать доступ к css файлам, файлам плагинов, темы, скриптов и картинок для робота, только после этого вы сможете удачно пройти проверку.Для этого необходимо в файле robots.txt открыть все пути к необходимым файлам, чтоб робот их увидел. Вот пример с моего robots.txt:

/ wp - content / themes / * . jpg

Allow : / wp - content / themes / * . png

Был интересный случай, когда я делал адаптивную верстку сайта в начале 2015 года. Заказчик воспринял все слова очень серьезно и захотел адаптивный дизайн под все разрешения экрана, которые я ему показал в дополнении Хрома. Я не стал спорить с желанием заказчика и подогнал ему полностью под все возможные варианты. Хозяин — Барин, заплатил правда в два раза больше.

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

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

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

Конечно вы не понимаете ничего в отступах, границах...что и как должно быть по стандартам в макете (вам это и не нужно), но на некоторые вещи обязательно обратите внимание. Это поможет вам сориентироваться перед составлением ТЗ для дизайнера.

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

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

Смартфоны портрет и ландшафт (минимум 320 px — максимум 480 px);
Планшеты портрет и ландшафт (минимум 768 px — максимум 1024 px);
Компьютеры и ноутбуки (минимум 768 px — максимум 1024 px);
Компьютеры и ноутбуки (минимум 1824 px);

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

Благодаря вставки некоторых частей кода, верстка будет отображаться нормально на всех браузерах, включая вечно проблемный IE. И не имеет никого значения какой у вас движок, джумла или вордпресс. Кстати, делать адаптивную версткусайта на движке WordPress для меня лично одно удовольствие.