Адаптивная вёрстка и адаптация сайта под мобилки. Мнение дилетанта.

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

1. Адаптируем под размер.
2. Адаптируем под интернет.
3. О чём не стоит забывать адаптирую сайт под мобильные устройства.

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

Адаптируем под размер.

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

Пример @media all and (min-width: 480px) and (max-width: 960px) { /*здесь будут стили для браузера ширина окна которого больше 480px но меньше 960px*/ } С помощью @media, кроме размера окна можем определять тип устройства, его ориентацию(альбомная, портретная) и ещё много других параметров.

Медиа запрос может располагаться в css файле, как в примере выше, или как атрибут тега link В медиа запросах можно использовать логические операторы. В первом примере использован оператор "and" который позволил задать диапазон объединив условия минимальной и максимальной ширины. Также можно использовать оператор "not" - логическое не. Вместо оператора "или" используется запятая.

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

Адаптируем под интернет.

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

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

Если собираетесь решить эту проблему старым добрым display: none; должен вас разочаровать. Ничего не выйдет. Блоки конечно выводиться не будут, но вес страницы это не уменьшит.

Следующими в очереди на адаптацию идут картинки. Есть старый способ как подогнать картинку под ширину блока. img { width: 100%; height: auto; } Браузер отресайзит картинку с сохранением пропорций. Всё будет выглядеть отлично но мы снова заставляем пользователей качать не нужные им данные. Для того чтобы отресайзить картинку браузер будет загружать её полноразмерный вариант. Получается что и для дэсктопов и для смартфонов будет грузиться одна и таже "большая" картинка. Согласитесь, было бы лучше если браузер в смартфоне качал картинку меньшего размера и соответственно меньшего веса. К сожалению на чистом html css мы это сделать не можем. Отчасти эту проблему решает тег picture. Проблема в том что он не включён в спецификацию и поддерживается не всеми браузерами. Подробнее про адаптацию картинок

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

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

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

Ещё одна особенность мобильных посетителей - у них нет возможности навести палец на какой-нибудь элемент, следовательно :hover не сработает как нам нужно.

В заключении совет. Старайтесь как можно меньше использовать абсолютных значений. Задав значения в % или em вёрстка сама будет подстраиваться под размер окна браузера.

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

По названию поста можно понять что адаптивной вёрсткой я заинтересовался недавно поэтому прошу высказывать свой замечания и дополнения в комментах. На webonlife критика приветствуется.