Projektowanie i inne takie...

Wykop ten artykuł, jeśli uważasz, że warto. Pracuję ostatnio nad pewnymi projektami, o których mogę powiedzieć tylko tyle, że nad nimi pracuję. Niemniej owa tajemnicza tajemniczość w postaci umowy NDA sprawia, że paradoksalnie mogę napisać więcej niż bym mógł, gdybym takiej umowy nie miał. Tak więc - są to, z reguły, bardzo duże projekty, których ambicją jest (lub będzie) naciągnąć małolatów na kilka smsów miesięcznie a co za tym idzie, coś na tym zarobić. Problem jest taki, że to chyba nie wyjdzie... Dlaczego? Powody są dwa: - złe podejście do samego procesu projektowania - graficy rysujący layouty Jeśli chodzi o pierwsze, to właściwie głównym błędem jest robić, zupełnie bezsensowne założenie, że strona ma wyglądać indentycznie (z naciskiem na "identycznie") w każdej przeglądarce - od IE6 (a nawet 5.x) poprzez wszystkie wersje Firefoska czy Opery. Jest to kompletnie bzdurna decyzja projektowa, która kosztuje wiele nerwów, czasu i pieniędzy, które wyrzucamy w błoto. Graficy zaś doskonale to rozumieją więc co robią? Tworzą proste layouty zawierające zwykły komunikat czy formularz kontaktowy, składające się z kilku zagnieżdżonych, różnokolorowych boksów, z zaokrąglonymi rogami, cieniami i przezroczystością... i robią później kwaśną minę, że my koderzy psujemy ich wizję. Wizję, którą końcowy użytkownik ma jeszcze bardziej w dupie niż my. Jako, że artykuł ma być dla wszystkich, nie będzie dużo kodowania, objecuję. Podam tylko jeden prosty przykład ilustrujący to, o czym chcę napisać. Więc tak - przeglądarki mają ograniczenia, jasna sprawa. Mają też pewne zalety, które można wykorzystać. I na przykład - aby zrobić zwykłe pudełko z zaokrąglonymi rogami musimy użyć kilku zagnieżdżonych DIVów, każdemu przypisać klasy i odpowiednie reguły CSS aplikujące odpowiednie obrazki, które to, z kolei, symulują zaokrąglenia. Wygląda to tak:

<div class="box">
<div class="wrapperTop">

{treść}

</div>
<div class="wrapperBottom"></div>
</div>

.box, .box div {
background-repeat: no-repeat;
background-position: 0 0;	
position: relative;
}

.wrapperTop {
_height: 100%;	
padding: 0 10px;
}

.wrapperBottom {
position: absolute;
width: 100%;
height: 10px;
left: 0;	
}

Nie musisz tego rozumieć. Wystarczy byś miał świadomość, ile trzeba aby rozwiązać rzeczony problem. Teraz serwując dwa lub trzy obrazki jako tło jesteśmy w stanie zrobić pudełko o dynamicznej wysokości, z zaokrąglonymi rogami, działające wszędzie i bez problemu. Problem pojawia się gdy takich boksów mamy kilka(naście) - o różnych kolorach (bądź teksturze) czy różnym stopniu zaokrąglenia. W ekstremalnym przypadku (nad którym właśnie pracuję), przez takie właśnie rzeczy pierwsza lepsza podstrona serwisu ładuje kilkadziesiąt obrazków PNG (~800kb), które IE6, dla zachowania przeźroczystości, przepuszcza przez własny filtr (na którym, powyżej 200 obrazków potrafi się powiesić) a całość odświeża 10-12 sekund... przy czym strona jest ładowana z dysku. Dodatkowo, od strony kodu głupi, zwykły boks z komunikatem dla użytkownika wgląda jak niejedna nieźle skomplikowana witryna (!). Serio. Można inaczej? Można:

<div class="box"> {treść} </div>

...a w CSS takie oto dwie, proste reguły:

div.box {-webkit-border-radius: 6px; -moz-border-radius: 6px;}

... i wszystko - bez obrazków, bez zbędnego kodu mamy pudełko o dowolnym kolorze i rozmiarze, z zawsze ładnie zaokrąglonymi rogami, których krągłość możemy sobie dodatkowo korygować zmieniając jedną jedyną wartość w CSS. Gdzie jest haczyk? Ano właśnie. Ładne, zaokrąglone różki będą widoczne jedynie w Firefoskie i Safari/Chrome/Konquerorze. Nie będą zaś w IE i Operze... dopóki owe technologie nie zostaną w nich zaaplikowane. Pytanie tylko - ale właściwie, w czym to przeszkadza? Jaki to problem, skoro i tak 90% użytkowników nawet tego nie zauważy? Dowód? Wymień raz-dwa cztery podstawowe kolory onetu. Informacje prezentowane są tam w białych czy szarych boksach? Boksy mają ramki czy nie? Mają zaokrąglone rogi? Sprawdź teraz i zobacz ile błędów popełniłeś... a przecież to drugi co do popularności serwis w polskim Internecie! Prawda jest taka, że nikt oprócz osoby, która projektuje layout, takich rzeczy nie zauważa a jeśli już zauważy i doceni to ich brak w innej przeglądarce nie wpłynie zasadniczo na czytelność i dostępność całości za to bardzo pozytywnie odbije się na objętości czy przejrzystości projektu pod wględem przyszłych modyfikacji i zaoszczędzi sporo czasu użytkownikowi, którego bardziej interesują krągłości jego żony niźli pudełka w którym otrzymał komunikat o zalogowaniu. Podobnie ma się sprawa z innymi elementami dostępnymi tylko dla wybranych przeglądarek. Jeśli trzeba dać text-shadow dla zwiększenia czytelności, to daj. Tam, gdzie nie można, ustaw kolory tak, by ten nie był potrzebny a nie bezmyślnie robisz menu obrazkowe. Po co? Pamiętaj, że priorytetm jest szybkość, wygoda użytkownika i dostępność treści (w tej kolejności) a jeśli do tego strona jest przyjemna dla oka, to jest to dodatkowy atut i gratulacje dla Ciebie, że udało ci się to wszystko zgrabnie poskładać. Identyczność, tak często wymagana, w 99% jest niepotrzebna a za to cholernie pracochłonna ...a czasem i tak niemożliwa do wykonania. Tak więc drogi grafiku, jeśli następnym razem usiądziesz do nowego web-dzieła weź pod uwagę to, co właśnie przeczytałeś. Zaoszczędzisz w ten sposób wiele kurw rzuconych przez kodera pod Twoim adresem, czego Tobie i sobie życzę. Do następnego Wykop ten artykuł, jeśli uważasz, że warto.