Обилие браузеров и различных их версий создает немало прецедентов, когда оказывается, что красивые таблицы и эффекты, прекрасно отображающиеся на компьютере разработчика сайта, не работают или просто коряво отображаются на других браузерах, их устаревших версиях и мобильных устройствах.
Рассмотрим пример на основе разрабатываемого мной сайта "Слуховые аппараты в Польше, каталог" http://sluchowe-aparaty.com. В предыдущих статьях в этой группе я уже говорил о том, что практически отказался в этом проекте от использования Java скриптов и все стараюсь делать на чистом HTML. Но, даже при этом, могут возникнуть подводные камни.
Оформление страниц каталога сделано с использованием CSS стиля таблиц:
border-radius: 12px;
box-shadow: 1px 1px 3px 3px #D6BDD6;
background-color: #F7F2F7;
margin-bottom: 5px;
Вот как это выглядит в большинстве браузеров (страница для примера http://sluchowe-aparaty.com/aparaty-sluchowe-slaskie#Knurow)
Но, если background-color и margin-bottom воспринимаются без проблем всегда, то border-radius и box-shadow обрабатываются только последними версиями браузеров. Таблицу совместимости для border-radius можно увидеть, например, здесь http://htmlbook.ru/css/border-radius. В итоге на более ранних версиях а также на некоторых мобильных устройствах картинка будет такой
Согласно метрике, именно такую картинку, заходя на сайт видит порядка 8-9% посетителей. Если бы я использовал белый фон, таблица вообще потерялась бы.
В случае, когда две таблицы находятся рядом, желательно использовать различный цвет фона. Пример, на той же странице рядом с этой таблицей раскрывающееся окно.
Естественно, если border-radius и box-shadow не отработаются браузером, мы получим
Различный фон таблицы и раскрывающегося окна не позволяют им слиться.
Если же Вы решили использовать белый либо очень светлый цвет фона, то можно воспользоваться, например, разделительной линией, как в этом примере (страница http://sluchowe-aparaty.com/aparaty-sluchowe-gdansk#polski)
Полноценное отображение картинки:
И, соответственно, упрощенное. Как видите, разделяющая линия помогает расставить акценты на странице.
Вывод. Даже, если упрощенную картинку на Вашем сайте увидят меньше 10% посетителей (а Вы никогда не можете быть 100% уверенным в том, что такого не произойдет), то нужно побеспокоиться и о них, подумав, как отделить информационные блоки цветом или специальными разделителями.
Вступите в группу, и вы сможете просматривать изображения в полном размере
Это интересно
0
|
|||
Последние откомментированные темы:
-
Туристические переводы: основные направления и особенности
(2)
Mandr
,
26.10.2020
-
Блоги для поддержки сайта. Что лучше?
(2)
alexdzyaba
,
24.11.2016
-
Следите за тем, как отображается Ваш сайт в разных браузерах
(1)
alexdzyaba
,
05.11.2015
-
Сайт туристической компании. Особенности продвижения. Часть 1
(2)
alexdzyaba
,
04.11.2015
-
Формула успеха интернет-магазина
(1)
alexdzyaba
,
31.10.2015
20241118055255