Connect with us

Cześć, czego szukasz?

Internet Maker

Dolphin Care UK – strona pełna wody

Ten remont odbywać się będzie pośród szumu wody. Naszym celem było poprawienie strony, która pomaga w walce z uśmiercaniem delfinów u wybrzeży Europy Zachodniej.

http://www.dolphincareuk.org/

Strona Chrisa Lowesa zagościła w internecie w styczniu 2003 r. Jej głównym celem było nagłośnienie ciężkich warunków, jakie spotykają delfiny w wodach otaczających Wielką Brytanię. \”Tak wiele delfinów jest niepotrzebnie zabijanych co roku – tłumaczy Chris. – Moja strona ma za zadanie informować ludzi o tym, dlaczego tak się dzieje, oraz o tym, co mogą zrobić, aby temu przeciwdziałać.\”

Mimo że strona Chrisa wygrała wiele nagród, jej wygląd nie jest już pierwszej świeżości i przydałoby się ją nieco przystroić. Chris ma ambicję, aby jego serwis wyróżniał się spośród innych stron poświęconych delfinom, a także umożliwiał skuteczne odnajdywanie informacji i nawiązywanie kontaktu z autorem.

Przed zmianą

Mnóstwo wolnej przestrzeni na stronie głównej zostało zmarnowane – jest pusta lub pełna rozpraszających buttonów przedstawiających wygrane nagrody – a zastosowana paleta kolorów także nie sprawdza się najlepiej.

  • MINUS: Skomplikowana nawigacja. Chris umieścił wiele odnośników w różnych sekcjach. Stosowanie list powinno ułatwić wykorzystanie stylów, lecz Chris najwidoczniej nie przejął się zbytnio tymi aspektami webdesignu.
  • MINUS: Niezgrane kolory. Chris zrobił użytek z koloru morskiego i zieleni, wypełniających puste przestrzenie, co sprawdza się całkiem nieźle, ale końcowy efekt psuje żółta belka u góry oraz szary pasek nawigacji.
  • MINUS: Kiepskie rozplanowanie. Chris nie potrafił poradzić sobie z wykorzystaniem dostępnej przestrzeni. Nagłówek jest duży, ale mało atrakcyjny. Z powodu takiego układu strony, główny tekst przylega do krawędzi kolumn, co przeszkadza w czytaniu.

  • MINUS: Paskudna typografia. Zastosowanie na całej stronie domyślnych czcionek sprawia mało profesjonalne wrażenie. Chris popełnia także kardynalny błąd polegający na wypośrodkowaniu dużych partii tekstu, co również znacznie przeszkadza w czytaniu.
  • MINUS: Niedopracowany kod. Edytor, którego użył Chris, wykazuje zamiłowanie do nadużywania skomplikowanych tabel. Ponadto godzi w style CSS, dodając je do nagłówka każdej strony serwisu, zamiast tworzyć odnośniki do zewnętrznego pliku.
  • MINUS: Nagrody dla serwisu. Wyświetlanie wszystkich nagród nie przysporzy stronie dodatkowych odwiedzających. Bez względu na to, jak dużą miałyby one wartość, poświęca on zbyt wiele przestrzeni na ich prezentację. Lepszym miejscem na to byłaby sekcja \”O stronie\”.

\”Chciałbym umieścić na stronie formularz, za pośrednictwem którego internauci mogliby wysyłać do mnie raporty o przypadkach dostrzeżenia delfinów\” – opowiada Chris, który ma w serwisie odpowiednią podstronę zarezerwowaną dla tego typu spraw. Zasugerował on również dołączenie dźwięków delfinów, które byłyby odtwarzane po kliknięciu w odnośniki na stronie, ale zdecydowanie tego nie zalecamy – oprócz spowalniania strony ich wadą jest to, że bardzo szybko stają się uciążliwe, doprowadzając wielu odwiedzających do szału.

Zamiast tego nasz remont będzie polegał na zamieszczeniu jak największej liczby potrzebnych informacji na stronie głównej, głównie poprzez lepsze wykorzystanie przestrzeni. Powinno to również wiązać się z nadaniem opływowego kształtu paskowi nawigacyjnemu, aby większa jego część wyświetlała się na ekranie zaraz po załadowaniu serwisu.

Dodatkowo oczyścimy kod, ponieważ edytor, którego użył Chris, wydaje się mieć tendencję do nadmiernego wykorzystania skomplikowanych tabel oraz umieszczania styli CSS w nagłówku każdej strony, co jeszcze bardziej spowalnia proces jej wgrywania. Nowy layout będzie efektywny nie tylko pod względem podejścia do wykorzystanej przestrzeni, ale także w odniesieniu do objętości i prędkości działania.

Odprawa

  1. Zadbać o lepsze wykorzystanie przestrzeni w celu wyświetlenia większej ilości informacji i stworzenia przejrzystej nawigacji.
  2. Poprawić atrakcyjność strony poprzez edycję nagłówka i zmianę palety kolorów.
  3. Uprosić kod, aby strona umożliwiała szybszą edycję i dalsze rozwijanie, a także krócej otwierała się w przeglądarce internetowej.
  4. Dołączyć formularz, który pozwoli odwiedzającym na raportowanie przypadków zauważenia delfinów.

Po zmianie

Nowy nagłówek strony i paleta kolorów oraz unowocześniony format tekstu nadają serwisowi czystszego, bardziej profesjonalnego wyrazu. Nawigacja po stronie została przeorganizowana a kod uproszczony.

  • PLUS: Poprawiony nagłówek. Wszystkie elementy, poza oryginalnym logo Chrisa, zostały wymienione. W miejsce wielkiej niebieskiej belki weszła grafika nawiązująca do fali, która wywołuje skojarzenia z oceanem.
  • PLUS: Lepsze wykorzystanie kolorów. Szata graficzna została uproszczona i teraz składa się z różnych odcieni niebieskiego. To sprawia, że design ma ujednolicony styl, a strona wygląda znacznie bardziej profesjonalnie.
  • PLUS: Lepsza nawigacja. Uprościliśmy nieco strukturę nawigacji oraz przeorganizowaliśmy odnośniki, przenosząc te najważniejsze na samą górę listy. Mniejsza czcionka sprawia, że wszystkie linki są widoczne od razu po załadowaniu strony.

  • PLUS: Unowocześniona typografia. Użyliśmy czcionki Verdana do zwykłego tekstu oraz Ariala do tytułów. Obie czcionki mogą być użyte online i stanowią olbrzymi krok do przodu w modyfikowaniu całego serwisu.
  • PLUS: Formularz na stronie głównej. Chris zamówił formularz na stronie głównej, aby internauci mogli wysyłać informacje na temat zauważania delfinów. Tak też się stało, a nowy dodatek powinien pomóc Chrisowi w zbieraniu raportów.
  • PLUS: Lepszy kod. Jak zawsze, kod to w pełni zweryfikowany XHTML i CSS. Modułowa budowa strony oznacza, że Chris będzie w stanie w prosty sposób tworzyć nowe jedno- i dwukolumnowe podstrony.

Nasza wskazówka

Użyj znaku tyldy (~) do stworzenia falujących linii. Duże, pokolorowane, a następnie skonwertowane do formatu grafiki rastrowej znaki tyldy posłużyły za materiał do wykonania nowego nagłówka strony. Poprawiono przezroczystość każdej z warstw, a każda z linii została dodatkowo wykrzywiona w celu osiągnięcia efektu jeszcze bardziej przypominającego falę. Całość składa się z dwóch półprzezroczystych warstw i trzeciej w pełni widocznej. Do nadania liniom ładnego wykończenia wykorzystaliśmy efekt gradientu przechodzącego od przezroczystości do koloru białego.

Opinia właściciela

Kiedy po raz pierwszy zobaczyłem stronę po remoncie, moja pierwsza reakcja brzmiała: \”Gdzie podziały się wszystkie moje grafiki?\” Lecz gdy ponownie rzuciłem na wszystko okiem, zauważyłem, że nowy design jest pozbawiony śmieci i sprawia miłe wrażenie: jest teraz prosty i skupiony na temacie, a dzięki temu strona jest znacznie lepsza. Zauważyłem, że nawigacja została przeniesiona na prawą stronę, a inne elementy serwisu uległy uproszczeniu.

Bardzo lubię formularz do wysyłania raportów o delfinach umieszczony na stronie głównej, dzięki któremu internauci będą mogli przesyłać informacje bez zgłębiania zawartości serwisu. Jestem także bardzo zadowolony z nowego logo i nagłówka.

Remont z pewnością spełnił wszystkie wyznaczone cele i już nie mogę się doczekać, aż przerobię resztę serwisu pod kątem nowego wyglądu. Dziękuję i życzę powodzenia w przyszłych projektach!

Advertisement

Może cię też zainteresować

Internet Maker

W Internecie nie wystarczy już mieć tylko strony internetowej, aby konkurować o znaczącą pozycję na rynku. Coraz ważniejsze staje się optymalizacja działań marketingowych, aby poprzez tańsze i bardziej efektywne zdobywanie...

Internet Maker

Odpowiednie przygotowanie treści na stronę ma olbrzymie znaczenie dla jej efektywności i realizacji zakładanego celu. Użytkownicy w Internecie są bardzo niecierpliwi i nie mają litości dla błędów projektantów witryn internetowych. Jeżeli...

Internet Maker

Wolno działająca strona odstraszy użytkowników. Zamiast przenosić ją na szybszy i droższy serwer warto zoptymalizować działanie witryny.

Internet Maker

W pozycjonowaniu najważniejsze są odnośniki, jednak lepsze wyniki osiągniemy optymalizując stronę pod kątem SEO. Czego należy unikać a na co zwrócić uwagę?