Piękna grafika, świetna nawigacja. To jednak jeszcze nie wszystko. Na stronie internetowej liczy się przede wszystkim treść. Trzeba ją więc odpowiednio zaprezentować.
Arial? Tahoma? A może Verdana?
Tekst wyświetlany na monitorze różni się od tekstu na papierze. Przede wszystkim czyta się go dużo wolniej, szybciej męczy wzrok… Aby ułatwić internaucie czytanie trzeba użyć przede wszystkim odpowiednich czcionek. Najlepiej, aby były to fonty bezszeryfowe. Ponieważ jednak przeglądarki używają zazwyczaj do wyświetlania tekstu czcionek szeryfowych, konieczne jest ustalenie w CSS odpowiedniego kroju pisma dla tekstu. Trzeba również zwrócić uwagę na fakt, iż nie należy podawać nazw niestandardowych czcionek, których z pewnością nie posiada większość uzytkowników. W przypadku stron WWW należy ograniczyć się do kilku najpopularniejszych fontów (Verdana, Arial, Tahoma, Helvetica).
| p {font-family:Verdana,’Arial CE’,Arial,Tahoma,Helvetica,sans-serif; font-size:9pt; color:black;} |
Powyższy kawałek kodu spowoduje, że do wyświetlenia tekstu przeglądarka użyje czcionki Verdana. Jeżeli internauta nie posiada takowej czcionki w swoim komputerze, przeglądarka zacznie szukać czcionki Arial CE itd. Proszę zwrócić uwagę na fragment Arial CE, Arial Dlaczego należy wpisywać czcionki w ten sposób wyjaśniłem w FAQ w sekcji CSS.
Ozdobniki – ale nie tylko
„Ozdobniki”, czyli wszelkie pogrubienia, podkreślenia itp… Dzięki nim nasze oko łatwo dostrzega ważniejsze części tekstu, które możemy pogrubić, podkreślić czy pochylić. W celu wyróżnienia jakiegoś wyrazu/zdania/akapitu, możemy zmienić mu kolor. Wszystkie te rzeczy łatwo zrobić w CSS i, o ile pogrubienie, podkreślenie i pochylenie uzyskujemy korzystając z HTMLa, o tyle elementy niestandardowe musimy przygotować sami. W tym celu najlepiej skorzystać z klas.
| .grubyNiebieski {font-weight:bold; color:royalblue;} .grubySzary {font-weight:bold; color:gray;} .ciemnoczerwony {color:darkred;} |
To oczywiście tylko przykład – kilka klas, dzięki którym urozmaicimy tekst obejmując fragment poleceniem <span class=”nazwaklasy”></span>. Jednak pamiętajmy o tym, aby wyróżniać tylko ważne fragmenty, a nie kolorować tekst na lewo i prawo (bo możemy uzyskać w ten sposób efekt zupełnie odwrotny).
Wypada jeszcze wspomnieć o nagłówkach. To właśnie dzieki nim zwracamy uwagę na konkretny artykuł i to nagłówek pozwala nam się zorientować o czym traktuje dany artykuł. Z tego powodu nagłówek powinien być w jakiś sposób wyróżniony – czy to kolorem czy wielkością (a najlepiej jednym i drugim). Oczywiście w niczym nie należy przesadzać:) Dobrze jest także wiedzieć, że wyszukiwarki „lubią”, gdy nagłówek umieszczony jest pomiędzy <h1> i </h1>.
Układ tekstu
W Internecie, inaczej niż w publikacjach papierowych, wyróżniamy akapit. Zamiast przejścia do nowej linii i charakterystycznego wcięcia, mamy po prostu 1 linijkowy odstęp. I bardzo dobrze – strasznie ciężko jest przeczytać tekst, bez odstępów. Taki jeden wielki, zbity „klocek”. Dzięki odstępom (czyli akapitom uzyskiwanym dzięki <p> i </p>) możemy podzielić tekst na logiczne fragmenty – w danym bloku znajdzie się tylko tekst dotyczący konkretnego zagadnienia.
A jak wyrównać tekst? W zasadzie nie ma jednoznacznej odpowiedzi, zależy jak będzie najlepiej wyglądać. Jednak zwykle pożądany efekt dają teksty wyjustowane (text-align:justify;), bądź wyrównane do lewej strony (text-align:left;).
Szerokość tekstu również znacząco wpływa na jego odbiór. Pamiętajmy, aby nie była ona zbyt duża. Zwykle pół strony (ok. 400 pikseli) w zupełności wystarcza. Strona, na której tekst rozciąga się na całą szerokość ekranu jest z góry skazana na porażkę. Przechodzenie do nowej linii (czyli po lewej stronie ekranu), podczas gdy jesteśmy pod koniec poprzedniej (czyli po prawej stronie ekranu) jest naprawdę bardzo męczące. <h2>Uwagi dodatkowe</h2> Internet, jako medium niezależne jest dostępny praktycznie dla każdego.
Stronę internetową może stworzyć nawet dziecko (sam jeszcze nim jestem;). Być może stąd biorą się witryny z całą gamą błędów ortograficznych i gramatycznych, o merytorycznych nie wspominając. Dbając o wysoki poziom tekstu na stronie nie zapominajmy także o poprawności gramatycznej i ortograficznej. Tekst z „bykami” czyta się na prawdę źle, a przez niepoprawność gramatyczną możemy często zgubić sens konkretnych zdań, a co za tym idzie, artykuł może zostać źle zrozumiany przez odwiedzającego naszą stronę.
Nigdy nie stosujmy się też do „mody” panującej na wielu blogach, czyli tekstu pisanego w ten sposób:
czEśĆ! OtO mOja pIErwSza StRoNA! FajNA, nIe?
Proszę sobie teraz wyobrazić 3 strony ekranowe takiego tekstu…
Jak widać nie ma gotowej recepty na dobrze napisany i umieszczony tekst na stronie. Jednak stosując się do powyższych zaleceń znacząco ułatwimy użytkownikowi czytanie, a o to przecież nam chodzi.
