Nic nie zastąpi prawdziwego doświadczenia. Dlatego też w poszukiwaniu najcenniejszych wskazówek postanowiliśmy wypytać najlepszych profesjonalistów! W tym artykule przedstawimy najlepsze zasady webdesignu oraz najcenniejsze wskazówki znane dotąd tylko ekspertom. To 50 najcenniejszych porad, esencja trudnego do zdobycia know-how, które pozyskaliśmy od najlepszych nazwisk w tej branży.

Kiedy zależy ci na najlepszej opinii, zasięgasz porad ekspertów. Ludzi, którzy oddychają CSS-em, jedzą PHP na śniadanie i porozumiewają się między sobą, używając do tego JavaScriptu.

Chcesz dowiedzieć się czegoś o Flashu? Zapytaj kogoś, kto przygotowywał animacje i gry dla MTV. Jeżeli masz zamiar zoptymalizować swoją stronę pod kątem wyszukiwarek, zwróć się do człowieka, który prowadzi jedną z najlepszych tego typu agencji na świecie. Na pytania dotyczące użyteczności najlepiej odpowie szef instytucji świadczącej usługi dla rządu Wielkiej Brytanii.

Tempo zmian w sieci przybiera na sile i jedynym sposobem na to, aby za tym wszystkim nadążyć, jest żmudna codzienna praca lub zasięgnięcie porady u tych, którzy tak działają.

Znajdziesz tutaj porady z dziedziny przystępności stron, kierunków w webdesignie i tworzeniu kodu. Nauczysz się sekretów sieciowego marketingu, pracy grupowej oraz sztuki planowania internetowych projektów. Wszystko, co zaraz przeczytasz, pochodzi prosto od profesjonalistów pracujących dla największych firm tego świata.

Projektowanie stron

01. Zacznij na papierze

Wielu webmasterów skupia się na pisaniu dobrego kodu i pokonywaniu wszelkich innych technicznych ograniczeń. Lecz najkrótszą drogą do ulepszenia procesu projektowania serwisu jest przygotowanie jak największej części pracy na papierze. Stworzenie uproszczonych prototypów interfejsu pozwoli na przetestowanie designu i rozwiązanie wszystkich problemów jeszcze przed zabraniem się do pisania kodu.

To podejście może być także wykorzystane do określenia interakcji takich elementów interfejsu, jak np. rozwijane menu. Papierowe prototypy są również bardzo przydatne podczas komunikacji z klientami oraz innymi osobami bezpośrednio zaangażowanymi w projekt. Na koniec pomyśl o tym, jakim zmianom może ulec strona w przyszłości. Rozrysowanie tego na papierze oznacza, że końcowy projekt może uwzględniać nawet dopiero planowane dodatki.

02. Prototypy

Zanim rozpoczniesz tworzenie swojej strony, spróbuj graficznie połączyć wszystkie najważniejsze elementy w jedną całość. Szybkim i prostym sposobem, aby to zrobić, jest rozrysowanie kluczowych obszarów strony w PowerPoincie jako boksy z tekstem. W ten sposób będziesz miał całą koncepcję przed oczami, co pozwoli na lepsze obmyślenie serwisu bez silenia się na męczące opisy – jakiego koloru powinienem użyć, czy zdjęcia powinny mieć zwykłe lub zaokrąglone rogi?

Otrzymasz dzięki temu jasną i przejrzystą wizję struktury i zawartości serwisu. Następny krok powinien polegać na stworzeniu jednego stylu, który będzie użyty w serwisie i na wszystkich jego kluczowych stronach.

03. Niech twój design będzie racjonalny

Najlepsze produkty wyróżniają się przemyślanym projektem. Świetnie radzi sobie z tym Apple. Spójrz na ich produkty: każda śrubka, przycisk i kabelek emanuje dbałością o szczegóły.

Produkty gorszej jakości wyglądają tak, jakby zostały stworzone bez szacunku dla użytkowników. Osoby biorące udział w testach użyteczności (a w szczególności osoby niedowidzące) są sfrustrowane tym, jak często produkty projektowane są bez uwzględnienia ich opinii. Postaraj się tego uniknąć, poprzez branie pod uwagę każdego elementu designu i racjonalnego uzasadnienia jego kształtu. Zmuś każdy fragment strony do tego, aby skutecznie się obronił i uzasadnił swoją obecność.

04. Zbuduj zespół

Udane dopasowanie strony do wymogów wyszukiwarek oraz do standardów designu nie wyklucza się wzajemnie. Lecz nawet jeśli tak jest, nie oznacza to, że jedna osoba powinna się tym wszystkim zajmować. Obydwa zagadnienia są bardzo złożone i wymagają odrębnych analiz, dlatego też powinny one podlegać różnym osobom wchodzących w skład zespołu.

Idealny scenariusz zakłada, że cały zespół pracuje razem nad rozpoczęciem projektu, gdy najważniejsze ze składników podlegających różnym dziedzinom wspólnie na siebie oddziaływają, dążąc do dostarczenia zbalansowanego kompromisu w postaci satysfakcjonującego wszystkich layoutu, strategii marketingowej oraz odpowiedzi na potrzeby internautów.

05. Zostań złotą rączką

Jeżeli chcesz zostać dobrym webdesignerem, musisz pokochać multimedia. O to w tym właśnie chodzi. Sieć to interaktywność, pliki wideo, nagrania audio, animacje, design – powinieneś móc objąć wzrokiem i poczuć wszystkie te dziedziny, jeżeli chcesz kiedyś zabłysnąć. Oznacza to, że czekają cię bliższe spotkania z wieloma zagadnieniami.

Nagraj podkłady muzyczne, wykorzystując do tego takie oprogramowanie jak Cubase lub FL Studio. Stwórz animację, teledysk, dowolny obiekt w 3D, rób zdjęcia, rysuj, zaprogramuj grę… Czym więcej rzeczy się nauczysz, tym bardziej satysfakcjonujące i bogate będą twoje prace.

Dostępność strony

06. Kontakty

Nawet jeżeli umieścisz odnośnik Kontakt na stronie lub na jej dole, to i tak najważniejsze jest, abyś upewnił się, że zrobiłeś to na wszystkich podstronach. Logo lub element który pełni na stronie podobną do niego funkcję, powinien być obowiązkowo podlinkowany do strony głównej, ponieważ taki jest naturalny odruch wielu użytkowników.

Jako gość lub potencjalny klient twojego sklepu, nie powinnam przeczesywać twojej strony w poszukiwaniu sposobu na nawiązanie kontaktu. Jeżeli ktoś będzie zmuszony tak robić, prawdopodobnie szybko da sobie z tym spokój i z niesmakiem opuści stronę.

07. Elegancki minimalizm

Wykorzystanie takich technologii jak AJAX lub Flash w celu dodania interaktywności do twojej strony może być bardzo efektowne i przyczynić się do lepszego jej odbioru. Jednakże niezwykle ważne jest zapewnienie dostępu do usług i wszystkich informacji także tym użytkownikom, którzy nie mogą skorzystać z tych udogodnień (np. z tego powodu, że korzystają z przeglądarek mobilnych lub technologii wspomagających dla osób niepełnosprawnych).

Jeżeli tego nie zrobisz, przyczynisz się do odosobnienia dużej części odwiedzających i to z tak banalnego powodu, jakim była chęć uatrakcyjnienia strony. Najłatwiejszym sposobem na określenie, jak bardzo twoja strona jest przystępna, jest wykonanie kilku zadań z wyłączonymi kilkoma wtyczkami w przeglądarce.

08. Sprawdzaj swój kod w walidatorze

Jeżeli chcesz, aby twoja strona była odwiedzana przez szerokie grono internautów, wyposażonych w różne łącza internetowe i przeglądarki, upewnij się, że twój serwis spełnia najważniejsze sieciowe standardy. Istnieje cała masa prostych w użyciu walidatorów: sprawdź aplikację Web Accessibility Toolbar ze strony http://www.snapfiles.com/get/AccessibilityToolbar.html.

Dostępność strony nie polega wyłącznie na przygotowaniu jej pod kątem osób niepełnosprawnych Dzięki tym zabiegom masz również pewność, że twoja strona została zauważona przez liczne wyszukiwarki internetowe.

Także konsorcjum W3C udostępnia narzędzia, które pozwalają sprawdzić, czy kod twojej strony odpowiada przyjętym standardom. Odwiedź w tym celu stronę http://validator.w3.org.

09. Udostępnij kilka sposobów komunikacji

Daj użytkownikom wybór, w jaki sposób chcieliby się z tobą skontaktować. Może się to wydawać oczywiste, ale zbyt wiele firm udostępnia jedynie prosty formularz lub numer telefonu. Ty potrzebujesz obydwu tych rzeczy – to absolutne minimum.

Ludzie lubią rozmawiać (niektórzy bardziej niż inni): to leży w ludzkiej naturze i niezależnie od tego, jak bardzo zaawansowane stają się cyfrowe techniki komunikacji, telefon zawsze będzie preferowanym sposobem porozumiewania się dla dużego procenta osób. Słowami kluczowymi są tutaj: elastyczność, opcje i wybór. Uwzględnij zatem naturę swoich użytkowników i zadbaj o to, aby przynajmniej podstawowe z ich wymagań zostały spełnione.

Marketing

10. Spójność marki

Internetowy wizerunek powinien być uzupełnieniem i lustrzanym odbiciem marki w świecie offline. Niezależnie od tego, jak bardzo twój biznes jest powiązany z internetem, strona internetowa powinna ściśle odpowiadać tradycyjnej ofercie – tej wydrukowanej na ulotkach, reklamach lub obecnej w biurze czy też sklepie.

Klient powinien trafić na ten sam przekaz zarówno podczas wizyty w twoim miejscu pracy, jak i w czasie zwiedzania twojej strony internetowej. Działania na rzecz marki powinny być jednolite. To właśnie autorzy projektów oraz webdesignerzy powinni zwracać szczególną uwagę na podkreślanie tych elementów wszędzie tam, gdzie to możliwe.

W praktyce oznacza to konieczność zachowania tych samych schematów kolorów, czcionek, rozpoznawalnego logo oraz konsekwentnego języka i stylu wypowiedzi we wszystkich tych materiałach.

11. Czysta polszczyzna

Nie lej wody. Dbaj o to, aby twoja strona zawierała teksty krótkie, zajmujące i pozbawione niezrozumiałego żargonu. Nowy użytkownik powinien umieć bez problemu zrozumieć wszystko na stronie głównej i mieć natychmiast dostęp do najważniejszych informacji o twoim biznesie: kim jesteś, co robisz i co odróżnia cię od konkurencji. Zbyt wiele serwisów jest wypełnionych modnymi zwrotami, które pozbawione są konkretów: czym zajmuje się firma lub jakie produkty i usługi ma do zaoferowania.

12. Projektuj z myślą o przyszłych newsletterach

Każdy webdesigner może zostać kiedyś poproszony o zaprojektowanie newslettera w HTML. Niesie to ze sobą pewne niebezpieczeństwa: w których programach pocztowych powinien działać? W jaki sposób będzie rozsyłany? Czy nie skończy w czyimś folderze ze spamem? Poniższe wskazówki pozwolą ci skupić się na tym, co najważniejsze.

• Użyj stylów CSS zagnieżdżonych bezpośrednio w tagach, ponieważ niektóre programy pocztowe mogą wyłączyć tag {html}
  

• Użyj tabeli o szerokości 100%, z takim kolorem tła, jaki sobie zażyczysz. Tagi {html}{/html} mogą być blokowane przez niektóre programy pocztowe.
• Wykorzystaj narzędzie do sprawdzania spamu, aby uniknąć błędnego przefiltrowania newslettera przez programy antyspamowe odbiorców.

13. Śledź popularność

Możesz śledzić postępy kampanii reklamowej lub ruch napływający z katalogu stron dzięki wykorzystaniu adresów zarejestrowanych tylko w tym celu.

Powiedzmy, że masz zamiar śledzić popularność strony serwisu naprawy komputerów, który właśnie zareklamowałeś w lokalnej gazecie. Możesz użyć do tego określonej domeny, np. {stala}www.serwiskomupterowy.pl/gazeta{/stala}. Dzięki temu łatwo wysnuć wniosek, że ci odwiedzający, którzy skorzystają z tego adresu, przeczytali najpierw reklamę w prasie. To dokładny sposób na zmierzenie skuteczności całej kampanii.

W przypadku wyszukiwarek internetowych oraz katalogów stron, wystarczy znaleźć odpowiednią informację w logach statystyk, aby przekonać się, jak dużo osób odnalazło ten adres, np. za pośrednictwem Google.

14. Systematycznie przeglądaj logi

Zrób użytek z logów, które potrafią zastąpić wszechstronne narzędzia analityczne. Twoje pliki z logami zawierają wiele cennych danych. Każdy serwer zawiera zapis dowolnego pojedynczego wejścia na twoją stronę, i to wszystko jest twoją intelektualną własnością. Dostęp do niej odbywa się zwykle za pośrednictwem dostawcy usług internetowych.

Aby przeczytać logi, będziesz potrzebował oprogramowania do ich otwarcia i rozszyfrowania zawartości (co jest zwykle pracochłonnym i żmudnym zadaniem), ale jeżeli tylko zrobisz to tak jak trzeba, uzyskasz dostęp do mnóstwa informacji.

Niektórzy dostawcy usług internetowych dołączają oprogramowanie analityczne do swoich usług. Webalizer (http://www.mrunix.net/webalizer) to dobry przykład takiego narzędzia.

Praca grupowa

15. Korzystaj z systemów kontroli wersji

Niezależnie od tego, czy pracujesz jako wolny strzelec, czy też jesteś członkiem większego zespołu, system kontroli wersji (tzw. CVS, od angielskiego Concurrent Versions System) może być prawdziwym kamieniem węgielnym twojego środowiska programistycznego. Systemy CVS umożliwiają poszczególnym członkom zespołu wspólną pracę nad tymi samymi plikami i śledzenie zmian, które wprowadzają.

Starannie wdrożona, kontrola wersja pomoże ci pracować i kontaktować się z pozostałymi członkami zespołu w jeszcze efektywniejszy sposób. Co więcej, także proces identyfikacji i eliminowania błędów przebiega dzięki temu znacznie łatwiej.

Możesz ściągnąć open source\'owy system CVS, nazwany Subversion ze strony http://subversion.tigris.org. Jeżeli chciałbyś przetestować go przed rozpoczęciem pracy, zarejestruj się w darmowym serwisie http://www.cvsdude.org. Komercyjnym przykładem oprogramowania CVS jest z kolei Adobe Version Cue, wchodzący w skład pakietu Creative Suite.

CSS

16. Bądź zorganizowany

Kiedy będziesz tworzyć stronę z wykorzystaniem CSS, przekonasz się, że zarządzanie kaskadowymi arkuszami stylów może sprawiać trudność, tak jak i nawigacja po kolejnych wpisach. Twórz w kodzie przejrzyste wskazówki i przypominacze, poprzez łączenie ich w sekcje i dodawanie do nich komentarzy.

Komentarze nie muszą być rozbudowane. Dbaj o to, aby były krótkie i zwięzłe - powinny jedynie wyjaśniać, za co odpowiadają dane style. Na przykład:

{stala}/* stopka */{/stala}
{stala}/* elementy layoutu */{/stala}
{stala}/* formatowanie tekstu */{/stala}

Ten niewielki dodatek do arkusza stylów będzie z pewnością stanowił duże ułatwienie przy okazji kolejnych zmian.

17. Konsekwencja w nazywaniu klas

Kiedy nad projektem pracuje wspólnie kilku webdesignerów, fundamentalnego znaczenia nabierają ustalone reguły nadawania nazw, których powinno się ściśle przestrzegać. Najlepiej osiągnąć ten cel przez stworzenie własnego stylu. Możesz stosować wstawki z dużychLiter, łączniki-zamiast-spacji, łączyć_wyrazy_podkreśleniami lub dowolnie mieszać wszystkie te metody jednocześnie. Równie ważne jest ustalenie wspólnego formatu skrótów - np. \'_bttn\' dla przycisku (button).

Zapamiętaj: jeżeli raz zamieścisz opisowe komentarze odnośnie do wyglądu stylu (np. niebieskiDużyTimes), będziesz potem tego żałował, kiedy zmienisz zdanie i postanowisz, że ten element powinien być jednak czerwony, mały i z użyciem Verdany... Nigdy nie nadawaj klasom nazw nawiązujących do ich charakterystyki - zamiast tego zrób użytek z ich funkcji. Np. \'głównyNagłówek\' lub \'treśćArtykułu\'.

Kompatybilność przeglądarek

18. Wiele wersji Internet Explorera

Zmorą wielu webdesignerów jest kwestia poprawnej obsługi wielu przeglądarek. I chociaż ostatnio jest to mniej popularny problem niż kiedyś, nadal konieczne jest, abyś przetestował każdy ze swoich projektów pod kątem jak największej liczby przeglądarek.

Pewnym wyzwaniem będzie tutaj kwestia pozyskania różnych wersji Internet Explorera. Rozwiązanie polega na ściągnięciu odpowiedniego pliku zip zawierającego pliki odpowiadające wyłącznie za generowanie stron przez silnik IE. Obszerną instrukcję na ten temat znajdziesz na stronie http://positioniseverything.net/articles/multiIE.html.

Flash

19. Zmiana komponentu Halo

Powiedzmy, że masz zamiar użyć gotowych komponentów, ale nie chcesz, aby korzystały one z zielonej skórki \"Halo\". Według dokumentacji, możesz zmienić ten motyw na \"Orange\" za pomocą ActionScriptu:

[component_instance].setStyle(\"themeColor\",\"orange\")

W rzeczywistości możesz użyć każdego dowolnego koloru:

[component_instance].setStyle(\"themeColor\",\"0xF9F9F9\")

Dzięki temu udało się nam uzyskać subtelny szary kolor. Alternatywny sposób polega na wyedytowaniu domyślnych ustawień motywu poprzez skopiowanie \"Halo\" do nowego folderu i ręczną zmianę plików w celu stworzenia własnego schematu. Odpowiednie pliki znajdziesz w folderze: /mx/skins/halo/Defaults.as.

20. Automatyczne operacje na plikach Flasha

Okazuje się, że flashowy system skryptów JavaScript (JavaScript FLash scripting system) może być naprawdę pomocny przy automatyzowaniu procesu wykonywania stałych zadań. Np. w naszej firmie mamy bibliotekę skryptów JSFL, które wykorzystujemy do realizacji częstych nieskomplikowanych czynności, które pochłaniały wcześniej czyjś cenny czas. Są to m.in.:

• automatyczna publikacja dużych zbiorów plików Flasha
• zmiana nazw wszystkich instancji MovieClipa na wybranej warstwie
• zagnieżdżanie konturów czcionek w dynamicznych polach w całej animacji

Nawet jeżeli programowanie JSFL jest w tej chwili dla ciebie zbyt trudne, możesz wygenerować niektóre komendy wprost z panelu History we Flashu. Zaznacz kroki, które chciałbyś powtórzyć, a następnie kliknij \"Save selected steps as a Command\". Wybierz potem polecenie Command > Run Command, aby uruchomić gotowy skrypt.

21. Nie wszystko w jednym pliku

Trzymaj zawartość tekstów w zewnętrznych plikach i wgrywaj je do swojej animacji Flash na starcie, dzięki czemu ułatwisz sobie ich późniejszą edycję. Takie treści mogą być odpowiednio zaznaczone i umieszczone w dynamicznych polach tekstowych. Nadaj polu tekstowemu nazwę instancji, np. \'dynText\' i zadeklaruj zmienną dla tego elementu w swoim pliku HTML lub XML:

{stala}content=Here\'s some text I loaded from an external file{/stala}

Aby wgrać treść, dodaj ten kod AcionScript do pierwszej klatki:

myData = new LoadVars();
myData.onLoad = function(){
 dynText.text = this.content;
};
myData.load(\"example.txt\");
stop();

SQL

22. Procedury składowane

Zarówno SQL Server, jak i MySQL obsługują obecnie procedury składowane. Są to zapytania lub fragmenty kodu, które możesz zapisać pod wybraną nazwą za pomocą komend Create Procedure lub Create Function. Aby wykorzystać ponownie taki kod, użyj składni {html}Call {/html}.

Procedury składowane sprawiają, że możliwe jest programowanie reguł aplikacji bezpośrednio z poziomu bazy danych, bez konieczności zamieszczania ich w \"warstwie pośredniej\" środowiska programistycznego. Dzięki procedurom składowanym, gdy twój klient nagle zarządzi przesiadkę z ASP na ASP.net, nie będziesz musiał przeprogramowywać tych funkcji. Po prostu podłącz nowy serwis do istniejącej już bazy danych.

Optymalizacja stron w wyszukiwarkach

23. Przejrzysta treść strony

Upewnij się, że zawartość strony nie zamyka się w jednej technologii, takiej jak np. Flash, i jest łatwo dostępna dla pająków (spiders) przeszukujących sieć dla wyszukiwarek internetowych. Mogą one natrafić na dowolną treść na twojej stronie, zatem zadbaj o to, aby prezentowała się ona w przejrzysty, logiczny i sensowny sposób.

Mapy stron stanowią krytyczny element wszystkich serwisów internetowych, a w szczególności większych projektów: są odpowiedzią na wymogi użyteczności i potrzeby internautów. Jednocześnie znane są one również ze swojej przydatności w procesie pozycjonowania strony, ponieważ z gotowych planów serwisu korzystają także wyszukiwarki. Nawiązując zatem do stwierdzenia, że internet zbudowany został na sieci odnośników, dobrze byłoby wykorzystać ten pomysł w praktyce.

24. Postępuj etycznie

Etyczne podejście do biznesu to podejście najlepsze. Jeżeli spróbujesz oszukać, nabrać lub ośmieszyć wyszukiwarki - wykorzystując do tego krótkoterminowe strony, niewidzialne partie tekstu, powielanie stron, ukrywanie adresów URL lub technikę keyword stuffing (dosł. napychanie wyrazami kluczowymi) - wtedy będzie to miało prawdopodobnie negatywny skutek.

Było nawet kilka przypadków banowania serwisów bardzo dużych marek, takich jak np. BMW w Niemczech. Wyszukiwarki nie będą z tym zwlekać, a odwrócenie takiej sytuacji nie zawsze jest takie proste. Istnieją odpowiednie wytyczne nakreślone przez zespoły wyszukiwarek. Na początek sprawdź reguły zawarte na stronie http://www.google.com/webmasters/facts.html.

25. Nie odkładaj optymalizacji

Wyszukiwanie to rzecz niezwykle w sieci istotna. W przybliżeniu około 70% stron jest po raz pierwszy odkrywanych właśnie za pośrednictwem wyszukiwarki. Oznacza to, że musisz zarządzać tym kanałem komunikacji z dużym wyczuciem, sprawdzając, czy wyniki zwracane przez wyszukiwarki są takimi wynikami, jakie chciałeś osiągnąć.

Moment, w którym strona pojawia się online, jest momentem, od którego może rozpocząć się jej indeksowanie. Jeżeli nie podejmiesz wcześniej odpowiednich kroków, fragmenty twojej źle zoptymalizowanej strony wylądują w archiwach wyszukiwarek. Takie dane mogą utrzymywać się jeszcze długo po tym, jak zmienisz je u siebie. Rozsądnie byłoby sprawdzić, czy twoja strona została właściwie zoptymalizowana pod kątem wyszukiwarek internetowych, zanim zadecydujesz o wgraniu jej na serwer.

Web 2.0

26. Pozostań na tej samej stronie

Strony Web 2.0 zachowują się bardziej jak aplikacje niż serwisy internetowe - więc twoja strona powinna to odzwierciedlać. Zamiast tworzyć łańcuch interakcji odbywających się strona-po-stronie, wykorzystaj jak najwięcej pól do edycji, umieszczonych na jednej stronie. Przykłady bezpośredniej interakcji zawierają również obiekty działające, tam gdzie ma to sens, na zasadzie przeciągnij-i-upuść. Upewnij się, że pola do edycji znajdują się blisko obiektów, których dotyczą.

Niech interakcja będzie tak prosta, jak to tylko możliwe. Unikaj odświeżania strony i zamieszczania interaktywnych elementów w głównym layoucie strony. Np. zawartość koszyka z zakupami w sklepie internetowym pokazująca się po najechaniu na niego myszą może udanie wyeliminować konieczność przechodzenia do kolejnej podstrony.

27. Rozbudowane interfejsy

Rozbudowane internetowe aplikacje lub serwisy Web 2.0, takie jak interaktywne mapy, Wikipedia i del.cio.us zawdzięczają swoją popularność jednemu - korzystanie z nich jest po prostu bardzo intuicyjne. I to jest właśnie sposób, w jaki należy zabrać się do tworzenia tego typu serwisów.

Zawsze informuj swoich użytkowników o tym, co się aktualnie dzieje - trzymaj ich na stale aktualizowanej stronie i obficie korzystaj z preloaderów oraz komunikatów typu \"Proszę czekać...\" podczas przeprowadzania prostych operacji. Użytkownik będzie nadal w kontakcie ze stroną, zamiast tępo patrzeć na statyczną stronę w oczekiwaniu na jakąś zmianę.

Zachęć użytkowników do wejścia na następny poziom interakcji za pomocą interfejsu, który będzie reagował na zwykłe czynności, takie jak przewijane menu lub podświetlenia obiektów pod kursorem myszy.

Kod strony

28. Podkreślaj znaczenie wyrazów

Dobre wyróżnienie tekstu zapewnia pozytywną reakcję użytkowników. Dopasuj zawartość strony do jej wagi i znaczenia za pomocą odpowiedniego formatowania. Np. informacja w nagłówku powinna zawierać się w tagu {html}

{/html}, podczas gdy dla śródtytułów zarezerwowane są tagi {html}

{/html} i {html}

{/html}.

Nowoczesne wyszukiwarki, takie jak Google biorą pod uwagę inteligentne wykorzystanie kodu i treści, premiując je lepszą pozycją w rankingu. Co ważniejsze, także osoby niedowidzące, korzystające z czytników stron, będą w stanie sprawnie poruszać się po zawartości twojej strony.

29. Poznaj swój edytor stron WWW

Naucz się w pełni korzystać ze swojego codziennego edytora kodu. Poznaj jeden program na wylot i pozostań przy nim. Solidny, pewny edytor (np. UltraEdit ze strony http://www.ultraedit.com) użyty w efektywny sposób potrafi zdziałać cuda.

Upewnij się, że wykorzystujesz pełen jego potencjał, od znajomości skrótów klawiszowych począwszy, a na wstawianiu wyrażeń regularnych skończywszy. Pamiętaj, że niewiele zyskasz leniwie zmieniając edytor na inny, tylko dlatego, bo bardziej spodobał ci się jego ładniejszy interfejs.

Innym dobrym edytorem jest HTMLKit (http://www.htmlkit.com). Jego elastyczność powoduje, że sprawdzi się on w każdym projekcie.

30. Weryfikacja formularzy

Formularze, rozumiane jako swoisty wywoływacz (reakcji), stały się podstawowym składnikiem treści wchodzących w skład każdego serwisu. Dlatego też warto poświęcić nieco czasu na ich dopracowanie.

• Sprawdź, jakie wymagania stawia twoim klientom podstrona z formularzem - np. czy są oni w stanie korzystać z JavaScript?
• Pomóż użytkownikom w dostarczeniu ci pomocnych informacji. Filtruj napływające wnioski, aby upewnić się, że podano wszystkie potrzebne dane.
• Nie zapomnij sprawdzić, czy twoje oprogramowanie jest odporne na działanie czasu! Niektóre starsze skrypty potrafią obsłużyć jedynie dwu- lub trzyliterowe rozszerzenia w weryfikowanych adresach. Nie kopiuj mechanicznie skryptów ze swoich wcześniejszych stron, bądź na czasie!

Zasoby

31. Open Source

Nie wynajduj od nowa koła. Zanim zaczniesz ambitny projekt nowej sieciowej aplikacji, przeszukaj zasoby społeczności open source. Po co tworzyć coś od samych podstaw, jeżeli równie dobrze można zaadaptować i rozwijać sprawdzone rozwiązania, z pomocą stale rosnącej sieci doświadczonych programistów?

Poszukiwania dobrze będzie rozpocząć od serwisu SourceForge (http://www.sourceforge.net). Inne przydatne open source\'owe adresy to Open Source Web Design (http://www.oswd.org) ze zbiorem darmowych layoutów stron oraz Open Source Flash (http://www.os.ash.org).

32. Zaistniej na listach dyskusyjnych

Udzielaj się na listach dyskusyjnych. To doskonały sposób na podzielenie się pomysłami, rozwiązanie problemów i śledzenie zmian oraz najnowszych trendów w branży. Wielu pracowników, włączających także tych w naszej firmie, przegląda grupy dyskusyjne w poszukiwaniu specjalistów. Często to właśnie za pośrednictwem list dyskusyjnych można przeczytać ekskluzywne ogłoszenia pracy od wiodących agencji.

Możesz również zapoznać się z serwiem Google Groups (http://groups.google.pl). Jest on wyposażony w prosty interfejs podłączony do całego usenetu, w obrębie którego działa wiele grup poświęconych designowi oraz webmasteringowi. Poświęć kilka chwil na ich wyszukanie i płynnie włącz się do dyskusji.

Użyteczność

33. Oszczędne wykorzystanie pop-upów

Przeglądarki je blokują, a użytkownicy mają ich dosyć - lecz pop-upy nadal mogą wzbogacić doznania internautów, jeżeli tylko są odpowiednio wykorzystywane. Jako divy w CSS lub elementy iFrame, świetnie zastępują tradycyjne okienka. Zaletą iFrame jest to, że możesz ustanowić oddzielne połączenie HTTP, które może być zoptymalizowane pod kątem właściwości konkretnej przeglądarki. Wadą jest jego mała prędkość działania.

Warstwy div w CSS mogą być umieszczone w dowolnym miejscu na ekranie, poza tym dają się przeciągać. Potrafią również w prosty sposób pojawiać się i znikać. Pływające warstwy div są stosowane jako miejsca, gdzie użytkownicy mogą wprowadzić swoje informacje lub zobaczyć nowe treści bez porzucania aktualnie oglądanej strony.

34. Przetestuj swoją stronę na ochotnikach

Zamiast dopieszczania projektu do nieskończoności, przesuwania obrazków o kilka pikseli i zmiany rozmiaru strony o kolejne pięć procent, spójrz na swoje dzieło z dystansu i poproś kogoś świeżego o wykonanie kilku czynności na stronie.

Przekonaj taką osobę lub osoby do tego, aby spróbowały osiągnąć zamierzony efekt, a sam obserwuj z boku ich starania. Poproś ich, aby komentowali swoje czynności i wyjaśniali dlaczego zrobili tak, a nie inaczej. Nie pytaj po prostu \"Czy ci się to spodobało?\". Dzięki temu niemal na pewno uzyskasz kilka naprawdę pomocnych spostrzeżeń.

Możesz zaprosić do współpracy prawie każdego, o ile tylko taka osoba nie miała wcześniejszych doświadczeń z tą stroną. Czym więcej osób biorących udział w testach będzie odpowiadać twojej grupie docelowej, tym większe masz szanse na nauczenie się czegoś nowego.

35. Mniej znaczy więcej

Ostatnimi czasy można zauważyć tendencję do upychania dodatków w interfejsach stron. Ma to często miejsce w przypadku firm próbujących zamieścić wartość dodaną do produktu, z tym że jest ona wtedy rozumiana jako możliwość korzystania i dostępu do jeszcze większej liczby atrakcji. A przecież rzadko właśnie o to chodzi. Lepiej jest zrobić jedną rzecz, ale lepiej, niż więcej, ale gorzej.

Odnosi się to również do zawartości serwisu. Każda dodana podstrona powoduje powstanie kolejnego poziomu treści, na które użytkownik musi się natknąć. Daj internautom to, czego potrzebują, a nie to, co twoim zdaniem chcieliby mieć.

Dla zaganianych webdesignerów

1. Projektuj konsekwentnie

Upewnij się, że kolory, które dobrałeś, przewijają się przez całą stronę. Stwórz i nazwij próbki na potrzeby specjalnych zadań. To samo dotyczy pędzli, deseni i pozostałych narzędzi. Mogą one potem zostać wyeksportowane i wysłane innym osobom działającym w twoim zespole. Rób marginesy, odstępy i podziały w identyczny sposób na wszystkich podstronach.

2. Bezpieczne wymiary

Projektowanie strony pod rozdzielczość np. 1024x768 pikseli nie jest zalecane. Pozostawienie przestrzeni na marginesach oraz na paski narzędzi przeglądarki sprawia, że do pracy pozostaje około 1003x568 pikseli. Jeżeli celujesz w osoby, które nadal korzystają z rozdzielczości 800x600 pikseli, obszar ten zmniejsza jeszcze bardziej, bo aż do 779x400 pikseli.

3. Rozszerzenia dla developerów

Korzystaj z Mozilli Firefox oraz rozszerzenia Web Developer Extension ze strony http://chrispederick.com/work/webdeveloper. Pozwoli ci ono na oglądanie i zmianę stylów CSS \"w locie\", a następnie zapisanie i podmianę twojego dokumentu CSS. Dodatek ten umożliwia także przeglądanie struktury prac innych ludzi, aby móc zrozumieć jak one działają.

4. Rób notatki

Pamiętaj, że nad twoim projektem zawsze mogą pracować również inne osoby. Notuj wyjaśnienia, reguły i przyjęte konwencje, nawet w oddzielnym dokumencie, jeżeli będzie to konieczne. Użytkownicy Dreamweavera mogą skorzystać z narzędzia Design Notes. Także Version Cue firmy Adobe pozwala na zamieszczenie podobnych notatek w twoim projekcie.

5. Zaspokajaj wszystkie potrzeby

Stwórz profil potencjalnych użytkowników twojej strony: dowiedz się, co ich motywuje do odwiedzenia twojego serwisu oraz na co będą zwracać uwagę. Następnie, już podczas projektowania strony, upewnij się, że zaspokoiłeś wszystkie te potrzeby...

Dla zapracowanych webmasterów

1. Sprawdź swój kod w walidatorze

Jako twórca kodu wiem, że niekiedy trudno ocenić, czy wszystkie tagi zostały odpowiednio zagnieżdżone. Dlatego znalazłem darmowy program NotePad++ ze strony http://notepad-plus.sourceforge.net/uk/about.php, który znakomicie sprawdza się w tej sytuacji. Użyj go w sytuacji, gdy będziesz się zastanawiać nad tym, czy \"zamknąłem wcześniej tag {html}

{/html}, zanim otworzyłem nowy?\" Program rozrysowuje cienkie linie w miejscach, gdzie tagi powinny zostać otwarte oraz tam, gdzie powinny zostać zamknięte. Współpracuje także z PHP oraz innymi językami programowania.

2. Open source\'owe alternatywy

Kiedy pracujesz nad złożonym projektem, zawsze sprawdzaj zawartość serwisów http://www.sourceforge.net oraz http://www.phpclasses.org. Możliwe, że ktoś inny zrobił już za ciebie część pracy. To jednak nie tylko archiwum darmowego kodu, ale również świetne źródło inspiracji.

3. Zarządzanie bazą danych

Jeżeli pracujesz nad bazami danych, zdobądź odpowiednie narzędzie do ich zarządzania. Za jego sprawą życie staje się na dłuższą metę o wiele prostsze - a to dzięki możliwości wizualizacji i odpowiedniego łączenia twojej bazy danych. Osobiście polecam aplikacje SQLyog (http://www.webyog.com) lub PHPMyAdmin (http://www.phpmyadmin.net) dla użytkowników MySQL-a.

4. Usuwaj błędy za pomocą Firefoksa

Znacznie łatwiej jest sprawdzić kod JavaScript w Firefoksie niż w IE. Firefox został wyposażony w doskonałą konsolę JavaScript, która informuje o wskazówkach i ostrzeżeniach.

5. ColorZilla

Firefox ma również w zanadrzu świetną wtyczkę nazwaną ColorZilla (http://www.iosart.com/firefox/colorzilla). Aktywuje ona niewielki próbnik, dzięki któremu możesz zaznaczyć dowolny kolor na stronie. To doskonałe rozwiązanie, gdy potrzebujesz zidentyfikować dany kolor w heksach, a nie chcesz zagłębiać się w kod źródłowy serwisu.

Wyciśnij z Flasha to, co najlepsze

1. Dopracuj podstawy

Przygotuj podstawową strukturę twojego filmu zanim jeszcze otworzysz Flasha - zaoszczędzisz sobie w ten sposób czasu. A jeżeli jego struktura ulegnie zmianie w czasie prac, cofnij się i dokonaj korekty: uchroni cię to przed bałaganiarskim, pełnym błędów kodem.

2. Zewnętrzne klasy

Unikaj zagrzebywania kodu MovieClipów w obrębie MovieClipów. Zamiast tego, trzymaj swój kod w klasach AcionScript 2.0 poza główną animacją - to naprawdę upraszcza wszystkim życie.

3. Przycinanie komentarzy

Komentuj swój kod. Nawet jednolinijkowy opis sprawia ogromną różnicę. A w przypadku krytycznych funkcji może być bardzo pomocny.

4. Zapisuj swoje najlepsze elementy

Oczyść swoje najbardziej przydatne funkcje, równania i ciekawe efekty do postaci niewielkich, łatwych do ponownego wykorzystania elementów. Trzymaj je w zanadrzu, np. w tymczasowym pliku. Uaktualniaj go, dzięki czemu zawsze będziesz miał dostęp do najnowszych wersji funkcji, przycisków i fragmentów skryptów, które stworzyłeś.

5. Naucz się rzemiosła

Nie ucz się całego Flasha, naucz się tych rzeczy, których potrzebujesz do pracy z Flashem. Naucz się projektować interaktywne sceny, wizualizacje i grafiki. Poznaj programowanie w praktyce: sposoby wyłapywania błędów i to, w jaki sposób komentować kod. Dowiedz się nieco o animacji, synchronizacji i kompozycji obrazu.

To wszystko są wartościowe i uniwersalne umiejętności. Ich posiadanie otwiera prawdziwy potencjał Flasha jako narzędzia i pozwala na zrealizowanie dowolnego projektu, jaki tylko przyjdzie ci do głowy.