Tworzenie stron internetowych krok po kroku

Stworzenie dobrej strony internetowej nie jest skomplikowanym zadaniem, nawet jeśli nie jesteś osobą zorientowaną w nowoczesnych technologiach. Wszystko zależy od twoich potrzeb i przeznaczenia samej strony.

Proste strony internetowe firm, tak zwane wizytówki, nie są drogie ani w utrzymaniu, ani przy tworzeniu. Te o bardziej rozbudowanych funkcjach wymagają już włożenia większego nakładu pracy w swe powstanie, szczególnie gdy chcesz mieć dopasowaną do swoich wymagań grafikę, napisany unikalne i wartościowe treści lub idziesz dalej i masz zamiar zbudować portal od podstaw, z rozbudowaną strukturą i zaawansowanymi funkcjami.

Zanim rozpoczniesz prace nad stroną, ewentualnie zlecisz stworzenie strony radzę zdobyć chociaż podstawową wiedzę na ten temat. Unikniesz potencjalnych problemów i efektywnie zaplanujesz koszty.

Tworzymy funkcjonalne, użyteczne i estetyczne strony internetowe. 

Jaką funkcję pełni strona internetowa?
Pytania, na które musisz odpowiedzieć przed rozpoczęciem prac
Wstępne planowanie pracy nad stroną: cel, konkurencja, funkcjonalności
Domena i hosting dla strony www
Projektowanie struktury strony
Wytyczne SEO dla strony internetowej
Projekt UX: makiety strony
Projekt graficzny: layout strony internetowej
CMS strony, czyli dobieramy system zarządzania treściami
Praca nad stworzeniem strony
Uruchomienie strony www
Pytania i odpowiedzi – FAQ

Twoja strona może pełnić rolę:

1. informacyjną — wtedy strona prezentuje podstawowe informacje o firmie, produktach/ usługach i mapie dojazdu;
2. komunikacyjną — to dwustronna komunikacja z odwiedzającymi stronę oraz możliwość komentowania i dodawania opinii o produktach i firmie;
3. marketingową i wizerunkową — ponieważ strona www sama może być narzędziem do budowania wizerunku marki i wpływać na konsumencką świadomość;
4. sprzedażową — gdyż nawet jeśli nie jest sklepem online, może promować i sprzedawać produkty i usługi, odsyłając do biura sprzedaży, sklepów stacjonarnych, platform sprzedażowych (np. Allegro, Amazon) lub, po wdrożeniu systemu płatności i wysyłki, do sprzedaży bezpośredniej.

W przypadku, gdy Twoja strona ma pełnić rolę informacyjną i wizerunkową, masz do wyboru szereg gotowych i niedrogich rozwiązań. Możesz pokusić się o samodzielne stworzenie strony internetowej nawet wtedy, gdy nie masz doświadczenia i stawiasz pierwsze kroki w technologiach sieciowych. Nie musisz być programistą, żeby skorzystać z gotowych szablonów i skryptów, które są tak opracowane, żeby praktycznie każdy dał sobie radę w instalacji, ustawieniach i późniejszej administracji. Dodatkowo, Internet jest pełen darmowych kursów i poradników o tym, jak tworzyć stronę za pośrednictwem, na przykład, bezpłatnego oprogramowania WordPress, Drupal czy też Joomla!.

Poświęć czas na planowanie, jak strona ma wyglądać i jakich funkcjonalności oczekujesz. Nawet jeśli Twoja strona www będzie składać się tylko z dwóch podstron, a pełnić ma wyłącznie rolę informacyjną, to wymaga dokładnego przemyślenia już na etapie jej projektu. Poświęć 20% czasu na opracowanie jego zamysłu, a zaoszczędzisz 80% czasu na późniejsze poprawki.

Jeśli masz zamiar zlecić wszystkie prace nad projektem www, to i tak poświęć swój czas między innymi na opisanie funkcjonalności, zadań, wyglądu i oczekiwań. W końcu ty znasz najlepiej swój biznes, wiesz, czego oczekujesz i jaką funkcję ma spełniać twoja strona www. Jeśli zlecisz wszystko innym, to pamiętaj, że serwisem zajmie się informatyk, grafik i inne osoby z zespołu, które zapewne znają się na swojej pracy, ale nie znają biznesu, którym ty się zajmujesz.

Do czego potrzebujesz strony internetowej?

Jakie masz przewagi nad konkurencją w sieci?

Do kogo chcesz dotrzeć? – grupa docelowa

Czy masz fundusze na dokończenie projektu?

Jakie są twoje oczekiwania i nadzieje?

1. Określ cel stworzenia strony internetowej, o którym już niemało wiesz, nie tylko z tej publikacji, i przypisz go jednemu z trzech typów strony internetowej.
2. Opisz swoje przewagi rynkowe nad konkurencją, które można wyeksponować na stronie jako USP (ang. Unique Selling Proposition, unikalną cechę oferty). Przekładają się one na korzyści, które otrzymuje od ciebie klient, a które na stronie warto ukazać. Takim USP może być np. darmowa dostawa, wydłużona gwarancja itp.
3. Określ grupę docelową, czyli nie tylko obecnych, ale i przyszłych klientów.
4. Sporządź katalog wstępny zasobów ludzkich i materiałów, których potrzebujesz. Materiały to teksty na stronę, zdjęcia, wideo, prace programistyczne, grafiki. Prace te często dobrze jest zlecić, ale niektóre zadania możesz wykonać przy użyciu już posiadanych zasobów.
5. Wypisz wszystkie funkcjonalności strony, które na tym etapie przychodzą ci na myśl: wersje językowe strony, okno logowania, okno dodatkowego uwierzytelnienia itp.
6. Wyślij odnośne zapytania do firm i freelancerów o możliwości wykonawstwa i zbierz ich oferty. Użyj Google do znalezienia wykonawców. Sprawdzaj, pytaj, żądaj referencji i pokazania swoich dotychczasowych prac.
7. Po otrzymaniu ofert zaplanuj budżet przedsięwzięcia. Pamiętaj o ujęciu w budżecie utrzymania strony www: hostingu/ serwera oraz późniejszego wsparcia techniczno-administracyjnego.

Samo stworzenie strony nic ci nie da, jeśli nie będziesz mieć adresu, po którym można ją znaleźć w sieci (domena) oraz miejsca na pliki serwisu (strona internetowa to kod, który musi mieć serwer/hosting, na którym jest wgrana), czyli hosting.

Domena może być wybrana jeszcze przed rozpoczęciem prac nad stroną www. Powinna dobrze kojarzyć się z twoją marką i usługami. Najlepiej jeśli domena będzie łatwa do zapamiętania. Z punktu widzenia SEO (pozycjonowanie i optymalizacja w wyszukiwarkach internetowych) domena nie ma znaczenia (nie wpływa na pozycje w Google), chyba, że przejmujesz domenę po kimś, kto mocno spamował Internet (linki lub zabronione treści). W takim wypadku warto sprawdzić historię domeny, żeby uniknąć potencjalnych kar.

Historię domeny możesz sprawdzić pod adresem archive.org wpisują nazwę domeny w pole wyszukiwania.

Zarejestruj domenę u zaufanego rejestratora, tzn. znanej firmy, która prowadzi usługę utrzymywania domen od lat i nie narzuca dużych cen. Porównaj różnych rejestratorów a w szczególności skup się na odnowieniu kosztu domeny po roku i dwóch latach. Częstym trikiem mniej rzetelnych rejestratorów jest promocja w pierwszym roku a następnie narzucanie bardzo wysokich cen w kolejnych latach. Przeniesienie takiej domeny jest zazwyczaj niemożliwe ze względu na zapisy w regulaminie promocji.

Hosting to miejsce, na którym umieszczamy pliki strony internetowej i po wpisaniu w przeglądarce nazwy domeny użytkownik łączy się z hostingiem i odczytuje zawartość strony. Hosting to taki twardy dysk komputera i łączem internetowym.

Zanim zlecisz stworzenie strony internetowej lub rozpoczniesz samodzielnie prace dobrze zaplanuj strukturę strony.

Dobry plan architektury serwisu pozwoli na płynna pracę przy samej stronie oraz bardzo ułatwi pracę nad grafiką. W prostych stronach internetowych zazwyczaj planuje się stronę główną oraz najważniejsze podstrony: kategorie, listing produktów, kontakt, regulamin, o firmie, usługi.

Bardzo ważnym elementem tworzenia strony internetowej jest planowanie przejść pomiędzy podstronami. Zakłada się, że użytkownik powinien dotrzeć do każdej strony serwisu przy maksymalnie 3 krokach (przejściach miedzy stronami).

Ważne dla ciebie strony powinny być wysunięte na przód całej struktury. Szczególnie ważne jest, żeby boty internetowe mogły łatwo czytać kolejne strony, więc wewnętrzna struktura jest ważnym czynnikiem SEO.

SEO czyli optymalizacja pod wyszukiwarki internetowe takie jak Google należy zaplanować jeszcze przed uruchomianiem strony.

Architektura informacji, wewnętrzne linkowanie między podstronami, optymalizacja nagłówków i atrybutów SEO (opisy, tagi, atrybuty typu H1-H4, alt dla obrazów, description, titles itd.), przyjazne url to wszytko elementy niezbędne do późniejszego sukcesu strony i osiągniecia wysokiej widoczności w sieci.

SEO warto zaplanować na samym początku tworzenia projektu strony www po pierwsze dlatego, że ewentualne poprawki może być ciężko wprowadzić a po drugie, że SEO potrzebuje czasu, więc każda modyfikacja to stracony czas.

Zanim zaczniesz prace nad właściwą stroną i graficznym interfejsem na początek stwórz makietę serwisu. Jeśli nawet nie masz profesjonalnego programu do makiet (np. Axure RP, Moqups, UXPin, WebZap, Pencil Project, Pidoco, Jumpchart) zawsze możesz użyć kartki i papieru. Polecam narysowanie najważniejszych części serwisu np. menu, wyszukiwarki, baneru itp. wycięcie tych elementów nożyczkami i przestawianie szukając najlepszej formy.

Projektowanie zorientowane na użytkownika (ang. user – centered design) jest podejściem projektowym, w którym na każdym etapie wysiłki skupione są na użytkowniku.W końcu, to realna osoba będzie w przyszłości korzystać z produktu czy usługi, dlatego tak ważne jest zaangażowanie użytkownika na każdym etapie projektu.

Takie podejście ma na celu rozpoznanie potrzeb użytkownika i możliwie jak najlepsze ich zaspokojenie.
W rzeczywistości wygląda to tak, że użytkownik jest obecny na każdym etapie projektu. Postępy są na bieżąco z nim konsultowane. Na początku może to być w formie wywiadów, pytań, ankiet, a w końcowej fazie projektu na przykład w formie testów.
To nie użytkownicy mają się dostosowywać do danej witryny, ale witryna ma być dostosowana do użytkowników. Potrzeby, oczekiwania i zainteresowania użytkowników są najważniejsze.

Co można osiągnąć stosując podejście UX?

Po pierwsze witryna będzie bardziej przyjazna użytkownikom, a także i samym wyszukiwarkom. To z kolei przełoży się na osiąganie założonych celów biznesowych firmy.
Podczas projektowania witryn internetowych, najlepszym podejściem jest podejście iteratywne.

Polega ono na powtarzającym się cyklu projektowania, wykonywania testów razem z użytkownikami, wprowadzania poprawek i ponownego testowania itd. Czynności powtarza się do momentu uzyskania zadowalającego stopnia użyteczności witryny internetowej. Podejście iteratywne angażujące użytkowników, umożliwia stworzenie witryny, która w największym stopniu będzie zaspokajała ich potrzeby.

Grafika serwisu jest pierwszym elementem, z którym spotka się twój użytkownik i odwiedzający stronę www. Skoro już zaplanowałeś strukturę serwisu, użyteczność i stworzyłeś makiety to pora zaprojektować logo i całą resztę: dobrać kolory i wykonać layout strony głównej i podstron.

Projekt graficzny powinno zacząć się od strony mobilnej a następnie po zaakceptowaniu pierwszych wzorów do strony na resztę urządzeń. Dobry grafik opiera się o makiety, wytyczne UX oraz sam myśli o użytkowniku i jego potrzebach.

W trakcie projektowania grafiki ważny jest układ i ekspozycja najważniejszych stron i elementów. Nawigacja po serwisie, podstrony i sam układ strony głównej to kluczowe elementy, które decydują często o odbiorze serwisu przez odwiedzających.

Oprócz kolorystyki należy dobrać czcionkę (fonty) oraz zdjęcia i treści. Projekt graficzny powinien ujmować wszystkie elementy, które mogą znaleźć się w przyszłości na stronie www.

CMS (z angielskiego Content Management System ) to System Zarządzania Treściami, który pozwala na zarzadzanie stroną internetową, treściami, układem oraz mediami (grafika, zdjęcia, filmy, audio) za pośrednictwem panelu administracyjnego bez znajomości programowania.

Dzięki CMS możesz samodzielnie po zalogowaniu do panelu administratora dowolnie edytować artykuły i zawartość stron. Taka możliwość pozwala ci skrócić czas na wprowadzanie modyfikacji i ograniczyć koszty. Nie musisz płacić za każdą zmianę, wystarczy że samodzielnie wprowadzisz niezbędne poprawki.

Rodzaje CMS – większość CMS jest zupełnie bezpłatna. Płacisz jedynie za dodatki oraz ewentualnie za grafikę.

Najpopularniejszym CMS na rynku jest niewątpliwie WordPress, który doczekał się wielu modyfikacji i poprawek. Społeczność korzystająca z WordPress wymusiła powstanie darmowych dodatków, układów. Instalacja i modyfikacje WordPress są na tyle proste i intuicyjne, że praktycznie każda osoba powinna bez trudności sobie przyswoić. Tym bardziej, że w sieci można odnaleźć sporo filmów instruktażowych.

Joomla! To kolejny popularny CMS, który w rankingu zajmuje 2 miejsce. Joomla! Może nie jest tak prostym systemem do obsługi jak WordPress ale zdobył sobie rzeszę użytkowników, którzy chwalą sobie ten system zarządzania treściami.

Drupal, Quick.Cms, Typo3 to kolejne CMS, które z powodzeniem funkcjonują na rynku. Niektóre z nich wymagają zaawansowanej umiejętności posługiwania się oprogramowaniem i komputerem a niektóre wręcz umiejętności programowania. Najważniejsze to właściwe dobranie CMS do potrzeb strony i biznesu.

Kolejny etap to czas pracy nad kodowaniem serwisu w odpowiedniej technologii lub użycia gotowego rozwiązania (np. WordPress może być takim gotowym rozwiązaniem). Na tym etapie warto korzystać z wiedzy i doświadczenia osoby, która albo jest programistą albo potrafi operować na gotowych rozwiązaniach bez programowania (CMS).

Błędy popełnione na tym etapie mogą być trudne do naprawienia i mogą powodować złe funkcjonowanie serwisu oraz ewentualne problemy z bezpieczeństwem.

Przed końcowym uruchomieniem strony warto dokładnie przetestować wszystkie jej funkcjonalności. Zaawansowani twórcy stron prowadzą testy ab, w których nie tylko weryfikują poprawność poszczególnych funkcji ale sprawdzają, które rozwiązanie może być lepsze.

Wersja beta strony powinna być przetestowana przez zewnętrznych i niezależnych użytkowników. Nawet kilka osób, które nie widziały i nie pracowały wcześniej nad projektem mogą wnieść wiele uwag i ważnych poprawek.