07-10-2011 Ciąg dalszy

Wieczorkiem po pracy poszedłem do nieznajomego sąsiada. Na szczęście był w domu.
I tutaj pojawiły się nowe rewelacje. Kurier powiedział że za pół godziny odbiorę paczkę.
Skąd mu to przyszło do głowy jeśli nawet nie raczył się ze mną skontaktować!!!

Dodatkowo sąsiad był nieco zdenerwowany, bo…
jutro WYJEŻDŻA!!!!

Jeszcze wczoraj zgłosiłem reklamację do DHL i na razie cisza,
zobaczymy może odezwą się w poniedziałek. W przeciwnym razie
znów będę musiał tam zadzwonić…

No i mail z DHL

Najpierw dostałem maila z zapytaniem czy otrzymałem paczkę.
A po mojej odpowiedzi że tak oraz przedstawieniu kłamstw
kuriera i tego że sąsiad następnego dnia wyjeżdżał, otrzymałem odpowiedź:

„Kurier w tej chwili jest na urlopie więc nie mam możliwości porozmawiać z nim na ten temat. Pierwszego dnia po powrocie przeprowadzona z nim będzie rozmowa dyscyplinująca oraz zostanie upomniany na piśmie.”

No i co o Tym myślicie, ja osobiście nadal czuję się zbulwersowany takim traktowaniem.
A wy nie bylibyście?

Kurs PHP. Wstęp do programowania w popularnym języku skryptowym – Webhosting.pl

Bardzo dobry kurs PHP [tagi: php, kurs, po-polsku, dobry ]

Mod rewrite w przykładach – artykuł / kurs

Wyczerpujący kurs mod_rewrite [tagi: php, kurs, po-polsku, mod_rewrite ]

PHP w Akcji

Ciekawy zestaw artykułów o PHP po-polsku [tagi: php, po-polsku, artykuły, porady ]

Good PHP Tutorials – Beginner To Advanced PHP Programming Tutorials

Serwis z dużą ilością tutoriali o PHP [tagi: php, tutorial, po-angielsku ]

PHP Help, PHP Code – Codewalkers.com

Bardzo dobry serwis z ciekawymi artykułami po angielsku [tagi: php, tutorial, po-angielsku ]

Programowanie i tworzenie — PHP i SQL – WebInside.PL – php, webmaster, html, szablony www, skrypty php, photoshop, webmaster

Ciekawe artykuły o php po-polsku [tagi: php, po-polsku, porady, artykuły ]

Artykuły – WebCity.pl

Polecam te artykuły, są na wysokim poziome, ale dla bardziej zaawansowanych [tagi: php, artykuły, po-polsku, porady ]

Artykuły / Wortal / Home – php.pl

Polski wortal o PHP lista artykułów [tagi: php, artykuły, po-polsku, porady ]

PHP Tutorials

Zestaw ciekawych tutoriali, serwis niemiecki ale artykuły po angielsku [tagi: php, tutorial, po-angielsku ]

Practical PHP Programming | TuxRadar Linux

Dobry kurs programowania w PHP po angielsku [tagi: php, kurs, po-angielsku ]

PHP – 4programmers.net

Zestaw artykułów z 4programers.net dotyczących PHP [tagi: php, po-polsku, artykuły, porady ]

Popular Website Clone Scripts | Clone-Script.com

Świetny zbiór gotowych do zainstalowania skryptów klonów serwisów społecznościowych [tagi: php, resources, code, clone, opensource ]

Using Regular Expressions with PHP

Ciekawy artykuł na temat wyrażeń regularnych w php [tagi: php, regexp, programming ]

How To Parse JSON With PHP

Jak parsować JSON PHP-em [tagi: php, json ]

Coding your own blog: Pingback in php

Dodanie bingbacka do bloga za pomocą biblioteko xml-prc [tagi: php, pingback, blog, xml-rpc, code ]

Kto jest naszym klientem i jakie są jego oczekiwania? W tym przypadku celujemy w ludzi, którym uszkodziło się lusterko i chceliby je jak najszybciej naprawić

Musimy znać wyjątkowe cechy oferty; czyli usługa w 20 min i cena 25zł.

Jaki jest głowny cel strony? W tym przypadku jedynym celem, jest kontakt telefoniczny internauty z zakładem szklarskim, lub wizyta w samym zakładzie.

Design dostosowany do założeń

Dwa pomarańczowe guziki zwracają uwagę na wyjątkowe cechy oferty i odpowadają na pytanie dlaczego właśnie z tej oferty mamy skorzystać. Zwracają uwagę tak kolorem jak i „wychodzą” poza płaszczyznę strony poprzez efekt szklanego guzika.

Dodatkowo w ich pobliżu umieszczony jest opis zawartości strony. W ciągu 1-2 sekund, wiemy co możemy znaleźć na stronie i ile to będzie nas kosztować.

W tle eleganckie lusterko, dające poczucie ekskluzywnej oferty. Spojrzenie na lusterko, kieruje wzrok na adres i telefony kontaktowe. Wszystko czytelne i nie rozpraszające uwagi. Internauta zirytowany zepsutym lusterkiem, nie musi tracić czasu.

Nie ma nic prostszego niż trzy kroki

Na samej górze, mamy opisane trzy kroki które musimy wykonać aby w całości zapoznać się z ofertą. Wszystkie trzy kroki mają wyszczególnienie tego co się w nich znajduje.

Sama strona główna jest mała, co powoduje że nic nie rozprasza uwagi internauty, klika dalej.

Jakie pytania może zadać sobie internauta?

Czy w ofercie jest lusterko do jego samochodu, motocykla? Klika w „Usługa > Obsługiwane marki” i ma pełną listę obsługiwanych aut. Daje to również korzyści przy nasyceniu słowami kluczowmi, dla długiego ogona.
Zaraz po lewym meni jest zachęta do kontaktu telefonicznego, wytłuszczonym czarnym fontem. Wyróżnia się ona, od razu jak popatrzymy na podstronę. Zwłaszcza że raszta tekstu jest w odcieniu tła.
Dostarczamy informację oraz realizujemy głowny cel strony; kontakt telefoniczny.

Jakie są konkretnie ceny i czasy wykoniania? Klika na trzeci krok „Cena”.
Znów po lewej zachęta do kontaktu, oraz przejrzysta tabelka z cenami i czasem wykonania usługi. Bez zbędnych informacji, szybko i klarownie.

Wreszcie jak dojechać? Najbardziej rozbudowana podstrona. Zawiera mapkę google, oraz szczegółowy opis lokalizacji.
Opisane są dodatkowo dojazdy z różnych dzielnic wraz z sugerowaną trasą dojazdu. Jako bonus informacje o korkach.

Czemu nie święta trójca – O nas Oferta Kontakt

Koniecznie w tej kolejności. I dużo tekstów promocyjnych i zdjęć, jak to super wykonujemy usługę itp itd.

Po co?
Trzeba sobie uświadomić smutną prawdę; NIKOGO nie obchodzi podstrona „O nas”.
Klienta obchodzi jak szybko i tanio pozbyć się irytującego problemu. Ma w nosie czy robimy to od 20 lat czy od roku. Nawet nie chce o tym czytać.
Opisana strona, ma konkretny cel, sprzedać usługę, i mówi: szanuję Twój czas, już na stronie głównej masz wszystkie najważniejsze informacje.

Wyróżnij się, albo giń

Obecnie strona w internecie nic nie znaczy, jeśli nie będzie się wyróżniać. Pod jakimkolwiek względem, albo designem, albo ułożeniem elementów, albo funkcjonalnością.

Jeśli strona od tysięcy innych różni się tylko logiem, to proszę mi powiedzieć co ma skłonić wchodzącego na stronę, do przeczytania choćby jednego akapitu, lub zapoznania się z ofertą?

Skuteczna strona internetowa

Jakie ma cechy? Jest na temat. I to nie na temat właściciela witryny. Absolutnie nie. Ma być o tym co na niej sprzedajemy, w możliwie łatwej i przemawiającej do naszej grupy docelowej formie.

Dlaczego? To proste, szanujmy czas naszych klientów, a oni będą szanowali nasz. Nasz serwis zyska miano prostego i użytecznego, a to w internecie najwyższa nobilitacja.

Czy to dotczyczy wszystkich stron internetowych? Oczywiście że nie. Ale dotyczy ogromnej grupy stron które dotyczą małego biznesu.

Aby dowiedzieć się więcej proponuję przeczytać Jak sprawić żeby Twoja strona odnosiła sukcesy?

Zmiany

• -Odświeżyłem firmowe logo
• -Zmieniłem kolorystykę na bardziej jasną
• -Wyróżniłem gorące punkty nasyconymi kolorami
• -Przebudowałem sidebar

Komentarze

Będę wdzięczny za komentarze i może pomysły jak go jeszcze usprawnić.

Na razie odpowiedział mi jedynie darkl0rd na blipie. Za uwagi bardzo dziękuję.

Stary design bloga

Dla przypomnienia zamieszczam stary design bloga.

Już niebawem kilka wpisów z case study kilku moich projektów, więc zapraszam do odwiedzania.

Jednym z najbardziej widowiskowo zalanych budynków jest budowa Centrum Nauki Kopernika.

Przyciąga to wielu ludzi, którzy filmują i fotografują zalaną budowę.

Czy można to wykorzystać do promocji? Okazuje się że tak.

Promocja strony www na moście

Niby nic nowego ale jakże skuteczne.
Informacje na kartkach przyklejone do mostu za pomocą zwykłej taśmy klejącej.
Na kartkach informacja: „Choć z zewnątrz wygląda to groźnie, budynek Centrum Nauki Kopernik jest bezpieczny. Woda nie przedostała się do wnętrza budynku, projektanci uwzględnili tak wysokie stany Wisły. Aktualne informacje: kopernik.org.pl„
I dodatkowo link do strony głównej serwisu.

Pracownik Centrum Nauki Kopernik rozdaje ulotki

To jeszcze nie koniec, na moście obecny jest pracownik Centrum Nauki Kopernik, który informauje o planach budowy, rozdaje ulotki, zapewnia że budowa nie jest zagrożona i odpowiada na wszelkie pytania; „Nie zalało nas, ale jeśli by zalało, to taka informacja również znajdzie się na naszym blogu” mówi.
To wzorcowe podejście do otwartej komunikacji z przyszłymi klientami.

Pierwsza informacja na stronie głównej

Na stronie głównej Centrum Nauki Kopernik kopernik.org.pl pierwszy news to właśnie zapewnienie, że budowie nic nie zagraża.
Po rozwinięciu newsa, czytamy że Centrum Nauki Kopernik postara się udostępnić kamerę internetową na której na żywo możemy oglądać plac budowy, obecnie zalany.

Nauka dla nas

Ciekaw jestem, kto odpowiada za tę wzorcową akcję marketingową? Rzadko u nas w kraju zdarzają się przypadki takiej otwartości w komunikacji ze zwykłym człowiekiem.

Nic, tylko brać przykład z takich działań. Brawo

Projektant gdy siada do stworzenia designu zawsze ma określony punkt wyjścia. Jego pracą, jest wymyślić taką grafikę do strony, która zakomunikuje coś w konkretnym celu.

Ten cel, to prawie zawsze motywowanie internauty do zrobienia czegoś; zakupu produktu, skorzystania z usług, odwiedzenia jakiegoś miejsca, nauczenia pewnych informacji.

Najlepszy design to taki który ma skuteczny przekaz i motywuje internautę do konkretnych działań.

Dobry design jest zrozumiały

Jeśli design jest możliwy do interpretowania tak jak obraz, to znaczy, że nie jest to dobry design.

Informacja niesiona przez design, powinna być jednoznaczna dla każdego użytkownika, w przeciwieństwie do np. rzeźby.

Podstawowym celem projektu jest komunikatywny przekaz i motywacja internauty do zrobieni czegoś.

Jeśli design przekazuje coś innego niż projektant sobie zamierzył, a internauta wchodzi i robi coś na podstawie tej niezamierzonej informacji, to design jest do bani.

Z dobrym designem internauta widzi dokładnie to co projektant chciał pokazać.

Dobry design jest niezależny od gustu

Design może nie mieć smaku, ale różnica między dobrym i złym smakiem to jedynie kwesta gustu.

Design może nie odpowiadać gustowi odbiorcy, ale jeśli spełnia swoją funkcję, jakim jest motywacja ludzi do wykonania konkretnych akcji, to jest ok.

Dobry design jest niezależny od gustu odbiorcy, tak samo jasno pokazuje cel danej podstrony i tak samo motywuje do jakiejś akcji.

Dobry design jest umiejętnością

Design jest umiejętnością wynikającą z doświadczenia. Nie trzeba być wielkim artystą, żeby być wielkim projektantem.

Niektórzy z najbardziej szanowanych projektantów znani są z minimalistycznego stylu. Nie wykorzystują barw i tekstur, a jedynie różnic w wielkości, położeniu czy odstępach. Tego można nauczyć się bez wrodzonego talentu.

Gdzie tu artyzm

Z powyższego tekstu wynika, że design to tylko i wyłącznie inżynieria informacji w formie graficznej. Cóż nie jest tak prosto, ale jest to bardzo bliskie prawdy.

Wszystko to co napisałem musi być uwzględnione w dobrym designie, ale kiedy ktoś potrafi dodać od siebie jeszcze odrobinę piękna, to wtedy mamy doskonały design.

Według mnie wiele czasu jest poświęcane na poszukiwania w złym kierunku. Dopracowanie grafiki, kodu, użyteczności to leczenie symptomów nie źródła.

Lecz źródło choroby nie symptomy

Słaby design, zła użyteczność, okropnie napisany kod są symptomami dużych problemów. Kiedy chcemy rozwiązać te problemy często napotykamy na opór klienta i powodujemy jego frustrację. Dzieje się tak dlatego że uznajemy za pewnik że klienci borykają się z podstawowymi problemami.

Zanim jednak zabierzemy się za estetykę, funkcjonalność i kod musimy określić cele biznesowe, nasze call to action oraz akcje które chcemy żeby użytkownik naszej strony podjął. Jeśli pominiemy ten etap rozważań nic nie będzie działać poprawnie.

Zrozumienie celów biznesowch

Jedno z pierwszych pytań to „po co nam strona internetowa”. Wydaje się to oczywiste, ale zadziwiające jest jak wielu klientów nie jest w stanie udzielić na nie odpowiedzi.

Bez jasnego określenia celów biznesowych klient nie ma szans na sprawdzenie czy jego strona daje efekty. Oznacza to że nie ma uzasadnienia do dalszych inwestycji w rozwój strony www i prowadzi do sporów o każdy grosz.

I co najważniejsze bez jasno określonych celów biznesowych nie ma norm według których są podejmowane decyzje. Wszystko jest subiektywne i nieuchronnie prowadzi do dużych problemów.

Zanim więc przystąpimy do omawiania projektu, użyteczności i rozwoju, musimy się skupić z naszym klientem na sprecyzowaniu celów biznesowych. Będą one stanowić ramy przy podejmowaniu decyzji w fazie projektowej.

To oznacza nie tylko pomoc klientowi w podejmowaniu decyzji, ale też skoncentrowanie jego uwagi na biznesową stronę projektu w której to nasz klient jest ekspertem.

Określ przejrzyste call to action

Kiedy cele biznesowe zostaną określone możemy zająć się określaniem naszych call to action. Czyli akcji których oczekujemy od internauty. Przykładem call to action jest przycisk „kup” w sklepie internetowym

Call to action występuje nie tylko w stronach e-commerce, za każdym razem kiedy prosimy internautę żeby wysłał do nas wiadomość z formularza na naszej stronie, lub żeby zapisał się na newsletter to właśnie jest call to action.

Co więcej każdy serwis internetowy musi mieć miejsca które jasno wskazują co można uczynić i gdzie pójść dalej. Daje to nam pewność że internauta zawsze znajdzie możliwość pójścia dalej na naszej stronie i nie utknie w ślepym zaułku.

Bez jasno określonych call to action nie można utworzyć dobrej strony internetowej, określić oczekiwanych akcji internauty i zmierzyć czy działania te są skuteczne. Call to action powoduje że skupiamy uwagę internauty na następnej akcji tak że w efekcie pomagamy mu osiągnąć swoje cele.

Oczywiście aby sprawdzić czy call to action jest skuteczne należy zrobić kilka testów z żywymi użytkownikami.

Zadawaj właściwe pytania

Oczywiście wszyscy pytają klientów kim są ich klienci i czasem testują użyteczność strony. Jednak bez odpowiednio zadanych pytań testy te są nieskuteczne.

Ponownie ślizgamy się po powierzchni problemy a nie staramy się zbadać problemu dogłębnie.

Naszemu klientowi zwykle łatwo określić kto jest ich docelowym odbiorcą. Muszę przyznać że listy z odbiorcami często są nawet zbyt długie, i zawierają przykłady ekstremalne. Jednak kiedy przechodzimy do określenia czego odbiorcy będą szukać na stronach klienta, zaczynają się problemy. Klienci wiedzą kto chce ich znaleźć ale zwykle nie są w stanie powiedzieć dlaczego odbiorcy powinni zainteresować się ich stroną.

Odpowiedź na te pytania jest kluczowa przy tworzeniu każdej strony internetowej. W zasadzie nawet ważniejsze jest, żeby nasz klient zrozumiał, co chce od strony internetowej i co by chciał żeby internauci zrobili, niż określenie celów biznesowych całego serwisu internetowego.

I ponownie jest to podstawa do podejmowania decyzji o projektowaniu użyteczności i funkcjonalności. Bez tego strona będzie sama dla siebie ignorując potrzeby internautów.

Pytania o akcje które odbiorcy mają wykoanać na stronie pomagają klientowi skupić się na swoich użytkownikach na ich potrzebach a nie na tym co od odbiorców chce.

Czy to znaczy że wygląd strony, użyteczność, czy jakość kodu nie ma znaczenia? W zasadzie tak.

Szokująca prawda

Czy nam się to podoba czy nie istnieją dowody że można stworzyć stronę internetową z kiepskim designem, strasznym kodem, oraz nigdy nie przeprowadzonymi testami użyteczności i osiągnąć sukces.

Wystarczy spojrzeć na projekt Craigslist czy kod Amazon żeby zobaczyć że to prawda.

Jednak nie sądzę żeby było można zbudować skuteczną stronę bez określenia celów biznesowych, call to action, i jasnego sprecyzowania co chcemy żeby użytkownik wykonał na naszej stronie.

To nie znaczy że uważam że design, użyteczność, czy kod jest bez znaczenia, ale tylko wtedy gdy są zbudowane solidne podstawy.

Źródło: Na podstawie: What makes a website successful? It might not be what you expect!

1.Załóż bloga

Założenie bloga do każdej strony www daje Twoim klientom możliwość regularnego i łatwego dodawania treści. Wyszukiwarki kochają świeżą treść. Jeśli będziesz uaktualniał treści na blogu raz w tygodniu lub częściej zapewni Ci zauważalną przewagę. Można wytłumaczyć klientom że blogi przyciągają wyszukiwarki i mogą to wykorzystać przez częste pytania lub komentarze.

Interaktywność bloga stanowi również wartość dodaną serwisu i może zwiększyć ilość klientów przez dodanie wpisów z bloga do serwisów społecznościowych. Należy pamiętać żeby usuwać wszystko co wygląda jak duplikaty lub spam.

Blog z czasem zwiększa również rozmiar strony, autorytet strony, oraz daje więcej wewnętrznych linków. Daje to poważne korzyści w zakresie SEO.

2. Dodaj GoogleAnalytics do każdej strony www

Google Analytics to bezpłatne oprogramowanie do analizy statystyk odwiedzania strony www. Mogą one dostarczyć ważnych danych o odwiedzinach na stronie, ich źródłach i najlepszej treści.

Przy użyciu takich funkcji jak śledzenie celu, współczynnik odrzuceń itp można poznać które słowa kluczowe, wyszukiwarki, źródła ruchu podnoszą sprzedaż, lub zwiększają przychody z działalności. Można na podstawie tych danych sprawdzić jak poprawić swoje strony poprzez stałe monitorowanie statystyk.

Można skorzystać również z Google Webmaster Tools, które również mają mnóstwo informacji, których można użyć, żeby dowiedzieć się więcej na temat słów kluczowych i stron serwisu.

3. Zredukuj śmieciowy kod

Google poszukują unikalnych treści, javascript i CSS w kodzie strony internetowej mogą utrudniać znalezienie jej. Wszystkie skrypty i arkusze stylów trzeba dodawać w zewnętrznych arkuszach stylów w celu zmniejszenia czasu potrzebnego na znalezienie treści, jak również zredukowanie stosunku kodu do treści w stronie www.

Należy pamiętać że nadmiarowy kod strony spowalnia czas ładowania strony, ale i zwiększa możliwość wystąpienia błędów. Nie ma to bezpośredniego wpływu na pozycję w wyszukiwarkach ale może powodować trudności dla wyszukiwarek, owocując wolniejszym sczytywaniem strony przez Google.

4. Google pozycjonuje strony nie witryny internetowe

Google oblicza pozycję witryny w zależności od treści w nim zawartych i szuka treści których nie ma w innym miejscu w internecie. Poszukuje unikalnych treści nie tylko w stosunku do całego internetu ale i w obrębie samej witryny.

Czyli jeśli publikujemy treści które już są gdzieś w internecie to istnieje ryzyko że strona zostanie zignorowana przez wyszukiwarki i zaliczona to tzw duplicate content.

5. Używaj meta tagu – description

Zawartość tagu <meta> description pokazywana jest w opisach na stronach wyszukiwarek internetowych takich jak google, dają internaucie informację co znajdzie pod tym linkiem. Zapędź marketerów do napisania takich opisów każdej strony aby skłaniały one do kliknięcia w link. To jest pierwsza okazja żeby przyciągnąć odwiedzających więc jest bardzo ważne żeby opis odróżniał się na tle innych opisów.

Trzeba wiedzieć że google również używa tagu description więc trzeba uważać żeby na każdej podstronie był inny opis odpowiadający treści podstrony. Pozwoli nam to uniknąć kwestii duplicate content. Informacje o bezpłatnych ofertach, gwarancjach czy po prostu numer telefonu znacznie zwiększają klikalność.

Trzeba zadbać żeby limit znaków razem ze spacjami nie przekroczył 160 znaków.

6. Usuń powtarzające się treści ze stron serwisu

Unikalne treści są podstawą dobrego SEO. Podczas projektowania layoutu czasem dodajemy powtarzające się elementy, takie jak informacje o prawach autorskich, dane kontaktowe czy motto. Jeśli na podstronach nie ma wystarczającej ilości treści możemy być posądzeni o duplicate content. Aby tego uniknąć powinniśmy na takich stronach unikać powtarzalnych treści, bądź dodać więcej unikalnej treści.

7. Dodaj linki w stopce do każdej podstrony

Powiązanie stron za pomocą tekstowych linków z słowami kluczowymi w „anchor text” powoduje znaczące zwiększenie pozycji w rankingu SEO. Niestety wiele stron używa meni we flashu, lub meni generowanego w całości w javascript. Nie daje to szans na zindeksowanie stron przez wyszukiwarki. Rozwiązaniem są linki tekstowe w stopce, które zawierają słowa kluczowe w anchor tekst.

8. Utwórz oddzielną podstronę dla każdej frazy lub słowa kluczowego

Najlepszą drogą do zwiększenia pozycji w rankingu SEO jest utworzenie podstrony ze słowem kluczowym lub frazą w tagach <title>, <meta> description, <h1> oraz w treści strony i adresie URL. Czyli jest niezmiernie ważne żeby utworzyć odrębną podstronę dla każdego produktu i usługi lub kategorii którą chcemy wypozycjonować. Jest to również bardzo wygodne dla klienta który od razu z wyszukiwarki trafia na stronę dokładnie tego czego szukał i ułatwia mu zakup, lub wysłanie zapytania o więcej informacji.

9. Używaj na każdej podstronie tagu title bogatego w słowa kluczowe

Tag <title> wyświetlany na pasku przeglądarki są jednym z czynników branych pod uwagę przez wyszukiwarki w celu ustalenia pozycji strony w rankingach SEO. Zamiast używać nazwy firmy, w tym tagu użyj raczej słów kluczowych których poszukuje klient. To da Ci solidną przewagę w rankingach. Upewnij się że limit tagów do 60 znaków nie został przekroczony (włączając spacje). W przeciwnym razie tylko jego część pojawi się w rankingach wyszukiwarek reszta zostaje ucięta.

Źródło: Na podstawie: 9 Ways To Improve the SEO of Every Website You Design

DEMO
DOWNLOAD

Możemy napis przewijający się w tle użyć np. do opisania linku

Musimy mieć biblbiotekę jQuery, do ściągnięcia: http://docs.jquery.com/Downloading_jQuery.

HTML

1:<ul id="fancyMeni">
2:  <li><a href="" title="O firmie">O firmie</a></li>
3:  <li><a href="" title="Oferta">Oferta</a></li>
4:  <li><a href="" title="Kontakt">Kontakt</a></li>
5:</ul>

Tworzymy normalną listę z linkami, zastrzeżenie jest takie że linki muszą mieć ustawiony atrybut title, ponieważ to co jest w nim przewija się w tle

CSS

   1:#fancyMeni{
   2:  width:200px;
   3:  text-align:left;
   4:}
   5:#fancyMeni li,
   6:#fancyMeni a{
   7:  width:200px;
   8:  height:30px;
   9:  line-height: 30px;
  10:  overflow: hidden;
  11:  display:block;
  12:}
  13:#fancyMeni li{
  14:  margin:5px 0;
  15:  border: 1px solid #aaa;

Pierwsze 15 linii to ustawianie szerokości meni i wysokości elementu meni.

  16:  position: relative;

Tutaj ustawiamy właściwość position każdego elementu li na relative dlatego że cała zawartość li jest pozycjonowana absolutnie

Przez javascript dodajemy zawartość atrybutu title opakowaną w tagi span i b przed każdy link czyli z:

<a href="" title="O firmie">O firmie</a>

otrzymamy

<a href="" title=" "><span><b>O firmie</b></span>O firmie</a>

Wszystkim elementom a, span i b nadajemy pozycjonowanie absolutne, czyli wszstkie te elementy będą zaczynały się w górnym lewym rogu tagu li (szara ramka), i zakazujemy zawijania wierszy jeśli jest spacja (no-warp)

Dodajemy tagi span i b PRZED tagiem a po to żeby były pod linkiem jak się rozwiną. Można by to ustalić za pomocą z-index, ale InternetEplorer (jak zwykle) kiepsko sobie z tym radzi. A tak mamy zachowaną kolejność taką jak chcemy.

Jest pewien haczyk, jeśli skopiujemy tylko zawartość atrybutu title, to napis w tle czybciutko nam się przewinie i będzie po zabawie. Dlatego przez javascript powielamy title 20 razy (zakładamy że przeciętny użytkownik ne będzie czekał na przewinięcie się wszystkich 20 powtórzeń.). Jest to szybsze niż pisanie przewijania jednego napisu.

Później jest już z górki. Ustawiamy jak ma wyglądać link aktywujący animację.

  26:#fancyMeni a{
  27:  color:#000;
  28:  text-decoration: none;
  29:  font-size:14px;
  30:  padding-left: 5px;
  31:}

Ustalamy że początkowo nasza animacja w tle ma mieć szerokość 20px i wysokość 3px, daje to nam czarny pasek w górnym lewym roku każdego elementu li. Możemy nadać mu dowolne rozmiary. Cała nasza animacja jest w tagu span. To ten tag rozwija się na całą szerkość i wysokość elementu li.

  32:#fancyMeni span{
  33:  width:20px;
  34:  height:3px;
  35:  background-color:#333;
  36:  overflow: hidden;
  37:  display:block;
  38:}

Przesuwający się napis jest wpisany w tag b. Jest on bardzo długi i wychodzi poza tag span dlatego tag span musi mieć ustawione overflow na hidden. Tutaj ustawiamy wygląd napisu w tle.

  39:#fancyMeni span b{
  40:  color:#555;
  41:  font-size:44px;
  42:  display:block;
  43:  line-height:auto;
  44:  letter-spacing: 5px;
  45:  font-weight: bold;
  46:}

Poniżej pełny kod CSS

   1:#fancyMeni{
   2:  width:200px;
   3:  text-align:left;
   4:}
   5:#fancyMeni li,
   6:#fancyMeni a{
   7:  width:200px;
   8:  height:30px;
   9:  line-height: 30px;
  10:  overflow: hidden;
  11:  display:block;
  12:}
  13:#fancyMeni li{
  14:  margin:5px 0;
  15:  border: 1px solid #aaa;
  16:  position: relative;
  17:}
  18:#fancyMeni a,
  19:#fancyMeni span,
  20:#fancyMeni span b{
  21:  position:absolute;
  22:  top:0;
  23:  left:0;
  24:  white-space: nowrap;
  25:}
  26:#fancyMeni a{
  27:  color:#000;
  28:  text-decoration: none;
  29:  font-size:14px;
  30:  padding-left: 5px;
  31:}
  32:#fancyMeni span{
  33:  width:20px;
  34:  height:3px;
  35:  background-color:#333;
  36:  overflow: hidden;
  37:  display:block;
  38:}
  39:#fancyMeni span b{
  40:  color:#555;
  41:  font-size:44px;
  42:  display:block;
  43:  line-height:auto;
  44:  letter-spacing: 5px;
  45:  font-weight: bold;
  46:}

JavaScript

   1:var $j = jQuery.noConflict();

Pierwsza linia ustawia specyficzną zmienną dla jQuery żeby można było kozysać z niej i z innych bibliotek typu MooTools, Prototype itp

Dalej standardowo uruchamiamy funkcje dopiero po załadowaniu się całego dokumentu.

   2:$j(document).ready(
   3:    function(){

Następnie dla każdego linka w liscie o id fancyMeni pobieramy zawartość atrybutu title i jego wartość wstawiamy do zmiennej opis.

   4:      $j("#fancyMeni a").each(
   5:        function(){
   6:          opis=$j(this).attr("title");

Następnie usuwam wartość tagu title żeby nie pokazywał się tooltip dodawany przez przeglądakę.

   7:          $j(this).attr("title"," ");

I do każdego linku dodajemy funkcję odpowiednio dla zdarzenia wejścia wskaźnika myszki na link oraz drugą po opuszczeniu linku. W funkcji pierwszej na początku zmieniamy w linku padding-left na 20, czyli przesuway w prawo o 15 pikseli oraz zmeiniamy kolor na biały.

  11:      $j("#fancyMeni a").hover(
  12:        function(){
  13:          $j(this).css({"color":"#fff","padding-left":"20px"});

W następnej linii animujemy powiększenie się tagu span do szerokości i wysokości elementu li.

  14:          $j(this).prev("span").animate({width:"200px",height:"30px"},1000);

Teraz do zmiennej szer zapisujemy szerokość elementu b (czyli naszego przemykającego napisu)

  15:          szer=$j(this).prev("span").children("b").width();

No i wreszcie animujemy sam napis. Powyższa pobrana szerokość potrzebna jest nam do określenia na jaką odległość ma się przesunąć nasz napis.

  16:          $j(this).prev("span").children("b").animate({left:"-"+szer+"px"},15000);

Funkcja wywoływana po usunięciu wskaźnika myszki z linku po prostu przywraca wartości z początkowe

  18:        function(){
  19:          $j(this).css({"color":"#000","padding-left":"5px"});
  20:          $j(this).prev("span").animate({width:"20px",height:"3px"},5);
  21:          $j(this).prev("span").children("b").stop().animate({left:"0px"},5);
  22:        }

Poniżej pełen kod JavaScript

   1:var $j = jQuery.noConflict();
   2:$j(document).ready(
   3:    function(){
   4:      $j("#fancyMeni a").each(
   5:        function(){
   6:          opis=$j(this).attr("title");
   7:          $j(this).attr("title"," ");
   8:          $j(this).before("<span><b>"+str_repeat(opis+"&nbsp;",20)+"</b></span>");
   9:        }
  10:      );
  11:      $j("#fancyMeni a").hover(
  12:        function(){
  13:          $j(this).css({"color":"#fff","padding-left":"20px"});
  14:          $j(this).prev("span").animate({width:"200px",height:"30px"},1000);
  15:          szer=$j(this).prev("span").children("b").width();
  16:          $j(this).prev("span").children("b").animate({left:"-"+szer+"px"},15000);
  17:        },
  18:        function(){
  19:          $j(this).css({"color":"#000","padding-left":"5px"});
  20:          $j(this).prev("span").animate({width:"20px",height:"3px"},5);
  21:          $j(this).prev("span").children("b").stop().animate({left:"0px"},5);
  22:        }
  23:      );
  24:    }
  25:);
  26:function str_repeat ( input, multiplier ) {
  27:  return new Array(multiplier+1).join(input);
  28:}

Dlaczego – bo klient musi czekać aby zorientować się czy strona na którą chce wejść zawiera to czego szukał i prędzej wyjdzie z takiej strony niż będzie czekał na nie wiadomo no co.

Jest oczywiście wyjątek od tej reguły. Firmy kreatywne, zajmujące się animacją komputerową czy też tworzące zaawansowane rozwiązania flash dla internetu. Wtedy demo/intro i ciężka strona www jest uzasadniona

Główne informacje o produkcie na stronie głównej

Główne informacje o produkcie na stronie głównej, a nie strona O nas.

Klientów interesują Wasze produkty, i dopiero później ew. informacje o składzie zarządu czy misji firmy

Wyjątek? Brak wyjątków

Informacje o kontakcie powinny być na każdej podstronie

Bo internet to naprawdę szybkie medium, często może się zdarzyć że stracimy klienta bo podstrona kontakt jest trudna do znalezienia lub zbyt długo się zgrywa. A szkoda tracić klientów, prawda?

Poprawność ortograficzna i stylistyczna to konieczność

Warto zlecić pisanie tekstów wykwalifikowanej osobie, lub zaprzyjaźnić się ze słownikami

Łatwa nawigacja

Mógłbym podać wiele stron z wkurzającą nawigacją, niestety są to strony głównie we flashu. A szkoda bo flash ma wielki potencjał.

Ważne jest przemyślenie nawigacji. Np na tej stronie (mirror) VI Kongres Technologii Chemicznej Najważniejsze linki są w topie strony widoczne od razu. Później są powtórzone w meni po lewej poniżej topu.

Błędne linki strony w budowie (NIGDY!!!!)

NIGDY, nigdy nie dajemy linka do „strony w budowie”, i bardzo uważamy żeby nie było błędnych linków.

Nie ma nic bardziej irytującego kiedy klikamy na link i albo pojawia się strona w budowie, albo ogólnie trafiamy na błąd 404. Z psychologicznego punktu widzenia wtedy zapamiętujemy stronę jako „tą, co nas irytuje”, a wspomnienia powiązane z emocjami są dużo dłużej i trwalej zapamiętywane.

Dobry hosting (szybki, zawsze dostępny, niezawodny)

Tego chyba nie muszę tłumaczyć :)

Źródło: Na podstawie: Importance of a Professional Web Design in Today’s Business Environment