Nowoczesne projektowanie stron internetowych

Nowoczesne projektowanie stron internetowych może mieć kilka aspektów. Przede wszystkim jednak powinno być szybkie. Zgodne z wymaganiami, trendami i użyteczne – dla użytkownika, jego współpracowników, oraz chyba przede wszystkim klientów. Wszystko ładnie, ale jak to pogodzić? Czy to jest możliwe? Chciałem Ci pokazać przykład strony internetowej która ostatnio robiłem dla klienta, gdzie starałem się to wszystko tak właśnie zrobić.

Nowoczesne projektowanie stron internetowych – technologie

Zacznę od małej historyjki. Ponad dwadzieścia lat temu stworzyłem pierwsze strony internetowe. Początkowo na potrzeby swojej działalności. Potem gdy stwierdziłem, że już potrafię i umiem zaproponowałem to moim klientom. Ludziom których wspierałem informatycznie w działaniach ich firmy. To były małe firmy lub nawet mikro firmy. Nie mieli informatyka na etacie. To co potrzebowali informatyk mógł zrobić podczas wizyty raz na miesiąc lub często raz na kilka miesięcy. Dla nich zrobiłem pierwsze strony internetowe.

Na początku strony robiłem w … notatniku systemowym. Potem trafiłem na … FrontPage.

Microsoft FrontPage – nierozwijany pakiet webmasterski firmy Microsoft, dostępny jako oddzielna aplikacja lub jako część pakietu Microsoft Office, także w polskiej wersji językowej. Jest to jedno z najczęściej używanych narzędzi webmasterskich na rynku, zwłaszcza w firmach i biurach, w środowisku Windows. Źródło: https://pl.wikipedia.org/wiki/Microsoft_FrontPage

FrontPage pozwalał wprawdzie na szybka budowę stron www i to niemalże jak tworzenie dokumentu w Word, jednak był strasznym śmieciarzem. Tworzył tysiące linijek kodu które były … bez sensu. Efekt był taki, że strony chodziły bardzo wolno, co przy wolnych łączach nie zachęcało do oglądania takiej witryny. Zdecydowałem że pozostaje przy notatniku. Zrobione tam strony były bardzo szybkie w porównaniu z tymi tworzonymi w FrontPage.

Dlaczego to piszę – otóż dzięki temu doskonale opanowałem HTMLa i nauczyłem się stosować optymalizację kodu. To przydaje się do dziś.

Nowoczesne projektowanie stron internetowych - technologie
Nowoczesne projektowanie stron internetowych – technologie

Strona wspomagająca biznes

O tym że nasza strona internetowa może wspomagać nasz biznes często zapominamy lub nie bierzemy w ogóle pod uwagę. Większość osób zapytanych:

Po co firmie strona internetowa?

Odpowie: Reklama, wizytówka firmy, sprzedaż, działania marketingowe.

Jednak mało kto wspomni wspomaganie procesów, ułatwienie prowadzenia dokumentacji itp. Jednak przecież takie wsparcie też odpowiednio skonstruowana strona może zapewnić. Są to różnego rodzaju kreatory, kosztorysy, kalkulatory udostępnione dla klientów firmy. W ten sposób sporo informacji sprzedażowych klient otrzyma zanim skontaktuje się z firmą.

I co przede wszystkim najważniejsze, może to zrobić w czasie 24/7.

W ostatnim czasie stanąłem przed takim wyzwaniem. Moja klientka prowadzi Stowarzyszenie Hodowców Psów Rasowych. W ramach stowarzyszenia konieczne jest prowadzenie dokumentacji. Bez wchodzenia w szczegóły powiem tylko tak jak suka oszczeni się to w wypadku psów rasowych (przy innych pewnie nikt sobie głowy tym nie zawraca) tworzy się między innymi tzw. kartę miotu. To dokument który zawiera między innymi informację o rodzicach: Ojciec pies i matka suka, oraz dane dotyczących szczeniąt w miocie (czyli urodzonych za jednym razem – taki spis rodzeństwa). To wszystko niby proste, ale staje się skomplikowane jeżeli mamy w miocie nawet 11-12 szczeniąt i trzeba podać dane typu: nazwa, płeć, kolor umaszczenia, numer chipa, itp. Danych robi się sporo. Hodowca to wszystko spisywał na kartce, przekazywał do stowarzyszenia gdzie trzeba było zarejestrować wszystkie pieski (prowadzone papierowo) i wydrukować gotową Kartę miotu.

Ja u widzę co najmniej trzy momenty kiedy można się pomylić łatwo chociażby w numerze chipa. Oczywiście potem trzeba to odkręcać. Wykonanie kilku takich kart to często praca na cały dzień.

Nie da się prościej? Oczywiście, że tak.

Nowoczesne projektowanie stron internetowych – przykład zastosowania

Gdy udało mi się porozmawiać z klientką, od razu wiedziałem co mogę zrobić. Zastanawiałem się jednak – jak?

Jak to zrobić?

Jakiej użyć technologii?

Jak to zrobić najprościej?

Założenia

  • Musi być to dostępne – a więc najprościej strona internetowa.
  • Dostępne z poziomu komputera, jak i telefonu czy tableta – czyli odpowiednia optymalizacja i responsywność.
  • System musi być zabezpieczony przed wprowadzeniem za małej ilości danych.
  • Muszą być podane właściwe dane.
  • Wprowadzone dane przez hodowcę, trzeba przesłać do Stowarzyszenia – więc najprościej skorzystać z maila.
  • Fajnie by było jeżeli hodowca dostał te dane na swojego maila, tak w celu weryfikacji i ewentualnej kopii do własnej dokumentacji hodowlanej.

Technologia

Postanowiłem zrobić całość w postaci witryny internetowej. Ze względu na to, że trzeba było też umieścić inne dokumenty do pobrania to było najsensowniejsze rozwiązanie.

Całość postawiłem na stronie zrobionej w WordPress + wykorzystałem wtyczkę Contact Form 7 z wykorzystaniem której stworzyłem odpowiednie formularze.

Praktyka – wdrożenie

Na początku stworzyłem stronę na WordPress – z założenia postanowiłem skorzystać z szablonu typu One Page. Wybór padł na szablon OnePage Express Theme z którego wykorzystałem zaledwie kilka elementów. Jakie są możliwości szablonu możesz zobaczyć na mojej stronie firmowej: https://remixpw.com/

Nowoczesne projektowanie stron internetowych - przykład zastosowania
Nowoczesne projektowanie stron internetowych – przykład zastosowania – strona główna

Aby ułatwić obsługę z telefonu czy tableta zrobiłem skróty do najważniejszych rzeczy w formie paska serwisowego:

Nowoczesne projektowanie stron internetowych - przykład zastosowania - pasek szybkiego dostępu
Nowoczesne projektowanie stron internetowych – przykład zastosowania – pasek szybkiego dostępu

Wszystkie dokumenty do pobrania przygotowałem w postaci jednej z podstron. Założyłem że niektóre ktoś będzie chciał wydrukować i wypełnić ręcznie stąd do wyboru opcja PDF. Niektórzy jednak wolą wypisać wszystko na komputerze więc dla nich przewidziałem opcję pliku edytowalnego do pobrania w formacie Microsoft Word wersja do 97 czyli z rozszerzeniem DOC. Plik tai bez problemów można edytować korzystając z Google DOC lub też chociażby darmowego pakietu Libre Office. A tak wygląda ta część strony:

Przykład zastosowania - strona dokumentów do pobrania
Przykład zastosowania – strona dokumentów do pobrania

Najważniejszą częścią były jednak formularze. Tutaj przyznaje musiałem trochę pomyśleć, aby zrobić to jak najprościej, jak najbardziej intuicyjnie i czytelnie. Zarazem zabezpieczając w miarę możliwości sytuacje wprowadzania błędnych danych. Poniżej fragment kodu jaki stworzyłem:

Przykład zastosowania - kod strony (fragment) wyświetlanej przez formularz
Przykład zastosowania – kod strony (fragment) wyświetlanej przez formularz

Dane wprowadzone do formularza wysyłane są w odpowiedniej postaci na maila. Plan jest taki, że hodowca wprowadza dane na telefonie, komputerze czy też tablecie, dane zostają wysłane mailem do stowarzyszenia. Kopię maila dostaje także hodowca.

Przykład zastosowania - kod strony wiadomości wysyłanej na e-maila (fragment)
Przykład zastosowania – kod strony wiadomości wysyłanej na e-maila (fragment)

W mailu do hodowcy jest też przypomnienie o weryfikacji wysłanych danych:

Przykład zastosowania - fragment wiadomości mailowej wysyłanej do hodowcy
Przykład zastosowania – fragment wiadomości mailowej wysyłanej do hodowcy

Jak widzisz powyżej zastosowałem mechanizm taki, że jeżeli hodowca dostanie maila potwierdzającego może sprawdzić poprawność wysłanych danych w razie stwierdzonych błędów lub nieścisłości może od razu wysłać taką wiadomość korzystając z opcji odpowiedz w swoim programie mailowym.

Strona nie jest jeszcze skończona ponieważ maja znaleźć się na niej dodatkowe elementy które obecnie opracowuje z klientem.

Nowoczesne projektowanie stron internetowych – podsumowanie

Wykorzystując darmowe narzędzia oraz skrypty udało się stworzyć coś co oszczędza często kilka godzin żmudnej i co najważniejsze nie potrzebnej pracy. Zmniejszyłem też dzięki temu możliwość pojawienia się błędów. Co nie jest bez znaczenia przy tego typu pracach.

Czasem niewiele trzeba by wykorzystać narzędzia informatyczne i dzięki niem ułatwić sobie życie. Często nie zdajemy sobie sprawy jak wielkie możliwości drzemią w urządzeniu które coraz częściej stale nosimy przy sobie. Mam na myśli w tym wypadku oczywiście telefon komórkowy.

Przede wszystkim warto szukać rozwiązań lub skontaktować się z kimś kto takie rozwiązania proponuje. Zapraszam do konsultacji biznesowych, marketingowych, sprzedażowych i takich gdzie wykorzystując technologie informatyczne ułatwisz sobie życie. Zyskasz czas i pieniądze.

Dodaj komentarz