Strona internetowa szkoły dla psów z zapisami online

Smart Dogs


Notice: Undefined offset: 1 in /home/klient.dhosting.pl/flowtar/flowtar.com/web/cache/page-project-main-pl.flow on line 23
/portfolio/smart-dogs/strona-internetowa-szkoly-dla-psow-z-zapisami-online.jpg

Dla Smart Dogs zaprojektowaliśmy nowoczesną stronę internetową, wychodzącą poza ramy tradycyjnych stron szkół dla psów. Odwiedzający mogą na niej nie tylko przeczytać profesjonalny artykuł na temat psich zwyczajów, ale również zapisać się online na szkolenia lub wykłady.

Pani Agnieszka Penkala, właścicielka Smart Dogs, to osoba z niesamowitą pasją. Oprócz szkoleń dla psów, organizuje prywatne lekcje, wykłady i eventy. Angażuje się również w akcje charytatywne. Wszystkie swoje działania Pani Agnieszka chciała opisać na stronie internetowej Smart Dogs.

Na pierwszym spotkaniu ustaliliśmy wspólnie jak powinna wyglądać strona internetowa i w jaki sposób zaplanować nawigację tak, aby strona była łatwa w obsłudze. Zgromadziliśmy też wszystkie materiały (wysokiej jakości zdjęcia i opisy). Okazało się, że za pomocą strony internetowej można kilka rzeczy uprościć…

Strona główna szkoły dla psów Smart Dogs
Strona główna szkoły dla psów Smart Dogs

Dodatkowe funkcjonalności na stronie internetowej

Kalendarz wydarzeń z możliwością rejestracji online

Dotychczas wszystkie zapisy na wydarzenia organizowane przez Smart Dogs były publikowane na Facebooku. Jednak taka rejstracja była kłopotliwa - informacje o osobach, wpłatach czy potwierdzeniach rejestracji trzeba było notować ręcznie. Doszliśmy do wniosku, że kalendarz wydarzeń z możliwością zapisów online bardzo ułatwi proces rejestracji zarówno Pani Agnieszce jak i jej Klientom.

Kalendarz okazał się strzałem w dziesiątkę. W panelu administracyjnym strony Smart Dogs wystarczy dodać nowe wydarzenie, uzupełnić ceny biletów i ilość miejsc. Strona internetowa autmatycznie generuje formularz rejestracji na takie wydarzenia, dbając o wszystkie szczegóły. Od wysłania wiadomości potwierdzających rejestrację, poprzez zmianę jej statusu i odpowiednie notyfikacje.

Kalendarz z rejestracją online
Szczegółowy opis szkolenia i rejestracja
Kalendarz zawiera listę wszystkich wydarzeń: szkoleń i warsztatów. Po kliknięciu na wybraną pozycję przechodzimy do szczegółowego opisu oraz formularza rejestracji online

Blog

Pani Agnieszce towarzyszy niezliczona energia do pisania publikacji, artykułów i krótkich przemyśleń. Dlatego na stronie internetowej obowiązkowo musiała się pojawić pozycja blog. Wpisy podzieliliśmy na kategorie w taki sposób, aby odwiedzający mogli łatwo odnaleźć materiały, których szukają. Od regularnie dodawanych przemyśleń z wydarzeń, poprzez artykuły i recenzje, skończywszy na naukowych tekstach.

Lista artykułów na blogu
Podstrona blog zawiera listę wszysktich artykułów na blogu, z możliwością sortowania po kategorii
Wygląd bloga na tablecie
Responsywny wygląd artykułu
Strona internetowa jest przystosowana do wyświetlania na wszystkich urządzeniach. Tutaj: podstrona blog oraz wybrany artykuł. Responsywny wygląd bloga sprawia, że wpisy można z łatwością czytać na każdym urządzeniu z przeglądarką

Jak przedstawić obszerną ofertę?

Po wspólnych rozmowach, ustaliliśmy, że bardzo rozbudowaną ofertę Smart Dogs można podzielić na trzy główne działy. Są to szkolenia, treningi i seminaria. Każdej z tych kategorii nadaliśmy indywidualny kolor, odróżniający ją od pozostałych. Każdą z tych kategorii podzieliliśmy również na bardziej szczegółowe warianty.

Podstrona z ofertą
Podstrona z zajęciami organizowanymi przez szkołę. Oferta dla ułatwienia została podzielona na mniejsze podgrupy

Projekt graficzny i wdrożenie strony internetowej

Po tak dokładnych ustaleniach i zebraniu dużej ilości materiałów, przeszliśmy do etapu projektowania. Przygotowaliśmy wizualizację strony głównej dla komputerów z monitorami HD. Wizualizacja pokazuje w sposób statyczny jak będzie wyglądać gotowa strona internetowa. Dzięki temu Klient może zgłosić swoje poprawki i uwagi jeszcze na etapie projektu.

Projekt graficzny spodobał się za pierwszym razem i mogliśmy od razu przejść do etapu wdrażania strony internetowej. Wspólnie ustaliliśmy, że warto zbudować stronę na systemie WordPress. Dzięki temu uzyskaliśmy dużą łatwość prowadzenia bloga i aktualizacji podstron. Natomiast kalendarz imprez i formularze zapisu stworzyliśmy w oparciu o dodatek Events Manager. Wymagał on konfiguracji i stworzenia odpowiednich widoków, zgodnie z przedstawionym projektem.

Wdrożenie strony internetowej miało miejsce online. Dzięki temu Pani Agnieszka mogła w każdej chwili odwiedzić stronę i obserwować jak powstaje.

Responsywna strona internetowa to podstawa

W dzisiejszych czasach responsywność powinna być standardem. Obecnie (maj 2017) na niektórych stronach ilość odwiedzin z urządzeń mobilnych przekracza 80% wszystkich odwiedzin. Oznacza to, że strona, która nie działa na urządzeniach mobilnych, dla 80% użytkowników po prostu nie zadziała.

Dlatego strona internetowa Smart Dogs powstała zgodnie z zasadą mobile first design. Oznacza to, że w pierwszej kolejności została zaprojektowana dla urządzeń mobilnych. Dopiero ta wersja strony była rozbudowywana o kolejne funkcjonalności, aż do rozmiaru HD i wyżej. Jest to odwrotność przestarzałego podejścia, w którym stronę przystosowaną do wyświetlania na ekranie komputera kurczy się na siłę, aby zmieściła się na ekranie telefonu komórkowego.

Responsywny widok oferty
Mobilny widok kalendarza z zapisami online
Szczegółowy opis wydarzenia na telefonie
Responsywność strony Smart Dogs to nie tylko możliwość wyświetlania strony na telefonie. To także indywidualnie dobrane rozmiary fontów i obrazków oraz układ strony, zaplanowany specjalnie pod telefony komórkowe

Dodatkowo dla każdego urządzenia wygląd strony zbudowaliśmy w oparciu o specjalnie dopasowaną siatkę projektową. Wyznacza ona m.in. szerokość kolumn, obrazków, paragrafów tekstu i nadaje stronie schludny, staranny charakter.

Siatka wyznaczająca kolumny i odstępy na stronie
Indywidualnie zaplanowana siatka (ang. grid) wyznacza szerokość kolumn i odstępów na stronie, w zależności od rozdzielczości urządzenia na którym wyświetlana jest strona

Bezpieczeństwo strony internetowej

Po fazie implementacji przeszliśmy do fazy testów. Testy strony internetowej są niezbędne, jeżeli posiada ona dodatkowe formularze, umożliwia logowanie użytkowników, bądź jej budowa jest skomplikowana.

W tym wypadku należało przetestować formularze rejestracji na wydarzenia. Tym samym mamy pewność, że proces rejestracji jest łatwy, przebiega bez problemów i na każdym etapie użytkownik otrzymuje odpowiednie powiadomienia od systemu (np. wiadomości email).

Dodatkowo trzeba się upewnić, że formularze są bezpieczne, to znaczy odporne na ataki typu code injection czy mysql injection. Trzeba również pamiętać o zabezpieczeniach antyspamowych.

Niestety, nie wszystkie rozwiązania antyspamowe są intuicyjne dla użytkowników. Dlatego z wdrożeniem mechanizmu typu captcha wstrzymaliśmy się do momentu aż na zapleczu strony internetowej pojawi się pierwszy spam.


Z Panią Agnieszką współpracujemy do dzisiaj. Zajmujemy się aktualizacjami na stronie internetowej, dodawaniem nowych treści i administracją. Dbamy o oprogramowanie na serwerze, aktualizacje systemu WordPress i użytych dodatków.