Мобильный или не мобильный? Вот в чем вопрос!
Уже не первый год кипят страсти вокруг мобильных платформ. Очень много советов о том, что необходимо делать отдельную мобильную версию сайта. Но говоря о мобильной версии сайта, почему то люди забывают о современных разрешениях, таких как 1080p и выше. Верстая сайт они делают ограничение на ширину или вообще фиксированную, в районе 1000 px. А ведь таких разрешений экрана гораздо больше, чем мобильных устройств с маленькими разрешениями, для которых делается отдельная мобильная версия. Мобильные сайты упрощают, но забывают, что технологии развиваются и для современных мобильных устройств примитивная мобильная версия сайта выглядит как отголосок 00-х годов. При этом так же забывают о Opera Mini. Но как дела обстоят на самом деле? В этой статье я хотел бы рассмотреть всё более подробно. Попробуем поразмышлять.
В виду очень больших разногласий, статья получилась немного сумбурной. Далее много текста и мало картинок.
Содержание:
Статистика
liveinternet.ru
| фев 2013 | янв 2013 | за 3 месяца | |
|---|---|---|---|
| Google Chrome | 23.4% | 23.2% | 23.2% |
| Firefox | 14.2% | 14.5% | 14.6% |
| Opera 12 | 11.4% | 12.0% | 12.0% |
| Opera Mini | 10.6% | 11.0% | 10.9% |
| Safari 4 | 8.2% | 7.8% | 7.6% |
| Mozilla 1 | 5.7% | 5.4% | 5.4% |
| Explorer 9 | 5.5% | 5.6% | 5.6% |
| Explorer 8 | 3.6% | 3.7% | 3.8% |
| Яндекс.Браузер | 2.9% | 2.7% | 2.6% |
| Хром (Mail.ru) | 2.5% | 2.4% | 2.4% |
| фев 2013 | янв 2013 | за 3 месяца | |
|---|---|---|---|
| Не определено | 24.5% | 24.1% | 23.7% |
| 1366×768 | 19.7% | 19.5% | 19.5% |
| 1024×768 | 11.5% | 11.7% | 11.7% |
| 1280×1024 | 10.8% | 10.9% | 11.1% |
| 1280×800 | 8.0% | 8.2% | 8.2% |
| 1920×1080 | 6.3% | 6.2% | 6.2% |
| 1600×1200 | 4.5% | 4.6% | 4.6% |
| 1440×900 | 4.1% | 4.2% | 4.2% |
| 1680×1050 | 2.8% | 2.9% | 2.9% |
| 640×480 | 2.5% | 2.4% | 2.4% |
| 1152×864 | 2.3% | 2.3% | 2.3% |
| 240×320 | 1.5% | 1.6% | 1.6% |
| 800×600 | 1.2% | 1.2% | 1.2% |
| Другие | 0.2% | 0.2% | 0.2% |
hotlog.ru
| Фев 2013 | Янв 2013 | |
|---|---|---|
| Chrome | 32.07% | 32.15% |
| Opera | 22.69% | 23.20% |
| Firefox | 20.24% | 20.40% |
| Internet Explorer | 14.69% | 14.39% |
| Safari | 7.46% | 7.38% |
| Яндекс | 2.85% | 2.46% |
| фев 2013 | янв 2013 | |
|---|---|---|
| 1366×768 | 21.15% | 20.51 % |
| 1280×1024 | 16.07% | 15.53 % |
| 1024×768 | 9.95% | 9.87 % |
| 1920×1080 | 8.78% | 8.29 % |
| 1280×800 | 6.72% | 6.78 % |
| 1440×900 | 5.37% | 5.23 % |
| 1600×900 | 4.55% | 4.36 % |
| 1680×1050 | 4.07% | 4.04 % |
| 768×1024 | 2.53% | 2.44 % |
| 1024×600 | 2.19% | 2.23 % |
| 1360×768 | 1.80% | 1.76 % |
| 800×600 | 1.62% | 1.68 % |
| 1152×864 | 1.27% | 1.26 % |
| 320×480 | 1.16% | 1.17 % |
| 1280×720 | 1.13% | 1.10 % |
| 1280×768 | 1.03% | 1.01 % |
w3schools.com
| Янв 2013 | |
|---|---|
| Firefox | 30.2% |
| Chrome | 48.4% |
| Internet Explorer | 14.3% |
| Safari | 4.2% |
| Opera | 1.9% |
| 1366×768 | 25.4% |
|---|---|
| 1920×1080 | 11.0% |
| 1280×1024 | 9.7% |
| 1024×768 | 9% |
| 1440×900 | 7.3% |
| 1280×800 | 8.2% |
| 1680×1050 | 5.7% |
| 1600×900 | 5.0% |
| 1920×1200 | 2.9% |
| 1360×768 | 2.1% |
| 2560×1440 | 1.1% |
| 800×600 | 0.5% |
| 640×480 | 0% |
| Other | 0.5% |
Мой блог
| Фев 2013 | Янв 2013 | |
|---|---|---|
| Chrome | 47,61% | 46,54% |
| Firefox | 29,27% | 27,83% |
| Opera | 17,31% | 18,45% |
| Internet Explorer | 3,76% | 3,75% |
| Safari | 1,59% | 1,82% |
| Android Browser | 0,11% | 0,80% |
| Opera Mini | 0,34% | 0,70% |
| Mozilla Compatible Agent | 0% | 0,11% |
| Фев 2013 | Янв 2013 | |
|---|---|---|
| 1920×1080 | 23,01% | 21,66% |
| 1366×768 | 20,73% | 21,77% |
| 1280×1024 | 16,40% | 15,44% |
| 1680×1050 | 6,83% | 7,18% |
| 1280×800 | 6,26% | 6,86% |
| 1600×900 | 5,92% | 4,50% |
| 1440×900 | 5,58% | 5,47% |
| 1024×768 | 4,44% | 5,31% |
| 1920×1200 | 2,16% | 2,31% |
| 1024×600 | 1,14% | 1,23% |
| 1280×720 | 1,14% | 0,43% |
| 1152×864 | 0,57% | 1,07% |
| 1360×768 | 0,57% | 1,07% |
Разрешений, которые в статистике занимают менее 1%: 2560×1440, 1536×864, 2048×1152, 1280×960, 1280×768, 290×305, 1400×1050, 1600×1200, 2560×1024, 320×480 3, 1920×1068, 2560×1600, 480×800, 1024×640, 1056×594, 1140×641, 1350×1080, 1396×785, 1600×1024, 1600×780, 1603×902, 177×186, 1920×1128, 1920×957, 246×288, 470×234, 768×1024, 800×600, 960×600, 1249×702, 1441×810, 1024×614, 1093×614, 1280×752, 1293×758, 1311×737, 1344×840, 1360×1024, 1440×810, 1463×823, 1467×825, 1536×960, 1584×990, 1607×904, 231×358, 240×293, 2880×1800, 290×116, 30720×768, 314×202, 320×240, 320×455, 360×480
В этой статистики хотелось бы обратить внимания на:
- процент маленьких разрешений экранов не велик — где-то 1-2%, где-то 3-5%
- разрешения выше 720p (1280×800, 1366×768) — более 20%
- IE занимает последние место среди популярных браузеров, однако им пользуются от 5% до 15%
- Opera Mini до 10%
Что такое мобильное устройство?
Статистика конечно приблизительная, и для определенных сайтов может отличаться, но не думаю что на много. Теперь можно делать выводы…хотя, стоп! Сначала стоит определиться что понимать под мобильными платформами:
Устройства с маленькими разрешениями экрана
Когда разговор заходит про мобильные платформы, то часто апеллируют именно разрешением экранов менее 800×600. Думаю и это понятно, ведь маленькие разрешения экрана требуют определенной компоновки страницы, особого подхода к юзабилити.
Устройства использующие Opera Mobile, Opera Mini и другие мобильные браузеры
Этот пункт часто напрямую связан с предыдущим пунктом, потому что часто именно на устройствах с небольшим разрешением стоят мобильные браузеры. Однако технологии развиваются и многие мобильные устройства, такие как планшеты, уже имеют большое разрешение экрана, вплоть до 1080p (1920×1080). Так же под мобильным браузером можно понимать и Chrome под Андройд, который не сильно отличается от его старшего брата. Поэтому говоря о мобильном браузере стоит понимать лишь «ограниченные» браузеры, которые поддерживают меньшее число современных возможностей и спецификаций.
Тонкие клиенты (телевизоры) и консоли
Это один из ключевых моментов, на который почему то мало кто обращает внимания. Он завязан на предыдущем пункте. Большинство телевизоров и других тонких клиентов имеют большое разрешение, но вот браузеры в эти устройства сильно ограничены.
Ошибки и заблуждения
Главная ошибка и заблуждение подобных статей является то, что необходимо делать мобильную версию сайта. Да-да, это ошибка. Почему?
Большинство статей уже устарели. Некоторые статьи писались еще в нулевых годах, другие основываются на них. Но ведь технологии развиваются. И сейчас, например, появились мобильные устройства с Ретина дисплеями. Так же мобильными устройствами можно называть тонкие клиенты (ТВ, Консоли). И под данные устройства мобильные версия сайта, которые разрабатываются под маленькие разрешения экрана уже не подходят, ибо они имеют разрешение минимум 720p. Хотя такие устройства только появились и развиваются — они уже имеют не малый сегмент рынка. Вы можете себе представить чтобы пользователь зашел с 50-ти дюймового телевизора на мобильную версию сайта? Конечно многие возразят, что мол они посмотрят нормальную версию сайта. И вот тут будет второе заблуждение. Как я писал в начале статьи — многие сайты имеют фиксированную ширину около 1000px. Вот теперь представьте узенькую полосочку посредине экрана. Думаете пользователям такое нравится? А еще на подобных экранах стоит браузер, который может не поддерживать скрипты и прочие плюшки. Как тут быть? Тоже разрабатывать отдельную версию сайта для них? Нет! Об этом чуть позже.
Также большинство людей говоря о мобильной версии сайта или даже вообще верстая сайт не вспоминают браузер Opera Mini и Opera Mobile. Этим браузерам уже много лет. Но о них почему то редко вспоминают.
Таким образом, люди тратятся на устройства с маленьким разрешением экрана, которых менее 5%, но забывают о больших разрешениях, число которых уже давно перевалило за 20%.
Выводы
Выше сказанным я хотел подвести к выводу, о котором уже и упоминал. Отдельная версия мобильного сайта в настоящее время не оправдана, ввиду слишком расплывчатого ряда критерием мобильных устройств. Конечно, исходя из статистики можно выделить каждый пункт и попытаться для него сделать отдельную версию сайта. Но насколько оно целесообразно. Не выкинете вы зря деньги на ветер? И сколько вы потратите на это ресурсов: времени, денег и сил? Не стоит ли смотреть в будущее и вкладывать деньги в современные технологии? Именно о них мы сейчас и поговорим.
Вместе с тем, большинство разработчиков уже отказались от IE6 и IE7. Но в статьях об мобильных версиях сайта продолжают упоминать (не эти разработчики, а в общем) разрешения менее 320×240. Не бред ли?
Что делать? Оптимальное решение
Техника развиваются, а вмести с ним развиваются и программы, стандарты и интернет. И на помощь разработчику уже достаточно давно пришла технология CSS3 Media Queries, которая заменила определение устройства с помощью link media, которые и поддерживались то не всеми устройствами. А также CSS3 Media Queries пришли на замену отдельной мобильной версии сайта.
Для поддержки старых браузеров появился термин Graceful Degradation и Progressive Enhancement
На замену резиновой верстки пришел Responsive Web Design и Adaptive Web Design (отзывчивый, адаптивный веб-дизайн).
Помимо этого есть еще понятие как Mobile First, о котором я просто обязан упомянуть и который некоторые считают принципиально необходимым.
Ко всему выше озвученному пришли на помощь SVG и WebGL.
И это не всё. Это только лишь модные словечки, которыми пестрит интернет наряду с HTML5 и CSS3 и привнесли в жизнь разработчика новых веселых вещей, о которых рассказать в одной статье не получится. Да и не об этом статья.
CSS3 Media Queries
CSS3 Media Queries — это замечательная технология, которая экономит время и силы, но не нервы. Она позволяет в одном CSS файле стилей разложить верстку для разных разрешений экрана. Конечно, чтобы правильно сверстать — необходимо, чтобы в дизайн-макете были заложены для этого возможности. И к сожалению, эту технологию поддерживают только современные браузеры.
Graceful Degradation
А вот для старых браузеров придумали Graceful Degradation. Graceful Degradation переводится как «изящная деградация», однако на деле всё обстоит иначе. Смысл в том, что верстальщик должен верстать по Фен-Шую порядку как и в любом другом случае: сначала просто HTML код, затем CSS и только потом CSS3 и JS. Но верстка должна работать в старых браузерах. Сайт должен функционировать с отключенными JS. Верстка должна быть семантичной и понятной с отключенными стилями. И после вёрстки под современные устройства уже начинаются добавляться разного рода хаки и упрощения для устаревших браузеров, но не затрагивая современные. Сайт выглядит по проще, но обязан полностью функционировать и быть удобным для просмотра.
Progressive Enhancement
Progressive Enhancement (прогрессивное улучшение) в какой-то мере противоположность Graceful Degradation. Конечно ни кто не отменяет семантичность верстки, но основной момент тут заключается в том, что бы заставить старые браузеры отображать как можно современнее сайт с помощью скриптов. Для этого есть много специальных библиотек. Одна из них — это Modernizr.
Responsive Web Design
Responsive Web Design — эта техника основана как раз на CSS3 Media Queries и предпочтение отдается Graceful Degradation, однако подразумевает возможность включение и CSS3 Grid и CSS3 FlexBox. Единственное, что тут стоит добавить, так это так же и наследование от резиновой верстки.
Adaptive Web Design
Adaptive Web Design отличается от Responsive Web Design тем, что данная техника верстки основывается на Progressive Enhancement, вместо Graceful Degradation. И предполагает вносить изменения в дизайн на стороне сервера.
Mobile First
Mobile First — техника, не сильно отличающаяся Responsive Web Design, только лишь тем, что подразумевает верстку начинать с мобильных приложений.
В данных описаниях возможны ошибки, ибо всё это появилось не так давно и уже успело всё перемешаться. И на возникший у вас вопрос (наверняка же появился такой вопрос?): «Что же выбрать, как быть?» — однозначного ответа быть не может, ибо если выбирать что-то конкретное, то всё не охватишь и все они взаимосвязаны. Делать акцент на чем-то одном — создание очередного холивара. Тут не надо выбирать, тут надо использовать всё вместе, насколько это возможно и требуется.
Заключение
Мозги еще не закипели? На самом деле в данной статье рассмотрена лишь капля в море, которая полезна для заказчика. Для продвинутого верстальщика тут сказано лишь немного того, что он должен знать. В любом случае стоит забыть уже о том, что сайту необходима отдельная мобильная версия, на которую уходит много времени и сил. У мобильной версии есть лишь одно преимущество — это уменьшенный вес страницы за счет оптимизации графики. Но так ли важно это в во времена широкополосного интернета? И как эта оптимизированная графика скажется на современных мобильных устройствах? А ведь еще имеется тенденция к облегчению дизайна сайтов и при правильной верстке весь дизайн должен быть полностью в стилях, а вот уже в стилях можно оптимизировать графику в зависимости от разрешения экрана.
Поэтому если кто-то вам предлагает разработать мобильную версию — этого человека можно сразу назвать не профессионалом («профессионалы», поспорим?), не разбирающимся в современных технологиях и/или вас пытаются обмануть и развести на деньги.
Конечно, выше озвученные техники верстки и дизайн стоят дороже обычной верстки, но дешевле отдельной версии сайта, ибо в разработке участвуют в основном только верстальщик и дизайнер, в то время как для мобильной версии сайта привлекаются программисты. Зато вы можете быть уверены, что дизайн вашего сайт охватит как можно больше устройств и разрешений.
Главную же мысль, которую я изначально хотел донести до читателя — прежде чем думать о мобильном сайте — подумайте лучше о устройствах с большим разрешением экрана, в том числе и тонкие клиенты, которые сейчас активно заполняют рынок. В то время, как мобилы с ограниченными возможностями и разрешениями уходят на второй план. А через 2-3 года практически полностью исчезнут с рынка. И если у вас, допустим, онлайн магазин, то сомнительно, что пользователи с доисторическими устройствами у вас чего-то купят. Люди которые покупают в интернете или постоянно серфят — такие люди имеют всё же более современные устройства.
Конечно есть еще мнение, что Гугл и Яндекс вроде как любят отдельный мобильные сайты и отдают предпочтения при выдаче результатов в своих мобильных поисковиках. С этим мнением я спорить не буду, ибо не изучал. Но что-то мне подсказывает, что этими мобильными версиями поисковиков пользуется всё меньше и меньше людей.
Когда появились HTML5 и CSS3, а IE6-7 ушел на задний план — многие кричали от радости, в надежде, что их жизнь упростится. Но на самом деле, всё только начинается!
