Дизайн сайта в разных браузерах
При создании своего сайта все хотят иметь красивый и главное уникальный дизайн [ну, практически все]. Некоторые используют платные шаблоны [как я], но так как русские [и вообще все славяне] паталогически не хотят тратить деньги на то, что можно получить безвозмездно [то есть даром], то все больше используют бесплатные шаблоны или пишут сами. И тут могут возникнуть проблемы.
Вот какой ваш самый любимый браузер? Я использую Firefox для удовольствия [этот сайт для меня удовольствие – посмотрите на него в FF] и Opera для работы. Кто бы что ни говорил, а все-таки Opera гораздо быстрее в работе (даже запускается быстрее). Но у меня также установлены: Safari, Google Chrome, Netscape Navigator и IE 6/7/8. Спрашивается, зачем так много? Я очень много работаю с дизайном, и мне приходится постоянно помнить, что только Firefox среди всех названных поддерживает CSS 3.0, что у IE 6 проблемы с прозрачностью рисунков PNG, что Opera, Safari, Google Chrome [эти три по скорости работы примерно одинаковы], Netscape Navigator и IE 7 работают только с CSS 2.0. А IE 8 вообще непонятно что, там и элементы CSS 3.0 встроены [на самом деле единицы], и скорость запуска и загрузки нормальная – но что-то не так. Бета, что с нее взять.
Используя Google Analytics [скрытая реклама] я вижу, какими браузерами пользуются люди при посещении моего сайта. Вот скрин:
Самые популярные браузеры
Думаю, все и так практически ясно, без моих слов. НО.
У меня есть одно веское “но”. Тематика моего сайта такова, что в основном его посещают достаточно продвинутые в плане web-технологий люди. А это означает, что на других сайтах данное процентное отношение несколько иное. В основном, происходит увеличение доли Internet Explorer. Кстати, IE 6 используют примерно треть из всей группы IE, то есть в моем случае IE 7 – 5.43% и IE 6 – 2.33%.
Главное правило хозяина сайта – не терять своих посетителей. Если бы вы зашли на сайт, а увидели развалившийся дизайн [хотя админы, может, даже и не знают об этом], который не исправляют, разве вам захочется вернуться? Вряд ли, один/два раза потерпите, а потом все – прошла любовь, завяли помидоры.
Вот именно поэтому необходимо помнить про не только сам дизайн, но и его качество, которое предполагает кроссбраузерность, то есть одинаковость (без багов) во всех популярных браузерах. Фактически, это IE, Opera, FF. Chrome и Safari одинаково с Opera показывают [вроде как].
Я вплотную подошел к вопросу контроля дизайна сайта в различных браузерах.
Для начала вам всегда стоит проверять валидность кода на предмет незакрытых тегов: вот сервисы для этого:
HTML:
http://validator.w3.org/
http://www.htmlvalidator.com/
CSS:
http://jigsaw.w3.org/css-validator/
http://xhtml-css.com/
Это самые распространенные и популярные.
Теперь дополнения для Firefox, выполняющие те же функции:
HTML Validator
CSS Validator
FireBug и куча дополнений к нему
Но ведь этим все не заканчивается, код кодом, но хочется видеть конечный продукт, для этого пользуемся сервисами, которые делаю скриншоты вашего сайта в рахных операционах системах и браузерах и тут же (или спустя 10 минут) показывают их вам [очень удобно, на мой взгляд]:
http://browsershots.org/
http://browsercam.com/
http://browsrcamp.com/
http://ipinfo.info/netrenderer/
Есть дополнения для FireFox, позволяющие переключаться на другие браузеры:
Для тех, кому и этого мало, представляю программу Multiple IE, которая позволит вам поставить себе на комп версии IE, начиная от 3,0 и до 6,0. Хотя фактически, имеет значение лишь шестерка, так как более старыми не пользуется ни один человек, только пауки и боты.
СКАЧАТЬ Multiple IE и посмотреть скриншот
Окно установки нескольких версий IE
Если у кого-то есть дополнительный материал – буду рад с ним ознакомится, пишите в комментариях.
P.S. И еще: 
У меня вот статистика браузеров другая. Опера 65%, Лиса 31%, остальное по мелочи. Если шаблон платный- еще не значит что он качественней бесплатного. Если что-то хочешь сделать хорошо- сделай сам, только сразу в 5 браузерах. Сразу видно что и на каком этапе поехало :) Спасибо за статью и особенно ссылки на проверяемость чистоты html
я думаю не только славяне любят в нахаляву, только глупец этого не любит
У меня на всех сайтах на первых местах FF или Опера. IE обычно всегда на последнем месте…
slaFFik:
Да, более продвинутая аудитория использует FF и Opera.
А вот если взглянуть на общую статистику spylog, то видно что доля IE/FF/Opera пока составляет 51%/24%/16% соответственно.
Так что с прозрачностью в PNG еще предстоит иметь дело :(
(IE 6 занимает 20%)
У spylog самая неправильная статистика. Он собриет посещения ботов, пауков. Не всех, конечно, но многих. А именно боты и пауки используют IE – всегда. Так что это не тот источник, на который можно ссылаться с уверенностью. Еще у него и название какое – spylog.
Вот посмотрел liveinternet – доля IE здесь ниже, чем в spylog, но все равно она значительная.
Я же не спорю о важности IE, просто эта доля для каждого отдельного сайта разнится весьма значительно. У меня около 8%, у кого-то ~50%. Всякое бывает.
На да создавать шаблоны Что бы они в любом браузере нормально открывались. Много людей пользуются Internet explorer, а в нем большинство сайтов выглядят недоделанными.
Надо, не спорю, но просто люди не понимают, что IE – худший придуманный людьми браузер (100% про 6, про 7 можно еще поспорить, 8 не подходит под это определение).
Есть такие умники которые пользуются IE якобы он показывает все недоработки, так что же получается , что опера дорабатывает сайт?!
Всегда пользуюсь оперой, а когда увидел свой сайт через IE чуть со стула не упал :)понимаю, что надо дорабатывать, но все же проще пользоваться нормальными браузерами.
IMHO Думаю, если контент сайта хорош, то юзер все же оставить IE.
Опера рулит, ie must die!
согласись , у оперы дизайн красивее, да и работать приятнее.
Ну не только опера :) Еще точно также работает Safari, еще лучше FireFox. Chrome – сырой.
2@Тристан:
Просто одни браузеры следуют стандартам, а другие нет. Хотя впрочем не только браузеры, но и верстальщики тоже.
Но все-таки правильный цикл верстки можно представить так:
1) Начальная верстка с оценкой результата в “правильном” браузере (например Firefox)
2) Валидация (x)html/css кода
3) Визуализация в IE и при необходимости разработка отдельных файлов стилей с трюками и хаками под разные его версии.
А то, что IE занимает солидную долю, так это реалии жизни. И видимо пользуется им более возрастная аудитория, либо те, кто далек от интернет-технологий.
Лис хорош, да и плагинов много, но и минусы IE и FF в тех же плагинах, они более уязвимы, всякие вирусы попадаются типа отправь смс.
Согласен…
Но вирус у меня был на фф и на ие, с ие прогнал, а с фф он видимо подружился:)а каспер всегда работает и редко их пропускает.
Суп все же лучше:)
Для того, чтобы они не попадались, надо использовать антивирус с активным сетевым экраном :) И тогда ох как тяжело будет всем вирусам. Хотя в плагинах к ФФ я не встречал еще ни разу. Перед тем, как их выкладывают в хранилище на сайте аддонов для Firefox, они все проходят проверку на работоспособность и “вшивость”, так что вам просто не повезло как-то раз…
А спорить о том, какой браузер лучше – неблагодарное дело. Мы же не можем сравнить суп и борщ (все это категория первое/горячее/жидкое/т.п.), вареную и жареную картошку (это все картошка), мой сайт и сайт Microsoft – все это делается с разным бюджетом и технологиями. Нельзя сравнить несовместимые вещи. Можно только выделять, где и у кого больше минусов. Но обладая одними минусами, бесспорно есть и плюсы. Каждый выбирает для себя тот набор + и -, который для него более терпим, понятен, удобен. Поэтому у каждого свой собственный любимый браузер :)
всем привет, с задержкой в год к разговору подключается тот самый неосведомленный пользователь IE8, как я понимаю, png в IE8 все еще размытые.
вопрос @slaFFik , как к спецу по BuddyPress.
у меня стоит тема BP default, снизил ширину до 90%. в IE8 все выглядит просто замечательно, но в Chrome сайт намного шире + текст совсем тонкий.
должен подытожить, что Chrome просто тупо растягивает мой сайт, я бы даже сказал, что он его приближает/увеличивает на 10-15%. то же происходит и с cosydale.com
есть ли способы с этим бороться?
заранее спасибо!
Нажмите Ctrl+0 (контрол+ноль). Это вполне может быть просто проблема с масштабом в хроме :)
узнал для себя нечто новое, но нет, не в этом дело. масштаб действительно можно уменьшить, но это будет уже совсем другой вид, неразборчивый текст и т.д. проверил на myspace, ситуация та же :) такое ощущение, что минимальный размер для Chrome это 95%, даже если в IE будет 85%.