17 января 2016 — 13:14

Гигантомания экранов коснулась не только телефонов, но и настольных компьютеров. Экраном в 25 и даже 29 дюймов никого не удивишь.

Каталог крупного интернет-магазина

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

Поэтому, разрабатывая структуру, мы хотим, чтобы:

— пространство использовалось с умом;

— при просмотре сайта на больших экранах не было огромного пустого пространства по бокам;

— сайт не терял удобство использования на небольшом экране.

Какие есть варианты создания страницы под разные мониторы и разрешения (типы верстки)

Фиксированная верстка

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

Резиновая верстка без ограничений

Упрощенно это выглядит так:

Т.е. ширина сайта подстраивается под ширину браузера. Браузер шире – блоки снизу перемещаются вбок. Браузер уже – блоки располагаются друг под другом.

Плюсы такой верстки:

• Пространство используется по максимуму, нет зияющей пустоты слева или справа от контента на широкоформатном экране с высоким разрешением.

Минусы:

• На большом экране сайт очень сильно расползается. Особенно это неудобно для текста.
• Периодически может возникать пустое пространство между блоками.

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

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

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

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

— минимум – достигнув этого предела, блоки не «сжимаются», а появляется полоса прокрутки;

— максимум – контент не увеличивается по ширине, а добавляется пустое пространство по бокам, контент сайта при этом размещается по центру.

Плюсы:

• Мы уверены в том, как выглядит контент нашего сайта при определенном разрешении Естественно, мы стараемся сделать максимально красивый сайт для наиболее распространенных разрешений в нашей тематике.

Минусы:

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

Например:

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

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

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

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

Плюсы:

• Наиболее современный и правильный тип верстки.

Минусы: 

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

Все эти методики могут сочетаться в зависимости от ситуации.

Например:

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

 

 

Как разобраться в этом многообразии разрешений и способов верстки?

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

Общую статистику популярных разрешений можно найти в сервисах:

— http://www.w3counter.com/stats/displays/1/resolutions/20/0 – тут статистика в первую очередь по США;
— http://www.liveinternet.ru/stat/ru/resolutions.html – это общая статистика. Также можно сегментировать статистику по категориям.

Примечание!

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

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

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

При этом учитывайте, что контент смотрится лучше, когда есть небольшие отступы по бокам. Плюс к этому, немного (порядка 24) пикселей нужно оставить под полосу прокрутки. Размер отступов выбирайте сами – обычно это порядка 50-80px.

Например, очень хорошо смотрится (личное мнение) при таком разрешении сайт lamoda, ширина максимум 1206px:

Учитывая это, я склоняюсь к варианту фиксированной максимальной ширины. За среднюю цифру максимума можно взять примерно 1200px+/-.

В качестве минимальной ширины, после которой появляется полоса горизонтального скролла, можно взять 960px. Меньше делать особого смысла не вижу.

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

Как узнать статистику своего сайта по разрешениям экрана?

Если у вас Яндекс.Метрика:

1. Заходите в раздел Отчеты -> Стандартные отчеты -> Технологии -> Разрешение дисплея:

2. Получаем наглядную уникальную статистику, применимую конкретно к вашему сайту (разумеется, зачастую она будет совпадать со стандартной статистикой):

Если у вас Google Analytics:

1. Технологии -> Браузер и ОС -> Разрешение экрана:

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

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

Как проверить отображение сайта на разных разрешениях?

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

1. Онлайн-сервис http://quirktools.com/screenfly/

Тут все довольно просто:

— выбираете устройство (начиная от телефона и заканчивая телевизором);
— выбираете разрешение (есть стандартные варианты, также можно указать размер в пикселях самостоятельно);
— указываете нужные настройки – сайт отображается у вас на экране при заданных параметрах.

2. Скрипт для браузера Chrome http://lab.maltewassermann.com/viewport-resizer/

Суть та же, что и в онлайн-сервисе, только в данном случае настройки появляются непосредственно в браузере:

Подведем итог

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

— понять, какие разрешения наиболее популярны у вашей целевой аудитории;

— определить максимальные и минимальные размеры сайта (в пикселях);

— выбрать тип верстки;

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

Конечно, может возникнуть один логичный вопрос: «А как же через Х лет, когда технологии изменятся? Что тогда делать?» Ответ прост: сайт должен постоянно развиваться, поэтому создать через пару лет новый дизайн – это вполне нормально. Естественно, при создании нового дизайна следует учитывать изменившиеся реалии и тенденции.

 

Источник: Сайтклиник

---