Projektowanie serwisu cz.2 - layout
Ten wpis miał się pojawić dobry miesiąc temu. Niestety pokonał mnie brak czasu, za co przepraszam. Żeby nie przedłużać od razu przejdę do właściwego tematu.
Layout w dużym uproszczeniu jest planem jak ma wyglądać nasza strona internetowa. Zazwyczaj umieszcza się na nim jedynie statyczny model strony. Z własnego doświadczenia wiem jednak, że dobrze jest także zaznaczyć sobie wygląd linku po najechaniu myszką, czy linku do strony już odwiedzanej.
Ważną sprawą jest przyjęcie na początku pewnych założeń. Np. podkreślanie/pogrubienie linku tekstowego, obramowanie obrazka będącego odnośnikiem, zaznaczenie działu, w którym obecnie znajduje się użytkownik itp. Nie należy jednak wprowadzać zbyt ekstrawaganckich rozwiązań. Dzięki ustandaryzowaniu pewnych elementów odwiedzający nie będzie miał wątpliwości, czy dany tekst jest linkiem, czy nie. Dobrym rozwiązaniem jest wyróżnienie linków w dłuższym tekście innym kolorem, ponieważ samo podkreślenie nie zawsze rzuca się w oczy. Oczywiście nie powinien być to kolor jaskrawy, a raczej nieco inny odcień koloru zwykłej czcionki.
O kolorystyce stron można by się rozpisać na kilkanaście stron - zwłaszcza jeśli ktoś zajmuje się tworzeniem layoutów na poważnie. Ponieważ w tej dziedzinie nie jestem ekspertem napiszę tylko kilka swoich uwag i spostrzeżeń. Przede wszystkim strony nie powinny być "zimne". Mamy czasy WEB 2.0, strona internetowa powinna być ciepła, miła dla oka, stonowana. Nie należy jednak przesadzać w drugą stronę. Kolory zbyt pstrokate przeszkadzają w skupieniu się na treści, a po dłuższym czasie przebywania na takiej stronie mogą po prostu boleć oczy. Dobrym rozwiązaniem może okazać się połączenie kolorów zimnych i ciepłych. Np. szarość przeplatana z odcieniami czerwieni, zieleni, czy niebieskości. Uzyskamy w ten sposób efekt stonowanej kolorystycznie strony, która cieszy oko, a jednocześnie nie odwraca zbytnio uwagi od treści.
Przejdźmy może teraz do tworzenia wyglądu serwisu od strony technicznej. Przede wszystkim nie należy przesadzać z obrazkami. Co prawda obecnie mało kto ma internet wolniejszy niż 256kbps, jednak po co przedłużać czas ładowania się strony. Kiedy dysponujemy słabszym serwerem, a ilość odwiedzin jest stosunkowo duża każdy zbędny kilobajt to dodatkowe sekundy ładowania się strony. Czasami nawet lepiej jest zrezygnować z jakiegoś "bajeru", który zaplanowaliśmy sobie w layoucie graficznym, a zastąpić go prostszym rozwiązaniem html+css. Uzyskanie niektórych efektów jest po prostu tak kosztowne, że korzyści z niego płynące nie są adekwatne do pracy w nie włożone. Poza tym takie rozwiązania często są dość nieeleganckie pod względem jakości kodu i mogą nie działać pod każdą przeglądarką tak samo (kolejna praca na napisanie odpowiednich hacków dla przeglądarek).
A teraz mój ulubiony temat: semantyka :) Niewiele osób tworzących strony internetowe zdaje sobie sprawy z tego jak wiele znaczników znajduje się w specyfikacji html i xhtml. Oczywiście uczenie się ich wszystkich nie jest najlepszym pomysłem, ale odgraniczanie się do div, ul, li i a to z kolei zwykłe marnotrawstwo. Warto od czasu do czasu zajrzeć w specyfikację i sprawdzić, czy przypadkiem pewnych elementów naszej strony nie można zastąpić innymi znacznikami. Płyną z tego dwie duże korzyści. Po pierwsze ograniczymy ilość klas i elementów posiadających własne id w stylach kaskadowych. Dzięki większej ilości różnych znaczników o wiele łatwiej będzie określać konkretny element strony poprzez wskazanie jego rodziców, lub po prostu przez samą nazwę znacznika, który zazwyczaj prezentuje podobną treść (i ma wyglądać podobnie). Drugą korzyścią jest to, że roboty sieciowe o wiele lepiej indeksują strony, kiedy treść jest zawarta w odpowiednich dla niej znacznikach. Po prostu robot nie jest człowiekiem i trzeba mu powiedzieć, że ten element jest nagłówkiem, ten prezentuje adres pocztowy, a inny wskazuje na cytat. Z kolei stosowanie pewnych znaczników tylko z tego powodu, że ich domyślne style pasują do wyglądu naszej strony może spowodować efekt całkowicie odwrotny. Mówię tutaj o popularnym błędzie podczas używania znacznika nagłówków <hn> (<h1>, <h2> ...). Często zdarza się tak, że na stronie występują znaczniki <h3>, a nigdzie nie można się doszukać <h1> ani <h2>. Kolejne znaczniki nagłówków (z większym indeksem) służą do oznaczania podrozdziałów w tekście. Na przykład:
<h1>Rozdział 1</h1>
<h2>Część 1</h2>
<h3>Wstęp</h3>
<p>Kilka słów wstępu</p>
<h3>Wprowadzenie</h3>
<p>Jakieś wprowadzenie</p>
<h3>Podsumowanie</h3>
<p>Podsumowanie działu</p>
<h2>Część 2</h2>
i tak dalej i tak dalej.
Mam nadzieję, że powyższy tekst pozwoli młodym twórcom stron uniknąć błędów, które ja sam często popełniałem. Dobrze jest uczyć się na błędach, ale nie koniecznie na swoich :) Oczywiście jeśli ktoś nie zgadza się z tym co napisałem, lub ma jakiejś zastrzeżenia/uwagi, lub po prostu chce rozwinąć jakiś temat, to zapraszam do komentowania.
13 komentarzy
Nie chce sie czepiać, ale w sumie to nic z tego posta nie wynika. Proponuje sie skupic na jakiejs czesci i ją dokładnie opisac (kolorystyka, typografia, semantyka)
zgadzam się z teamonem.
Poza tym projektowanie layoutu jest tak naprawde (conajmniej) dwuetapowe- pierwszy, to na kartce(są również do tego odpowiednie programy, ja jednak tutaj jestem tradycjonalistą :P ) - gdzie zaznacza się główne elementy strony- wtedy decyduje się co na stronie ma się pojawiać, a co nie(przy większych projektach maczają tu palce marketingowcy, ludzie od usability, kazdy chce jak najwięcej swojej wizji tu prowadzic :P ) - wtedy jeszcze nie wiemy, jaki kolor będzie miała strona, jak będzie wyglądał tekst,link- póki co wiemy co będzie na stronie. Dopiero gdy to będzie dograne, wysyła się grafikowi, który tworzy coś, co później będzie oglądał użytkownik końcowy.
"Przede wszystkim nie należy przesadzać z obrazkami. [...]"
Strona stronie nie równa - stosujesz tę zasadę do wszystkich projektów?
krzyżak: projektowanie funkcjonalności, a właściwie tego, o strona ma robić i na co pozwalać było już (co prawda tak samo pobieżnie jak i ten artykuł) poruszane w poprzedniej częsci serii.
Seria jest przeznaczona przede wszystkim dla początkujących twórców stron. Jak wspomniałem wcześniej projektowaniem wyglądu nie zajmuję się na co dzień, więc wspomniałem o pewnych rzeczy, których należy się wystrzegać, oraz kilka porad, które zawsze mogą się przydać. Wiadomo, że w ekipach tworzących duże portale są od tego specjalni ludzie, który się znają na konkretnym aspekcie tworzenia strony i dla nich ten wpis nie będzie nic warty.
@BTM: sorry, nie czytałem pierwszej części, dlatego jestem troszkę do tyłu ;)
@Jony: ale tak szczerze, to za wiele konkretnych porad to tu nie znalazłem. Jeśli piszesz dla pocątkujących, to czemu nie wspomniałeś, by logo (najlepiej lewy górny róg strony) był odnośnikiem do strony głównej, czemu nie wspomniałeś o podstawie layoutu, czyli pzrzemyślenie nawigacji (od belki z menu, po np. zastanowienie się nad menu typu breadcrumb), czemu nie ma tu prawie nic o typografii, dlaczego nie podałeś jakichś konkretnych przykładów palety kolorów (są odpowiednie strony do tego typu problemów( np. http://www.colourlovers.com/)
No i przede wszystkim- tak naprawde, semantyka, w ujęciu, w jakim piszesz, nie wiele ma się do layoutu- bardziej do treści.
Nie spotkałem osobiście layoutu, w którym byłaby na sztywno tworzona jakaś lista definicyjna, wynik działania programu,listing kodu, lub inna, występująca w treści strony rzecz, która może zostać semantycznie oznaczona przez odpowiednie tagi - jedyne, co mi przychodzi do głowy, to gdy ktoś użyje jakiegoś cytatu gdzieś na stronie (np. jako "motto"), może go sobie odpowiedno odznaczyć, ew. gdy podaje jakieś konkretniejsze dane w stopce, to to też da się wyróżnić.
Generalnie artykuł porusza bardzo ciekawą i ważną tematykę. Obawiam się jednak, że tworzenie tego w aktualny sposób mija się z celem. Polecam posiedzieć kilka godzin dłużej, i wyczerpać temat, ew. pisać to z kimś na pół- ktoś poruszy jedną kwestię, ktoś inny inną :)
@Krzyżak: wezmę sobie Twoje uwagi do serca. Może rzeczywiście za bardzo chciałem w końcu coś napisać (w końcu wpisy miały się pojawiać kilka razy w miesiącu) i kiedy w końcu znalazłem chwilę czasu siadłem, napisałem coś bez większego przemyślenia. Następnym razem na pewno bardziej się wgłębię w temat. Może i pojawi się 2 część tego wpisu, w którym konkretniej opiszę niektóre zagadnienia. Ale to dopiero po maturze najpewniej :/
wiem co czujesz - też mam maturę na głowie. Cieszę się, że ze spokojem przyjmujesz moją krytykę, zamiast denerwować się, lub wszczynać flejmy :)
Polecam wypisanie sobie konspektu, który w wolnych chwilach będziesz uzupełniał(
np. odnośnie tego nieszczęsnego layoutu:
1. nawigacja
2. typografia
3. kolorystyka
4. "konwencje" przy tworzeniu layoutu
5. przykłady, które są "be"
6. przykłady, które są ok
To tak na szybko wymyślony konspekt, jednak przede wszystkim opisałbym coś na przykładach- jednak obrazek często mówi więcej niż 1000 słów.
Liczę, że następnym razem przeczytam tu notkę na wartościowy temat(bo taki jest dla mnie ten temat :P ), z jeszcze bardziej wartościową treścią :)
@Krzyżak: oprócz matury mam masę innych spraw szkolnych, które trzeba załatwić na wczoraj (patrz miniblog) i do tego rozpoczęty projekt programistyczny, z którego też się muszę wywiązać. Kiedy będę miał więcej czasu wolnego na pewno napiszę coś bardziej wartościowego.
Napisałeś:
<h1>Rozdział 1</h1>
<h2>Część 1</h2>
<h3>Wstęp</h3>
Kilka słów wstępu
<h3>Wprowadzenie</h3>
.....
<h3>Podsumowanie</h3>
....
<h2>Część 2</h2>
Mimo wszystko brakuje mi tu, jak i w innych miejscach prostego znacznika, o którym widocznie zapomniałeś - p
Chodziło mi o zaprezentowanie przykładu znaczników <hn>, dlatego całą resztę pominąłem. W zasadzie powinienem pod każdym nagłówkiem napisać (...), ale chyba każdy wie o co chodzi :)
No własnie chodzi o to, że nie każdy. Ci co się znają to nawet nie przeczytają do końca, a początkujący nauczą się ze tam nie trzeba już nic wstawiać.
Ok, poprawione.