Poradnik webdesignera
Strona główna
Uwagi ogólne
Błędy
Przykazania
Artykuły
Linki
Słowo od autorki
Każdy dokument na Twojej stronie powinien posiadać konkretny i szczegółowy tytuł strony, oddający jak najlepiej jej zawartość. Ułatwia to bardzo życie osobom, które dodają stronę do bookmarków oraz zwiększy prawdopodobieństwo, że Twój adres nie zostanie z nich usunięty, gdy nie będą mogli sobie przypomnieć co na danej stronie się znajdowało. Tytuł jest również wyświetlany przez wyszukiwarki internetowe, więc im więcej można się z niego dowiedzieć, tym większa jest szansa, że ktoś wybierze akuratnie Twoją stronę.
Znaczniki META - koniecznie umieść w
elemencie HEAD odpowiednie znaczniki META Należą do nich przede wszystkim "description"
- czyli opis strony oraz "keywords" - słowa kluczowe. Informacje te są
wykorzystywane przez wyszukiwarki internetnetowe i wpływają na pozycję Twojej strony na
ich liście. Znacznik description jest wyświetlany jako opis strony zaraz po tytule.
Dobrze jest gdy wyrazy użyte w różnych znacznikach się powtarzają, gdyż zwiększa
to szansę na wyższą pozycję w wyszukiwarkach.
Umieść w elemencie HEAD linijkę:
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
Więcej informacji na ten temat oraz adresy miejsc, gdzie znajdują się programy konwertujące znajdziesz na Polskiej Stronie Ogonkowej - http://www.agh.edu.pl/ogonki/.
Pamiętaj, że do tworzenia stron
internetowych służy język HTM i jest
to zupełnie niezależne od faktu czy plik źródłowy został napisany ręcznie czy
wygenerowany przez edytor graficzny. Poprawność składni znacznie obniża błędne
wyświetlanie zawartości strony oraz przyspiesza ładowanie.
Jeżeli korzystasz z edytora graficznego lub eksportujesz dane do formatu HTML z jakiegoś
programu (n.p. Word czy Excel), oglądnij na koniec plik źródłowy i popraw błędy oraz
wyrzuć śmieci, które on generuje.
Menu nawigacyjne - musi być czytelne oraz niezbyt duże, by nie odwracać uwagi od treści dokumentu. Na każdej stronie powinno wyglądać tak samo i znajdować się w tym samym miejscu. Link do strony, na której się aktualnie znajdujemy może być widoczny, ale wtedy należy uczynić go nieaktywnym.
Pamiętaj o podaniu odnośnika do strony głównej ponieważ użytkownicy mogą trafić na dowolną z Twoich stron. Jeżeli oglądany dokument jest jednym z elementów większej całości, dodaj również nawigację do przodu i do tyłu, by nie trzeba było za każdym razem wracać do spisu treści.
Krótkie strony startowe. Pamiętaj, że jedynie około
50% (30% dwa lata temu) inernautów przewija strony, więc staraj się umieścić
wszystkie ważne informacje na jednym ekranie - da Ci to gwarancję, że nawet leniwym
użytkownikom nic nie umknie. Oczywiście podstrony mogą być dłuższe, lecz warto
podzielić zbyt długie teksty na mniejsze fragmenty.
W przypadku zdjęć czy obrazków powinny to być wymiary rzeczywiste, jedynym wyjątkiem jest powiększanie grafiki. Przyspiesza to ładowanie zarówno grafiki jak i całej strony, gdyż położenie elementów nie musi być na nowo kalkulowane po załadowaniu każdego obrazka, a strona jest od razu wyświetlana w prawidłowy sposób czyli tak, jak ma docelowo wyglądać.
Należy także koniecznie zamieścić nazwę obrazka (ALT), która będzie widoczna zanim grafika się załaduje. Ułatwi to nawigację osobom, które się spieszą lub mają wyłączoną grafikę.
Jeżeli obrazek jest nic nie znaczącym ozdobnikiem możesz wtedy wpisać ALT= "",chociaż tak naprawdę, tego typu obrazek nie powinien się pojawiać na stronie.
Nie podmieniaj grafiką takich elementów języka HTML jak HR (linia pozioma) oraz LI, czyli wypunktowania. (Tak, wiem - mnie też brakuje atrybutu color)
Jeżeli potrzebujesz zamieścić kolorową linię, możesz ją uzyskać przez rozciągnięcie jednopikselowego GIF'a używając parametrów WIDTH i HIGHT.
Nie nadużywaj jednak linii poziomych, gdyż wbrew pozorom czyni to dokument mniej czytelnym.
Jeżeli podajesz odnośnik do pliku graficznego, umieść ten plik na osobnej stronie HTML. Nigdy nie umieszczaj odnośnika prowadzącego bezpośrednio do obrazka, gdyż nie możesz wtedy określić jego parametrów, co spowolni ładowanie.
Miej na uwadze
użytkowników starszych przeglądarek - zawsze ukrywaj skrypty Java przed przeglądarkami, które ich nie
obsługują, gdyż w przeciwnym przypadku tekst źródłowy może zostać
wyświetlony ma ekranie.
Istnieją dwie, zupełnie sprzeczne, teorie na temat kolorów
odnośników. Pierwsza z nich zaleca stosowanie standardowych kolorów: niebieski (blue) -
nie odwiedzony, fioletowy (purple) - odwiedzony. Ułatwia to nawigację początkującym
użytkownikom, którym łatwiej się wtedy rozeznać, które strony już widzieli, a gdzie
mogą jeszcze zaglądnąć.
Sporo webdesignerów odchodzi jednak od tej zasady (przyznaję - ja też) choćby dlatego,
że często standardowe kolory nie pasują do kolorystyki strony. Zwróć choćby uwagę
na stronę, którą właśnie oglądasz - kolor niebieski zdecydowanie gryzłby się z
zieloną tonacją grafiki. Kolejnym argumentem za zmianą jest teoria Davida Siegela,
autora świetnej książki o sztuce projektowania witryn trzeciej generacji
("Tworzenie stron WWW" - 'Creating Killer Websites'), który twierdzi, że
strony nieodwiedzone powinny być oznaczone gorącym, ostrzegawczym czerwonym kolorem, a
odwiedzone ciemnoczerwonym lub chłodnym, stonowanym i mniej przyciągającym wzrok
kolorem niebieskim.
Nigdy, przenigdy nie ustawiaj takiego samego lub zbliżonego koloru linków dla stron już
odwiedzonych oraz tych jeszcze nie oglądniętych.
Używaj podkreśleń dla odnośników - szczególnie, jeżeli umieszczasz je w treści.
Możesz je pominąć w przypadku, gdy stosujesz menu złożone z samych linków, nie
pozostawiające wątpliwości gdzie należy klikać.
Nigdy nie umieszczaj na jednej stronie,
tego samego odnośnika pod dwiema różnymi nazwami, ani nie powtarzaj pod tą samą
nazwą, gdyż może to zasugerować, że oferujesz nowy materiał. W miarę możliwości
podawaj pełny adres odnośnika w taki sposób, by był widoczny po wydrukowaniu.
Jeżeli po kliknięciu na link ma się otwierać nowe okno uprzedź o tym odwiedzających.
Jeżeli tworzysz kolekcję odnośników, podziel je na kategorie tematyczne.
Staraj się, by odnośnik jak najlepiej oddawał zawartość strony, by nie był zbyt
długi, oraz by w całości mieścił się w jednej linijce - zawsze możesz
uaktywnć tylko jego część, co ułatwia czytanie.
Gdy zamieszczasz odnośnik do zakładki (bookmark), czyli czegoś, co nie
jest osobnym dokumentem HTML, lecz specjalnie oznaczonym jego fragmentem, podkreślaj to
zawsze np.: #nowe_linki.
Jeżeli odnośnik prowadzi do grupy dyskusyjnej, dodaj w opisie 'news', jeżeli podajesz
adres serwera FTP, również wyraźnie zwróć na to uwagę gości.
Nigdy nie podmieniaj bezwzględnego adresu odnośnika na pasku nawigacyjnym swoją nazwą,
gdyż nie wiadomo wtedy czy jest on lokalny czy też prowadzi on do innej strony.
Czytanie z ekranu jest o 25% wolniejsze niż z wydruku, co jednak wcale nie oznacza, że należy zamieścić o jedną czwartą mniej tekstu niż w papierowym dokumencie. Tekst, który zamieszczasz na stronie powinien być przynajmniej o połowę krótszy niż drukowany. Szerokość wiersza nie powinna przekraczać 60 znaków, wliczając w to spacje. Efekt ten najłatwiej uzyskać stosując tabele.
Internauci przeważnie pomijają wszelkie powitalne wiadomości, szukając odnośników do materiałów, które ich interesują.
Zorganizuj stronę tak, by im to ułatwić - wyrzuć wszystkie nieistotne ozdobniki i slogany. Używaj wypunktowania, gdy coś wymieniasz. W jednym akapicie umieszczaj tylko jedną myśl oraz staraj się, by nie był on zbyt długi.
Gdy redagujesz tekst skupiaj się na faktach i konkretach, używaj prostego i niezbyt formalnego języka oraz nie zamieszczaj tekstów, które wymagałyby skupiania się na każdym słowie.
Nie zapomnij o zamieszczeniu notek z jakich źródeł czerpiesz zamieszczone informacje.
Mac'owskie odpowiedniki czcionek PC:
| PC | Mac |
| Arial Times New Roman Courier New Symbol MS Sans Serif MS Serif WinDings |
Helvetica Times Courier Symbol Geneva New York Zapf Dingbats |
Nie stosuj niestandardowych czcionek, których większość użytkowników nie ma zainstalowanych.
Na jednej stronie nie powinno się stosować więcej niż dwóch rodzajów czcionek a
różnica ich wielkości nie powinna przekraczać dwóch stopni.
Kursywa (italic) - dobra dla krótkich cytatów, nowych słów, sygnaturek. Nigdy nie stosuj w odnośnikach bo stają się nieczytelne. Pamiętaj również, że na ekranie nie jest zbytnio wyraźna.
Podkreślenia (underline) - używaj tylko w przypadku odnośników, by uniknąć nieporozumień.
Litery drukowane - W internecie są odpowiednikiem krzyku, więc raczej należy się ich wystrzegać. Można je stosować w tytułach, ewentualnie w menu tekstowym, ale z dużą dozą ostrożności.
Index górny/dolny (superscript, subscript) wygląda dużo lepiej, gdy zmniejszymy
wielkość czcionki o jeden punkt.
Twój adres email - zamieść go koniecznie przynajmniej na głównej stronie Twojego dokumentu. Najlepiej jeżeli będzie bezpośrednio widoczny, gdyż wielu użytkowników drukuje strony oraz niektóre starsze przeglądarki nie obsługują konstrukcji 'mailto'. Dodaj go także do elementu HEAD - <meta name="owner" content="moj@adres.email">
Jeżeli oferujesz swoim gościom pliki do ściągnięcia, skompresuj je, zawsze zaznaczając ich wielkość w kilobajtach oraz ich format. Miłą praktyką jest udostępnianie części lub całości strony do ściągnięcia w formie spakowanej lub, jeżeli materiał jest podzielony na fragmenty, w wersji przystosowanej do wydruku.
Napisz coś o sobie - gdy podoba nam się jakaś strona jesteśmy
zainteresowani kto jest jej autorem.
Sprawdź jeszcze raz jak wygląda strona pod różnymi przeglądarkami, przy różnych rozdzielczościach i różnych rozmiarach czcionki. Najlepiej poproś znajomych o komentarz - uwierz, że zawsze coś znajdą.
Nie testuj strony jedynie lokalnie na swoim komputerze - zobacz jak zachowuje się w sieci - często daje to sporo do myślenia.
Wydrukuj stronę, oglądnij, przeczytaj jeszcze raz.
Następny dział: Linki >>