Разработать дизайн сайта которым удобно пользоваться на смартфонах с разрешением 720 х 1440 px
Впервые столкнувшись с задачей разработки дизайна адаптивного сайта, возникают вопросы, связанные с размерами макета. Эти вопросы возникают не только у дизайнера, но и часто у клиента. Дизайнер задает вопрос клиенту, под какие разрешения необходимо разработать макет, а клиент отвечает, под все. И тут возникает ступор, ведь разрешений множество, а если нет опыта, то все кажется сложным. Давайте будем разбираться.
Для начала нужно понимать, что при верстке сайта верстальщик работаем с диапазонами размеров, в которых дизайн корректно отображается.
Разрабатывая же макет будущего сайта в графическом редакторе (Photoshop) или сервисе (Figma), дизайнер не можем работать с диапазонами, ему приходится задавать жесткие размеры макета. Эти макеты веб-дизайнер создает с учетом минимального и максимального разрешения популярных экранов, которое определяет для проекта.
Для ПК версии возьмем разрешение 1920 px с контентной частью в 1280 px. Контентную часть можно сделать и больше, например 1440 px, или во всю ширину, если создается, например сервис или административная панель. На данный момент чаще используемый первый вариант. Для смартфонов самым минимальным разрешением считается 320 px. Таким образом, определили максимальное и минимальное разрешения. Далее нужно определиться с промежуточными разрешениями.
Иногда вместо 320 и 480 разрабатывается один макет на 360 px. Но тогда верстальщику придется самому проверить дизайн после верстки на разрешение в 320, иначе получим сайт с некорректным отображением.
Итак, определились с разрешениями, под которые требуется создать макеты и таких макетов будет пять.
- ПК – 1920 px файл, контент под 1280 px без учета отступов на скролл и отступов справа и слева;
- Планшет 1024 px без учета отступов на скролл и отступов справа и слева;
- Планшет 768 px без учета отступов справа и слева;
- Смартфоны 480 px без учета отступов справа и слева;
- Смартфоны 320 px без учета отступов справа и слева;
Раньше на скролл отнималось 21 px как стандарт, но ширина скроллинга у браузеров изменилась и отличается. Но это не так важно, главное не забыть и учесть скролл при создание макета для ПК. Подробнее о том, как учесть скроллинг в макете читайте здесь.
Холст 1920 px создавайте только для ПК версии, на остальных разрешениях в размер. Разрешение в 1920 px дает возможность размещать фоновые изображения в блоках дизайна на ширину экрана.
Что касается отступов по краям
Параметр отступов отличается, если будите использовать фреймворк то посмотрите размеры в документации. Если создаете макет сайта без фреймворка то он будет зависеть от модульной сетки и используемых отступов у колонок.
Обычно использую следующие отступы:
- Мобильные 10-15
- Планшет 15-20 px. Для разрешения в 1024 px использую холст на 1000 px это за вычетом скроллинга, потом от него отнимаю отступы.
- ПК контентная часть делаю в размер 1200 px, отступы зависят от сетки.
Подходы к созданию макета сайта Mobile First или Desktop First?
Кроме вопроса: «Какой размер макета сайта делать, создавая адаптивный дизайн?»
Задается еще и сопутствующий вопрос: «Какой из подходов создания правильнее Mobile First или Desktop First?»
Mobile First – сначала мобильные, то есть первым делом рисуются макеты для мобильного, разумеется, перед этим делают прототип сайта. А уже потом переходят к созданию планшетной и ПК версии. Некоторые считают, что благодаря такому подходу можно сделать более удобный интерфейс. И этот подход правильнее исходя из популярности и нарастающего трафика мобильного Интернета.
Desktop First – Первым делом разрабатывается макет для самого большого разрешения, а в последствие для планшета и смартфонов. Другие считают, что такой подход хорош тем, что сразу виден полный функционал проекта, это дает понимание о том, что упростить на планшете, смартфоне и каким образом.
Возможно, этот подход мне ближе, так как создаю дизайн сайтов давно. Изначально не приходилось разрабатывать столько макетов, а делалась лишь одна версия для ПК.
Если подумать, то особой разницы в подходах, лично я не вижу. Считаю, что правильно делать, так как удобнее вам, ведь главное результат! Если можете сделать грамотный дизайн, сделав сначала ПК версию, а потом остальные, зачем задумываться над подходом.
Как быть с плотностью пикселей экранов устройств?
Еще один вопрос, который не дает покоя это плотность пикселей. Вернее даже не сама плотность пикселей, а как будет выглядеть дизайн на мобильных устройствах с высоким разрешением. Часто разрешение у смартфона может быть в разы выше, чем макет, который разрабатывается для ПК версии.
В этом случае стоит обратить внимание на множитель плотности пикселей, который позволяет картинке отображаться на устройстве в несколько раз четче.
Зная множитель плотности пикселей, вы с легкостью определите какой макет и на каком устройстве будет отображаться.
Отсюда следует, что макеты дизайна сайта стоит создавать под обычное разрешение с 1х плотностью пикселей. Иконки и графику рисовать в векторе и использовать svg. При верстке страниц сайта через media queries определять экраны с множителем и подгружать соответствующие растровые изображения, если таковые используются.
Адаптируя макет сайта для устройств Apple с Retina-дисплеями, веб-дизайнерам необходимо учитывать специфику технологии. Как подготовить изображения, какие моменты стоит учесть кроме этого? Как сделать веб-дизайн удобным для всех? Мы рассмотрим эти вопросы и не только.
На рынке смартфонов, ноутбуков и PC доля устройств с разрешением экранов в 2К, 4К и 5К неуклонно растет и с каждым годом такой продукции становится все больше и больше. Соответственно, развитие цифровой графики, видео, веб-дизайна, анимации тоже не стоит на месте и должно быть им под стать, чтобы на больших разрешениях качественно и красиво всё выглядело. Например, тот же сервис YouTube уже имеет поддержку видео в 2К и 4К, Apple ведет с 2014 года продажи iMac с дисплеями Retina 4К/5К.
Для веб-дизайнеров и разработчиков такое развитие технологий означает, что приходит время вести не просто оптимизацию сайта и делать его адаптивным, но и уделять большое значение графике, чтобы она безукоризненно отображалась при большом разрешении. Чтобы разобраться в "накатывающем" на человечество прогрессе, мы в этом материале рассмотрим особенности больших разрешений дисплеев Retina и пользу Photoshop для веб-дизайнера в этом вопросе. Дело в том, что экраны Retina устанавливаются и на iPad/iPhone/iMac/MacBook и прочие устройства Apple, а поскольку доля пользователей этой техникой растет в мире, то и сайты должны уже иметь поддержку данной технологии.
Технологии больших разрешений
В чем состоит разница между 4K, 5K, Retina? Все сводится к пикселям и многие знают это почти наизусть. Но напомним.
- HD имеет разрешение 720 px.
- Full HD – 1920 px по горизонтали.
- QHD или 2К – 2048 px по горизонтали и 1080 по вертикали.
- Quarter High Definition (не путать с предыдущим) – четверть Full HD, 960x540 px, оно преимущественно для мобильных устройств.
- Ultra HD или 4К обладает разрешением 3840 X 2160 px (для потребительской техники, мониторов, например) и 4096 x 2160 px – для цифровых кинотеатров.
- Retina 4K имеет разрешение 4096 х 2304 px.
- Retina 5K у Apple iMac обладает разрешением 5120 x 2880.
Apple, представляя новую собственную технологию Retina, рассказала и уверила всех, что человеческий глаз способен воспринимать гораздо большее количество пикселей, поэтому, если матрица стандартного экрана в 15 дюймов и разрешении1440x 900 состоит из пикселей того же количества (1440x900), то на Retina-экранах разрешение при 15 дюймах равно 2880 x 1800 (ровно в два раза). То есть, весь смысл технологии Retina – увеличение количества пикселей на кадр.
Никто не спорит, качество картинки при таком количестве пикселей невероятно высоко и изображение выглядит, как в глянцевых журналах или на фотографиях. Если же сайты имеют векторную графику, то, разумеется, тоже все отлично смотрится. Но ведь почти всегда веб-дизайн использует растровую графику и тут уже начинаются проблемы с отображением. И неважно, iMac у заказчика/посетителя или iPhone/iPad. Проблема касается самой технологии Retina.
А выглядит она так: если у нас есть изображение 600 x 400 px, то на Retina-экране качество заметно ухудшится, будет размытым, нечетким и пр., ибо само разрешение должно быть большим в два раза (для 2К) или четыре раза (для 4К), с большим количеством пикселей. Исходная картинка самостоятельно увеличивается в процентах и происходит искажение.
Да, разумеется, можно сразу создавать только файлы большого разрешения и через код CSS/HTML прописать, как отображать каждую картинку (img src="logo.jpg" height="150" width="150").
Но, поскольку не все пользователи имеют устройства Apple (Retina только на них), то посетителям с обычными экранами мониторов придется жертвовать трафиком интернета, чтобы прогрузить высококачественные изображения, а затем ждать, когда они уменьшатся. На такое не все могут пойти, а потому посетителям проще будет покинуть сайт и найти ему альтернативу.
Удобное решение проблем с графикой для всех одновременно – иметь несколько изображений для проекта, дабы каждый пользователь видел то, что для него предназначено. Принято, что разрешения экранов Retina обозначаются @2x, @3x, @4х, а увеличение осуществляется в процентах – 100, 200 и так далее.
Использование SVG
Все изображения можно сохранять в формате масштабируемой векторной графики или SVG. Это весьма удобный и необычный формат. Он хранит данные изображения не в пикселях, как растровые форматы, а в текстовом XML, где описывается геометрия картинки и представляет собой векторный формат. Он удобен, поскольку изображения легко масштабируются и сохраняют свое качество. Photoshop не может с ним работать, но существуют скрипты и расширения для экспорта в данный формат.
Но SVG не поддерживает работу с фотографиями или артами. Для этих целей все равно придется создавать растровые файлы с разным разрешением. Зато SVG удобен для логотипов, иконок, графиков, диаграмм. Альтернативой ему может стать PNG, впрочем, на сегодняшний момент практически все браузеры поддерживают данный формат.
CSS
Скрипт
Можно использовать скрипт Retina.js . Весьма удобная вещь. Как только пользователь открывает страницу сайта, скрипт автоматически проверяет какое разрешение у экрана и какова матрица пикселей. Затем, в случае наличия Retina, он ищет на сервере необходимые файлы изображений и заменяет их на более качественные. Условие таково: изображения для Retina-устройств должны иметь в названиях приписку @2x, @3х, @4х.
Уже в таком варианте, форматы файлов изображений могут быть разными: JPEG, PNG, GIF. Как работать со скриптом описано на страничке проекта и это самый простой сценарий, существующий на просторах интернета.
Иконки и шрифты
Многие надписи и буквы можно заменить иконками, точнее иконочным шрифтом, с помощью правила CSS – @font-face. Им можно заменить надписи e-mail, телефонов, названия полей в формах, заголовки виджетов. Найти их можно на сервисах We love icon fonts, Font awesome, Icomoon. В последнем есть система генерации PNG/SVG или Font и необходимого CSS кода.
Иконочный шрифт можно масштабировать, они поддерживаются всеми браузерами и они зачастую удобнее, чем изображения.
Adobe Generator в Photoshop
Разумеется, что создавая макет сайта и адаптируя его для устройств с Retina-дисплеями, возникает вопрос, чем может помочь Photoshop. Ответ: для создания изображений в разных разрешениях. И в самом приложении Adobe уже ввела удобную функцию, которая позволяет сразу задавать расширение файлам изображения и его необходимый размер для Retina-дисплеев.
В результате не потребуется копировать слои, вырезать их, экспортировать и сохранять нужное. Более того, добавив в название файла только коэффициент масштабирования, файл создается автоматически.
Работает это в Photoshop CC. Во время работы с PSD откройте Файл -> Генерировать -> Набор изображений. У вас ровным счетом ничего не появится, никакого уведомления или окна. Но именно теперь можно задать имя слою и желаемое расширение, а затем увидеть в Проводнике Windows созданную папку с файлом или, в нашем случае, с файлами изображений.
Теги в названиях могут быть:
- Расширение png – стандартное png32 с прозрачным альфа-каналом.
- Расширение .jpg8/.jpg24/.jpg32
- Расширение .jpg – стандарт при качестве сжатия 9
- Расширение .jpg (1-10) или .jpg (1-100%) – аналогичный выбор качества в цифрах или процентах
- Расширение .jpg
- N-% или Npx X Npx – указание масштабирования и размера нового изображения.
Например, 200% logo.jpg – масштабируется исходное изображение на 200% и сохраняется в файл logo.jpg. Другой варианте: logo.jpg5 – изображение сохраняет с качеством сжатия 5.
Если нужно создать два файла, один для Retina-устройств, другой для обычных, то пишем: 200% logo.jpg, logo.jpg
Операции Photoshop
Еще один вариант автоматического сохранения в разных разрешениях - это использование Action для Photoshop, который именуется как Retinize It . О нем мы рассказывали уже ранее, но напомним, что работает он аналогичным способом, но дополнительно представляет дизайнеру окно с вариантом сохранения изображения.
Сценарий экспорта макета
Когда мастер работает над дизайном, то ему приходится постоянно увеличивать исходный документ до 200% или 400%, чтобы узнать, как оное будет отображаться на Retina-дисплеях. Можно сделать гораздо проще с помощью сценария psd-export-document-retina-png .
Загрузить его можно с GitHub и скопировать в \Adobe\Adobe Photoshop (ваша версия)\Presets\Scripts\
После этого, работая над дизайном макета в разрешении 1х, откройте Файл -> Сценарии -> ExportDocument2xPNG (или 3х). Процесс не слишком мгновенный, но в папке с файлом PSD появится папочка Retina с файлом png. Это будет тот самый макет, с которым вы работаете, со сведенными слоями и увеличенный на 200%. При этом все изображения будут соответствующе оптимизированы, что главное, а не просто увеличены. Что и видно скриншоте. Логотип, например, не исказился, как это было представлено на скриншотах в начале статьи при обычном масштабировании.
Это удобно, в целом, для того, чтобы видеть, что именно еще вам нужно улучшить для больших разрешений. Затем уже можно выделить нужные слои и сохранить в необходимом размере и формате.
Заключение
Адаптируя макет сайта для устройств Apple с Retina-дисплеями необходимо, конечно, учитывать специфику технологии. Стоит ли делать оптимизацию по умолчанию? Зависит от заказчика, но – желательно, ибо те же iPhone/iPad имеются у многих. Что же касается дорогостоящих iMac и устройств с 4К и 5К, то редко, но и ими пользуются. С другой стороны, на стандартном 4К разрешении стандартные изображения будут выглядеть неказисто.
Разумеется, остается еще много вопросов о том, как поработать со шрифтами и заменить иконками, что выбрать svg или png и многое другое. Но это уже не для данного материала.
Мы рассмотрели только часть и постарались систематизировать, что же такое Retina 4К/5К, в чем смысл технологии и как под неё «подстроить» веб-дизайн с тем, чтобы сайт одинаково хорошо смотрелся на всех устройствах. И главное, как обработать изображения, как предотвратить искажения. Адаптируете ли вы дизайн сайта для 2К или 5К, но принцип всегда один – свои изображения для каждого разрешения. Для удобства сохранять их удобнее в отдельных папочках на сервере. Это удобно для всех пользователей и корректно по отношению к будущим посетителям. А что касается большого размера файла, то существуют различные способы дополнительного сжатия.
Разработка мобильной версии сайта — настолько же важная задача, как и создание сайта для ПК. А ведь еще несколько лет назад мобильная версия была лишь дополнением к основной.
Но разработчикам пришлось сменить приоритеты. Согласно исследованию Statista, чуть более половины всего трафика сейчас поступает с мобильных устройств, а примерно 45% всех покупок совершается при помощи смартфонов. Учитывая, что смартфоны, какими мы их знаем сегодня, вошли в ежедневную жизнь лишь десять лет назад, ожидается, что эти цифры будут только расти.
Вот почему компании, которые не прилагают усилий для обеспечения качественного мобильного UX, рискуют резко отстать от своих конкурентов. Ниже вы найдете некоторые из наиболее распространенных советов и приемов по созданию сайтов, оптимизированных для мобильных устройств.
Содержание статьи
Совет №1: Мобильная версия — в первую очередь
Однако, ориентируясь на мобильную версию, дизайнеры сталкиваются с некоторыми ограничениями. Речь идет не только о размерах экранов. Например, если у вас на сайте есть анимация, которая активируется при наведении курсора, то это может стать неразрешимой проблемой в мобильной версии.
В результате дизайн, ориентированный на мобильные устройства, с самого начала имеет тенденцию к простоте и максимальному удобству. Но стоит иметь в виду, что такой подход не «обедняет» версии для ПК. Напротив, проще расширить расширить возможности простого дизайна, чем упростить сложный.
Дизайн, ориентированный на мобильные устройства, означает, что легче заранее спланировать расположение элементов на экране меньшего размера, чем упрощать сложную компоновку позже
Также важно сначала протестировать свои мультимедиа файлы на мобильном телефоне, поскольку фотографии или видео, сделанные для альбомной ориентации, могут не подойти для портретной. Мелкие детали, такие как выражение лица или элементы фона, может быть труднее считать на небольшом экране. Кроме того, часто на экране есть место только для одного изображения за раз, и если ваш сайт предусматривает, например, большое количество фотографий, то долгая прокрутка каждого из них может быть утомительной для пользователя.
Совет №2: Учитывайте размеры мобильных устройств
Разумеется, на экране мобильного устройства пространство более ограничено. Но учет ограничений по размеру на начальном этапе разработки сайта — лучший способ избежать ошибок в дальнейшем.
Разрешение экрана мобильного устройства зависит от его типа, но на данный момент наиболее часто используется разрешение 360x640 (соотношение сторон 9:16). Google Analytics может подсказать вам, какие именно устройства предпочитают ваши пользователи, и вы должны убедиться, что дизайн вашего сайта достаточно адаптивен, чтобы учитывать различные варианты.
Этот сайт использует четкую типографскую иерархию, большие кнопки и поля форм.
Что касается размера шрифта для мобильной версии, то для основного текста рекомендуется использовать вариант, который равняется 16 пикселям. Этот показатель также может варьироваться в зависимости от используемых гарнитур (некоторые шрифты будут менее разборчивыми при размерах в 16 пикселей, чем другие).
Не существует стандартного размера для шрифтов заголовков, но задача состоит в том, чтобы установить четкую типографскую иерархию за счет контраста по размеру и стилю. Но если сомневаетесь, просто проверьте, как выглядит выбранный вами шрифт на мобильном устройстве.
В мобильной версии этого сайта боковые элементы главного изображения были обрезаны.
Изображения и другие мультимедийные файлы, конечно, могут быть настолько большими, насколько позволяет размер устройства. На самом деле неважно, насколько большим или маленьким будет объект, главное — сохранить четкость. Имейте в виду, что вам не обязательно помещать все изображение целиком. Вместо этого вы можете увеличить объект и вырезать посторонние элементы, как в примере выше.
И последнее, но не менее важное: размер CTA-кнопки чрезвычайно важен для мобильных устройств. Помните о том, что нажать на кнопку на сенсорном экране сложнее, чем кликнуть мышкой. Исследование с упором на пожилых пользователей рекомендует, чтобы ее размер находился в пределах от 42 до 72 пикселей.
Совет №3: Оптимизируйте сайт под портретную ориентацию
Все мы знаем, что при помощи смартфона сайты можно просматривать не только в портретном, но и в ландшафтном режиме. Для этого нужно просто перевернуть устройство. Однако большинство пользователей все-таки предпочитают держать смартфон вертикально и пролистывать страницы одной рукой.
Для портретной ориентации отлично подходят сайты в один столбец. В этом стиле элементы сайта размещаются последовательно сверху вниз. Хотя выравнивание содержимого по центру является обычным явлением, чередование выравнивания по левому и правому краю может создать визуальный интерес и иллюзию макета из двух столбцов. Кроме того, более мелкие элементы, такие как значки и фотографии, могут быть представлены в виде сетки, в то время как карусели изображений могут разнообразить вертикальную прокрутку, так как их нужно будет прокручивать горизонтально.
Помимо поиска оригинальных способов разбить информацию в одном столбце на несколько частей, есть возможность использовать это в своих интересах. Поскольку социальные сети уже приучили пользователей к длительной прокрутке, разработчики сайтов могут свободно использовать пробелы и отступы. Благодаря этому контент остается более читаемым, а постоянная прокрутка поощряет пользователей к взаимодействию.
Несмотря на то, что на экранах смартфонов меньше горизонтального пространства, дизайнеры могут использовать пробелы и отступы для выделения текста.
В мобильной версии этого сайта используются наклонные графические границы и несколько столбцов, чтобы выравнивание по центру выглядело менее повторяющимся.
Проектирование по разделам также полезно для группировки схожей информации, чтобы пользователь понимал общую цель каждого раздела без необходимости углубляться в чтение. Это особенно полезно, если учесть, что примерно 79% посетителей страницы лишь бегло просматривают контент веб-сайта. Различные цвета фона помогут различать эти разделы, а необычное оформление границ нарушают ощущение квадратности.
Совет №4: Минимизируйте размеры меню
Навигация — это еще одна область, которая может быть очень сложной для мобильного пользователя. Версия для ПК обычно содержит расширенную панель с главным меню и несколькими подменю. Для мобильных приложений золотым стандартом стала иконка «Гамбургер». Именно там обычно и скрываются все разделы меню.
За значком «Гамбургера» скрыта панель навигации, которая при нажатии занимает две трети экране.
При создании меню для мобильной версии сайта обычно используют выдвигающуюся боковую панель, которая перекрывает часть экрана. Это позволяет меню работать в отдельном измерении от остального содержимого страницы, оставляя пользователю место для выхода и возврата к предыдущему экрану.
В зависимости от того, насколько сложным является ваше меню, каждая его опция может содержать больше вложенных опций или подменю. Когда пользователь переходит в одно из подменю, лучше, чтобы новый список пунктов навигации заменил существующее меню, чтобы список оставался коротким.
Не забудьте закрепить панель навигации на экране, чтобы пользователю не приходилось прокручивать ее до самого верха. Обычной практикой для мобильных устройств является скрытие фиксированной навигации при прокрутке вниз.
В меню этого сайта также используются вкладки для разделения списка опций.
Существуют альтернативные инструменты навигации, которые можно использовать вместо стандартных меню или в дополнение к ним. К примеру, вкладки позволяют пользователю легко перемещаться по другим разделам содержимого сайта без необходимости загружать совершенно новую страницу.
Многие дизайнеры UX в наши дни также изучают навигационные решения, выходящие за рамки привычных прикосновений к экрану. Они пробуют использовать горизонтальные или вертикальные свайпы.
Совет №5: Сверните вторичный контент
На сайтах для ПК обычно достаточно места для подробного основного текста, характеристик, фотографий продукта и другого контента. Но поскольку мобильные версии требуют, чтобы информация была представлена как можно более лаконично, дизайнерам следует удалить или сократить весь несущественный контент.
Можно, например, свернуть основное содержимое и добавить значок плюса или треугольничка. При нажатии на него пользователь сможет получить дополнительную информацию. Не стоит переживать о том, что ваш потенциальный клиент пропустит важные детали. Напротив, такие действия как нажатие на значок «+» — это еще одна мотивация для пользователя взаимодействовать со страницей. Это гораздо лучше пассивного чтения.
На этом сайте используются карусели для группировки раздела с отзывами клиентов.
Повторяющийся контент можно объединить. В примере ниже можно увидеть, как несколько отзывов клиентов объединены в карусель. В версии для ПК они перечислены линейно под одним заголовком:
На этом сайте пользователи легко могут сворачивать и разворачивать подробный контент.
В дизайне сайтов, оптимизированных для мобильных устройств, следует избегать всплывающих окон. Хотя это может сэкономить место, мобильные -сайты, «напичканные» навязчивыми попап-окнами, не только неприятны для пользователя, но и наказываются поисковыми системами.
Совет №6: Сократите количество полей в формах
Ввести текст на экране смартфона часто является сложной задачей. По этой причине вам стоит минимизировать количество полей в своих лид-формах настолько, насколько это возможно.
На этом сайте вместо открытых текстовых форм используются различные раскрывающиеся списки и радиокнопки.
Возможности автоматического заполнения, такие как определение большей части адреса по почтовому индексу или предоставление предварительно заполненных адресов электронной почты могут облегчить пользователям задачу. Личная информация пользователя и информация для входа в систему могут быть упрощены за счет интеграции на основе профилей в социальных сетях. А интеграция с платежными системами поможет пользователю избежать утомительного ввода данных банковской карты, когда он делает покупки при помощи смартфона.
Совет №7: Пользователю должно быть удобно взаимодействовать с сайтом при помощи большого пальца
По данным одного исследования, в 75% случаев пользователи взаимодействуют со смартфоном при помощи большого пальца. Это включает в себя прокрутку, нажатие и ввод текста, при этом остальные пальцы заняты поддержкой задней панели телефона. Учтите также, что во многих случаях пользователи держат свой телефон одной рукой, одновременно занимаясь другими делами. Таким образом, очевидно, что дизайнеры должны уделять этому внимание при создании сайтов для мобильных устройств.
На этом сайте большинство интерактивных элементов расположено в середине экрана либо внизу.
При создании кнопок дизайнеры должны отдавать предпочтение кнопкам больших размеров, потому что сенсорный экран не будет регистрировать нажатие, если части большого пальца выходят за пределы кнопки.
Не менее важно расположение интерактивных элементов на странице. Обычно человек держит смартфон за нижнюю часть, а большой палец опирается на середину. Чтобы дотянуться до интерактивных элементов вверху, пользователю придется переместить всю руку или использовать пальцы второй руки. Исследования показывают, что идеальная зона взаимодействия (которая сужается по мере увеличения размеров телефонов) — это нижняя средняя часть.
Зона, удобная для большого пальца, зависит от устройства, но по большей части нижняя середина экрана наиболее удобна для такого взаимодействия.
В последние годы многие дизайнеры UX продвигают идею размещения панелей навигации внизу экрана, а не вверху. Однако есть вероятность, что пользователи будут это хуже воспринимать, так как мы привыкли, что панель навигации расположена вверху. Время покажет, какая позиция является наиболее оптимальной, но пока лучший способ решить эту проблему для вашей собственной аудитории — это протестировать оба варианта.
Вместо заключения
Судя по темпам роста мобильного трафика, мобильные версии сайтов — наше будущее. Однако стоит учитывать многочисленные ограничения, которые появляются из-за небольшого размера экрана смартфона. Эти проблемы нельзя назвать неразрешимыми, если подойти к ним с умом. В этом посте было дано несколько советов, которые позволят эффективно оптимизировать сайт под мобильные устройства.
Создание мобильного лендинга начинается с полной переработки основной, или веб-страницы. Необходимо выбрать лишь «самое-самое» и строго следовать канонам: один призыв к действию, минимальный набор текста и изображений. То есть все смысловое содержание должно направлять посетителя на выполнение определенного действия. Лендинг должен сработать как выстрел снайпера — точно в цель и никак иначе.
В статье мы рассмотрим, как правильно определить оптимальную ширину сайта для десктопного монитора и мобильных устройств, где можно узнать актуальную статистику популярных разрешений экранов, как проверить отображение своего сайта на разных разрешениях и выявить возможные проблемы.
При разработке дизайна для адаптивной вёрстки нужно учесть размеры устройств, на которых чаще всего будет просматриваться сайт. В зависимости от вашей тематики, это могут быть: смартфоны, планшеты, ноутбуки, десктопы или даже габаритные телевизоры с диагональю до 98 дюймов.
И если для пользователя никаких проблем нет, то у разработчика уже возникают определенные сложности, ведь на каждом из экранов сайт должен быть красивым, удобным и функциональным.
Поэтому, разрабатывая макет, мы хотим, чтобы пространство использовалось с умом и при этом:
- При просмотре сайта на широкоформатных экранах не было огромного пустого пространства по бокам, изображения сохраняли высокое качество, а текст легко читался.
- Сайт не терял удобство использования на небольшом экране, не появлялась полоса горизонтальной прокрутки или скрытые элементы.
Но для начала разберёмся, на какую всё-таки ширину html-страницы ориентироваться.
Какие бывают форматы размеров сайта для вёрстки
У каждого устройства есть несколько характеристик, описывающих его размер:
- Физический размер экрана — это его диагональ в дюймах (например, 24 дюйма). У устройств с одинаковым размером экрана могут быть разные разрешения.
- Разрешение — это соотношение экранной ширины и высоты в пикселях (например, 1920 x 1080 пикселей).
- Размер окна браузера — это ширина и высота области просмотра в пикселях (например, 1896 x 1080 — с учётом полосы прокрутки в 24 пикселя). Другими словами, это разрешение за вычетом рамок, полос прокрутки и других элементов, уменьшающих видимую область сайта. Но размер окна браузера пользователь может сильно менять, поэтому дизайнеры обычно задают контентную область и боковые отступы.
Также нужно помнить об ориентации экранов — у ноутбуков, десктопов и телевизоров она альбомная (ширина больше высоты), а у смартфонов и планшетов обычно портретная (высота больше), но может переворачиваться.
Какие есть варианты создания страницы под разные мониторы и разрешения (типы верстки)
Фиксированная верстка
Проще говоря, мы жестко задаем статические параметры сайта, и его ширина не меняется, независимо от того, какое разрешение у пользователя. Это самый плохой вариант, использовать его вообще не рекомендуется, это явно вчерашний день.
Резиновая верстка без ограничений
Упрощенно это выглядит так:
Т.е. ширина сайта подстраивается под ширину браузера. Браузер шире – блоки снизу перемещаются вбок. Браузер уже – блоки располагаются друг под другом.
Плюсы такой верстки:
- Пространство используется по максимуму, нет зияющей пустоты слева или справа от контента на широкоформатном экране с высоким разрешением.
Минусы:
- На большом экране сайт очень сильно расползается. Особенно это неудобно для текста.
- Периодически может возникать пустое пространство между блоками.
Личный юзеркейс: у меня плохое зрение, если не надеть очки, приходится сидеть, уткнувшись лицом в монитор. Поверьте – даже на 21 дюйме с разрешением по ширине 1600 пикселей жутко неудобно воспринимать сайт с малого расстояния. Приходится вертеть головой слева направо, чтобы прочесть строчку текста.
Кроме того, при маленькой ширине экрана блоки будут наползать друг на друга, если не задана минимальная ширина. Чтобы избежать данных проблем, можно применить следующий способ:
Резиновая верстка с заданной минимальной и максимальной шириной
В данном случае в указанных вами пределах сайт может менять позиционирование блоков, но у него есть определенные ограничения:
- минимум – достигнув этого предела, блоки не «сжимаются», а появляется полоса прокрутки;
- максимум – контент не увеличивается по ширине, а добавляется пустое пространство по бокам, контент сайта при этом размещается по центру сетки.
Плюсы:
- Мы уверены в том, как выглядит контент нашего сайта при определенном разрешении Естественно, мы стараемся сделать максимально красивый сайт для наиболее распространенных разрешений в нашей тематике.
Минусы:
- Если вы выберете слишком маленький максимум для большого экрана, может возникнуть проблема с пустыми полями по бокам.
Адаптивная верстка
Наиболее современный и применяемый вариант верстки. Не только блоки контента позиционируются относительно друг друга в зависимости от разрешения, но и контент блоков (шрифты, изображения и т.д.) меняется в размерах.
При адаптивной верстке мы можем делать с контентом все что угодно, в зависимости от разрешения. Плюс данной верстки еще и в том, что она хорошо подходит для экранов мобильных устройств, в отличие от первых двух вариантов.
Если вы остановились на адаптивной верстке, рекомендуем пользоваться правилом MobileFirst, т.е. вначале работаем с малым разрешением и постепенно двигаемся к большому экрану.
Плюсы:
- Наиболее современный и правильный тип верстки.
Минусы:
- Может быть довольно сложной в реализации (в отдельных случаях). В любом случае вам нужно понимать, какое разрешение для вашего сайта в приоритете, чтобы правильно отобразить сайт на этих разрешениях.
Все эти методики могут сочетаться в зависимости от ситуации.
- адаптивный дизайн может дополнять резиновую верстку;
- либо сайт сделан на резиновом дизайне, а для мобильных приложений сделана мобильная адаптивная версия.
Рекомендую прочесть статью Анны Себовой, где вопрос мобильной верстки раскрыт с технической точки зрения.
- Если у вас фиксированная верстка, пора обновлять сайт, я вам серьезно говорю.
- Если у вас уже есть достаточно качественный сайт «на резиновой» верстке, просто добавьте адаптив для мобильных устройств и разрешений, на которых плохо отображается сайт.
- Если вы все делаете «с нуля», лучше делать полностью адаптивную верстку, это максимально современное и качественное решение.
- Если у вас уже есть сайт, и вы готовите редизайн, вам даже не нужно обращаться к открытым сервисам — посмотрите статистику вашего сервиса web-аналитики.
Как выбрать оптимальный размер макета
Верстальщик работает с диапазонами разрешений, в которых сайт корректно отображается, но веб-дизайнеру при разработке шаблона в графическом редакторе приходится задавать фиксированный размер макета.
Но как же разобраться в этом многообразии разрешений и способов верстки? Главное – сайт должен быть максимально удобен и презентабелен для наиболее распространенного разрешения.
Общая статистика популярных разрешений экранов мобильных и компьютеров
Эти данные можно найти в сервисах:
-
— тут статистика в первую очередь по США;
Например, если мы возьмем за основу информацию с сайта w3counter, самое популярное разрешение по ширине – это 1366px. Соответственно, эту ширину можно брать как максимум, больше которого увеличивать контент не стоит.
При этом учитывайте, что контент смотрится лучше, когда есть небольшие отступы по бокам. Плюс к этому, немного (порядка 17-24) пикселей нужно оставить под полосу прокрутки. Размер отступов выбирайте сами – обычно это порядка 50-80px.
Например, очень хорошо смотрится (личное мнение) при таком разрешении сайт lamoda, ширина максимум 1206px:
Учитывая это, я склоняюсь к варианту фиксированной максимальной ширины. За среднюю цифру максимума можно взять примерно 1200px+/-.
В качестве минимальной ширины, после которой появляется полоса горизонтального скролла, можно взять 960px. Меньше делать особого смысла не вижу.
Высота страницы может меняться не только в зависимости от устройства, но и от того, закреплена ли панель закладок в браузере. Обычно она варьируется от 600 до 800 пикселей.
Подытожим наши рекомендации для дизайна сайтов исходя из самых популярных разрешений экранов.
Рекомендуемые размеры сайта
Стандартная ширина страницы сайта для дизайна должна быть в пределах 1366 пикселей, из которых около 1200 пикселей это «безопасная» контентная область, а 1084 пикселя — ширина текстового блока на мониторе компьютера или планшета. Высота первого экрана на десктопе ориентировочно 700 пикселей.Для мобильной версии сайта ширина принимается за 360 пикселей, а высота — 640.Но лучше разрабатывать несколько шаблонов используя «опорные точки»:
| Устройство | Ширина макета, пикселей | Отступы по краям | Контентная часть, пикселей |
|---|---|---|---|
| Большого размера (десктоп или телевизор) | от 1366 | Зависят от сетки | 1200 |
| Среднего размера (ноутбук) | от 1024 | 20 пикселей | 992 |
| Маленького размера (планшеты) | от 768 | 15 пикселей | 768 |
| Смартфоны | от 360 | 10 пикселей | 360 |
Если сайт ещё в разработке, вы можете посмотреть на то, как адаптированы сайты конкурентов в ТОПе. Но для действующего проекта лучшим решением будет посмотреть на свою статистику пользователей.
Как узнать статистику своего сайта по разрешениям экрана?
Если у вас Яндекс.Метрика
Если у вас Google Analytics
- Технологии → Браузер и ОС → Разрешение экрана:
- Данные отчеты полезны еще и тем, что мы можем выявить проблемы отображения сайта на определенном разрешении. Для этого обратите внимание на колонку «Показатель отказов».
- Если вы видите, что на определенном разрешении показатель отказов значительно выше среднего – следует протестировать отображение сайта в этом разрешении.
Как проверить оптимизацию сайта под разные разрешения?
Чтобы проверить, как выглядит ваш сайт на устройствах с разными разрешениями, можно использовать средства браузера или отдельные сервисы, о которых мы ранее писали в статье «Инструменты для анализа отображения сайта на разных устройствах». Вот некоторые из них:
Подведем итог
Перед созданием нового сайта или редизайном необходимо:
- понять, какие разрешения наиболее популярны у вашей целевой аудитории;
- определить максимальные и минимальные размеры сайта (в пикселях);
- выбрать тип верстки;
- после создания и реализации протестировать сайт на разных разрешениях и убедиться, что он корректно и презентабельно отображается в любом разрешении.
Конечно, может возникнуть один логичный вопрос: «А как же через Х лет, когда технологии изменятся? Что тогда делать?» Ответ прост: сайт должен постоянно развиваться, поэтому создать через пару лет новый дизайн – это вполне нормально. Естественно, при создании нового дизайна следует учитывать изменившиеся реалии и тенденции.
Нужна помощь с проектированием сайта и разработкой ТЗ? Обращайтесь к нам!
Читайте также: