Правила веб-дизайна для разных браузеров

Веб-обозреватель, обозреватель, браузер(от англ. Web browser, устар. броузер) — программное обеспечение для просмотра веб-сайтов, то есть для запроса веб-страниц (преимущественно из Сети), их обработки, вывода и перехода от одной страницы к другой (Источник: Википедия).Существует внушительное множество браузеров, как и их версий. К основным можно отнести Internet Explorer(скорее потому, что он идет встроенным в самую распространенную операционную систему Windows, Google Chrome, Mazilla FireFox и Opera. Однако проблема возникает в том, что часто не во всех браузерах сайты отображаются одинаково, поэтому определенный процент пользователей может видеть некорректную работу web-страниц. Почему так происходит и как этого избежать?

 

Для начала определимся с тем, что лежит в основе любой web-страницы. За каждой из них скрывается исходный код, который состоит из тегов – специальных разметочных кодов на языке HTML. Весь комплект таких тегов называется спецификацией и поддерживается W3C консорциумом, в котором состоят все основные фирмы, занимающиеся разработкой программного обеспечения для всемирной паутины.  В идеальном случае, все браузеры должны придерживаться спецификации для корректного отображения страниц, однако в реальности это происходит не всегда.

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

В настоящий момент корректность отображения страниц практически одинаковая, свои нюансы имеют лишь браузеры Internet Explorer и Netscape Navigator (к этому списку можно отнести ряд других браузеров, однако ими пользуется меньше 1% серферов в интернете).

Правила веб-дизайна

1. Просматривать отображение страниц во всех популярных браузерах. Дело в том, что, хоть код для всех браузеров один и тот же, интерпретируется он браузерами по-разному. Причем происходит это как в разных обозревателя, так и в разных версиях одного. Причина этому – конкурентность между самими браузерами, которые вводили свои теги для повышения популярности своих продуктов.
2. Просматривать страницы в различном разрешении. Достаточно много современных компьютеров имеют низкую разрешающую способность экрана. Например, многие КПК выпускаются с черно-белым экраном, а большое количество ноутбуков имеет ограничение палитры 256 цветами.  А планшеты, смартфоны и другие электронные гаджеты с выходом в интернет имеют различную ширину экрана. Поэтому в последнее время приобретает все большую популярность адаптивный дизайн сайтов. Под мобильные телефоны, которыми пользуются большой процент посетителей интернета, все больше набирает тенденцию создание специальной мобильной версии сайта.
3. Тестируйте сайт под разными ОС и на разных платформах. Да, большинство пользователей в глаза не видели ни одной операционной системы, кроме Windows, однако в последнее время набирает популярность Apple Mac OS. Рано пока сбрасывать со счетов Linux и Unix. Все эти платформы немного по-разному выводят на экран графику, поэтому шрифт в Linux может быть совсем не похож на шрифт в Windows. Поэтому, если вам важно, чтобы сайт представлял интерес для широкого круга пользователей, то его следует протестировать в других ОС

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

Browsershots – один из самых полных из бесплатных инструментов для тестирования кроссбраузерности на данный момент.

IETester – сервис, созданные специально для тестирования сайтов в IE - одном из самых проблемных браузеров.

Browsera – автоматически тестирует сайт на совместимость. Имеется как бесплатная версия с ограниченным функционалом, так и коммерческая.

Вернуться назад