Пример адаптивного дизайна и вёрстки сайта

Теги:

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

Сайт на разных устройствах

Здесь показаны мобильный, планшет, ноутбук и декстоп, любезно нарисованные сервисом Am I Responsive. Как видно, по мере увеличения разрешения на странице появляются всё новые элементы.
адаптивный дизайн сайта

Какие правки делались в коде

Если честно, по науке делалось довольно мало. Скажем так: до изображений и шрифтов в процентах дело не дошло. И, возможно, зря, потому что логотип и титульные изображения статей могли быть поэлегантнее. Широко использовалось внедрение правила @media в CSS. Уверен, многие знают, что если задать в @media пределы по ширине, то на этих ширинах будут применяться свои стили в CSS-классах. А в нашем случае можно говорить о том, что устройства отличаются в основном шириной. В плане высоты существует прокрутка, и в нашем примере адаптивного дизайна она многое решает.

Пример внедрения @media:убираем левый блок с меню, если ширина экрана меньше 800px. Этот блок имеет id #content-left и при ширине меньше 800px он просто не показывается на экране.

#content-left {
  float: left;
  margin-left: -100%;
  vertical-align: top;
}

@media (max-width:800px) {
  #content-left {
    display: none;
  }
}

Точно таким же способом были убраны другие "лишние" элементы на небольших разрешениях экранов. Пока что пороговые значения ширины для @media выставлены исходя из моих экспериментов со сжатием браузера. Однако можно точно узнать, с каких устройств ходят на сайт, и поставить их разрешения.

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

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

Что в результате:

  • Сайт прошёл онлайн-тест от Гугл, а значит, с хорошей вероятностью будет участвовать в мобильном поиске.
  • Также веб-сайт нормально отображается большинством мобильных устройств по версии Screenfly.
  • Ну и конечно я не забыл провериться в тулбаре Google Chrome, что и вам советую всегда делать.

Конечно, это только пример адаптивного дизайна и вёрстки. Проделанная работа не говорит в пользу того, что сайт удобен для всех мобильных пользователей. Тем более, что сайт на 80% состоит из текста, и вообще непонятно, как к этому отнесутся. С другой стороны, это не означает, что отзывы о сайте будут негативными. В любом случае адаптированность для мобильных лучше, чем её отсутствие.

Вход для участников
Опрос:
Сколько сидишь за компом в сутки?: