Сегодня на рынке инвестирования есть огромное количество продуктов из различных сфер. Нам показалось, что стоит обратить ваше внимание на быстро растущий рынок мобильных устройств. Нет, обзоров здесь не будет, мы хотим рассмотреть этот рынок через призму характеристик экрана. Мобильный телефон, планшет, ноутбук уже прочно закрепились в нашей жизни, фактически мы проводим с ними больше времени чем с живыми людьми вокруг нас.
Что говорит статистика
Мы долго изучали статистические отчеты различных метрик с сайтов партнеров. Смотрели технические характеристики самых популярных мобильных устройств. Ситуация такова, что на рынке среди всех мобильных устройств стали преобладать большие сотовые телефоны, диагональ которых начинается от 5,5" и заканчивается на 6,2". Добавим сюда желание Apple выпустить к концу года на рынок продукт с диагональю 6,5". И наш мозг начинает с трудом переваривать необходимость такой техники. В карман такое уже не положить, да и не в каждой сумке поместится. Однако если посмотреть на способы использования телефона современного смартфона. то становиться понятно зачем. Это странный факт:телефон вроде бы придумали для голосового общения, а используют его всё чаще как устройство для серфинга в сети Интернет. Говоря проще - современная тенденция - это хороший качественный мобильный телефон с отличным экраном, камерой и Интернетом. Это удобный "комбайн", просто надо раз в день заряжать.
Теперь о разрешениях. Самими популярными разрешениями остались 1366*738 и 1920*1080, Это не мобильные разрешения. А вот самым популярным мобильным разрешением стало 360*640. По факту это тройка лидеров.
Полная таблица с информацией по рынку такова:
| Разрешение | Пользователей | Динамика |
| 1366x768 | 21.15 % | -1.46% |
| 360x640 | 18.28 % | +2.31% |
| 1920x1080 | 12.29 % | -0.85% |
| 1280x1024 | 6.94 % | -0.40% |
| 1600x900 | 4.57 % | -0.23% |
| 375x667 | 4.36 % | +0.48% |
| 1024x768 | 4.08 % | -0.26% |
| 320x568 | 3.83 % | +0.10% |
| 1440x900 | 3.16 % | -0.19% |
| 1280x800 | 3.08 % | -0.02% |
| 1680x1050 | 2.03 % | -0.25% |
| 768x1024 | 2.00 % | +0.07% |
| 1536x864 | 1.93 % | +0.22% |
| 320x534 | 1.84 % | +0.05% |
| 320x570 | 1.62 % | +0.09% |
| 1280x720 | 1.42 % | +0.04% |
| 1360x768 | 1.05 % | -0.22% |
Вывод
Рынок мобильных устройств не стоит на месте. Сегодня надо искать варианты для вложения средств в этот рынок.
Очень многогранный процесс. Но все же все его стадии можно разделить на две основных составляющих - функционал и внешнюю оболочку. Или, как принято в среде вебмастеров, бек енд и фронт енд соответственно. Люди, которые заказывают свои веб-сайты у студий веб-разработки, зачастую наивно полагают, что стоит сосредоточиться только на функционале, и это будет правильное решение. Но это справедливо в очень и очень редких случаях, обычно для проектов-стартапов на стадии бета-тестирования. В остальном же графический дизайн и интерфейс пользователя просто обязаны быть удобными, однако не стоит забывать и про будущее сайта, учитывая его .
Первый краеугольный камень, с которым сталкивается проектировщик интерфейса, или дизайнер, - это ширина макета сайта. Ведь для неё необходимо отрисовывать интерфейсы. Чисто интуитивно возникают два подхода - либо делать отдельные макеты для каждого популярного разрешения экрана, либо создать одну версию сайта для всех отображений. И оба варианты будут неверны, но обо всем по порядку.
Стандартная ширина сайта в пикселях для рунета
До развития адаптивной верстки массовым явлением была разработка сайта с шириной в тысячу пикселей. Эта цифра выбиралась по одной простой причине - чтобы сайт помещался в любой экран. И в этом есть своя логика, но давайте предположим, что все же у человека как минимум HD-монитор на десктопе. В таком случае ваш макет будет казаться крошечной полоской в середине экрана, где все слеплено в одну кучу, а по бокам огромное незадействованное пространство. Теперь давайте предположим, что человек зашел на ваш веб-сайт с планшета с экраном 800 пикселей по ширине, причем в настройках стоит галочка "Показывать полную версию веб-сайта". В этом случае ваш сайт также будет отображаться некорректно, так как просто-напросто не влезет в экран.
Из этих соображений можем сделать вывод, что фиксированная ширина для макета нам точно не подходит и необходимо искать другой способ. Давайте проанализируем идею отдельного макета для каждой ширины экрана.
Макеты на все случаи жизни
Если вы выбрали как стратегию создать макеты для всех размеров экранов, присутствующих на рынке, то тогда ваш сайт станет самым уникальным во всем интернете. Ведь просто невозможно сегодня охватить весь спектр устройств, пытаясь сделать точную настройку под каждый вариант. Но вот если ориентироваться на самые популярные разрешения мониторов и экранов устройств, то идея неплоха. Единственный её минус - финансовые затраты. Ведь когда проектировщик интерфейсов, дизайнер и верстальщик будут вынуждены 5 или 6 раз выполнять одну и ту же работу, проект будет стоить несоизмеримо больше изначально заложенной в бюджет цены.
Поэтому похвастаться обилием версий под разные экраны могут разве что сайты-одностраничники, цель которых - продавать один товар и обязательно делать это хорошо. Что ж, если у вас не один из таких лендингов, а многостраничный сайт, то стоит рассуждать дальше.
Самые популярные размеры сайтов
Компромиссом между двумя крайностями является отрисовка макета для трех или четырех Среди них один обязательно должен быть макетом для мобильных устройств. Остальные должны быть адаптированы для маленького, среднего и большого десктопного экрана. Как выбрать ширину сайта? Ниже приведем статистику сервиса HotLog за май 2017 года, которая демонстрирует нам распределение популярности различных разрешений экранов устройств, а также динамику изменения этого показателя.
Из таблицы можно узнать, как определить размер сайта, который нужно использовать. Помимо этого, можно сделать вывод, что наиболее распространенным сегодня форматом является экран 1366 на 768 точек. Такие экраны устанавливают в бюджетные ноутбуки, поэтому их популярность закономерна. Следующим по популярности является Full HD-монитор, который является золотым стандартом для видеороликов, игр, а значит, и для создания макетов сайта. Дальше в таблице мы видим разрешение мобильных устройств 360 на 640 точек, а также различные варианты десктопных и мобильных экранов после него.
Проектируем макет
Итак, проанализировав статистику, можно сделать вывод, что оптимальная ширина сайта имеет 4 вариации:
- Версия для ноутбуков с шириной 1366 пикселей.
- Full HD-версия.
- Макет размером 800 пикселей по ширине для отображения на маленьких десктопных мониторах.
- Мобильная версия сайта - 360 пикселей по ширине.
Допустим, мы определились, какой необходимо использовать размер создаваемого исходника для сайта. Но такой проект все равно будет затратным. Так что рассмотрим ещё варианты, на этот раз без использования фиксированной ширины.
Делаем макет гибким
Существует альтернативный подход, когда подстраиваться стоит лишь под минимальный размер экрана, а сами размеры сайтов будут задаваться процентами. При этом такие как меню, кнопки и логотип, можно задавать в абсолютных величинах, ориентируясь на минимальный размер ширины экрана в пикселях. Блоки с контентом, напротив, будут растягиваться согласно указанным процентам от ширины области экрана. Такой подход позволяет перестать воспринимать размеры сайтов как ограничения для дизайнера и талантливо обыграть этот нюанс.
Что такое золотое сечение, и как его применить к верстке веб-страниц?
Ещё в эпоху Возрождения многие архитекторы и художники пытались придать своим творениям идеальную форму и пропорцию. За ответами на вопросы о значениях такой пропорции они обращались к царице всех наук - математике.
Ещё со времен античности была изобретена пропорция, которую наш глаз воспринимает как самую естественную и изящную, ведь она повсеместно встречается в природе. Открывателем формулы такого соотношения был талантливый древнегреческий архитектор по имени Фидий. Он рассчитал, что если большая часть пропорции относится к меньшей так, как целое относится к большему, то такая пропорция будет смотреться наилучшим образом. Но это в том случае, если вы хотите разделить объект несимметрично. Такую пропорцию стали позже называть золотым сечением, что все равно не переоценивает её значение для мировой истории культуры.
Вернемся к веб-дизайну
Всё очень просто - используя золотое сечение, вы можете проектировать страницы, которые будут максимально приятны человеческому глазу. Рассчитав по определению формулы золотого сечения, получаем иррациональное число 1,6180339887..., но для удобства можно использовать округлённое значение 1,62. Это будет означать, что блоки нашей страницы должны быть 62% и 38% от целого, независимо от того, какой размер создаваемого исходника для сайта вы используете. Пример вы можете увидеть на такой схеме:
Используйте новые технологии
Современные технологии верстки веб-сайтов позволяют максимально точно передать задумку проектировщика и дизайнера, поэтому теперь можно позволить себе реализацию более смелых идей, чем на заре интернет-технологий. Больше не требуется сильно ломать голову над тем, какой должен быть размер сайта. С приходом таких вещей, как блочная адаптивная верстка, динамическая подгрузка контента и шрифтов, разработка сайта стала в разы приятнее. Ведь такие технологии имеют меньше ограничений, хоть все же они и есть. Но как известно, без ограничений не было бы и искусства. Мы предлагаем вам использовать один поистине творческий подход к проектировке - золотое сечение. С его помощью вы сможете эффективно и красиво заполнить какие бы размеры сайтов вы ни задавали в своих шаблонах.
Как увеличить рабочее пространство сайта
Велика вероятность того, что у вас не будет достаточно места, чтобы вместить все элементы интерфейса в макет небольшого размера. В таком случае придется начать думать творчески или же ещё более творчески, чем вы делали до этого.
Максимально высвободить место на сайте можно, спрятав навигацию во всплывающее меню. Такой подход логично использовать не только на мобильных устройствах, но и на десктопах. Ведь пользователю не нужно все время смотреть на то, какие рубрики есть на вашем сайте - он пришел за контентом. А желания пользователя нужно уважать.
Примером хорошего способа скрыть меню является следующий макет (фото ниже).
В верхнем углу красной области вы можете увидеть крестик, нажатие на который скроет меню в маленькую иконку, оставив пользователя наедине с контентом веб-сайта.
Впрочем, делать это необязательно, вы можете оставить навигацию, которая будет всегда на виду. Но ведь можно сделать это красивым дизайнерским элементом, а не просто перечнем популярных ссылок на сайте. Используйте интуитивно понятные иконки в дополнение к текстовым ссылкам или даже вместо них. Это также позволит вашему сайту более эффективно использовать экранное пространство на устройстве пользователя.
Лучший сайт - адаптивный
Если не знаете, какой выбрать макета для сайта, то для вас все просто. Чтобы сэкономить на затратах на разработку и при этом не потерять аудиторию из-за плохого макета под какое-то устройство, используйте адаптивный дизайн.
Адаптивным называют такой дизайн, который выглядит на разных устройствах одинаково хорошо. Такой подход позволит вашему сайту быть понятным и удобным хоть на ноутбуке, хоть на планшете, хоть на смартфоне. Достигается этот эффект за счет автоматических изменений ширины рабочей области экрана. Используя адаптивные таблицы стилей для сайта, вы принимаете самое верное решение из возможных.
Чем отличается адаптивный дизайн от наличия разных версий у сайта
Адаптивный дизайн отличается от мобильной версии сайта тем, что в последнем случае пользователь получает html-код, который отличается от десктопного. Это является недостатком с точки зрения оптимизации производительности сервера, а также поисковой оптимизации. К тому же сложнее становится считать статистику по разным версиям сайта. Адаптивный подход лишен таких недостатков.
Адаптивность под различные устройства достигается за счет макета с процентным заданием ширины либо с помощью переноса блоков в доступное пространство (в вертикальной плоскости на смартфоне вместо горизонтальной на десктопе), либо же создания индивидуальных макетов под разные экраны.
Более подробно узнать об адаптивном дизайне и его разработке вы сможете из учебников.
Сперва, немного о теории. Разрешение экрана может быть разным, в зависимости от используемого вами устройства. Некоторые пользователи ошибочно считают, что размер экрана и разрешение экрана монитора - одно и то же. Например, размер экрана и его максимальное разрешение равняется 1600 х 1200, а пользователь может установить разрешение, например, 800 х 600. Естественно, что изображение на экране будет формироваться по тому принципу, который был установлен самим пользователем. В итоге получается, что размер экрана и его разрешение - немного разные понятия. Для того чтобы добиться идеальной картинки, требуется устанавливать максимальное разрешение, которое поддерживает ваш монитор и тогда изображение будет максимально качественным.
Какие бывают разрешения экрана?
Сегодня существует огромное количество мониторов и такое же количество разрешений. Следует отметить, что все эти устройства обладают различным соотношением сторон, например: 4:3, 5:4, 16:9, 16:10 и множество других. Огромным спросом пользуются широкоэкранные устройства, соотношение сторон которых равно 21:9. Использовать подобные устройства сегодня просто не целосообразно, так как они лучше всего подходят для просмотра фильмов, снятых по стандарту CinemaScope. Это напрямую связано с тем, что если установить на таком мониторе другое разрешение, например, FullHD (1920 х 1080p), то по краям монитора будут оставаться широкие черные полосы.
Что касается непосредственно разрешения мониторов, то они разделяются между собой, как можно догадаться, по соотношению сторон. Выделяются следующие: Для соотношения сторон 4:3 -1024x768, 1280x1024, 1600x1200, 1920x1440, 2048x1536. Для соотношения сторон 16:9: 1366x768, 1600x900, 1920x1080, 2048x1152, 2560x1440, 3840x2160. Для соотношения сторон 16:10: 1280x800, 1440x900, 1600x1024, 1680x1050, 1920x1200, 2560x1600, 3840x2400. Самыми популярными сегодня являются разрешения: 1920х1080, 1280х1024, 1366x768.
Стоит отметить, что чем больше будет разрешение экрана, тем лучше будет само изображение, но при этом оно может быть очень маленьким и некоторым владельцам таких устройств придется его изменить на меньшее, чтобы хоть что-нибудь увидеть на мониторе. В итоге, конечно, каждый может посмотреть непосредственно перед покупкой устройства в магазине, какое изображение будет на нем, и подходит ли оно ему.
По материалам сайта Deviceatlas
Знание о том, какие разрешения экранов смартфонов сегодня популярнее всего, помогут оптимизировать ваш вебсайт с учётом разницы между различными устройствами. DeviceAtlas собрал самую свежую статистику использования девайсов, связанную с этим вопросом.
Новые разрешения экранов на рынке
В последние годы все флагманские устройства на Android OS имели разрешение Full HD (1080х1920) и QHD (1440х2560). В 2017 году на рынке появились несколько устройств с нестандартными разрешениями - в основном благодаря новому тренду на экраны edge-to-edge (на всю ширину устройства). В том числе:
- Samsung Galaxy Note 8: 1440 x 2960 пикселей
- Samsung Galaxy S8: 1440 x 2960 пикселей
- LG V30: 1440 x 2880 пикселей
- LG G6: 1440 x 2880 пикселей
- Sony Xperia XZ Premium: 3840 x 2160 пикселей
- iPhone X: 1125 x 2436 пикселей (только анонсирован)
Конечно, эти нестандартные разрешения ещё не вошли в нашу статистику. Но, так или иначе, мы можем ожидать, что стандарт S8 может стать одним из самых популярных в списке из-за огромной популярности семейства Galaxy S: так, предыдущий флагман - S7 - стал самым распространённым устройством на Android в мире.
Самое используемое разрешение экрана смартфона - 720х1280
По данным статистики трафика за июль-август 2017 года, самым популярным разрешением экрана на смартфонах стало соотношение 720×1280 пикселей, которое используется на большинстве устройств среднего и бюджетного класса. Это самое используемое разрешение в 11 странах из 20 проанализированных, в том числе в Индии, Италии и Испании. С небольшим отрывом за ним следует соотношение 750х1334, которое используется в популярных в США, Великобритании и Австралии моделях iPhone. Во Франции и Германии, в свою очередь, самым частым разрешением стало Full HD в смартфонах среднего и бюджетного классов.
В таблице представлены самые ходовые разрешения экранов смартфонов во всех 20 странах, участвовавших в исследовании.
Страна | Разрешение | Доля |
Аргентина | 720×1280 | 31.8% |
Австралия | 750×1334 | |
Бразилия | 720×1280 | 31.6% |
Канада | 750×1334 | 28.1% |
Колумбия | 720×1280 | 29.2% |
Египет | 720×1280 | 29.7% |
Франция | 1080×1920 | |
Германия | 1080×1920 | 22.1% |
Индия | 720×1280 | 38.5% |
Италия | 720×1280 | 24.1% |
Япония | 750×1334 | 38.9% |
Малайзия | 720×1280 | 28.5% |
Нигерия | 720×1280 | 30.4% |
Польша | 720×1280 | 30.4% |
Россия | 1440×2560 | 18.5% |
ЮАР | 720×1280 | |
Испания | 720×1280 | 28.6% |
Швеция | 750×1334 | |
Англия | 750×1334 | 29.2% |
США | 750×1334 | 30.7% |
На графиках ниже показана доля трафика, которая пришлась на долю смартфонов с разрешением экрана 720х1280 в июле-августе 2017 года в участвовавших в исследовании странах.
Full HD завоёвывает рынок, распространение QHD замедляется
Также мы проанализировали, насколько быстро выросло использование нескольких популярных разрешений за год - с 4 квартала 2016 года по 3 квартал 2017 года. Несмотря на активный рост ранее, сейчас распространение разрешения QHD (1440×2560) замедлилось.
Во Франции, Индии, Нигерии и США устройства с QHD даже потеряли долю рынка (-4% в последней стране). За последние 4 квартала устройства с FHD (1080×1920) выросли быстрее, прибавив 5-10% в Бразилии, Франции, Японии, Польше, Испании и США.
Доля трафика Full HD-устройств (1080х1920) за последние 4 квартала:
Доля трафика QHD-устройств (1440х2560) за последние 4 квартала:
Вы даже можете не знать тот факт, что ваш сайт не корректно отображается на экране с разрешением 320×480 и все читатели с таким смартфоном покидают ваш блог, так и не изучив информацию на нем.
Пусть там будет супер интересная информация (для блога), самая низкая цена за товар (для интернет-магазина), супер полезный курс, но если страница кривая, кнопки не видны, строчки текста налезают друг на дружку, то с таким отображением страниц продаж вам не видать.
Поэтому необходимо анализировать в статистике и выявлять разрешения, с которых посетители уходят и принимать меры по исправлению багов.
Статистики по разрешениям экрана
Там всё ясно, вводите URL сайта:
Теперь можно выбирать различные варианты. Причем, как стандартные разрешения смартфонов (вкладка 3):
Так и произвольно набирать разрешение в цифрах (5 вкладка):
Как пользоваться инструментом я вам показал, теперь импровизируйте для своих сайтов.
Как исправить ошибки
В завершении возникает вопрос: «А зачем мне это всё надо, изучать браузеры, разрешения и прочее?»
Ответ простой — для увеличения трафика и продаж.
В моем случаи потери минимальны, менее 2% посетителей за год ушли, поскольку мой блог плохо отображался в их устройстве, с которого они заходили на сайт. Это маленькие цифры, у вас они могут быть выше или ниже, но необходимо понимать, что из таких ручейков в сумме может получится большой поток потерь.
Автор сайта может думать, что у него плохой дизайн, юзабилити, он не умеет правильно писать статьи или у него плохой товар, высокая цена, а на самом деле причина может быть иная. Если вы будете ее знать, то тогда и проблему можно будет решить, помните об этом.
Если ваш сайт имеет много проблем с разрешением, скорей всего шаблон не адаптивный или низкого качества и нуждается в замене. Учтите, что мобильный трафик с годами будет лишь увеличиваться, так что про адаптивный шаблон (или мобильную версию сайта) необходимо думать как можно раньше.
Подробно по данной теме я рассказывал тут:
Хотел бы услышать о результатах анализа вашего сайта, какие разрешения экрана имеют больше всего отказов?
По любым вопросам пишите в комментариях, обязательно помогу.
Заметки
