Przeglądarki...

12 września, 2009

Zaokrąglone rogi będą motywem przewodnim tego wpisu, bo idealnie wiążą się z tematem, który chciałbym poruszyć. Sądzę, że przewija się on w głowie niejednej osoby, która miała okazję składać strony WWW.

Otóż zawsze gdy dostaję do poskładania layout skacze mi ciśnienie gdy widzę w nim zaokrąglone rogi. Nie... Nie dlatego, że ten motyw na stronach WWW już wystarczająco mi się opatrzył. Po prostu zaokrąglone rogi to esencja pewnego problemu. Osoba dająca nam layout do poskładania oczywiście chce by był on jak to mówią - "pixel perfect" pod każdą przeglądarką (czyli pod tymi najpopularniejszymi). To oznacza pewne niedogodności. Weźmy na warsztat wspomniane zaokrąglone rogi - wszystkie normalne przeglądarki dorobiły się już ich obsługi za pomocą CSS. Problem polega na tym, że istnieje znana chyba wszystkim grupa "nienormalnych" przeglądarek, które tego udogodnienia za pomocą CSS nie obsługują. Pech chciał, że w skali globalnej te "nienormalne" przeglądarki mają około połowy udziałów w skali globalnej (mniejsza o to czy jest to 40% czy 60% - takiej grupy użytkowników nie można pominąć).

I teraz specjalnie dla grupy osób używającej misiów do przeglądania stron WWW, osoba składająca stronę musi celem uzyskania zaokrąglonych rogów zamiast jednej linijki w kodzie CSS, tworzyć różne dziwne struktury - tym dziwniejsze im bardziej elastyczny ma być blok z zaokrąglonymi rogami). Te struktury to z reguły masa div-ów, które zawierają się w sobie nawzajem. I nie wiem jak Wy, ale mi bardzo często w czasie tworzenia takiej zacnej struktury div-ów po głowie chodzi jedno pytanie:

Po jaką cholerę ?

Oczywiście musicie zdać sobie sprawę z tego, że raczej nie uda się Wam tego wytłumaczyć waszemu grafikowi/klientowi.

Warto jednak zastanowić się kto tak naprawdę używa IE ? Czy używa go ktoś kto ma jakieś pojęcie o tworzeniu stron WWW (nie wliczamy tu webmasterów, którzy na IE testują) ? Mogę się założyć, że przeciętny Kazio, będący typowym użytkownikiem IE, biorący pole input domyślnej wyszukiwarki za pasek adresu ma głęboko w poważaniu czy na stronie którą właśnie składamy będą zaokrąglone rogi czy nie. On po prostu jeżeli już w przyszłości na naszą stronę trafi, to nie będzie prowadził rozważań w stylu "czy kolor linków został odpowiednio dobrany ?" (no chyba, że grafik naprawdę schrzanił w tej kwestii dobór kolorów - ale tu działa taka magiczna zasada "na sędziego meczu" - możesz świetnie sędziować mecz piłkarski i nikt na Ciebie nie zwróci uwagi, ale spróbuj podyktować niesłuszny rzut karny i potem przez trzy tygodnie będziesz "gwiazdą" numer jeden w krajowej/lokalnej sieci). Przeciętny Kazio wejdzie na stronę, znajdzie co potrzebuje i sobie pójdzie.

Czy warto zatem dla takich osób męczyć się, dokładać dodatkowe dziwne struktury w kodzie strony i tym samym zwiększać czas jej ładowania (no bo zaokrąglone rogi wymagają nie tylko więcej kodu (X)HTML, CSS, ale też dodatkowych grafik) ? Moja odpowiedź - nie. I moim małym marzeniem jest by ludzie, którzy potrzebują stron WWW w końcu zrozumieli, że w sieci podstawą jest informacja podana w czytelny sposób (o łatwości jej znalezienia w strukturze strony nie wspomnę), a detale typu zaokrąglone rogi nie są na tyle istotne (no może poza jakimiś ekstremalnymi przypadkami) by poświęcać na nie dodatkowy transfer danych i zapytania do serwera po dodatkowe grafiki.

Po prostu ludzie, którzy patrzą bardziej szczegółowo na jakość wykonania stron nie używają IE (na pewno trafią się jakieś dziwne jednostkowe przypadki, ale z rachunku prawdopodobieństwa wynika, że szansa iż taki osobnik trafi na naszą stronę jest bardzo mała) - oni używają normalnych przeglądarek, które wspierają nowoczesne rozwiązania i takim osobom można serwować dopieszczone wizualnie strony z przejrzystym kodem.

Ktoś powie, że to pójście na łatwiznę, ale może jest to po prostu pójście po rozum do głowy ? Po co mamy z uporem maniaka pokazywać użytkownikom IE, że w nim też można uzyskać ładne wizualnie strony, skoro i tak 99.999% z nich nie zwróci na to w ogóle uwagi?

Komentarze do wpisu "Przeglądarki...":

1. Sharpek napisał(a):
12 września 2009, 20:40:09

Cześć,

Rogi to jesze pikuś, zawsze można to obejść.

Wyobraź sobie że musisz używać mnóstwa PNGów z kanałem alfa :) IE6 jako tako ich nie wpiera

2. Rafał napisał(a):
12 września 2009, 21:17:37

Generalnie to masz rację. Po co kombinować z masą sztuczek, żeby w misiaczku dorobić drobny szczegół. W zasadzie stosuję to o czym mowa w notce na swojej skromnej stronie domowej.
Problem pozostaje tylko tego typu - wytłumacz brak zaokrąglonych rogów Twojemu klientowi, bo to zwykle dla niego robisz stronę, a nie dla użytkowników jego strony. Jeśli uda Ci się przekonać klienta, to gratulacje. Jeśli spróbujesz ukryć przed nim fakt "nie obejścia" problemu a kiedyś trafi na własną stronę z IE, pewnie zgłosi się do Ciebie po bugfixa... więc wyjdzie na to samo jakbyś to zrobił od razu :-P
Ciężkie jest życie webmastera.

3. Wasacz napisał(a):
12 września 2009, 21:19:11

<html><body><img src="layout-psd.png">

Proszę zobaczyć, działa!

4. Sajam napisał(a):
12 września 2009, 21:20:33

To wróćmy to przeglądania Internetu w trybie tekstowym - informacja będzie "podana w czytelny sposób", bo to jest przecież najważniejsze.

5. Wasacz napisał(a):
12 września 2009, 21:21:48

Sajam: czytelny != tekstowy. Tu chodzi raczej o usability.

6. Dziudek napisał(a):
12 września 2009, 21:40:28

@Sharpek - na szczęście ja już od dłuższego czasu z IE6 nie muszę walczyć (poza nielicznymi wypadkami), a co do PNG z kanałem alpha - na dobrą sprawę ich implementacja w IE7 też jest do bani - wystarczy wrzucić na tło malutki PNG z kanałem alpha i można zaobserwować wielkie zmulenie IE (niektórzy mają nawet zaszczyt zobaczyć jak IE7 wypełnia blok tym obrazkiem ;D).

@Rafał - na envato.com też z tego co widziałem stosują podobny trick z rogami - w IE po prostu jest kwadratowo ;) (a i IE6 chyba nie wspierają - przynajmniej patrząc po tym co mi się pokazało w przeglądarce :)

@Wasacz - dobre ;) I ten ultra minimalistyczny kod :D

@Sajam - tak swoją drogą Lynx ma swój klimat :) Ale na poważnie - nie chodzi o to żeby tworzyć dwa zupełnie inne layouty - tylko po prostu ten w IE6/7/8 byłby uboższy. Coś jak z grami komputerowymi - używasz słabej karty graficznej - nie zobaczysz pewnych efektów, masz dobrą kartę graficzną - możesz podziwiać wszystko to co programiści mogli wyłuskać z silnika gry :) Tak naprawdę chodzi o to, że klienci się czepiają o detale, które w ostatecznym rozrachunku użytkownikowi IE6/7/8 nie robią żadnej różnicy :)

7. Wasacz napisał(a):
12 września 2009, 21:43:53

Pierwszy raz słyszę, żeby ktoś porównywał przeglądarki do kart graficznych, a to takie… trafne.

8. Rafał napisał(a):
12 września 2009, 21:45:06

@Wasacz: dokładnie. Trzeba zanotować. Przyda się na przyszłość :-)

9. D4rky napisał(a):
12 września 2009, 21:47:05

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

10. Dziudek napisał(a):
12 września 2009, 21:47:24

Hehe, mi tam zawsze silnik renderujący strony (no bo żeby być już dokładnym to właściwie trzeba porównywać silniki renderujące, a nie same przeglądarki ;) ) kojarzył się jakoś z grafiką (może przez to słowo "renderujący") ;)

11. Dziudek napisał(a):
12 września 2009, 21:49:08

@D4rky - nic tylko pokazać to mojemu szefowi ;) Choć może już nie będę narzekał - i tak ma dość liberalne podejście do IE jak na ludzi, których swego czasu mogłem poznać :P

12. Paweł Ciupak napisał(a):
13 września 2009, 01:44:27

@D4rky: Teraz to powiedz klientowi.

13. riddle napisał(a):
13 września 2009, 16:32:14

Jak się ma klientów, którzy wymagają pixel-perfect, to się powinno ich zmienić (bądź gradualnie zmieniać, nikt nie każe nikomu jeść ścian). D4rky dobrze pisze, pixel-perfect działa dla druku, nie dla www.

14. piotr napisał(a):
13 września 2009, 19:13:14

Pozwole sobie podlinkowac artykul, ktory kiedys na podobny temat napisalem. Generalnie moje motto - olewac!

Link: http://my.opera.com/arti040/blog/dlaczego-3-4-projektow-nie-dziala-jak-nalezy-albo-w-ogole

15. PiotrekJ napisał(a):
17 września 2009, 00:06:09

żeby to tylko zaokrąglone rogi były problemem, takich kwiatków jest cała masa weźmy na przykład scrolovanego DIVa (overflow: auto;) a w nim kolejne dwa DIVy, jeden z atrybutem position: relative; a zagnieżdzony z position: absolute; tylko dwa silniki sobie z tym radzą webkit i Gecko reszta wymieka, Opera w gruncie rzeczy przy zaawansowanych layout-ach jest najgorsza i najmniej przewidywalna o IE6 nie wspomne - już dawno zapomnialem o tym zabytku

Dodaj komentarz:

Textile Lite włączony ( szczegółowy opis znaczników ):
*strong* | # lista numerowana | * lista wypunktowana | _em_ | __italic__ | "link":http:// | bq. cytat.