Почему один вебсайт может выглядеть по-разному?
Безопасность сайта WordPress, защита от хакеров
22 апреля, 2020
Где разместить корзину товаров интернет-магазина
29 мая, 2020Веб-дизайн: просто для клиента и сложно для исполнителя
Д ля большинства непрофессионалов, веб-дизайн - то, как выглядит вебсайт.
С одной стороны, это похоже на правду. Но это то, что видит посетитель. Обычно взглядом непрофессионала. На самом деле веб-дизайн включает в себя огромное множество вещей. От правильно разработанного технического задания (ТЗ) и начального макета вебсайта в графических программах (Adobe Photoshop, Figma и т.д.), до пользовательского интерфейса (кнопки, иконки).
То, что показывают изначально клиенту - не полностью готовый вебсайт, а только набросок, макет для одобрения заказчиком. Именно поэтому разработка полноценного вебсайта не может занять 5 минут. Хотя многие клиенты не понимают, что это только начало работы. "Зачем что-то делать, Вы ведь уже показали мне готовый результат?". Но даже после полного окончания работ по дизайну, общий вид вебсайта может сильно отличаться. Не только от того, на каком компьютере, планшете или смартфоне его просматривают (операционной системы, размера экрана). А еще и от конкретного браузера. А ведь существуют десятки веб-браузеров, из которых 4-5 основных, используемых во всем мире.
Разница отображения вебсайта разными браузерами (Firefox и Opera)
Разница отображения вебсайта Google.com разными версиями Internet Explorer (9-11)
Почему разные браузеры показывают вебсайт по-разному?
Веб-браузер - программа в составе операционнной системы или отдельная прикладная программа, которая позволяет полшьзователю просматривать веб-страницы, гипертекстовую разметку и выходить в интернет.
Самых распространенных браузеров несколько (4-5). Казалось бы, распространенность конкретного браузера на мировом рынке должна зависеть от популярности операционной системы (ОС), в состав которой он входит? Но Microsoft Edge не спасает даже то, что он входит в операционной системы, которая стоит на 52,7% компьютеров мира. А низкая популярность Internet Explorer вызвана его нестабильностью еще со времен Windows 95. Не спасли даже десятилетия насильного внедрения в разных версиях Windows.
| Браузер | ОС | Доля рынка |
| Google Chrome | 68.06% | |
| Mozilla Firefox | клоны Linux | 8.21% |
| Internet Explorer | Windows | 6.68% |
| Microsoft Edge | Windows | 6.44% |
| Safari | Mac OS X | 3.66% |
| Opera | 1.35% | |
| Yandex | 0.91% |
На мой взгляд, распространенность веб-браузеров связана с личными предпочтениями, привычкой. Я, например, чаще пользуюсь Mozilla Firefox уже почти 20 лет, реже Google Chrome. Как я считаю, выйти на первое место в мире Google Chrome помогли: быстродействие, стабильность, устранение уязвимости Adobe FlashPlayer, ограничение назойливой рекламы.
„Издавна сложилось, что многие компании, хотели захватить лидерство на рынке веб-браузеров. Настоящая война разгорелась между Netscape Navigator (тогдашним лидером) и Microsoft Explorer. Самый крупный шаг в этом направлении сделали в компании Microsoft, фактически заставив пользователей Windows пользоваться своим встроенным в систему браузером. Более того, годами браузер в Windows был неудаляемым, пока судебным решением Microsoft не вынудили дать пользователям альтернативу выбора броузера.
Ситуация осложнилась тем, что ее разработчики не захотели поддерживать некоторые функции CSS (язык оформления веб-страниц). И, наоборот, для привлечения новых пользователей ввели свои, новые, более привлекательные и эффектные функции CSS.”
Кросс-браузерность - идентичное отображение вебсайта в разных броузерах
Желание выделиться среди конкурентов и смена поколений CSS привели к неприятному. В разных веб-броузерах, даже разных версиях одного и того же броузера вебсайт может отображаться по-разному.
Профессиональной задачей вебмастера является: добиться соответствия внешнего вида вебсайта без повреждений верстки и нарушений читабельности текста. Заметьте, попиксельной совметимости не требуется, она практически нереальна! Этого не могут и не собираются добиться добиться даже огромные коллективы вебмастеров крупнейших в мире порталов: Google.com, Facebook.com и т.д.
Почему современный вебсайт не обязан быть идеально одинаковым во всех браузерах? Каждый браузер использует свои индивидуальные особенности сглаживания шрифтов, размытость теней, элементы управления и т.д. Если вебсайт сделать попиксельно идентичным во всех браузерах - потеряются мелкие особенности. Привыкший к конкретному браузеру пользователь будет ощущать дискомфорт.
Правильно отображающие CSS3 версии популярных броузеров
По быстрому провести проверку вебсайта на кросс-браузерность можно на специальных ресурсах. Обычно, все они - платные. Но правильной будет тщательная проверка каждой страницы в разных популярных браузерах вручную. Только так, тщательной сверкой можно убедиться в том, что вебсайт всегда выглядит именно так, как было изначально задумано.
Для этого, необходимо убедиться, что вебсайт отображается одинаково в разных браузерах. Более того, профессиональный вебмастер вынужден просматривать в разных популярных браузерах все страницы вебсайта. Обязательными на сегодня для проверки являются браузеры Google Chrome, Mozilla Firefox, Microsoft edge, Internet Explorer, Opera. Все - последних версий с устраненными багами отображений CSS.
Например, главная страница этого вебсайта выглядит практически одинаково в Firefox и Edge. Отличия, буквально в пикселах, которым чуть отличаются шрифты. не забудьте проверить свою вебстраницу в разных браузерах!
Итак, создаваемый сегодня вебсайт должен иметь дизайн с кросс-браузерной совместимостью в последних версиях распространенных браузеров. Попиксельной идентичности в разных браузерах добиваться не нужно, даже вредно. И, конечно, современный дизайн обязан быть адаптивным. Иначе, Вы рискуете потерять больше половины посетителей с мобильных устройств.
Поделитесь нашей статьей в соцсети или профильном дружественном вебсайте!
Warning: Trying to access array offset on null in /home/alfa3888/domains/8alfa.com/public_html/wp-content/themes/8alfa-com/includes/content-single.php on line 286
Александр Бондаренко
Похожие записи
Warning: Trying to access array offset on false in /home/alfa3888/domains/8alfa.com/public_html/wp-content/themes/8alfa-com/functions/theme-functions.php on line 1611
