Разрешение страницы сайта: Оптимальная ширина сайта под популярные разрешения экранов (2020)

Содержание

Разрешение экрана и вёрстка страницы (Якоб Нильсен)

Источник:
Якоб Нильсен, Screen Resolution and Page Layout
Опубликовано:
Перевод:
Марат Таналин
Опубликован:
Краткое описание
Оптимизируйте веб-страницы под разрешение 1024×768, но используйте «резиновую» вёрстку, чтобы они достаточно хорошо выглядели на любом разрешении от 800×600 до 1280×1024.

Один из наиболее часто задаваемых вопросов по веб-юзабилити — «Под какое разрешение следует разрабатывать дизайн?». Развёрнутый ответ относительно сложен, но основная суть проста.

  • Оптимизируйте вёрстку под разрешение 1024×768, которое в настоящее время используется наиболее широко. Разумеется, следует проводить оптимизацию под разрешение, наиболее распрос­транённое среди целевой аудитории сайта, поэтому упомянутый размер в будущем изменится. Это может иметь место и сейчас, например, если вы разрабатываете дизайн для интранет-сайта компании, которая предоставляет всем своим сотрудникам большие мониторы.
  • Не раз­раба­тывайте сайт в расчёте строго на одно разрешение, ведь размеры экрана у всех пользователей разные. Это тем более актуально, если учесть, что пользователи не всегда разворачивают окно браузера на весь экран (особенно если у них большие экраны).
  • Используйте «резиновую» вёрстку, которая авто­матически подстраивается под размер окна браузера (иными словами, избегайте жёстких макетов, имеющих одну и ту же ширину при любом размере окна).

В настоящее время примерно на 

60% всех мониторов используется разрешение 1024×768. Для сравнения, лишь около 17% используют 800×600, откуда очевидно, что наилучшее отображение сайта на таких дисплеях — не самая важная задача. Не менее очевидно, однако, что эти 17% нельзя просто игнорировать, создавая жёсткий макет, для ото­бра­жения которого в полную ширину не хватит экранного пространства пользователя.

Оптимизация под 1024×768

Говоря «оптимизация», я подразумеваю, что страница должна выглядеть и работать наилучшим образом в окне наиболее распрос­транённого размера. При этом она выглядит хорошо и работает достаточно хорошо

при иных размерах окна — именно поэтому я и рекомендую «резиновую» вёрстку. Однако лучше всего страница должна выглядеть и работать на 1024×768.

Три основных критерия при оптимизации вёрстки страницы под определённое разрешение таковы:

Изначальная видимость
Видна ли вся наиболее существенная информация, и могут ли пользователи видеть её без прокрутки? В этом заключается компромисс между тем, как много информации показано в целом, и тем, насколько подробна информация в масштабе каждой информационной единицы.
Читабельность
Насколько легко прочитать текст в различных колонках при их текущей ширине?
Эстетика
Насколько хорошо выглядит ваша страница, когда элементы имеют правильные размеры и расположение для конкретного экранного разрешения? Отображаются ли все элементы правильно — т. е. следуют ли подписи к фото­графиям непосредственно за фото­графиями и т. д.

Все три критерия следует иметь в виду для каждого из целевых размеров экрана, на которые вы ориентируетесь, постоянно проверяя поведение вёрстки при изменении размеров окна браузера в диапазоне от 800×600 до 1280×1024.

Желательно, чтобы ваша страница работала и на размерах вне этого диапазона, хотя такие крайности не столь важны. Менее полу­процента пользователей всё ещё используют разрешение 640×480. Хотя такие пользователи, безусловно, должны иметь доступ к вашему сайту, предоставление им более-менее приемлемого дизайна — допустимый компромисс.

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

Как прокрутка, так и перво­начальная видимость зависят от размера экрана: большие экраны позволяют отобразить больше контента над «линией сгиба» без прокрутки. Именно в этом разрезе вам следует проводить оптимизацию под 1024×768: представить наиболее интересный материал над «линией сгиба» при этом разрешении (убедившись при этом, что особенно важная информация видна и на 800×600).

А как насчёт маленьких экранов вроде тех, что встречаются на мобильных устройствах? Следует стараться, чтобы «резиновый» дизайн отображался на устройствах вплоть до телефона, однако не рассчитывайте, что этого достаточно для поддержки «мобильного» пользователя. Мобильная среда специфична; оптимизация под неё требует разработки отдельного сервиса, обеспечивающего меньшее количество возможностей, более лаконичного и более подходящего для мобильного использования в целом.

Большие экраны

У многих пользователей большие экраны. В настоящее время около 18% пользователей используют как минимум 1280×1024. Количество пользователей с большими экранами растёт, хотя не столь быстро, как мне бы того хотелось.

Большие мониторы — наиболее простой способ увеличить производи­тельность труда офисных работников, и каждый, чей доход составляет 50 тыс. долларов в год или выше, должен иметь разрешение экрана 1600×1200. Плоско­панельные дисплеи с этим разрешением стоят сейчас менее 500 $. Так, если экран большего размера увеличит про­из­води­тель­ность труда хотя бы на 0,5%, вы восполните затраты на монитор менее чем за год. (Типичные корпора­тивные накладные расходы вдвое превышают затраты компании на сотрудников; при любом расчёте про­из­води­тель­ности труда всегда учитывайте вложенные в сотрудника средства, а не его заработную плату).

Как Apple, так и Microsoft опубликовали отчёты, где пытались измерить увеличение про­из­води­тель­ности труда при ис­поль­зования мониторов большего размера. К сожалению, из-за различных методо­логических недостатков конкретные величины они не привели. Мой опыт показывает, что при выполнении тесно связанной с компьютером работы про­из­води­тель­ность труда пользователя вырастает ориентировочно на 5-10%. Это означает суммарный прирост про­из­води­тель­ности труда около 0,5-1% на сотрудника, в течение 10% рабочего дня которого исполь­зуется монитор. Без сомнения, большие экраны оправдывают затраты на них.

Лично я использую дисплей 2048×1536, и я бы даже не сказал, что это действительно большой экран. Я ожидаю, что в течение ближайших 10 лет достаточное распрос­транение получат мониторы с разрешением, скажем, 5000×3000 — по меньшей мере, среди профессионалов высшего уровня.

Начиная с 1600×1200, пользователи редко разворачивают окно браузера на весь экран, поскольку очень немногими сайтами удобно пользоваться при их растяжении на такую ширину. Большие экраны чудесно подходят для работы с таблицами, графического дизайна и многих других задач, но не для веб-страниц при текущей парадигме их создания и использования. Сегодня пользователи больших экранов обычно используют имеющееся дополни­тельное пространство для одно­временного отображения нескольких окон и параллельного просмотра разных сайтов.

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

В любом случае потребность в новой парадигме в будущем не изменит текущую рекомендацию: оптизизируйте под 1024×768, но не раз­раба­тывайте дизайн в расчёте исключительно на этот размер. Ваши страницы должны работать на любом разрешении от 800×600 до 1280×1024 и выше.

Автор перевода не несёт ответственности за возможные неточности.

КАК: Веб-дизайн и размер экрана или разрешение

Разрешение веб-страницы — большое дело. Многие сайты, преподающие веб-дизайн, написали об этом, и в зависимости от того, кому вы верите, вы должны проектировать страницы для самого низкого общего знаменателя (640×480), самого общего разрешения (800×600) или самой передовой (1280×1024 или 1024×768). Но, правда, вы должны создать свой сайт для клиентов, которые приходят к нему.

Факты о разрешениях экрана

  • 640×480 не мертв
  • Хотя 640×480 не так распространен, как раньше, эта резолюция все еще существует. Старые компьютеры, ноутбуки с меньшими экранами, нетбуки и люди, которым нужны большие шрифты, используют это разрешение. Даже если вы решите не создавать свою страницу в этом разрешении, вы должны протестировать свой сайт в этом разрешении.
  • 800×600 очень распространен
  • Многие руководства по дизайну веб-сайтов рекомендуют создавать веб-сайты с разрешением 800×600. Хотя эта резолюция более распространена в Интернете в целом, это может быть не так для ваших клиентов. Если вы планируете перепроектировать свой веб-сайт, найдите несколько недель, чтобы проанализировать статистику своего браузера, чтобы определить наиболее распространенные разрешения, используемые ваш клиентов.
  • 1024×768 намного чаще
  • Экраны становятся все больше и 1024×768 — это другой популярный размер для дизайна, потому что у многих дизайнеров есть мониторы, которые поддерживают это изначально. Но эта резолюция может быть довольно трудно читать для многих людей. 14-дюймовый монитор для ноутбука может поддерживать 1024×768, но текст практически не читается. И ноутбуки очень популярны.
  • 1280×1024 и выше реже
  • В основном вы увидите эти большие разрешения на настольных компьютерах или ноутбуках класса high-end. Но часто при этих больших размерах клиенты не просматривают полноэкранный режим. Поэтому разработка сайта с шириной более 1000 пикселей приведет к созданию горизонтальных полос прокрутки на большинстве экранов.

Храните эти Резолюции в разуме

  • Не каждый максимизирует свой браузер
  • Если вы определяете, что ваши клиенты просматривают 1024×768, вы можете создавать страницы, для которых требуется горизонтальная прокрутка. Зачем? Поскольку пока они просматривают эту резолюцию, они не максимизируют свое окно браузера, поэтому 800×600 могут лучше подойти к окну их браузера.
  • Не забудьте браузер Chrome (не браузер Google Chrome)
  • Браузеры вычитают до 50 пикселей вправо и влево и 200 пикселей сверху и снизу для собственного использования для таких вещей, как полосы прокрутки, панели инструментов и контейнер окна. Это называется браузером. Поэтому, если вы создадите таблицу шириной 800 пикселей, клиенты с максимальными браузерами на экранах с разрешением 800×600 должны будут прокручиваться по горизонтали.

Как обрабатывать размер экрана на основе разрешения

  1. Определите, кто просматривает ваш сайт: Просмотрите файлы своего веб-журнала или разместите опрос или сценарий, чтобы определить, какое разрешение ваши читатели используют на самом деле. Используйте сценарий размера реального браузера для отслеживания ваших читателей.

  2. Настройте свои редизайны для своих клиентов:Когда вы перепроектируете свой сайт, создайте его на основе фактов вашего сайта. Не основывайте его на статистике «Интернета» или на других сайтах. Если вы создадите сайт, который соответствует разрешению, которое ваши клиенты используют, вы будете держать их намного счастливее.

  3. Проверьте свой сайт с различными разрешениями:Измените свой собственный размер экрана (измените разрешение экрана Windows или разрешение экрана Macintosh) или используйте инструмент тестирования.

  4. Не ожидайте, что ваши клиенты изменятся: Они не будут. И размещение ограничений на них просто заставляет их уходить.

выбираем оптимальный первый экран для Landing page

Экраны лендинга

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


Главный экран лендинга

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

Нет времени разбираться?

Комплексное продвижение в онлайне

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

Ваша витрина (сайт, соцсети и пр.)


Вторая часть лендинга

Таким образом, схема построения лендинга выглядит так:


Экраны лендинга

Некоторые трудности может вызвать адаптация макета сайта для разных разрешений экранов. Запомните, что ориентироваться вам нужно не на разрешение, а на размер окна браузера. Так, например, вы знаете, что средний размер экрана монитора — 1024×768 пикселей. В таком случае высота макета НЕ должна составлять 768 пикселей в высоту. Она должна соответствовать высоте окна браузера. То же касается мобильных версий макетов.

Какого размера делать лендинг

При разработке landing page нужно делать несколько макетов: для широких экранов, для планшетов и для телефонов. Расположение информационных блоков на макетах будет отличаться в зависимости от экрана.

Основную сложность представляет разработка дизайна первого экрана лендинга. Практика показывает, что для десктопа разработчики чаще всего выбирают ширину в 1000px и высоту в 680px. Причина этого в том, что настроить дизайн сразу под 4 устройства (монитор ПК, ноутбук, планшет и смартфон) довольно сложно. Дополнительная проблема — окно браузера, размер которого пользователи могут менять как угодно.


Зависимость размеров от изменения размера окна браузера

Оптимальная высота лендинга для десктопных браузеров — в районе 600-800px, а для мобильных устройств — 400-500px. Далее расскажем, почему лучшими считаются именно эти варианты.

Сначала рассчитывается усредненная высота всех устройств. Для упрощения задачи нужно сократить количество возможных вариантов. Самый часто встречающийся размер больших экранов (монитора ПК, ноутбука или планшета) — 1000–1200px, маленьких экранов — 320–360px (имейте в виду, что экраны смартфонов Apple имеют высоту 375px).

Получив приблизительные данные, рассчитываем идеальный размер. Большим экранам оптимально будет присвоить 600–800px, а маленьким — 400–500px.

Еще один популярный вариант — использовать в CSS единицы измерения vw (ширина вьюпорта) и vh (высота вьюпорта). Если вы зададите высоту блоку width 100vh, то на любом экране он будет равняться 100 % высоты вьюпорта. В этом случае вам не придется задавать размеры под каждый экран индивидуально, а результат будет хорошо отображаться на большинстве устройств.

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

Привлекли 35.000.000 людей на 185 сайтов

Мы точно знаем, как увеличить онлайн–продажи

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

Ваш сайт

Если с высотой разобраться сложнее ввиду неодинаковых размеров окошек различных браузеров, то с шириной все гораздо проще. Мы выяснили, что разрешение экрана, например, ноутбука — 1024×768 пикселей. Оптимальной высотой мы обозначили 600px, остальная часть уйдет под меню браузера и строку меню операционной системы. Для ширины достаточно 1000px. Остальное займет полоса прокрутки и вертикальные границы браузера. По этому же принципу рекомендуем выбрать оптимальный размер лендинга для остальных устройств.

Примеры идеального первого экрана

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

Однако начнем с лендинга, оформленного неправильно.


Плохой пример оформления лендинга

На этом сайте главного экрана нет как такового. Мы видим фотографию и длинный сплошной текст до конца страницы. Мобильная версия выглядит не лучше:


Отображение лендинга в мобильной версии

Здесь нет ничего, кроме текста. Найти контакты сложно, форма заявки отсутствует, нет УТП и корректных заголовков.

Теперь обратите внимание на следующий пример:


Пример удачного оформления первого экрана лендинга

Мы видим главную страницу, на которой есть важная информация. Листать вниз не нужно, все УТП и преимущества представлены в виде «карусели». На основном экране информация четко разделена по блокам.

Взгляните на пример лендинга компании, занимающейся доставкой полезной еды:


Пример лендинга по доставке еды

Здесь мы видим яркий первый экран с формой заявки и основным преимуществом. Далее следует остальная часть с дополнительной информацией:


Оформление второго экрана лендинга по доставке еды

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

 

Как проверить сайт на разных разрешениях: пошаговая инструкция

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

Популярные разрешения экрана

Нет лучшего размера экрана, для которого можно было бы разработать дизайн. Веб-сайты должны меняться отзывчиво и быстро при любом разрешении (как 360×640, так и 1920×1080).


Анализ посещаемости почти полумиллиона посетителей за первые 6 месяцев 2020 года представлен в таблице:

Разрешение

Пользователи – 451 027

1

1920×1080

88,378 (19,53%)

2

1366×768

67,912 (15,01%)

3

1440×900

43,687 (9,65%)

4

1536×864

32,872 (7,26%)

5

2560×1440

25,954 (5,73%)

6

1680×1050

20,068 (4,43%)

7

1280×720

15,138 (3,34%)

8

1280×800

14,007 (3,09%)

9

360×640

11,085 (2,45%)

10

1600×900

10,193 (2,25%)

Наиболее распространенные разрешения настольных ПК (статистика за май 2019 – май 2020):

  1. 1366×768 – 23,49%.
  2. 1920×1080 – 19,91%.
  3. 1536×864 – 8,65%.
  4. 1440×900 – 7,38%.
  5. 1280×720 – 4,89%.
  6. 1600×900 – 4,01%.
  7. 1280×800 – 3,33%.

Наиболее распространенные разрешения смартфонов (статистика за май 2019 – май 2020):

  1. 360×640 – 17,91%.
  2. 375×667 – 7,61%.
  3. 414×896 – 6,52%.
  4. 360×780 – 5,56%.
  5. 360×760 – 5,06%.
  6. 414×736 – 3,74%.

Наиболее распространенные разрешения планшетов (статистика за май 2019 – май 2020):

  1. 768×1024 – 51,98%.
  2. 1280×800 – 7,11%.
  3. 800×1280 – 5,34%.
  4. 601×962 – 4,47%.
  5. 600×1024 – 2,85%.
  6. 1024×1366 – 1,96%.

Проверка сайта на разных разрешениях через браузеры

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

Firefox

  1. Открыть в браузере страницу, которую необходимо протестировать.
  2. Кликнуть левой кнопкой мышки по иконке меню в виде трех горизонтальных линий. Также, чтобы сразу открыть нужный раздел, можно одновременно нажать сочетание клавиш Ctrl+Shift+M.

  3. В списке найти пункт «Веб-разработка». Далее выбрать «Адаптивный дизайн».

  4. Сайт откроется в маленьком разрешении. Здесь можно задать размер и выбрать из выпадающего списка устройство (или добавить новое).

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

Chrome

  1. Открыть в браузере страницу, которую необходимо протестировать.
  2. Кликнуть левой кнопкой мышки по иконке меню в виде трех вертикальных точек. В дополнительных параметрах выбрать «Инструменты разработчика». Также, чтобы сразу открыть консоль разработчика, можно одновременно нажать сочетание клавиш Ctrl+Shift+I.

  3. На верхней панели клацнуть по иконке в виде телефона (станет синего цвета) или нажать сочетание клавиш Ctrl+Shift+M.

  4. Установить разрешение для проверки, выбрать устройство из списка или добавить новое.

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

Yandex

  1. Открыть в браузере страницу, которую необходимо протестировать.
  2. Зайти в меню (три горизонтальные линии), выбрать дополнительные параметры и перейти в раздел «Инструменты разработчика».

  3. Справа появится консоль – точно такая же, как и в Chrome.

  4. Переключить панель инструментов устройства, щелкнув левой кнопкой по иконке в виде телефона (на верхней панели).
  5. Задать необходимые размеры или изменить масштаб. В выпадающем меню «Responsive» выбрать девайс.

  6. Система позволяет добавить новое устройство (опция «Edit» в разделе «Responsive»).

  7. Для выхода из режима разработчика кликнуть по крестику, расположенному в верхнем углу справа.

Другие браузеры

Принцип открытия раздела для тестирования сайта точно такой же, как описано выше:

  1. Opera (Ctrl+Shift+I или меню – раздел «Разработка»).


  2. Edge (F12 или меню – раздел «Дополнительные средства» – «Эмуляция»).


  3. Safari (настройки – раздел «Настройки» – «Дополнения» – включить опцию разработки – меню – «Разработка».


Онлайн-сервисы для проверки адаптива

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

BrowserStack

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


Позволяет протестировать сайт не только на адаптивность, но и на кроссбраузерность. Для начала работы необходимо залогиниться через гугл-аккаунт. Бесплатный доступ для интерактивного тестирования браузера и мобильного приложения открывается только на 30 мин., 100 мин. дается на автотестирование.


Каждое устройство доступно до 1 мин. во время бесплатной пробной версии.

Стоимость подписки для проверки сайтов только в настольных браузерах (для одного пользователя) – 29 долл., в настольных и мобильных – 39 долл.

Screenfly

Screenfly – это бесплатный инструмент для тестирования веб-сайта на разных размерах экрана и разных устройствах. Удобный и простой сервис, позволяет выбирать разрешения из списка или создавать собственные. Необходимо вставить ссылку на сайт в единственное поле на странице и найти баг.


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

CrossBrowserTesting

Главный конкурент BrowserStack, который предлагает более 1500 браузеров и устройств для тестирования адаптивного веб-сайта.


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

Есть несколько вариантов подписки:

  1. Live Testing – для ручных тестировщиков и разработчиков, которым нужны удаленные браузеры для взаимодействия, тестирования и отладки (29 долл., 1 юзер).
  2. Automated Testing – для групп разработки и контроля качества Waterfall, которым необходимо запускать ручные и автоматические тесты (78 долл., 1 юзер).
  3. Unlimited Testing – когда требуется неограниченное тестирование на параллельных устройствах и в браузерах (100 долл., 1 юзер).

Ghostlab

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

Удобно, что можно делать снимки экрана с любого устройства, аннотировать их и перетаскивать на свой баг-трекер.

Пробный период длится 7 дней. Стоимость программы – 49 долл.

Responsinator

Это – симулятор iPad и iPhone. Удобство Responsinator заключается в его простоте. Нужно просто вписать URL-адрес страницы, и этот бесплатный инструмент покажет, как веб-сайт отображается в самых популярных размерах экрана.


Ресурс предлагает протестировать страницу в следующих вариантах ширины: 375, 734, 412, 684, 667, 414, 736, 768, 1024.

Инструменты от поисковых систем для проверки адаптива

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

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

Google Mobile Friendly

Бесплатный инструмент, предлагаемый Google для веб-мастеров, чтобы они могли лучше оптимизировать веб-сайты для мобильных устройств. Обнаруживает и указывает на все проблемы с подробными объяснениями, поэтому можно легко их исправить.


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

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

Mobile Friendly – Яндекс.Вебмастер

Официальный инструмент от Яндекс. Понимает, есть ли у ресурса мобильная версия, показывает общую оценку и отображает конкретные проблемы в оптимизации.


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

Как узнать, какими браузерами пользуются посетители сайта?

Для этого следует зайти в систему сбора статистики Google Analytics/Яндекс.Метрики – в соответствующем разделе представлен перечень браузеров и количество посещений.


Важно! Сайт должен быть подключен к Google Analytics/Яндекс.Метрике.

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

Сделать ширину сайта в зависимости от разрешения монитора. @ Media — Примеры

В 2006 году большинство пользователей имело экран монитора 800*600. Но время неумолимо и в какой-то момент «нормальным» стал 1024*768. У веб-ресурсов, ориентированных на меньшее разрешение, появилось пустое пространство по бокам. Всё большую популярность стали приобретать «резиновые» сайты, которые создаются путём использования

  1. @Media,
  2. относительных величин.
Благодаря им теперь не нужно искать оптимальную ширину сайта.

@Media CSS

Для того, чтобы адаптировать дизайн web-проекта под разные устройства (мобильные телефоны, планшетники, принтеры и т.п.) применяется @Media. Из всего многообразия types и Queries, как правило, внедряют print и width. Рассмотрим последний. Он влияет на отображение сайта в окне браузера разной ширины. Поэтому для того, чтобы увидеть его в действии, достаточно уменьшить размеры окна браузера .

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

Макет с изначальными значениями блоков указан здесь. Добавим правила перед тегом </style>

@media (max-width: 930px) { 
  .content-wrapper {padding: 0;} 
}

@media (max-width: 930px) and (min-width: 470px) {  
  aside {position: static; width: 100%; background: #ccc;} 
}

@media (max-width: 469px) { 
  body {font: .9em/1em "Helvetica Neue",Arial,Helvetica,sans-serif;} 
  aside {display: none;} 
}
Вместо px лучше использовать em. Для чего значение px нужно разделить на значение font-size в px. Например, 1600/16=100, а именно media='(min-width: 100em)’.

CSS стили можно как непосредственно добавить в код страницы, так и воспользоваться внешним файлом, например:

<link rel='stylesheet' href='URL_по_умолчанию.css' />
<link rel='stylesheet' media='(min-width: 1600px)' href='URL_большой.css' />
<link rel='stylesheet' media='(max-width: 1599px) and (min-width: 800px)' href='URL_средний.css' />
<link rel='stylesheet' media='(max-width: 799px)' href='URL_маленький_экран.css' />

Размещение экрана как «пейзаж» (ширина больше высоты) и «портрет» (ширина меньше высоты)

@media all and (orientation:landscape) {
 /* стили для пейзажа */
}
@media all and (orientation:portrait) {
 /* стили для портрета */
}
или
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">  
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Масштабирование и размер изображений на современных страницах SharePoint

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

Какие размеры изображений лучше всего работают?

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

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

  • Пропорции:отношение между высотой и шириной изображений

  • Макет столбца:тип и количество столбцов на странице

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

Пропорции

Пропорции — это отношение между шириной и высотой изображений. Обычно оно выражается в двух числах, таких как 3:2, 4:3 или 16:9. Ширина всегда является первым числом. Например, соотношение 16:9 может иметь ширину 1600 пикселей на 900 пикселей в высоту. Это может быть 1920 x 1080, 1280 x 720 или любые другие комбинации ширины и высоты, которые можно вычислить, равные 16:9. Калькуляторы пропорций можно найти в Интернете и некоторых средствах редактирования фотографий, чтобы определить пропорции изображений. 

В большинстве случаев изображения в современных веб-частях лучше всего работают на разных макетах и устройствах с соотношением сторон 16:9 или 4:3 в зависимости от макета.

Макеты столбцов

На странице можно найти разделы с различными типами столбцов и макетами, такими как полно ширинные столбцы, один столбец, два столбца, три столбца, один третий левый и один третий правый столбец. Обычно изображения, которые должны заполнять ширину столбца, должны быть по крайней мере такой же ширины, как и в столбце, в котором они размещены. Например, изображение веб-части изображения в одном столбце должно иметь ширину не менее 1204 пикселей. Ниже указаны правила ширины для каждого макета столбца.

Макет

Ширина в пикселях

Столбец «Ширина»

1920

Одна колонка

1204

Два столбца

586 в столбец

Три столбца

380 в столбец

Третий левый столбец

380 для левого столбца; 792 для правого столбца

Один-третий правый столбец

792 для левого столбца; 380 для правого столбца

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

Высота изображений в других макетах столбцов будет зависеть от пропорций. Ниже указаны рекомендации по высоте и ширине для пропорций 16:9 и 4:3 (округлка вверх/вниз до ближайшего пикселя). Это помогает, например, сохранить ширину и высоту изображений с соответствующим масштабом для мобильных устройств.

ПРОПОРЦИИ

МАКЕТ

16 x 9

Ширина x высота в пикселях

4 x 3

Ширина x высота в пикселях

Одна колонка

1204 x 677

1204 x 903

Два столбца

586 x 330

586 x 439

Три столбца

380 x 214

380 x 285

Третий левый столбец

380 x 446 для левого столбца; 792 x 446 для правого столбца

380 x 594 для левого столбца; 792 x 594 для правого столбца

Один-третий правый столбец

792 x 446 для левого столбца; 380 x 446 для правого столбца

792 x 594 для левого столбца; 380 x 594 для правого столбца

Макеты веб-части

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

Рассмотрим это изображение с исходными пропорциами 16:9:

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

Веб-часть «Главного сайта»

Для макетов плиток и слоев имеются следующие пропорции:

  • Плитки: высота веб-части масштабется до пропорций 8:3, а изображения в масштабе веб-части — с соотношением сторон 4:3.

  • Слои: индивидуальные шкалы слоев до пропорций 8:3, а изображения внутри каждой шкалы слоев — с соотношением сторон 16:9.

  • На мобильных устройствах макет карусели используется в 16:9.

Ниже показан пример изображения, показанного в макетах «Слои» (сверху) и «Плитки» (внизу).

Веб-часть «Выделенное содержимое»

16:9 — пропорции для макетов «Карусель», «Пленка» и «Карточки».

Ниже показан пример изображения, показанного в макетах «Пленка» (сверху) и «Карточки» (внизу).

Веб-часть «Изображение»

Изображения будут расширяться по ширине раздела, содержащего веб-часть. Вы можете изменить пропорции или обрезать рисунок вручную с помощью панели инструментов «Изображение», а также увеличить или увеличить изображение с помощью хи24-часового режима.

Ниже показан пример обрезных меток изображения (синие линии) в 4:3

Веб-часть «Галерея изображений»

В разных макетах используются следующие пропорции:

  • В макете «Блок-блоки» пропорции всех показанных изображений: 16:9, 1:1, 4:3 и так далее. 

  • Плитки, карточки: 4:3

Ниже показан пример изображения, показанного в макетах «Плитки» (сверху) и «Мозаика» (внизу).

Веб-часть «Новости»:

В зависимости от макета, изображения в веб-части «Новости» могут быть 4:3, 16:9 или 21:9. Вот пример изображений в верхней истории и макете карусель.

Область заголовка страницы

Изображения лучше всего выглядят, когда они имеют альбомную или соотношение сторон 16:9 или больше и имеют размер не менее 1 МБ. Кроме того, не забудьте установить фокальной точкой, чтобы сохранить наиболее важную часть рисунка в представлении, особенно если рисунок используется в эскизах, макетах новостей и результатах поиска.

Пример (исходное изображение 16:9) с фокальной точкой на динамике.

Эскиз страницы

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

Пример (исходное изображение 16:9)

Веб-часть «Быстрые ссылки» 

Веб-часть «Быстрые ссылки» имеет шесть разных макетов. Ниже советуем использовать пропорции.

  • Пленка, сетка, кнопка: 16:9

  • Сжатие, список, плитки: 1:1, 4:3

Ниже показан пример изображения, показанного в макетах «Сжатая» (сверху) и «Пленка» (внизу).

Советы: 

  • При добавлении изображения в область заголовка страницы или веб-части главного имиджегового рисунка также лучше всего установить его фокальной точкой. Дополнительные информацию о настройке фокальной точки для этих двух сценариев см. в веб-части «Изменение фокальной точки рисунка в веб-части «Главного имиджевного рисунка» и настройке области заголовка на странице.

Рекомендации по изображению в заглавной области сайта

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

Элемент

Описание

Рекомендации

Ширина x высота в пикселях

Логотип сайта

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

192 x 64 

Формат: PNG, JPEG, SVG (SVG не разрешено на сайтах, подключенных к группе)

Эскиз логотипа сайта

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

Это необходимый элемент.

64 x 64 

Формат: PNG, JPEG, SVG (SVG не разрешено на сайтах, подключенных к группе)

Логотип сайта с расширенным макетом

В расширенном макете загона имеется расширенная ширина логотипа сайта.

300 x 64p

Формат: JPEG, PNG, SVG

Фоновое изображение расширенного макета

Новое фоновое изображение, которое можно использовать с расширенным header.

2560 x 164

Формат: JPEG, PNG

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

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

Для чего это может пригодиться?

Например, по статистике своего сайта можно проанализировать, — какие разрешения экрана и в каком процентном отношении используют посетители вашего сайта:

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

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

Как посмотреть сайт на разных разрешениях экрана

Есть много способов, чтобы сделать просмотр сайта в разных разрешениях экрана. Так, например, основные разрешения экранов для сайта можно было бы посмотреть вообще простыми средствами Windows, изменив разрешение экрана в разделе Настройки экрана:

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

Проверка сайта в браузере. Разрешение экрана

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

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

Для выбора разных мобильных устройств используем выпадающее меню (2). Справа также указывает разрешения экрана на выбранном устройстве. Чтобы развернуть экран устройства, — пользуемся соответствующей кнопкой (3):

А более удобный способ проверки сайта на разных разрешениях экрана дают специальные онлайн сервисы.

Просмотр разрешения экрана сайта в Screenfly

Это один из самых удобных (при этом, — бесплатный) на текущий момент сервисов, с помощью которого можно быстро посмотреть сайт не только на основных, а вообще на разных разрешениях экрана!

Переходим в сервис Screenfly. Вводим в предлагаемое поле проверяемый сайт и получаем результат (прокомментирую под снимком):

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

Дополнительные функции:

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

Другие сервисы для проверки разрешения экрана сайта

В общем-то, вышеприведенный сервис удовлетворит практически любые потребности в проверке разрешения экрана сайта. Но, если он будет недоступен или хочется попробовать что-то другое, то вот, на всякий случай, еще парочка сервисов: Сybercrab и Infobyip.

распространенных размеров экрана для адаптивного веб-дизайна в 2022 году

Представьте ситуацию, когда 5% новых посетителей сайта используют последний iPad или iPhone, но дизайн вашего сайта в старой версии. Посетители ожидают, что ваш веб-сайт будет отзывчивым, и они готовы пройти через замечательный пользовательский опыт. Поскольку ваш дизайн устарел, интерфейс будет искажен, кнопки плохо читаемы, а все важные элементы, такие как CTA, ссылки или контактные формы, будут выходить за пределы размеров экрана.Подумайте только об этих 5% новых посетителей, которые имеют плохой первый опыт. Готовы ли они вернуться на ваш сайт? Скорее всего нет. Это может привести к серьезным последствиям для конверсии веб-сайта и, следовательно, для дохода.

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

Что такое адаптивный веб-дизайн?

Для начала мы хотели бы определить, что такое адаптивный дизайн. Адаптивный веб-дизайн — это подход к дизайну, который позволяет адаптировать содержимое веб-сайта к различным экранам и размерам окон, таких как настольные компьютеры, мобильные устройства и планшеты. Этот подход помогает визуализировать внешний вид экрана на разных экранах, чтобы в любом случае сделать его отзывчивым. Адаптивный дизайн также дает возможность преобразовывать контент в соответствии с определенными размерами экрана для любых приложений, таких как ERP PMS или POS.

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

Почему адаптивный дизайн так важен?

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

Отзывчивый vs.Адаптивный веб-дизайн

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

Подведем итоги по основным преимуществам этих двух подходов к проектированию.

Адаптивный дизайн:

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

Адаптивный дизайн:

  • делает сайт более удобным для пользователей;
  • отличное юзабилити-тестирование, сильно влияющее на конверсию сайта.

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

Отзывчивый или адаптивный?

Какой тип дизайна лучше подойдет вашему сайту?

Давайте обсудим

Стандартные размеры экрана

Далее, мы хотели бы представить вашему вниманию последнюю статистику разрешения экрана.Мы выбрали период с января 2021 года по январь 2022 года.
Источник: StatCounter

Статистика разрешения экрана рабочего стола по всему миру

1366×768 22,6%
1920×1080 20,87%
1536×864 8,52%
1440×900 6.97%
1280×720 4,81%
1600×900 4,1%
1280×800 2,95%
1280×1024 2,65%
1024×768 2,59%
768×1024 2.47%

1280×720 считается наиболее подходящим разрешением экрана для десктопной версии сайта. Обычно настольная версия обеспечивает лучший пользовательский интерфейс и считается самой удобной и широкой.

Статистика разрешения экранов мобильных устройств по всему миру

  • 360×640 – 12,98%
  • 414×896 — 7,82%
  • 375×667 — 6,65%
  • 360×780 — 6,02%
  • 360×760 – 5.27%
  • 375×812 — 5,15%

Для мобильных экранов ширина 360 и 375 считается идеальной. Таким образом, контент хорошо читается и удобен для пользователей.

Статистика разрешения экрана планшета по всему миру

 

  • 768×1024 4- 6,11%
  • 1280×800 — 7,38%
  • 800×1280 5,9%
  • 601×962 — 5,15%
  • 962×601 — 3,52%
  • 810×1080 — 2,83%

Что касается разрешения экрана планшета, лучше всего выбрать 1280 x 800 и 768 x 1024.Как видим, статистика совпадает с решением нашего архитектора. Это также зависит от модели планшета и размера экрана.

Настольный компьютер, мобильный телефон или планшет по всему миру

 

  • Мобильный – 55,73%
  • Рабочий стол — 41,46%
  • Таблетка – 2,81%

Статистика разрешения экрана рабочего стола США

 

  • 1920×1080 – 20,66%
  • 1366 × 768 – 13.96%
  • 1440 × 900 – 9,16%
  • 1536 × 864 – 7,79%
  • 1280 × 720 – 4,74%
  • 768 × 1024 – 4,72%

Статистика разрешения экрана мобильного телефона США

 

  • 414×896 – 20,52%
  • 375 × 667 – 13,18%
  • 375 × 812 – 12,65%
  • 414 × 736 – 6,63%
  • 360 × 640 – 5.41%
  • 412 × 869 – 3,67%

Статистика разрешения экрана планшета США

 

  • 768×1024 – 50,14%
  • 800 × 1280 – 7,07%
  • 1280 × 800 – 6,55%
  • 601 × 962 – 6,03%
  • 810 × 1080 – 3,7%
  • 962 × 601 – 3,27%

Статистика разрешения экрана рабочего стола UK

 

  • 1920×1080 – 24.28%
  • 1366 × 768 – 15,29%
  • 1440 × 900 – 10,45%
  • 1536 × 864 – 8,89%
  • 1280 × 720 – 5,68%
  • 768 × 1024 – 5,52%

Статистика разрешения экрана мобильного телефона UK

 

  • 414×896 – 16,73%
  • 375×667 — 14,47%
  • 375×812 — 8,65%
  • 360×640 — 7,12%
  • 360×780 – 5.62%
  • 412×869 — 4,4%

Статистика разрешения экрана планшета UK

 

  • 414×896 – 16,73%
  • 375×667 — 14,47%
  • 375×812 — 8,65%
  • 360×640 — 7,12%
  • 360×780 — 5,62%
  • 412×869 — 4,4%

Примеры адаптивного дизайна

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

Новый Веб-сайт York Times

The New York Times — ведущая мировая газета. Конечно, они должны были обеспечить подходящий размер экрана для разных устройств, особенно настольных компьютеров, планшетов и мобильных устройств. Интерфейс похож на традиционную газету — белый фон и черный шрифт. Это классическое сочетание легко читается с разных устройств. Отличается и навигация — в десктопной версии все меню отображается на первом экране; в планшетной и мобильной версии меню разделено в боковых столбцах, что обеспечивает более удобный пользовательский интерфейс.

Веб-сайт электронной коммерции Amazon

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

YouTube

Youtube — онлайн-сервис номер один для просмотра любых видео.Каждый пользователь видит определенный список видео, которые соответствуют его интересам или недавним поискам. Все их версии должны быть удобными. Как обычно, основное отличие версии — навигация. В настольной версии достаточно места, чтобы показать меню с одной стороны. Десктопная и мобильная версии имеют отдельные вкладки с подписками, рекомендуемыми видео и т.д. Мобильная версия очень удобна тем, что меню приложения расположено близко к превью.

Как разрешение экрана влияет на профессиональных дизайнеров?

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

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

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

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


Разрешение рабочего стола

Что касается десктопной версии, то оптимальным выбором будет разрешение экрана 1280х720. Это минимальный размер для настольных устройств. Обычно десктопная версия удобна и отлично читается, если ширина экрана больше 1280.

Разрешение планшета

Разрешение экрана планшета варьируется от 1280×800 до 768×1024. Последний вариант — это книжная ориентация планшета, а размер 1024×768, следовательно, является альбомной ориентацией. Поэтому дизайн планшета следует выполнять на разрешении шириной 768px.

Мобильное разрешение

Минимальное разрешение мобильного экрана составляет 320 пикселей по ширине, что подходит для iPhone 5\SE. Для последних версий смартфонов разрешение экрана зависит от целевой аудитории.Так что это может быть 320, 360 или 375 в ширину. Например, это для iPhone8 или iPhone X.

Передовой опыт реализации адаптивного дизайна

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

  • Определите точку разрыва

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

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

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

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

Все мы знаем, что в мобильной версии не очень удобно печатать что-то для поиска или авторизации.Полезнее добавить функции QR-кодов, отпечатков пальцев или Face ID для авторизации. Отзывчивый дизайн направлен на упрощение взаимодействия с пользователем.

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

Инструменты для проверки совместимости сайта с различными устройствами

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

Снимки браузера

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

Браузер Serling

Browser Serling — еще один онлайн-инструмент для тестирования разрешения экрана. Этот сервис обеспечивает полное взаимодействие с сайтом, то есть не только показ интерфейса, но и тестирование его функциональности. Здесь вы можете выбрать любую версию, которую хотите видеть, и начать рендеринг страницы. Несмотря на то, что инструмент бесплатный, вам придется ждать своей очереди, так как количество активных пользователей может варьироваться.

Стек браузера

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

Как сделать ваш сайт удобным для мобильных устройств?

Следует учитывать взаимодействие между пользователем и интерфейсом. Это означает, что все кнопки и ссылки должны иметь подходящие и удобные размеры, чтобы пользователи могли легко и точно нажимать на них. Навигация является важным компонентом и зависит от конкретного веб-сайта и его услуг.Есть несколько популярных примеров навигации, например:

.
  • Гамбургер-меню
  • панель вкладок
  • отдельная страница

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

Часто задаваемые вопросы

Чтобы закончить

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

Пришло время сделать ваш веб-дизайн адаптивным

Хотите обсудить создание адаптивного дизайна для вашего сайта?

Напишите нам сейчас!

Размеры веб-сайта: 15 разрешений экрана для проектирования Для

Сейчас на мобильные устройства приходится половина всего веб-трафика

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

Сегодня мы сосредоточимся на пользовательском опыте на разных платформах.

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

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

Читайте дальше, чтобы узнать, какой дизайн лучше выбрать: мобильный или адаптивный.

  1 Найдите подходящее агентство для вашего проекта Март 2019 г. — март 2020 г.:

  • 1366×768 (22.98%)
  • 1920×1080 (20,7%)
  • 1536×864 (7,92%)
  • 04 (7,92%) 0 1440×900 (7,23%)

  • 1280×720 (4,46%)

5 наиболее распространенных разрешений для мобильных экранов Worldwide

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

  • 360×640 (18,7%)
  • 375×667 (7,34%)
  • 414×896 (6,76%) 9002×896 (6,76%) 902×48 902×48 %)
  • 375×812 (5.01%)

5 Наиболее распространенные резолюции экрана планшета по всему миру

в период с марта 2019 года и марта 2020 года наиболее распространенные резолюции экрана планшета по всему миру были:

  • 768×1024 (51,43%)
  • 1280×800 (7,28%)
  • 800×1280 5,26%)
  • 601×962 (4,32%)
  • 962×601 (2,99%)

15 самых распространенных разрешений экрана в США

Вот наиболее распространенные размеры экрана, которые вы должны выбрать в 9003 2001:

Наиболее распространенные разрешения экрана рабочего стола в США

Согласно данным StatCounter, в период с марта 2019 года по март 2020 года наиболее распространенными разрешениями экрана рабочего стола в США были:

  • 1920×1080 (19.57%)
  • 0 1366×768 (14,88%) 0 1440×900 (9,18%) 0 1536×864 (7,22%) 0 1024×768 (4,73%) 968 (4,73%)

Самые распространенные резолюции мобильных экранов в США

в течение того же периода времени Наиболее распространенные резолюции экрана для мобильных телефонов в США были:

  • 414×896 (19,44%)
  • 96 (19,44%)
  • 375×667 (13,67%)
  • 0 375×812 (12,3%)
  • 414×736 (8,91%)
  • 360×640 (8,21%)

Наиболее распространенные разрешения экрана планшетов в США

Дизайнеры в США предпочли различные разрешения экрана планшетов и создали веб-страницы следующих размеров:

  • 768×1024 (55.64%)
  • 1280×800 (5,74%)
  • (5,74%) 0 800×1280 (5,31%) 900×1280 (5,31%)
  • 601×962 (5.14%)
  • 962×601 (3,2%)

Почему размеры веб-сайта имеют значение в веб-дизайне и разработке

в соответствии с statCounter , доля трафика в мае 2020 г. была сформирована за счет:

  • Мобильные устройства (50,34 %)
  • Настольные компьютеры (46,67 %)
  • Планшеты (2,99 %)

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

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

Большинство дизайнеров используют одно стандартное разрешение для рабочего стола и одно стандартное разрешение для мобильных устройств, чтобы масштабировать дизайн и обеспечить плавный UX на разных устройствах.

Бренды, которым нужен действительно передовой веб-сайт и пользовательский интерфейс, будут учитывать еще больше аспектов на этапе каркаса, включая:

  • Представления для ПК, планшетов и мобильных устройств
  • Вертикальное и альбомное представления
  • Браузеры

Хотите для автоматического определения разрешения экрана?

НАЖМИТЕ ЗДЕСЬ

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

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

Начните с анализа демографических данных вашей аудитории.

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

Вот на что следует обратить внимание:

  • Возраст : узнайте, какая марка/модель устройства наиболее популярна среди возрастной группы, на которую вы ориентируетесь.YouGov — отличный современный ресурс, который отслеживает эти тенденции и фильтрует
  • Пол : Такие ресурсы, как YouGov, также позволяют фильтровать самые популярные устройства по полу, позволяя вам сопоставлять устройства по возрасту. группа и целевой пол.
[Источник: YouGov]
  • Местонахождение : Более подробное и глубокое понимание, добавление местных тенденций поможет вам сосредоточиться.
  • Доход : Если вы ориентируетесь на аудиторию с высоким доходом, ваш веб-сайт должен быть актуальным и бесперебойно работать на новейших, самых передовых устройствах.

Адаптивный или ориентированный на мобильные устройства веб-дизайн: какой из них выбрать

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

Эти цифры заставляют компании инвестировать в веб-сайты, которые хорошо работают на смартфонах.

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

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

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

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

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

Вот почему 65,8 % компаний B2B планируют улучшить мобильные возможности своих веб-сайтов.

 

 

Какие параметры веб-сайта лучше всего использовать в 2021 году?

Это сложный вопрос, на который есть простой ответ.

Универсального решения не существует.

То, что работает лучше всего для других веб-сайтов, может не работать для вас.

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

Сегодня все зависит от пользовательского опыта, и вы должны убедиться, что у вас есть адаптивный дизайн, чтобы ваши потенциальные клиенты были довольны.

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

[Источник: Google]

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

Просто добавьте URL-адрес или код вашего веб-сайта, и вы узнаете, как оценивается ваша страница.

Через несколько секунд вы получите свои результаты и узнаете, предоставили ли ваши дизайнеры обещанный дизайн.

Выводы о размерах веб-сайта

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

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

  • Мобильный адаптивный
  • Mobile-first

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

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

Описание агентства здесь

Описание агентства здесь

Описание агентства здесь

Наиболее рекомендуемое разрешение экрана для веб-дизайна в 2021 году

Основы адаптивных веб-сайтов

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

Сетка CSS

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

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

Точки останова и размеры экрана

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

Как важно быть дружественным к Google для мобильных устройств

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

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

Как узнать разрешение экрана?

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

Определение разрешения экрана

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

Разрешение экрана и веб-дизайн. Полное руководство

Тара Хорнор

 

21 марта 2014 г. Основные причины пульсирующей головной боли. Иногда эта обманчиво маленькая проблема может показаться безнадежно лишенной решений, поскольку разрешения и устройства постоянно меняются и совершенствуются. Тем не менее, есть некоторые передовые методы, которым веб-дизайнеры и разработчики могут следовать при разработке веб-сайта, и подробный анализ разрешения устройства показывает, что это такое.

 

Многие ошибочно принимают этот термин за фактический размер экрана. Однако, как известно технически подкованным веб-дизайнерам, разрешение экрана — это термин, используемый для обозначения количества пикселей, содержащихся на экране по горизонтали и вертикали, например 1024 × 768, где первое число относится к пикселям по горизонтали, а второе — к вертикали. пикселей.

 

Фото предоставлено Design215.com

 

Запутанная часть возникает, когда два одинаковых размера экрана имеют разные разрешения экрана.Это также означает, что разные размеры экрана могут иметь одинаковое разрешение. Например, 13-дюймовый экран может иметь то же разрешение 1280 × 800, что и более крупный 17-дюймовый экран.

 

Отображение веб-сайта на экране будет сильно различаться в зависимости от разрешения экрана. Например, два 17-дюймовых настольных монитора могут иметь разное разрешение: один — 1024 × 768, а другой — 1280 × 800. Более низкое разрешение (1024 × 768) будет отображать элементы большего размера, чтобы изображение оставалось максимально четким. возможно, но это также означает, что на экране поместится меньшая часть страницы.Монитор с более высоким разрешением сможет отображать большую часть страницы веб-сайта, например всю складку плюс немного ниже, а элементы на странице будут выглядеть меньше, но четче.

 

В своих рекомендациях по использованию разрешения устройств при проектировании Джейкоб Нейлсон из Neilson Norman Group отмечает, что вы никогда не захотите разрабатывать веб-сайт для размера монитора. Во-первых, пользователи с огромными экранами, такими как 30-дюймовый, могут никогда не развернуть окно по максимуму из-за их ненормально широкого монитора.Кроме того, размеры экрана бывают слишком разными формами и размерами. Просто гораздо эффективнее сосредоточиться на разрешении.

 

В прошлом было намного проще понять, для какого разрешения нужно проектировать. Высокие разрешения были очень дорогими, поэтому большинство пользователей могли позволить себе только одно из трех более дешевых разрешений: 640 × 480, 800 × 600 или 1024 × 768, как упоминает Эндрю Кейр.

 

Фото: jorge.correa через Compfight cc

 

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

 

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

 

 

Общие разрешения и лучший размер для веб-дизайна.

 

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

 

В начале 2012 г. разрешение экрана большинства веб-пользователей составляло 1366 × 768, 1024 × 768 или 1280 × 800. Однако сегодня это немного изменилось и показывает, насколько быстро размеры разрешения будут меняться со временем для веб-дизайна.

 

 

 

Минимальное разрешение экрана.

 

Например, W3Schools показывает по состоянию на январь 2014 года: «99% ваших посетителей имеют разрешение 1024 × 768 пикселей или выше». Это довольно веский аргумент в пользу минимального разрешения 1024 × 768. Шон Андерсон также приводит статистические данные о том, что большинство посетителей веб-сайтов имеют разрешение этого размера или выше.

 

 

Самые популярные разрешения экрана по всему миру.

 

Что интересно в статистике, которую представляет Андерсон, так это то, что только 9% людей во всем мире используют разрешение 1024 × 768, 30% используют разрешение 1366 × 768 и около 15% используют разрешение устройства, обозначенное как «другое, », что, скорее всего, связано с мобильным использованием.

 

В исследовании Mobify проанализирована активность 200 миллионов покупателей в 2012 году в сети Mobify Cloud (веб-сайты электронной коммерции на базе Mobify). Исследование показало некоторые интересные результаты:

 

1.19,5% посетителей использовали разрешение на нетбуку 1280 × 800.

2. 13.5% используется 1366 × 768.

3. 11.4% Используется iPhone Размер: 320 × 480.

4. 7.8 % использовали разрешение 1024 × 768, что поставило его на четвертое место.

 

5. 7,3% использовали разрешение 768 × 1024, обычное для iPad и горизонтальных 10-дюймовых нетбуков.

 

6. 7,3% использовали ноутбуки большего размера 1440 × 900.

 

7. 6,5% использовали обычный настольный ЖК-монитор 1280 × 1024.

 

8. 6,1% использовали HD-дисплеи 1080p (1920 × 1080).

 

9. 5,1% использовали обычное широкоэкранное разрешение 1680 × 1050.

 

10,3,8% использовали размер экрана HD+ 1600 × 900.

 

Нажмите на изображение, чтобы увидеть полную инфографику от Mobify.

 

 

Какой размер лучше?

 

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

 

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

 

 

Введение в SVG (масштабируемая векторная графика).

 

Адам Фэйрхед представляет интересную идею в своей статье на WebDesignerDepot под метким названием «Хватит гнаться за разрешением экрана», и его точка зрения именно в этом. Фэйрхед считает, что веб-дизайнерам больше не нужно беспокоиться о разрешениях экрана из-за SVG или Масштабируемая векторная графика.SVG — это технология HTML5, которая позволяет отображать изображения (точнее, векторные) с помощью кода, что делает изображение четким, независимо от разрешения экрана пользователя, что очень удобно при создании отзывчивый веб-сайт.

 

 

PPI и графика Retina.

 

Давайте остановимся на мгновение и обсудим PPI (пикселей на дюйм), который относится к разрешению изображений. PPI зависит от разрешения экрана и фактического размера экрана, определяемого длиной диагонали в дюймах, как показано с помощью этого инструмента PPI от DPILove. Знать, какой PPI использовать для веб-сайтов, было легко в прошлом: веб-дизайнеры знали, что 72ppi гарантирует, что изображения будут выглядеть четкими на веб-сайте, но при этом будут загружаться с соответствующей скоростью, просто потому, что большинство размеров мониторов коррелируют с разрешениями как таковыми.

 

 

Большая проблема с разрешением экрана с тех пор, как Apple выпустила iPhone4, связана с графикой Retina. Графические устройства Retina — это устройства с разрешением, намного превышающим традиционные экраны. Почему это проблема? Потому что изображения, оптимизированные для 72 пикселей на дюйм, теперь выглядят размытыми на небольших экранах с разрешением более 200 пикселей на дюйм.

 

 

Графика Retina зависит от разрешения.

 

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

 

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

 

 

Решение SVG.

 

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

 

Изображение предоставлено: arrashthearcher.org

 

Другим преимуществом использования векторной графики, а не растровой, является то, что время загрузки векторных изображений одинаково независимо от их размера. Растровое изображение размером 2000×2000 пикселей загружается слишком долго. Векторное изображение размером 2000 пикселей не требует загрузки отдельных пикселей, поэтому не имеет значения, является ли вектор размером 20 или 4000 пикселей.

 

 

Ограничения SVG.

 

Так почему же SVG не рекламируется как полное решение для разрешения? Ну, например, он вообще не может содержать растровые изображения.И они не могут быть слишком сложными по дизайну, иначе это повлияет на время загрузки, даже в виде вектора.

 

Последняя большая сложность с SVG заключается в том, что это довольно сложный код для изучения. Адам Фэйрхед объясняет это так:

 

SVG-код — это не то, что вы можете «увидеть в уме», как при чтении HTML. Это последовательность инструкций, сопоставленных друг с другом, элемент за элементом, слой за слоем .

 

Таким образом, если веб-дизайнер еще не знает кода, проектирование для SVG может быть практически невозможным.

 

 

Полноэкранные веб-сайты.

 

Дополнительные рекомендации по дизайну устройств относятся к типу дизайна веб-сайта, например полноэкранному веб-сайту, то есть дизайну, который заполняет все окно браузера независимо от разрешения экрана. Этот тип веб-дизайна предполагает использование очень большого изображения, такого как 2560 × 1290, CSS и HTML, чтобы веб-сайт хорошо выглядел как на большом, так и на маленьком разрешении экрана. Некоторые абсолютно красивые дизайны сайта появились из этой практики:

Посещение сайта Keecker

Учебники по CSS.

 

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

Создание потрясающего полноэкранного мобильного интерфейса — Пол Кинлан

Полноэкранный фон CSS (краткий код подсказки) — Джон Сурдаковски

Создание полноэкранного фона для веб-сайтов — Представления веб-дизайна

Полноэкранный макет с переходами страниц — Мэри Лу

 

 

Полноэкранные ограничения.

 

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

 

 

Адаптивный дизайн сайта.

 

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

Адаптивный дизайн также является любимым макетом Google для смартфонов, что довольно интересно.

 

 

Является ли адаптивный дизайн лучшим вариантом?

 

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

 

 

Преимущество адаптивного дизайна, как объясняет Рави Пратап в VentureBeat, заключается в том, что веб-сайт можно легче настроить для «высоко дифференцированного взаимодействия, созданного с учетом конкретных намерений вашего мобильного клиента». Но опять же, мы сталкиваемся с проблемой разрешения устройства при адаптивном дизайне.

 

 

Pixel-Perfect Отзывчивый веб-дизайн.

 

Адаптивный дизайн веб-сайта решает проблему адаптивного дизайна, поскольку он является гибким, что отлично подходит для многих веб-сайтов, особенно для тех, которые хотят обеспечить одинаковое взаимодействие на разных устройствах.Некоторые веб-сайты считают адаптивность и отзывчивость слишком ограниченными, когда им нужен одновременно гибкий и индивидуальный подход. Адаптивный дизайн Pixel-perfect заполняет пробел между выбором создания адаптивного веб-сайта или адаптивного веб-сайта, сочетая лучшие аспекты обоих типов дизайна.

 

Взглянув на сайт ProStory на Screenfly, вы убедитесь в гибкости адаптивного дизайна.

 

Как и адаптивный дизайн, адаптивный дизайн с точностью до пикселя позволяет веб-сайту адаптироваться к определенным размерам.Это дает дизайнерам точный контроль над каждым пикселем, чтобы веб-сайт работал точно так, как нужно на разных устройствах. Как и адаптивный дизайн, пиксельный дизайн является гибким и плавным и масштабирует каждую часть дизайна — изображения, контент и т. д. — независимо от размера устройства. Дизайнеры просто назначают контрольные точки для веб-сайта с точностью до пикселя независимо от вида. Бонус? Он по-прежнему попадает под излюбленный дизайн Google

 

 

Как разрешение экрана влияет на профессиональных дизайнеров.

 

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

 

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

 

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

 

Как вы справляетесь с разрешением экрана, когда работаете веб-дизайнером или разработчиком? Используете ли вы одну из лучших практик выше или другую? Не стесняйтесь делиться своим опытом в комментариях ниже!

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

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

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

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

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

Pixabay
  • 1280×720 Стандартный HD — Возможно, этот формат вам больше известен как 720p. Это было стандартное разрешение HD, когда HD впервые стал обычным явлением. Вы, вероятно, не найдете много новых мониторов с таким разрешением, но многие из них все еще находятся в дикой природе, когда они были более популярны.
  • 1366×768 — Это довольно необычное разрешение, но оно очень популярно в небольших ноутбуках и некоторых планшетах.Если вы имеете дело с хромбуками более низкого уровня, есть большая вероятность, что это именно то разрешение, на которое вы ориентируетесь.
  • 1920×1080 Самый распространенный — Когда вы думаете о настольных компьютерах, вы, вероятно, имеете дело с разрешением 1920×1080, более известным как 1080p. Это разрешение есть абсолютно везде. Большинство настольных мониторов по-прежнему имеют разрешение 1080p, как и многие полноразмерные ноутбуки. Вы также найдете приличную долю планшетов с разрешением 1080p и в альбомной ориентации.
  • 2560×1440 — 1440p — еще одна странная золотая середина в картинке разрешения монитора.Это выше, чем то, что вы считаете 2k, но это не совсем 4k. Тем не менее, это обычное разрешение на рынке игровых мониторов и доступная альтернатива полному разрешению 4K. В зависимости от вашего сайта, поддержка 1440p может быть полезной, а может и не быть.
  • 3840×2160 Ближайшее будущее — Это полный 4к или 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 — Это наиболее распространенное разрешение планшетов Apple. Он достаточно похож на 1440p, чтобы не иметь большого значения, но опять же, портрет необычный.В любом случае рекомендуется протестировать свой сайт в этом разрешении, чтобы убедиться, что на iPad не происходит ничего странного.

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

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

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

Pixabay

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

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

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

Простые советы, о которых следует помнить

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

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

Разрешение экрана и макет страницы

Один из наиболее часто задаваемых вопросов в моем курсе веб-юзабилити: «Для какого разрешения экрана нам следует разрабатывать дизайн?» Полный ответ немного сложен, но основной совет ясен:

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

В настоящее время около 60% всех мониторов имеют разрешение 1024×768 пикселей. (См. исторические тенденции и новые данные о размерах экрана.) Для сравнения, только около 17% используют 800×600 , поэтому очевидно, что для этих пользователей с маленькими дисплеями не так важно стремиться к совершенству. Однако столь же очевидно и то, что вы не можете просто игнорировать 17% своего клиентского сегмента, предоставляя замороженный макет, который требует больше места на экране, чем у них есть.

Оптимизация для 1024×768

Когда я говорю «оптимизировать», я имею в виду, что ваша страница должна выглядеть и работать как наилучшем при наиболее распространенном размере . Он по-прежнему должен выглядеть как как и работать как как в других размерах, поэтому я рекомендую гибкую компоновку. Но лучше всего он должен быть в разрешении 1024×768.

Три основных критерия оптимизации макета страницы для определенного размера экрана:

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

Также следует учитывать все три критерия в полном диапазоне размеров, непрерывно изменяя размер окна браузера с 800×600 до 1280×1024.Ваша страница должна получить высокие оценки по всем критериям во всем диапазоне разрешений.

Ваша страница также должна работать в меньших и больших размерах, хотя такие крайности менее важны. Менее половины процента пользователей по-прежнему имеют разрешение 640×480. Хотя такие пользователи, безусловно, должны иметь доступ к вашему сайту, предоставление им менее чем хорошего дизайна является приемлемым компромиссом.

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

Как прокрутка, так и первоначальная видимость, очевидно, зависят от размера экрана: на больших экранах больше содержимого отображается в верхней части экрана и требуется меньше прокрутки. Именно здесь вам нужно оптимизировать изображение для разрешения 1024 x 768: покажите свой самый привлекательный материал в верхней части страницы в этом разрешении (при этом убедитесь, что абсолютно важная информация остается видимой при разрешении 800 x 600).

А как насчет крошечных экранов, таких как те, что есть на мобильных устройствах ? Жидкий дизайн должен масштабироваться вплоть до телефона, но не думайте, что именно так вы должны обеспечивать удобство работы мобильных пользователей вашей компании.Мобильная среда особенная; чтобы оптимизировать для них, вы должны разработать отдельный сервис, который предоставляет меньше функций, написан еще более лаконично и более контекстно-зависим.

Большие экраны

У многих пользователей большие дисплеи. В настоящее время около 18% пользователей имеют разрешение не менее 1280×1024. Процент пользователей с большими экранами растет, хоть и не так быстро, как хотелось бы.

Большие мониторы — это самый простой способ повысить производительность белых воротничков, и любой, кто зарабатывает не менее 50 000 долларов в год, должен иметь разрешение экрана не менее 1600×1200 .Плоский дисплей с таким разрешением в настоящее время стоит менее 500 долларов. Таким образом, если дисплей большего размера увеличивает производительность не менее чем на 0,5 %, вы окупите инвестиции менее чем за год. (Обычные корпоративные накладные расходы удваивают затраты компании на одного сотрудника; всегда помните, что при расчете производительности следует использовать полную стоимость, а не заработную плату на дом.)

Apple и Microsoft опубликовали отчеты, в которых делается попытка количественно оценить прирост производительности за счет больших мониторов. К сожалению, исследования не дают достоверных данных из-за различных методологических недостатков.Мой опыт показывает, что предполагаемый прирост производительности составляет 5–10 %, когда пользователи выполняют информационную работу на большом мониторе. Это приводит к увеличению общей производительности примерно на 0,5–1% для человека, который 10% дня занимается работой с информацией, сосредоточенной на экране. Нет никаких сомнений в том, что большие экраны стоят своих денег.

Лично я использую дисплей с разрешением 2048×1536, и я бы даже не назвал его очень большим экраном. Я ожидаю, что в течение следующих 10 лет мониторы с разрешением, скажем, 5000×3000 будут широко использоваться, по крайней мере, среди высококлассных бизнес-профессионалов.

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

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

В любом случае потребность в новой парадигме в будущем не меняет текущих рекомендаций: оптимизируйте для 1024×768, но не проектируйте исключительно для этого размера. Ваши страницы должны работать при любом разрешении, от 800×600 до 1280×1024 и выше.

(См. также: более новая статья о дизайне страниц для мониторов большего размера, чем те, что обсуждались здесь.)

Разрешение экрана и дизайн веб-сайта

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

Во-первых, чтобы показать различные разрешения экрана и соответствующий процент пользователей, использующих эти разрешения, я создал наглядное пособие. Эти данные были собраны NetMarketShare и отражают действия пользователей в августе 2011 года.Были оживленные дебаты о правильном разрешении, которое дизайнеры должны использовать для разработки веб-сайта. Несколько лет назад было обычным делом разрабатывать экраны с разрешением 1024×768 и 800×600 пикселей. Теперь стало обычным проектировать строго для 1024 × 768 пикселей из-за увеличения размера экрана ведущими производителями компьютеров (упоминается в наглядном пособии). Несмотря на то, что многие пользователи увеличили размер своих мониторов, некоторые лидеры мнений утверждают, что пользователи по-прежнему сохраняют окна браузера относительно небольшими на своих экранах, чтобы одновременно просматривать окна других задач.

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

При разработке дизайна для экрана с разрешением 1024×768 пикселей используйте жидкий макет. «Жидкий макет» — это инструмент, который позволяет веб-сайту легко корректироваться при изменении размера окна браузера, сохраняя при этом дизайн и содержание.Обязательно проверьте это, убедившись, что веб-сайт по-прежнему выглядит хорошо при изменении размера окна браузера.

Убедитесь, что веб-сайт имеет хорошую начальную видимость. «Первоначальная видимость» — это контент, который просматривается, когда посетитель впервые попадает на веб-сайт. Зритель обычно сканирует веб-сайт, как будто он читает книгу, сверху вниз и слева направо. Разместите самую важную информацию о бренде, как визуальную, так и текстовую, в верхней левой части веб-страницы. Это также улучшит поисковую оптимизацию веб-сайта (SEO), облегчив поисковым системам сканирование вашего сайта и индексацию ключевых слов на основе контента в этой части веб-сайта.

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

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

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

Сознательное рассмотрение разрешения при создании нового дизайна веб-сайта обеспечит меньшее количество обновлений в будущем и больший успех в обеспечении максимальной видимости и трафика пользователей на ваш веб-сайт.

Чтобы узнать больше о разрешении экрана и дизайне веб-сайта, посетите Design Festival, Use It и NetMarketShare.

Leave a Reply