Прежде чем тратить слишком много времени на рассмотрение точных разрешений монитора для вашего дизайна, вы должны помнить, что весь современный веб-дизайн является адаптивным, то есть он предназначен для адаптации к различным разрешениям экрана . В едином дизайне вам необходимо поддерживать все, от самых маленьких мобильных экранов до настольных мониторов Ultra HD.
Благодаря адаптивному веб-дизайну вы можете создавать более общие макеты для мобильных устройств, планшетов и компьютеров. Когда и как каждый элемент страницы перемещается на место для этих макетов, определяется специальными точками останова, записанными в ваш CSS . Эти точки останова определяются определенными общими разрешениями экрана.
Хотя вы не будете ориентироваться на конкретные разрешения или устанавливать фиксированный размер для своих проектов, вы будете учитывать разрешение экрана при установлении точек останова и создании плавных переходов, чтобы ваш сайт выглядел хорошо на всех устройствах и размерах экрана.
Общие разрешения рабочего стола
- Стандартное разрешение 1280×720 HD — Вы можете знать это лучше, чем 720p. Это было стандартное разрешение HD, когда HD впервые стал обычным явлением. Вероятно, вы не найдете много новых мониторов, использующих это разрешение, но их много в дикой природе, когда они были более популярными.
- 1366×768 — Это что-то необычное разрешение, но оно очень популярно на небольших ноутбуках и некоторых планшетах. Если вы имеете дело с низкоуровневыми Chromebook , есть большая вероятность, что это именно то разрешение, на которое вы ориентируетесь.
- 1920×1080 Самое распространенное — когда вы думаете о настольных компьютерах, вы, вероятно, имеете дело с 1920×1080, более известным как 1080p. Это разрешение абсолютно везде. Большинство настольных мониторов по-прежнему поддерживают разрешение 1080p, а также полноразмерные ноутбуки. Вы также найдете приличную долю планшетов в формате 1080p в ландшафте.
- 2560×1440 — 1440p — еще одна странная золотая середина в разрешении монитора. Это выше, чем то, что вы считаете 2к, но это не совсем 4к. Тем не менее, это обычное разрешение на рынке игровых мониторов, и это доступная альтернатива полному 4k. В зависимости от вашего сайта это может или не может стоить поддерживать 1440p.
- 3840×2160 Ближайшее будущее — это полный 4k или Ultra HD. В то время как 4k обычно зарезервированы для ПК более высокого уровня, цены падают, графические технологии улучшаются, и спрос на 4k стимулируется телевизионным рынком, где это гораздо более распространено. Можно с уверенностью предположить, что в течение следующих нескольких лет 4k легко обгонит 1080p как стандарт де-факто, поэтому сейчас определенно стоит учитывать 4k.
Стандартные разрешения для планшетов и ландшафтов
Планшеты могут быть не такими популярными, как раньше, и увеличение размеров телефонов в сочетании с конвертируемыми ноутбуками, похоже, значительно сократило их долю на рынке. Тем не менее, учет разрешений планшетов значительно перекрывает настольные и портативные компьютеры. Вы можете использовать контрольные точки планшета для создания контрольных точек для определенных проблемных элементов, которые не соответствуют определенным разрешениям.
- Вы также должны принимать во внимание разрешение планшета для устройств в портретном режиме. Не все будут просматривать свои планшеты в альбомной ориентации, поэтому вы должны добавить хотя бы одну точку останова для обычного планшета в портретной ориентации.
- 1280×800 Разрешение, которое было обычным делом — на старых планшетах, планшетах более низкого уровня и планшетах меньшего размера обычно есть планшеты Amazon Fire, которые до сих пор используют 1280×800. Это одно из последних по-настоящему мобильных разрешений на планшетах.
- 1920×1200 Обычный вариант для планшетов с диагональю 7 дюймов и 8 дюймов — в альбомной ориентации большую часть времени вы можете полагаться на те же точки останова, что и 1080p. Однако, когда вы видите один из них в ландшафте, ситуация сильно отличается. Это разрешение распространено среди множества 7 и 8-дюймовых планшетов, включая Amazon Fire.
- Таблетки Apple 2048×1536 — это наиболее распространенное разрешение планшета Apple. Это достаточно похоже на 1440p, чтобы ничего не изменить, но, опять же, портрет необычен. В любом случае, неплохо бы протестировать ваш сайт с таким разрешением, чтобы убедиться, что на iPad ничего странного не происходит.
Планшеты с более высоким разрешением начинают проникать на территорию рабочего стола . В большинстве случаев вам даже не нужно учитывать их, поскольку разрешение попадает в диапазон, который вы уже учли. Это всегда хорошая идея, чтобы проверить, хотя, чтобы быть абсолютно уверенным.
Общие мобильные решения
Мобильные устройства — самые сложные в обращении. Существует так много разнообразных устройств, в том числе старые, которые все еще используются, и охватить их все нелегко. Вот почему мобильный дизайн первым настолько популярен. Философия проста. Сначала начните с самого простого мобильного дизайна и используйте его для больших и больших экранов. Таким образом, работают даже самые старые и самые маленькие устройства, но с меньшим содержанием и меньшим количеством функций. Сайт не является хамструнгом, он просто отображает только самую важную и часто используемую информацию в первую очередь.
Вот интересный трюк для работы с телефонами; поверните рабочий стол разрешения на свою сторону. Конечно, есть необычные выбросы, но большинство современных телефонов следуют этой схеме.
- 720×1280 распространено на старых устройствах — в течение ряда лет 720p, повернутый на бок, был самым распространенным стандартом для мобильных устройств. В этом случае вам не нужно беспокоиться о ландшафтном режиме, поскольку он такой же, как на настольном компьютере с разрешением 720p. Просто закройте портретное разрешение шириной 720 пикселей.
- 1080×1920 середина — 1080p был стандартом в течение очень долгого времени. Это все еще очень распространено на устройствах среднего уровня. Если вы собираетесь поддерживать только одно мобильное разрешение, вот оно.
- 1440×2560 текущий топ — Мобильные устройства становятся все больше, а экраны — все выше и выше. 1440p является интересным стандартом, потому что есть различные ширины экрана — в данном случае длины — которые попадают в этот диапазон. На настольных компьютерах и мобильных устройствах наиболее распространенным является разрешение 1440×2560. Это дает экрану общее соотношение сторон 16: 9. Для мобильных устройств это имеет значение чуть меньше, чем для настольных компьютеров, поскольку длина устройства не сильно влияет на ваш дизайн.
Прежде чем вы будете довольны поддержкой только трех мобильных разрешений, вы также должны понимать, что некоторые люди используют смехотворно старые телефоны с крошечными экранами. Вы всегда должны использовать минимальное разрешение, чтобы ваш сайт выглядел хорошо даже для тех, кто использует телефон несколько лет назад.
Простые советы, чтобы помнить
Легко взять кучу фактов о разрешениях экрана, запуске и начать создавать макеты, и это как раз тогда, когда у вас возникают проблемы. Есть несколько ключевых идей, о которых следует помнить при разработке веб-сайта, и они верны в большинстве, если не во всех ситуациях.
- Адаптивный дизайн — это плавный процесс. Вы можете почувствовать желание встроить огромный массив точек останова в свой CSS, чтобы учесть все возможные размеры экрана и ситуацию. Это отличный способ свести себя с ума. Адаптивный веб-дизайн должен быть достаточно гибким, чтобы заполнить пробелы и нарушения. Если вы определяете слишком много статических чисел, будь то в медиа-запросах или для самих элементов, вы, вероятно, идете по неверному пути.
- Люди не всегда максимизируют свой браузер — этот вид идет рука об руку с предыдущим пунктом. Вы можете разрабатывать для размеров экрана, но когда кто-то не максимизирует окно своего браузера , все это идет в дым. Храня вещи в своей среде разработки, вы можете избежать проблем с изменением размеров окна браузера.
- Проверьте все — попробуйте взломать ваш сайт. Это единственный способ найти все ошибки и несоответствия, которые разрушат опыт посетителя. Chrome имеет встроенные инструменты для тестирования разрешений устройств с полным списком популярных устройств для работы. У вас всегда есть возможность перетащить окно браузера в разные размеры самостоятельно, чтобы увидеть, как сайт выглядит в разных размерах и как он адаптируется и ломается.
- Не ожидайте, что ваши пользователи получат новейшие и лучшие версии — это возвращает нас к предыдущему пункту о старых телефонах и небольших разрешениях. Вы не можете ожидать, что у людей будут новые устройства. Это относится как к разрешению экрана, так и к вычислительной мощности. Загрузка сайта с большим количеством графики и JavaScript — это хороший способ заставить людей с медленным устройством уходить и никогда не возвращаться.