Почему на разных экранах сайт выглядит по-разному? (и что с этим делать)

1. Браузеры
2. разрешение
3. Мобильные экраны
4. проектирование
5. Система фиксированной ширины
6. Жидкая система
7. Адаптивная система
8. Отзывчивая система
9. практика
10. тестирование
11. решения

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

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

Автор фото: Роберт Коус-Бейкер

Браузеры

Дополнительной сложностью являются различия в реализации веб-стандартов производителями браузеров. Их довольно много, но на данный момент на 90% рынка доминируют 5 брендов: Firefox, Chrome, Internet Explorer, Opera, Safari.
К счастью, от версии к версии различия уменьшаются, и те, которые наблюдаются между последними версиями браузеров, больше не являются большой проблемой для веб-разработчиков. Что не означает, что вы можете игнорировать их.
Но в этом вопросе мы не будем углубляться, предполагая, что веб-мастеру или агентству просто приходится иметь дело с этим.

разрешение

Популярность отдельных разрешений (размеров в пикселях) экрана меняется с развитием технологий. В течение многих лет он правил 1024 × 768, но осенью 2011 года он давал разрешение короны 1366 × 768, которое остается на первом месте до сегодняшнего дня - с довольно большим преимуществом над вторым местом, которое на практике занимают 1280 × 800 и 1280 × 1024.

Самые популярные резолюции в 2007-2014 гг. источник: gemiusRanking

Но при создании веб-сайтов с фиксированной шириной (см. Раздел «Проектирование» ниже) самое популярное разрешение не учитывается, а только самое низкое разрешение, которое все еще широко используется.
К концу 2007 года это было 800 × 600 пикселей, а страницы, созданные в то время, имели ширину около 750 пикселей. На современных экранах шириной 1300 пикселей и более такие страницы выглядят забавно, оставляя огромные поля по бокам страницы.
В 2008 году минимальное разрешение чипа заняло 1024 × 768, а страницы фиксированной ширины «выросли» до 960 пикселей.
Разрешение «жизни» 1024 × 768 было продлено нетбуками и планшетами, и его доля все еще остается выше 5%. Некоторые веб-разработчики все еще пытаются «вписаться» в 960 пикселей, другие уже решили игнорировать такие экраны и стремятся к 1200px.

25 самых популярных резолюций в мае 2014 года. Источник: gemiusRanking

Мобильные экраны

В категории мобильных устройств (планшеты и смартфоны) мы наблюдаем технологическую гонку в направлении создания как можно большего количества пикселей в минимальном пространстве. Таким образом, появляются 5-дюймовые экраны с разрешением FullHD (1080x1920px), что больше, чем у многих мониторов «взрослых» компьютеров.
К счастью, такая высокая плотность пикселей в основном используется в видео и фотографии - веб-сайты отображаются «увеличенными» - они автоматически масштабируются до ширины, определенной в его коде (область просмотра). Таким образом, на экране с шириной 1080 пикселей мобильная страница, созданная с шириной 320 пикселей, будет правильно «растянута» и будет хорошо выглядеть.

проектирование

Как создать сайт, чтобы он хорошо выглядел в любом разрешении?
Я бы добавил, что «хорошо» не означает «то же самое».

Существует 4 основных подхода к дизайну - верстка элементов на сайте:

Система фиксированной ширины

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

Жидкая система

Ширина элементов не определяется в пикселях только в процентах, страница «расширяется» по всей ширине экрана. Настроить размер окна очень просто (не «умно»), поэтому конечный результат сильно отличается.
Это хороший макет для проектов с плохой графикой - например, для онлайн-форумов.

Адаптивная система

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

Отзывчивая система

Адаптивный веб-дизайн (RWD) является более продвинутой техникой, которая дает лучшие результаты и рекомендуется даже Google. Это комбинация адаптивной и текучей систем - она ​​состоит из нескольких отдельных систем, каждая из которых в определенном диапазоне ширины является текучей.

Приведенные выше иллюстрации отдельных систем в разных разрешениях взяты с сайта liquidapsive.com где можно «увидеть» различия между макетами «вживую».

практика

На практике три наиболее распространенных решения:

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

тестирование

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

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

решения

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

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

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

Адаптивная система (т.е. разные шаблоны для разных диапазонов ширины) я бы порекомендовал вам в двух ситуациях:

1. Если ваша форма имеет эквивалентный (или более важный) контент - в креативе много графики, и положение каждого элемента относительно других имеет решающее значение. Тогда вам просто нужно сохранить полный контроль над каждым макетом пикселей.
2. Ваш веб-сайт в настоящее время не поддерживает мобильные устройства, но настольная версия в порядке, и вы не хотите ее менять. Затем вы можете просто добавить мобильные версии в качестве альтернативных наборов шаблонов.

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

Похожие

Комментарии