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

Технологии вёрстки сайтов постоянно развиваются и расширяют свои возможности. То, что раньше было сложным и требовало привлечения специалистов, сейчас делается всё проще и быстрее. И сайты становятся совсем другими – более удобными и понятными, и они учатся отзываться на действия пользователей. Естественным сопутствующим процессом данному развитию является устаревание некоторых отдельных технологий. Например, анимированные баннеры можно делать посредством возможностей HTML5, в то же время Flash безвозвратно утратил свои позиции. Прогресс не стоит на месте. Чтобы ваш сайт был современным и эффективным, необходимо также не стоять на месте, а развиваться.

• Фиксированная вёрстка была самой первой. Долгое время все сайты делались с расчетом на самое распространенное разрешение экранов, которое медленно, но верно росло.
• Резиновая вёрстка стала выходом, когда разрешений экранов стало несколько. У большинства мониторов разрешение было 800х600, при этом постепенно стали появляться мониторы с разрешением 1024х768 и даже 1280х1024, и до кучи в обиходе было 640х480. Тянущиеся по ширине страницы занимали всё доступное пространство и при этом были легко читаемыми.
• Мобильная версия дала возможность владельцам мобильных телефонов более-менее сносно пользоваться сайтами. Правильная мобильная версия требовала слишком много усилий, так как затрагивала не только вёрстку, но и программный код. Фактически это была вторая версия сайта, упрощённая и облегчённая.
• Адаптивная вёрстка даёт возможность автоматически подстраиваться под текущие размеры окна браузера. И это действительно вёрстка, а не вмешательство в программный код, отвечающий за функционал. Может сочетаться с резиновой вёрсткой сайта – тянуться при ширине экрана от 1024 пикселей и выше, а при меньшой ширине – адаптироваться к актуальному разрешению. При этом может включать в себя ограничение ширины «резины», дабы не растягивать содержимое сайта до неудобочитаемого состояния на широких мониторах.

Статистика разрешений экрана по состоянию на сентябрь 2015 года

Данная статистика используемых разрешений рассчитана на основании количества посетителей сайтов с разными разрешениями экрана, зафиксированных сервисом LiveInternet. Статистика постоянно меняется в следствие появления и распространения новых устройств. Например, за последние 2 года количество устройств с экранами 1366x768 выросло на 20% за счет продаж недорогих ноутбуков и телевизоров, имеющих доступ в интернет, но доля упала на 1%. За это же время прирост количества устройств с разрешением 1920x1080 составил более 50%, доля увеличилась на 2%, а значит всё большее число резиновых сайтов, тянущихся без ограничений, а также сайтов с фиксированной шириной, хуже выглядят на экранах с таким разрешением.

Разрешение Доля сейчас 2.5 года назад 1366x768 26% 27% 640x480 16% 4% 1024x768 12% 15% 1920x1080 11% 9% 1280x1024 8% 14% 1280x800 8% 10% 1600x1200 6% 6% 1440x900 4% 5% 800x600 3% 2% 1680x1050 2% 4% 1152x864 2% 3% 240x320 1% 2%

или так...

Разрешение Доля сейчас 2.5 года назад 240x320 1% 2% 640x480 16% 4% 800x600 3% 2% 1024x768 12% 15% 1152x864 2% 3% 1280x800 8% 10% 1280x1024 8% 14% 1366x768 26% 27% 1440x900 4% 5% 1600x1200 6% 6% 1680x1050 2% 4% 1920x1080 11% 9%

Разрешения экранов для вёрстки сайтов

• 240 px – смартфоны (портрет)
• 320 px – смартфоны (портрет)
• 480 px – смартфоны
• 600 px – планшеты (портрет)
• 640 px – смартфоны (портрет)
• 768 px – планшеты (портрет)
• 800 px – планшеты
• 960 px – смартфоны
• 1024 px – планшеты, нетбуки, компьютеры
• 1280 px – планшеты, нетбуки, ноутбуки, компьютеры
• 1366 px – планшеты, нетбуки, ноутбуки, компьютеры, телевизоры

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

Основные разрешения экранов для вёрстки

Для упрощения вёрстки рекомендуется совмещать возможности адаптивной и резиновой вёрстки сайтов, а также ограничить количество разрешений. Вначале необходимо сделать так, чтобы сайт успешно тянулся по ширине с возможностью сжатия до 768 точек без появления горизонтальной полосы прокрутки. Затем стоит ограничить максимальную ширину сайта до 1366 точек, чтобы сохранить читаемость информации на мониторах с шириной в 1600 – 1920 точек.

И затем сайт необходимо адаптировать для следующих разрешений:

• 240 px — портретная ориентация
• 480 px — портретная ориентация
• 768 px — портретная ориентация

Это условия для минимальной адекватной адаптивности сайта. При необходимости можно расширить список поддерживаемых разрешений или наоборот – сократить.

• Responsinator – сервис для проверки внешнего вида сайтов с адаптированной вёрсткой.