Posts Tagged ‘jak zaprojektować dobrą stronę internetową’

jak zaprojektować dobrą stronę internetową

Sunday, May 17th, 2009

Jak zaprojektować dobrą stronę internetową? Najprostszą odpowiedzią jest – zlecić zrobienie strony profesjonalistom. Dlaczego? Niestety strony nie robi jeden człowiek. Do tego potrzebne jest co najmniej dwóch ludzi, a często i to za mało i tak na prawdę to potrzeba kilku osób. Minimum to grafik i koder Html i css.
No ale zakładamy że stronę robimy sami.

Jak zaprojektować dobrą stronę internetową?

  1. Zawartość merytoryczna.
    To jest najważniejsze. Treści to podstawa, wartościowe treści. Nieważne czy strona będzie dobrze wyglądać, czy kod będzie się sypać, dobre treści zawsze znajdą odbiorcę. Taka jest też idea pozycjonowania. Wartościowy content jest linkowany przez użytkowników w blogach, na forach, na własnych stronach itd.
  2. Grafika.
    Zasada im więcej tym lepiej raczej się nie sprawdza. Mając niewielkie umiejętności w tym zakresie, staramy się zrobić coś prostego, nie przesadzać z kolorami. Zrobienie ze strony choinki to nic dobrego. Do zaprojektowania wyglądu strony posłużyć się można programem Adobe Photoshop. 30 dniowy trial jest dostępny na stronie Adobe. Photoshop jest stosunkowo intuicyjny i po poznaniu podstawowych narzędzi oraz styli można zrobić całkiem ładny projekt.
    Zanim przystąpimy do prac trzeba wybrać kolorystykę strony. Dla tych, którzy nie mają wyczucia kolorów z pomocą przychodzi kuler, bardzo fajna aplikacja, firmy Adobe, która pozwala na wybranie schematu kolorów na podstawie fraz i wyszukiwarki. Nowe schematy są dodawane przez innych użytkowników. Proszę się nie przejmować, że kolorów w schemacie jest tylko 5. To wystarczająca ilość. Jak zabierzemy się do pracy i zaczniemy już układać wszystko okaże się że taki schemat jest wystarczający.
    Wielkość projektu. Teoretycznie nie ma ograniczeń. Ale trzeba pamiętać o tym że użytkownicy internetu mają różne monitory i dobrze by było zapewnić większości przyjemne oglądanie strony. Według ranking.pl w Polsce wciąż króluje rozdzielczość 1024x768px. Rozdzielczością w pionie nie musimy się przejmować, robimy strony dowolnie długie. Natomiast przesuwanie suwakiem w poziomie jest niewygodne, więc projekt graficzny musi się zmieścić w szerokości 1024px. Należy też pamiętać że suwak przeglądarki zajmuje 24px, więc do użytku zostaje nam 1000px – jest to więc maksymalny obszar jaki mamy do wykorzystania.
    Layout. Kiedyś bardzo modnym układem strony był: Nagłówek, trzy kolumny i stopka. Unikajmy takiego układu. Po pierwsze przysporzy nam on więcej problemów przy kodowaniu, a chcemy osiągnąć dobry efekt jak najprościej. Po drugie taki układ jest mniej czytelny od dwukolumnowego. Zazwyczaj wystarczają dwie kolumny. Kto chce zobaczyć jak sobie radzą duże portale wystarczy rzucić okiem np. na: onet.pl. Tak więc wybieramy układ: Nagłówek, dwie kolumny i stopka. Jak wykonać w prosty i poprawny sposób dwie kolumny w html i css możecie przeczytać tutaj: Dwie kolumny w css bez używania tabel. Ładne proporcje kolumn, to 1 do 3. Ale tu możemy szerokość dostosować do naszych potrzeb. Podobnie jest z wysokością nagłówka. Węższy gdy mamy ważny content do pokazania jak najszybciej, szerszy jeśli chcemy wrzucić np. ładne i duże zdjęcie.
    Typografia.
    Jest bardzo ważna. Dobrze dobrane czcionki zwiększą czytelność i również zwiększą urodę naszej strony. Najlepiej było by użyć czcionek komercyjnych, ale te kosztują sporo.
    Wielkość tekstu, który użytkownik będzie czytał to zazwyczaj 11px. Do nagłówków i wyróżnienia możemy użyć większych czcionek. Ale nie przesadzajmy. Starajmy się też unikać krzykliwych kolorów, dużych liter oraz dużej wielkości czcionki. Nie róbmy tego:

    ALA MA KOTA

  3. Html i Css.
    Cięcie strony nie jest rzeczą trudną. Sam szkielet możemy wybrać korzystając z takich narzędzi jak Dreamweaver z pakietu Adobe. Mamy do wyboru kilka layoutów, z których na pewno coś wybierzemy dla siebie. Możemy też skorzystać z tego: Dwie kolumny w css bez używania tabel.
    Porządek. Porządek w kodzie jest niezmiernie ważny. Według mnie jest na drugim miejscu po prostocie. Mając burdel w kodzie narażamy się na błędy i na długie godziny straty żeby je potem odszukać. Jak go osiągnąć.

    • Po pierwsze oddzielmy style Css od Html. Style możemy zapisywać w oddzielnym pliku i dołączyć je do dokumentu html za pomocą tagu: <link /> w sekcji <head></head> dokumentu.
    • Nazwy klas i id powinny odzwiercielać rzeczywiste przeznaczenie elementów, którym zostały nadane.
    • Stosujmy jednakową konwencję w nazewnictwie w całym projekcie np. ala_ma_kota lub alaMaKota.
    • W html stosujmy wcięcia w kodzie. To co siędzi w kontenerze dostaje wcięcie 1 znaku Tab i tak dalej w głąb. Oznaczajmy sobie koniec elementów blokowych np. <!–koniec kontenerGlowny –></div>
    • Używajmy i dobrze poznajmy podstawowe elementy html: div, span, table, ul, p, h, a, egzotyczne sobie odpuśćmy, bo są rzadko stosowane i raczej się nie przydadzą.

    Prostota. Jeśli zrobiliśmy coś co ma wiele linijek kodu, to najprawdopodobniej zrobiliśmy to źle. Radzę porzucić wtedy tok myślenia, który doprowadził nas do tak długiego kodu i podejść do problemu z innej strony. W taki sposób unikniemy sporej ilości błędów, które na pierwszy rzut oka są ukryte a wyjdą później. No i oczywiście do prostego kodu łatwiej wrócić po roku czasu.
    Style które warto znać i rozumieć. Często używane i bardzo ważne dla układu strony, oraz dla poprawnego wyświetlania są style odpowiedzialne za pozycję elementu i są to:

    • position oraz top, left, right, clear, z-index
    • display
    • margin
    • padding

    Za ich pomocą ułożymy każdy element strony dokładnie tam gdzie chcemy.
    Do umieszczania obrazów używamy kontenerów np. div oraz stylu: background.
    Na koniec. Pamiętajmy o tym że użytkownicy korzystają z różnych przeglądarek, warto jest więc przetostować naszą stronę w tych najpopularniejszych. Przydatną statystykę znajdziemy na stronie rankging.pl. W dzień pisania tego artykułu warto testować stronę pod IE6, IE7, Firefox 3.0, Firefox 2.0, Opera.
    Warto pisać bezbłędny kod. Mimo że przeglądarka wyświetli treść z błędami, to i tak może być błąd. Żeby tego uniknąć dokument możemy sprawdzić używając validatora Html i Css na stronach W3C(oprócz specyfikacji, jest tam też sporo samouczków, bardzo fajnie napisanych).