какую ширину сайта выбрать в 2020

Какую ширину сайта выбрать в 2020

Хотел спросить, какая в наше время ширина сайта актуальна, ну та которая контент + сайдбар. Посмотрел в популярном фреймворке bootstrap вроде пишут 960 и 1140 пикселей, если я туда смотрел конечно. Или сейчас уже не делают фиксированную ширину, т.к. сейчас в продаже очень много сильно вытянутых и изогнутых мониторов с большим разрешением экрана более Full HD.

Если я правильно замерял, то получается:

Примерно на вскидку получается в среднем 1056 пикселей нормальная ширина сайта, или сейчас лучше думать над тем как не использовать фиксированную ширину?

Всем спасибо за ответы!

Приветствую. На мой взгляд универсальна ширина в диапазоне 1024-1270. Мониторы с диагональю меньше 17 уже в красной книге. А 19-шки еще в строю и думаю будут долго.

И далеко не у всех широкоформатные, по моему опыту на этот год соотношение примерно такое:

я бы смотрел в сторону max-width: 1200px, если не нужна максимальная ширина

Ноутбуки (в т.ч. макбуки) живы.. 12-13-14-15 дюймов никуда не разошлись.. другое дело, что на ретине и разрешение будет..

Expert64, вы забыли про планшеты, которые половину юзеров юзают, а там хорошо если 12″

Главное, чтобы ширина сайта не мешала ему в ТОП пролезть.🚬 А то ведь может и застрять. 🙅

Отсюда (ибо, по ссылкам всё равно мало кто ходит):

С учётом адаптивной вёрстки, scale и css3 не вижу сложности «сделать красиво» как под 2к+, так и под мобильник (часть из которых сейчас шире чем экраны лет *дцать назад)

Да, требует внимания и навыков.. как, впрочем, и любая сфера деятельности..

ivan-lev, Не понятно, мягко говоря. 800х600 и 640×480 это что? У мониторов таких разрешений нет, 15 дюймовые ЭЛТ уже исчезли. Это и не планшетные размеры.

10″ Netbook 1024 x 600

12″ Netbook 1024 x 768

13″ Notebook 1280 x 800

15″ Notebook 1366 x 768

19″ Desktop 1440 x 900

20″ Desktop 1600 x 900

22″ Desktop 1680 x 1050

23″ Desktop 1920 x 1080

24″ Desktop 1920 x 1200

Kindle Fire HD 7″ 800 x 480

Asus Nexus 7 960 x 600

Kindle Fire 1024 x 600

Apple iPad 1024 x 768

Samsung Galaxy Tab 7″ 1024 x 600

Kindle Fire HD 8.9″ 1280 x 800

Samsung Galaxy Tab 1280 x 800

Apple iPad Pro 1366 x 1024

Microsoft Surface Pro 1440 x 1024

Motorola RAZR V3m 176 x 220

Motorola RAZR V8 240 x 320

BlackBerry 8300 320 x 240

Apple iPhone 3/4 320 x 480

Samsung Galaxy S2 320 x 533

Apple iPhone 5 320 x 568

Samsung Galaxy S3-7 360 x 640

Apple iPhone 6/7 375 x 667

Apple iPhone 6/7 Plus 414 x 736

Так что я склонен не доверять информации с лайвинтернета.

Вменяемые модели ноутбоков, которые у 90% пользователей, это 15.6 дюймов с разрешением по ширине 1366х. и то, они уже снимаются с производства и повсеместно внедряют матрицы с разрешением Full HD при тех же размерах.

foxi, Согласен, но я их не упомянул специально, поскольку автор спрашивал про разрешения на мониторах. А всё что планшетное и мобильное должно идти как адаптивная вёрстка с @media (max-width. )

Лично я на своих проектах ставлю 1270 максимум. Если делать максимум адаптивным, то изображения очень сложно подобрать, придётся искать вплоть до 4к разрешений, ведь такие мониторы тоже нельзя исключать. Всё что ниже уже резиновое.

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

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

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

3.Контентная часть, вот здесь было бы интересно узнать профессиональные точки зрения на изменение длины строки к 2020 году, например. По моим ощущениям строка становится короче, отчасти из-за уменьшения диагоналей в первой декаде 21-го века, сейчас разрешения экранов возвращают малые диагонали к стандартной верстке.

Средняя длина слова русского языка — 7 символов

Нормальная, комфортная, длина строки — 12 слов

Нехитрое действие подводит нас к результату 12*7=84 символа б/п.

Pikabu.ru – 1020 px. — 78

3dnews.ru – 1245 px. — 102, но верстка как по мне — говно

Habr.com – 1100 px. — 83 (почти в дырочку)

Losst.ru – 1124 px. — 77

Vk.com – 795 px. — 64 (но он и воспринимается узким)

Сайт Ильяхова до 77-ми (по мне так авторитетный человек)

Источник

Актуальные стандарты веб-дизайна в 2020 году

Именно поэтому вы должны следовать некоторым стандартным принципам веб-дизайна, чтобы сделать свой сайт удобным и легким для пользователей. Согласно опубликованным исследованиям в журнале «Behaviour & Information Technology», для формирования у посетителей первого впечатления о вашем сайте требуется всего 50 миллисекунд (то есть 0,05 секунды). Эта печальная статистика заставляет нас о многом задуматься.

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

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

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

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

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

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

Призывы к действию (CTA)

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

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

Подписка на рассылку

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

Иконки социальных сетей

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

Согласно последним исследованиям, мобильные устройства генерировали 52,6% мирового трафика. Сайты теперь больше посещаются с мобильных, чем с ПК, и вам определенно следует подумать о хорошей адаптации вашего сайта под такие устройства.

Источник

Как выбрать правильную ширину сайта

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

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

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

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

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

Какие бывают форматы размеров сайта для вёрстки

У каждого устройства есть несколько характеристик, описывающих его размер:

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

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

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

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

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

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

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

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

Минусы:

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

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

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

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

Плюсы:

Минусы:

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

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

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

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

Плюсы:

Минусы:

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

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

Как выбрать оптимальный размер макета

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

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

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

Эти данные можно найти в сервисах:

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

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

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

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

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

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

Подытожим наши рекомендации для дизайна сайтов исходя из самых популярных разрешений экранов.

Рекомендуемые размеры сайта

Но лучше разрабатывать несколько шаблонов используя «опорные точки»:

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

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

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

Если у вас Google Analytics

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

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

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

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

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

Нужна помощь с проектированием сайта и разработкой ТЗ? Обращайтесь к нам!

Источник

Адаптация сайта под разные разрешения экрана (рекомендации)

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

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

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

Понятие отзывчивого дизайна было введено в 2010 г. Итаном Маркотом. В 2011 г. Густафсон опубликовал издание под именем «Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement», повлекшее использование этого термина. Понятие применяется в среде веб-дизайнеров по сей день.

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

Адаптация под разные разрешения экрана

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

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

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

У вас есть необходимость в улучшении старого сайта под современные требования? Обращайтесь, вам поможет квалифицированная команда веб специалистов “Нужен сайт”. Для ваших клиентов мы создадим комфортный вид с любого гаджета!

Источник

С какой шириной нужно создавать дизайн веб-сайтов?

Простой 2 комментария

От 360×640 до 1920х1080
Google: «responsive web design»

Вот текущая статистика: gs.statcounter.com/screen-resolution-stats
Примерно половина пользователей заходят на сайты с мобильных устройств.
Недорогие ноутбуки: 1366 px по ширине; не новые ноуты 1280.
Большинство новых мониторов 1920х1080 px
Много старых мониторов от 1024 до 1280 px.

Большинство мониторов 1920х1080 px

Вот отсюда продублирую свой ответ на похожий вопрос.

Размер контентной части зависит от количества контента. Например, башорг 740px в ширину, меил.ру 1280px, а личный кабинет(или как его назвать) adsense.google.com вообще растягивается на всю ширину монитора\мониторов.

не понимаю почему именно эта

Эта ширина хорошо подходит для фулл-хд моников.

Ещё дополню в крупных компаниях России где я работал там использовали 95% проектов, 1920px ширину для макета, а мониторы были 2560px чтобы удобнее смотреть именно макет под 1920px.

Источник