Маркетинг vs. Браузинг
Целта на тази статия е да обърне внимание на тънкостите, благодарение на които сайтът ти ще бъде достъпен и приятно изглеждащ във възможно най-много браузъри – и съответно за най-голям брой потребители на интернет. Това означава, че по всяка вероятност текстът, който следва, няма да представлява интерес за теб, ако не се занимаваш с уеб-дизайн, маркетинг или друга подобна дейност.
В допълнение следва да те предупредя, че, макар и на не особено академично ниво, статията все пак изисква да имаш елементарна представа за това какво представлява браузърът, както и базово разбиране на HTML и CSS. Това е така, защото тя ще се опита да даде отговор на следните въпроси: Кои браузъри са подходящи за тестване на сайта ти и към кои трябва да се държи „най-приятелски” той? На какви основни проблеми можеш да се натъкнеш във връзка с печално известния, но все още разпространен Internet Explorer 6 (и в по-малка степен, с по-големия му брат IE 7)? И не на последно място как да ги разрешиш?
Забележка: Надявам се горният параграф да остави у теб правилното впечатление, че тук няма да се занимаваме с наистина старите браузъри, които днес почти никой не използва. Аз съм последният човек, който ще отрече ползата от перфекционизма, но все пак не смятам, че усилията, насочени например към IE 5.5 или Netscape 4, си струват.
Тестването
е от жизнено значение за всеки дизайнер или собственик на сайт. Основната причина да го правиш, е, че е напълно невероятно всичките ти потребители (особено ако са много) не само да се придържат към една и съща програма за сърфиране в мрежата, но дори да са в крак с нововъденията в тази сфера. Ако мога да цитирам собствения си опит с E-lect, за последните 30 дни 46.43% от читателите му са влезли през Internet Explorer (но само половината от тях през последната версия 8), 39.68 през Firefox (като тук почитателите на 3.6.3 дори са под 50%), 7.38 през Google Chrome и още 5.37 с помощта на Opera. За да бъда напълно изчерпателен, не мога да пропусна феновете на Safari, които са едва 0.86% – като това все пак значи по няколко души дневно – и на други по-малки браузъри – вече без собствена статистическа значимост.
Споменавам тази информация, защото тя дава приблизителна представа кои са най-важните браузъри към момента. От тук абсолютният минимум от програми, показващи безпроблемно сайта ти, би трябвало да включва Internet Explorer 6, 7 и 8, Firefox, Chrome, Opera и Safari. Това именно са браузърите, тестването на които е задължително.
(Разбира се, няма нищо лошо да прибавиш други към тях. В случая важи правилото, че колкото повече, толкова по-добре.)
В литературата, посветена на темата, е отделено голямо внимание на платформите, на които тези програми работят, но, за да не разширявам статията до безкрай, приемам, че в българските условия добрият изглед под Windows за сега е достатъчен – отново връщайки се към статистиката на E-lect, над 97% от посетителите на сайта са ползватели на някоя версия на тази операционна система, срещу 1.50% на Linux и още по-малко на Macintosh. При все това, ако имаш евтина възможност да провериш как изглежда сайтът ти в браузъри, специфични за последните две платформи, тестването само ще е от плюс.
Най-важният проблем във връзка с него, който остава да разрешиш, е как да разбереш как ще се вижда дадена страница под IE 6, 7 и 8. Ако знаеш как да използваш свободната за даунлоуд виртуална машина на Майкрософт (Microsoft’s Virtual PC), отговорът е лесен. При все това, тук ще се спра на един друг вариант за тестване, който ще те затрудни дори по-малко и има предимството да показва продукта ти под възможно най-много браузъри: използването на онлайн услуга.
Лично аз се доверявам на напълно безплатната проверка, осигурявана от Browser Shots, макар тя да е малко бавна и от време на време да дава леки проблеми. (Именно от нея знам, че външният вид на E-lect се различава леко от замисления, ако го посещаваш през по-стара версия на Internet Explorer, както и през някои от другите относително излезли от употреба програми.) Освен това можеш да опиташ и BrowserCam – един платен сайт, която обаче има безплатна предварителна версия.
И накрая, ако желаеш да направиш тестването на собствения си компютър, но без да го превръщаш в склад за остарели браузъри, би могъл да прибегнеш до програмите на Adobe – BrowserLab и на Microsoft – SuperPreview (като последната, поне до неотдавна, работеше само с версиите на IE).
Основните проблеми,
с които ще се сблъскаш като дизайнер или собственик на сайт, са причинени от Internet Explorer 6, не защото няма друго бъгнати браузъри, а понеже той все още се използва от удивително много потребители на интернет (задминавайки дори също не особено надеждната си версия 7). Опитвайки да се справиш с тях, на първо място трябва да се пребориш с изкушението да го сториш, докато развиваш дизайна на проекта си. Преди той да бъде напълно готов, се увери, че работиш по него на база на последната версия на Firefox или Opera и че можеш да го валидираш. Едва след това идва времето да се сблъскаш с IE 6.
Отново връщайки се към литературата, най-добрият начин да сториш това е да напишеш допълнителен CSS файл, който да поправя появилите се бъгове. Въвеждането му става с помощта на т.нар. conditional comments. За да не навлизам в подробности, всичко, от което се нуждаеш, е да сложиш следния код в секцията HEAD на HTML-файла (задължително след като си отбелязал пътя към основния стил):
<!–[if IE 6]>
<link rel=”stylesheet” type=”text/css” href=”stylefix.css” />
<![endif]–>
Впрочем, същият трик можеш да приложиш с Internet Explorer 7 като замениш 6-ицата в първия ред със седмица.
Учудващо, но много от големите проблеми в дизайна идват от т.нар. Quirks mode, който показва файла ти според правилата на по-стари браузъри като IE 4 и 5. За да се увериш, че той не е включен, имаш нужда единствено да въведеш валидна DOCTYPE декларация. В случая с Internet Explorer 6, обаче, преди нея не трябва да има никакви други команди, така че, ако правиш сайта си на XHTML за съжаление ще се наложи да премахнеш допълнителната XML декларация, изисквана от него.
Допълнителни неприятности може да ти донесе фактът, че IE 6 тълкува свойството height като min-height. В същото време то би могло да се окаже полезно в борбата за правилно подреждане на div-елементите под този браузър. Ситуацията с тях е строго контекстуална, но тук най-правилният подход е да намериш причинителя на евентуалното разместване на сайта ти и да да дадеш на неговия height стойност от 1%.
Естествено, проблемите със съвместимостта между отделните браузъри (и особено с многократно споменатия Internet Explorer 6) не свършват дотук. Обемът на статията обаче ме принуждава за сега да се разделя с теб. Ако се интересуваш повече от темата, ако имаш въпроси, коментари, трикове и преди всичко критики, не се колебай да възползваш от формата за коментиране по-долу.
Полезна статия! Браво!
Чудесна статия, прочетох я с удоволствие.
Приятно ми беше да открия професионално написана тема по въпроса, различна от стандартните клишета.
Интересна идея би било и едно детайлно продължение по въпросите за тънкостите в интерпретацията на кода от браузърите. Ще следя с любопитство страницата.
И аз съм мислел за това, но от една страна не съм писал код от много време, а от друга при настоящата посещаемост на сайта, усилията, които ще вложа, ми се струват контрапродуктивни. (Бтв, втората причина е в основата на това горната статия да е далеч под нивото, което темата заслужава.) Все пак благодаря за поздравлението! 🙂