Научитесь проектировать размеры страниц на основе разрешений монитора

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

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

Начальные медиазапросы

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

Общие разрешения рабочего стола

Двойные настольные мониторы
Pixabay

  • 1280×720 Стандарт HD — Вы можете знать это лучше как 720p. Это было стандартное разрешение HD, когда HD впервые стал обычным явлением. Вероятно, вы не найдете много новых мониторов, использующих это разрешение, но их много в дикой природе, когда они были более популярными.
  • 1366×768 — Это что-то необычное разрешение, но оно очень популярно на небольших ноутбуках и некоторых планшетах. Если вы имеете дело с более низкими моделями Chromebook, есть большая вероятность, что это именно то разрешение, на которое вы ориентируетесь.
  • 1920×1080 Самый распространенный — Когда вы думаете о настольных компьютерах, вы, вероятно, имеете дело с 1920×1080, более известным как 1080p. Это разрешение абсолютно везде. Большинство настольных мониторов по-прежнему поддерживают разрешение 1080p, а также полноразмерные ноутбуки. Вы также найдете приличную долю планшетов в формате 1080p в ландшафте.
  • 2560×1440 — 1440p — еще одна странная золотая середина в разрешении монитора. Это выше, чем то, что вы считаете 2k, но это не совсем 4k. Тем не менее, это обычное разрешение на рынке игровых мониторов, и это доступная альтернатива полной 4k. В зависимости от вашего сайта, поддержка 1440p может быть, а может и не стоить.
  • 3840×2160 ближайшее будущее — Это полный 4k или Ultra HD. В то время как 4k обычно зарезервированы для ПК более высокого уровня, цены падают, графические технологии улучшаются, и спрос на 4k стимулируется телевизионным рынком, где это гораздо более распространено. Можно с уверенностью предположить, что в течение следующих нескольких лет 4k легко обгонит 1080p как стандарт де-факто, поэтому сейчас определенно стоит учитывать 4k.

Стандартные разрешения для планшетов и ландшафтов

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

Планшет в твиттере
Pixabay

  • Вы также должны учитывать разрешения планшетов для устройств, которые находятся в портретном режиме. Не каждый будет просматривать свой планшет в альбомной ориентации, поэтому следует добавить хотя бы одну точку останова для обычного планшета в портретной ориентации.
  • 1280×800 Разрешение, которое раньше было распространенным — На старых планшетах, планшетах более низкого уровня и планшетах меньшего размера обычно используются планшеты Amazon Fire, которые по-прежнему используют разрешение 1280×800. Это одно из последних по-настоящему мобильных разрешений на планшетах.
  • 1920×1200 Обычный на 7 «и 8» планшетах — В альбомной ориентации вы можете полагаться на те же точки останова, что и 1080p, большую часть времени. Однако, когда вы видите один из них в ландшафте, ситуация сильно отличается. Это разрешение распространено среди большого количества 7 и 8-дюймовых планшетов, включая Amazon Fire.
  • 2048×1536 Apple Tablets —Это наиболее распространенное разрешение планшета Apple. Это достаточно похоже на 1440p, чтобы ничего не менять, но, опять же, портрет необычен. В любом случае, неплохо бы протестировать ваш сайт с таким разрешением, чтобы убедиться, что на iPad ничего странного не происходит.

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

    Общие мобильные решения

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

    iPhone
    Pixabay

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

    • 720×1280 распространено на старых устройствах — В течение ряда лет 720p, повернутый на бок, был самым распространенным стандартом для мобильных устройств. В этом случае вам не нужно беспокоиться о ландшафтном режиме, поскольку он аналогичен настольному 720p. Просто закройте портретное разрешение шириной 720 пикселей.
    • 1080×1920 середина — 1080p был стандартом в течение очень долгого времени. Это все еще очень распространено на устройствах среднего уровня. Если вы собираетесь поддерживать только одно мобильное разрешение, вот оно.
    • 1440×2560 текущий топ — Мобильные устройства становятся все больше, а экраны — все выше и выше. 1440p является интересным стандартом, потому что есть различные ширины экрана — в данном случае длины — которые попадают в этот диапазон. На настольных компьютерах и мобильных устройствах наиболее распространенным является разрешение 1440х2560. Это дает экрану общее соотношение сторон 16: 9. Для мобильных устройств это имеет значение чуть меньше, чем для настольных компьютеров, поскольку длина устройства не сильно влияет на ваш дизайн.

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

    Простые советы, чтобы помнить

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

    • Адаптивный дизайн — это жидкость — Вы можете почувствовать желание встроить огромный массив точек останова в ваш CSS, чтобы учесть все возможные размеры экрана и ситуацию. Это отличный способ свести себя с ума. Адаптивный веб-дизайн должен быть достаточно гибким, чтобы заполнить пробелы и нарушения. Если вы определяете слишком много статических чисел, будь то в медиа-запросах или для самих элементов, вы, вероятно, идете по неверному пути.
    • Люди не всегда максимизируют свой браузер — Этот вид идет рука об руку с предыдущим пунктом. Вы можете разрабатывать для размеров экрана, но когда кто-то не максимизирует окно своего браузера, все это идет в дым. Сохраняя вещи в своей среде разработки, вы можете избежать проблем с изменением размеров окна браузера.
    • Проверьте все — Попробуйте взломать ваш сайт. Это единственный способ найти все ошибки и несоответствия, которые испортят опыт посетителя. Chrome имеет встроенные инструменты для тестирования разрешений устройств с полным списком популярных устройств для работы. У вас всегда есть возможность перетащить окно браузера в разные размеры самостоятельно, чтобы увидеть, как сайт выглядит в разных размерах и как он адаптируется и ломается.
    • Не ожидайте, что ваши пользователи получат самое последнее и лучшее — Это восходит к предыдущему пункту о старых телефонах и небольших разрешениях. Нельзя ожидать, что у людей появятся новые устройства. Это относится как к разрешению экрана, так и к вычислительной мощности. Загрузка сайта с большим количеством графики и JavaScript — это хороший способ заставить людей с медленным устройством уходить и никогда не возвращаться.
    Ссылка на основную публикацию