Под какие версии браузеров верстать

Обновлено: 07.07.2024

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

Когда-то давно делали отдельные сайты под мобильные устройства, но сегодня более популярная и любимая поисковиками адаптивная вёрстка (сайт растягивается/перестраивается в зависимости от экрана устройства). За последние несколько лет вёрстка, как таковая, сместилась в сторону векторных форматов из-за разных размеров экранов и чёткости отрисовки векторных изображений (значков, логотипы, элементы дизайна, итп). Растровыми остаются только фотографии на сайте. Т.е. рисование дизайна в Фотошопе как таковое отходит, сейчас популярны разные векторные редакторы и в первую очередь онлайновые типа Фигмы.

Теперь перейдём непосредственно к исследованиям, посмотрим статистику разных сервисов собирающих данные и сведём их в общую таблицу. Затем вычислим среднее значение. Сервисов этих много, все рассматривать смыла нет, плюс минус они показывают одно и то же. Часть данных откинем как погрешность (меньше процента, оставлю только Internet Explorer, некоторые всё ещё думают что он актуален, в то время как его поддержка закончена в 2015г и выпущен взамен Edge), задача выявить самые используемые и популярные, на которые и стоит ориентироваться при создании сайтов.

Типы устройств

Смартфоны - 59.62%
Десктоп - 37.44%
Планшеты - 2.94%

Chromium: Google Chrome 56.8% + Яндекс.Браузер 22.3% + Opera (Blink) 4.5% = 83.6%
WebKit: Mobile Safari 9.7% + Safari 0.9% = 10.6%
Gecko: Firefox 2.5% = 2.5%

Internet Explorer 11 = 0.6% (Скорее всего это самая реалистичная цифра по остаткам реальных пользователей этого браузера).

Разшерения экранов

800x600 - 27.1%
1024x768 - 21.0%
640x480 - 14.8%
1920x1080 - 8.7%
1366x768 - 8.7%
1600x1200 - 5.0%
1280x800 - 2.8%
1280x1024 - 2.3%
1440x900 - 1.5%
1152x864 - 1.0%
1680x1050 - 0.8%
240x320 - 0.1%

Chromium: Chrome 65.42% + Яндекс 12.27% + Opera 0.31% + Edge 0.32% = 78.32%
WebKit: Safari 14.45% = 14.45%
Gecko: Firefox 5.05% = 5.05%

Internet Explorer = 2.22%.

Разшерения экранов

360x640 - 12.29%
1366x768 - 12.29%
1920x1080 - 12.01%
375x667 - 4.47%
393x851 - 3.99%
360x780 - 3.78%
360x720 - 3.74%
1536x864 - 3.58%
1280x1024 - 3.50%
1024x768 - 3.41%
414x896 - 2.78%
360x760 - 2.76%
1600x900 - 2.51%
768x1024 - 2.41%
412x892 - 2.04%
375x812 - 1.97%
800x600 - 1.83%
1280x800 - 1.78%
320x568 - 1.77%
1440x900 - 1.69%
412x915 - 1.48%
1280x720 - 1.27%

Chromium: Chrome 65.3% + Edge 2.35% + Opera 1.5% = 69.15%
WebKit: Safari 17.0% = 17.0%
Gecko: Firefox 4.1% = 2.22%

Статистика по версиям и она не вся показана, Internet Explorer примерно 5.6% - 2.35% = 3.25% (это нереально, по факту меньше. И я уверен, что часть это просто чьи-то древние боты так представляются, собирают какие-то данные).

Разшерения экранов

1366x768 - 9.17%
640x360 - 7.83%
1920x1080 - 7.70%
1024x768 - 4.46%
896x414 - 4.28%
667x375 - 4.22%
780x360 - 3.20%
812x375 - 3.03%
760x360 - 2.80%
1536x864 - 2.74%

Chromium: Chrome 64.1% + Samsung Internet 3.33 + UC Browser 2.61 + Edge 2.35% + Opera 2.26% + Edge Legacy 2.17 + Edge 0.01 = 76.83%
WebKit: Safari 17.21% = 17.0%
Gecko: Firefox 4.7% = 4.7%

Internet Explorer = 1.68%.

Разшерения экранов

360x640 - 9.7%
1366x768 - 8.98%
1920x1080 - 8.46%
375x667 - 4.07%
414x896 - 3.92%
1536x864 - 3.39%
360x780 - 3.3%
360x760 - 2.99%
375x812 - 2.78%
1440x900 - 2.77%
360x720 - 2.53%
768x1024 - 2.53%
414x736 - 2.12%
1280x720 - 1.99%
412x846 - 1.91%
412x892 - 1.79%
412x869 - 1.67%
1600x900 - 1.63%
360x740 - 1.62%
1280x800 - 1.5%

Типы устройств

Смартфоны - 52.02%
Десктоп - 45.29%
Планшеты - 2.7%

1920x1080 - 18.14%
1366x768 - 12.02%
1536x864 - 6.19%
1440x900 - 4.55%
360x640 - 3.86%
800x600 - 3.13%
2560x1440 - 3.03%
1024x768 - 3.03%
1280x720 - 2.98%
1600x900 - 2.90%
1680x1050 - 2.49%
1280x1024 - 1.99%
1280x800 - 1.77%
360x780 - 1.69%
375x667 - 1.66%
393x851 - 1.38%
1360x768 - 1.35%
375x812 - 1.32%
414x896 - 1.25%
360x760 - 1.24%
360x720 - 1.17%
1920x1200 - 1.12%
384x800 - 1.01%

Типы устройств

Выборка 1	Выборка 2	Средний процент
Смартфоны	59.62%	52.02%	55.82%
Десктоп	37.44%	45.29%	41.365%
Планшеты	2.94%	2.7%	2.82%

О как, эра планшетов проходит, смартфоны доминируют над компьютерами, но несильно.

Браузеры под которые оптимизировать сайты

Chromium (Google Chrome)	WebKit (Safari)	Gecko (Firefox)	Trident (Internet Explorer)
Яндекс.Радар	70.18%	16.39%	2.22%	0.39%
LiveInternet	83.6%	10.6%	2.5%	0.6%
Hotlog	78.32%	14.45%	5.05%	2.22%
W3Counter	69.15%	17.0%	2.22%	3.25%
StatCounter	76.83%	17.0%	4.7%	1.68%
Средний процент:	75.616%	15.088%	3.338%	1.628%

Как видим, браузеры на движке Chromium (Google Chrome, Яндекс.Браузер, Opera, Vivaldi, Samsung Internet, Microsoft Edge итп.) жёстко доминируют и процент по моим наблюдениям прирастает.
На втором месте движок WebKit (Safari, Android Browser, MIUI browser итп.) и он уверенно держится в районе 10-15% последние годы.
На третьем месте Gecko (Firefox), долго был моим любимым браузером, но постепенно начал становиться проблемным из-за некоторых решений разработчиков, плюс выравнивание текста на пиксель ниже, как итог пользователи убывают, тенденция всё хуже из года в год - не вижу смысла в его поддержке..
И специальный столбик Trident (Internet Explorer) также показывает почти мёртвый браузер.
Остальным браузерам остаётся только догонять или оставаться в районе погрешности, смысла в оптимизации под них нет.

Актуально проверять вёрстку в браузерах Google Chrome и Safari (аналог на том же движке Arora под Windows/Linux), тем самым покрываем около 90% пользователей.

Разшерения экрана

Теперь самый трудный пункт, разрешения экрана устройств, оно может иметь большее пикселей (px), но размер экрана всё равно будет 375px. Например, iPhone 7 имеет дисплей разрешением 1334x750 пикселей, но вёрстка сайта всё равно будет под 375x667px. И вот нам необходимо в первую очередь определить минимальный размер экрана для смартфона, как стартовую точку адаптивной вёрстки. Долгое время это был размер 320x568px (iPhone 5), до этого 240px, но данные устройства уже отжили.
Очевидно на 2021 год, устройства с экраном 360px являются той самой минимальной стартовой точкой, диапазон смартфоновых устройств будет примерно до 640 .. 780px, имеет смысл делать "резиновый" дизайн в этом промежутке, дизайнеру так же стоит по 10-15 пикселей по бокам оставить на отступы..
Далее планшеты iPad mini 768px, iPad pro 11 - 834px, и LiveInternet показал 800x600 - 27.1%. При таких показателях 768px всё ещё остаётся обязательным.
Следом обязательно размер на 1000px, это и старые мониторы разрешением 1024px, ноутбуки, планшеты итп устройства. Так же популярные ноутбучные разрешения 1280x и 1366x. На мой взгляд достаточно дизайна на 1000px на экранах побольше просто будут поля по краям 140 и 183px соответственно.
Остаются большие разрешения экранов, посмотрим по таблице ниже.
Разных астрономических размеров 2570×798, 3840×848 (4k) в статистике не видно, да и на таких расширениях экран скорее всего поделён на два, браузер в сложенном виде будет, а не на весь экран.

LiveInternet	Hotlog	W3Counter	StatCounter	Screen resolution	Средний процент
320x	0.1%	1.77%	-	-	-	0.935%
360x	-	22.57% (12.29 + 3.78 + 3.74 + 2.76)	-	20.14% (9.7 + 3.3 + 2.99 + 2.53 + 1.62)	7.96% (3.86 + 1.69 + 1.24 + 1.17)	16.89%
768x	-	2.41%	-	2.53%	-	2.47%
800x	27.1%	1.83%	-	-	3.13%	10.69%
1024x	21%	3.41%	4.46%	-	3.03%	7.975%
1280x	5.1% (2.8 + 2.3)	6.55% (3.5 + 1.78 + 1.27)	-	3.49% (1.99 + 1.5)	6.74% (2.98 + 1.99 + 1.77)	5.47%
1366x	8.7%	12.29%	9.17%	8.98%	12.02%	10.232%
1440x	1.5%	1.69%	-	2.77%	4.55%	2.6275%
1536x	-	3.58%	2.74%	3.39%	6.19%	3.975%
1600x	5.0%	2.51%	-	1.63%	2.90%	3.01%
1920x	8.7%	12.01%	7.70%	8.46%	19.26% (18.14% + 1.12%)	11.226%
2560x	-	-	-	-	3.03%	3.03%

Имеем обязательное разрешение для адаптивной вёрстки 360pх, лучше "резиновое" до 640px, оно покроет практически все смартфоны, я думаю примерно 50% устройств от общего количества с учётом возможного разворота.
768x и 800x дают в сумме около 13% смартфонно-планшетного парка, плюс разные расширения типа 896x414 - 4.28% накинут ещё около 10% устройств, итого более 20%, имеет смысл делать!
Далее ноутбучные расширения 1024px обязателен, 1280x можно пропустить, отступ с боков в 140px приемлем и хорошо смотрится. Этим закрываем около 13% устройств.
1366x - стоит делать обязательно - 10% устройств, плюс: 1440x, 1536x, 1600x так же можно ничего не делать, отступ с боков: 74, 85, 117px
1920x - обязателен. Всё что выше не имеет особого смысла и скорее является прихотью, тем более что майнинг на добрую пятилетку отложил приход 4k мониторов из-за отсутствия видеокарт, и судя по курсу Биткоина - это ещё надолго.

Идеальный вариант адаптивной вёрстки на 2021 год:

360pх до 640px растягивающийся, минус отступы по 10 - 15 пикселей с боков
768px
1000px -> 1024x (минус 24 пикселя на скролл браузера = 1000px для дизайна, отступы по желанию (пункты ниже так же)).
1342px -> 1366x
1512px -> 1536x по желанию, чтоб накрыть 1600x и чуть большие расширения, около 10% устройств.
1896px -> 1920x

24px вычислил практическим путём, переключая стили оформления Windows XP, с тех пор ещё ни разу не подводил данный выбор.

Экономный вариант адаптивной вёрстки на 2021 год:

360pх
768px
1000px -> 1024x
1896px -> 1920x

Совсем экономный вариант адаптивной вёрстки на 2021 год:

Послесловие

Конечно есть варианты того как сделать вёрстку сайта, вплоть до постоянного масштабирования, но как бы не старался программист/верстальщик, всё равно присутствуют проблемы перестроения и масштабирования, не возможно без заумной математики и нагрузки на браузер при по/пере/строении (вплоть до лагов на мощных компах (встречал такие сайты), не говоря уже об устройствах поменьше с порезанным железом по умолчанию) задать одинаковый размер на все разрешения, скажем заголовку текста в процентах итп. величинах от размера экрана устройства, всё равно на определённых границах (несколько раз) будет выбиваться из размерности и придётся в любом случае вставлять правки в CSS. Поэтому люблю делать вёрстку с переключением в каких-то точках 360px, 1000px итд., само собой дизайнер обязан отрисовать все эти точки.

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

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

Но мы также знаем, что до сих пор есть пользователи, которые работают с более старым программным обеспечением. Удивительно, но по данным NetMarketShare , Internet Explorer 11 по-прежнему занимает третье место в списке наиболее часто используемых браузеров за 2017 год. IE 8 занял шестое место, в то время как IE 9 занял десятое место. На IE по-прежнему приходится около 13% использования десктопных устройств.

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

Застрял в прошлом

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Корпорации по-прежнему используют более старые версии Windows, а это значит, что используется и IE. Edge доступен только для Windows 10. Поэтому, если крупные компании будут пользоваться Windows 7 или 8, IE останется выбором по умолчанию. Конечно, могут использоваться Chrome и Firefox, но это не обязательно означает, что пользователям в этих корпорациях разрешено устанавливать их.

Кое-кто опережает IE. Последняя версия Safari от Apple не будет работать на некоторых старых компьютерах Mac или iOS. Казалось бы, эффект здесь будет действовать на мобильный дизайн, так как есть еще несколько старых моделей iPhone. Safari является вторым наиболее широко используемым мобильным браузером.

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

Например, если вы используете Flexbox, есть некоторые доступные префиксы браузера , которые позволят ограничить поддержку в более старых версиях Chrome, Safari, Firefox и IE. Не каждая функция CSS будет иметь этот тип резервного копирования, но обычно всегда есть способ обойти проблемы, с которыми вы сталкиваетесь.

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

Ваша работа также может быть упрощена с помощью инструментов, типа Modernizr . Это скрипт, который обнаружит поддержку браузера для определенных функций и соответственно добавит класс CSS в body страницы. Затем вы можете использовать этот класс для предоставления альтернативных стилей, если функция не поддерживается в браузере пользователя.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Самое замечательное в том, что перед загрузкой скрипта можно выбрать, какие функции вы хотите найти. Например, вы можете выбрать такие функции, как canvas, HTML5 Audio / Video или даже emoji. Это позволяет сделать вещи максимально возможными, обеспечивая большую помощь в обеспечении обратной совместимости.

Насколько сильно может быть устаревшим браузер?

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

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

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

Что касается моей собственной подпрограммы, то для IE8 она такая же, как я тестирую десктопные браузеры. Также я проверяю Safari 6 вместе со случайной версией Chrome и Firefox. На мобильном телефоне я обычно обращаюсь к устройствам Android 4.x и iOS 7. Конечно, ваши потребности и предпочтения могут отличаться.

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

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

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

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

Автор: Eric Karkovack

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Что такое кроссбраузерная вёрстка, — спрашивают Илья, Сергей и Эдуард, — какие есть браузеры и нужен ли пиксель-пёрфект?

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

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

Самый популярный в мире браузерный движок — это Blink. Его использует Chrome и браузеры на его основе: Opera, Samsung Internet, Яндекс.Браузер и другие. Для работы с JavaScript, эти браузеры используют движок V8 — тот же, что и в Node.js. Один из главных разработчиков открытого движка Blink — Google, но в разработке активно участвует не меньше десятка компаний.

WebKit, другой популярный движок, очень похож на Blink. А вообще, наоборот — это Blink похож на WebKit. Это как? В 2013 году Blink форкнули из WebKit. По сути, скопировали. Google собрала вещи и сказала Apple, основному разработчику WebKit, что ей не нравятся её методы работы и теперь всё будет по-другому. Что поделать, опенсорс. И действительно, стало по-другому: основа у WebKit и Blink общая (префиксы webkit , например), но возможности уже довольно разные. На новом WebKit сейчас работают мобильные и десктопные браузеры Safari, на старом — встроенный браузер на Android до версии KitKat.

На движке Gecko работает браузер Firefox, когда-то очень популярный, а сегодня сохраняющий небольшую долю и важную роль в развитии веба и технологий. Префиксы у Gecko свои: moz — Mozilla, но для лучшей совместимости Firefox специально поддерживает некоторые свойства WebKit. Полноценный Firefox на Gecko работает на десктопных платформах и на Android. Параллельно с Gecko, Mozilla разрабатывает экспериментальный движок Servo и меняет некоторые части Gecko прямо на ходу. Например, в следующем Firefox 57 движок CSS заменят на новый.

Браузер Edge работает на всех современных платформах Microsoft, включая мобильные и Xbox. В его основе движок EdgeHTML — недавно как раз вышла его 16-я версия. EdgeHTML тоже форкнули от движка Trident или MSHTML, на котором работал браузер Internet Explorer. Удивительно похоже на историю Blink и WebKit: оба движка сохраняют общие префиксы ( ms и опять немного webkit для совместимости), но сильно отличаются по возможностям. EdgeHTML отбросил всякое старьё и смело развивается: пара крупных релизов в год и даже система голосования за фичи. Trident и IE закрыли в 2015 году.

Кроме движков, полезно ещё знать особенности платформ. Например, на мобильной платформе iOS куча браузеров, помимо встроенного Safari: Chrome, Firefox, Opera, Яндекс, UC и даже Edge недавно выпустили. Но все эти браузеры — просто оболочки над встроенным в систему движком WebKit. Правила этой платформы запрещают использовать другие браузерные движки. А вот на Android большинство браузеров поставляются со своими движками: Firefox, Opera, Samsung, но некоторые используют встроенный Chromium.

Ну вроде всё? А нет! Есть ещё отдельная группа необычных браузеров: они живут не на устройствах пользователей, а глубоко на серверах. На устройствах стоит только лёгкая оболочка, которая запрашивает адрес и получает с сервера набор скриншотов и ссылок, слепленных в сайт. Это прокси-браузеры и они безумно сжимают трафик, но по пути теряют: фирменные шрифты, фоновые картинки, градиенты, скруглённые уголки, тени и вроде того. Opera Mini — один из самых популярных прокси-браузеров. На сервере у него крутится устаревший движок Presto, а ставят его чаще всего на простые телефоны. Но есть и другие, подробнее вам расскажет Тим Кадлек.

Некоторые браузеры работают только на одной платформе: Edge и IE есть только на Windows, Safari только на macOS и iOS. Были когда-то попытки интервенций, но ничего не вышло. Это конечно усложняет тестирование. К счастью, есть сервисы вроде BrowserStack, которые дают вам доступ ко всем существующим браузерам, а Microsoft выкладывает компактные образы Windows для тестирования Edge и IE в виртуальных машинах.

Ладно! Про браузеры мы теперь знаем. А что делать, если тот же браузер, тот же движок — а результат на разных платформах разный? А ничего не поделаешь! На деле браузеры могут сильно отличаться в зависимости от платформы или устройства. Самая большая разница между десктопными и мобильными браузерами — в последних очень много оптимизаций и просто магии. Но можно поймать и разное поведение на десктопных Windows и macOS.

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

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

И ещё про тестирование. Как бы хорошо ни имитировал устройства и браузеры эмулятор Chrome DevTools — это только намёк на то, как они будут выглядеть в реальности. Важно проверить результат на настоящих платформах и устройствах, как минимум: на Windows, Android, macOS и iOS. Настоящие пальцы на настоящем устройстве, настоящие браузеры в естественной среде обитания расскажут вам много нового о том, как именно будут пользоваться вашими интерфейсами. Это гораздо важнее того, насколько они похожи на макет.

Под какие браузеры нужно верстать современному верстальщику?

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

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

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

Chrome (46 %)
Firefox (32 %)
Internet Explorer (14 %)
Safari (5 %)
Opera (2 %)
Остальные браузеры (1 %)

Совсем не обязательно, что эти цифры отражают реальную действительность, здесь важно другое. Главное, что за этими процентами кроется определенная аудитория посетителей сайта. Если сайт идеально отображается в Chrome, Firefox и IE, а в каком-либо другом нет, то это не принесет сайту максимальной прибыли. Ведь та группа посетителей, которая кроется за 7,3 %, скорее всего не будет чувствовать себя комфортно на сайте и покинет его. Поэтому современный верстальщик должен верстать сайты для корректного отображения практически во всех используемых браузерах.

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

Читайте также:

Под какие версии браузеров верстать

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

Типы устройств

Разшерения экранов

Разшерения экранов

Разшерения экранов

Разшерения экранов

Типы устройств

Типы устройств

Браузеры под которые оптимизировать сайты

Разшерения экрана

Послесловие

Застрял в прошлом

Насколько сильно может быть устаревшим браузер?

Под какие браузеры нужно верстать современному верстальщику?