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/356.

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 tabletu 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 taki 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.

DARMOWE KONSULTACJE - sprzedaż i marketing
DARMOWE KONSULTACJE – sprzedaż i marketing

Zapraszam do skorzystania z DARMOWYCH konsultacji biznesowych, marketingowych, sprzedażowych i takich gdzie wykorzystując technologie informatyczne ułatwisz sobie życie.

Zyskasz czas i pieniądze.

Wypróbuj mnie – dowiedz się czy warto ze mną rozmawiać.

Chcesz wiedzieć więcej na ten temat? – kliknij przycisk poniżej:

Darmowa konsultacja

Skorzystaj z darmowej konsultacji

Wypróbuj mnie – sprawdź czy warto ze mną porozmawiać.

Umówmy się na rozmowę, w dogodnym dla obu stron terminie. Porozmawiajmy przez około 15 minut. Przede wszystkim jeżeli stwierdzisz, że to co proponuje ma dla Ciebie sens i wartość, będziemy działać dalej.

Jeżeli stwierdzisz, że nie ma to dla Ciebie sensu – lub ja stwierdzę, że nie mam możliwości Ci pomóc cóż – na tym zakończymy – nie każdemu mogę pomóc.

Zapewniam pełną poufność naszej rozmowy i dyskrecję.

Kim jestem?

Nazywam się Maciej Ziegler, jestem inżynierem informatykiem, specjalistą od rozwiązań internetowych, oraz od poprawiania biznesów.

Na co dzień przede wszystkim jestem właścicielem firmy, w której razem z współpracownikami staram się zapewniać kompleksowe wsparcie moich klientów, począwszy od dobrej strony internetowej, budowę / naprawę lejków sprzedażowych, obsługę social media, po video marketing.

Z wykształcenia jestem informatykiem, więc w materiałach które przygotowuje i udostępniam często usłyszysz o nowoczesnych technologiach i o tym jak wykorzystywać je w swojej firmie.

Dzielę się tutaj wiedzą, zdobytym już przez lata doświadczeniem i umiejętnościami które zdobyłem, „naprawiając” biznesy moich klientów.



Zainteresował Ciebie ten artykuł? Chcesz więcej?
Cały czas przeglądam ciekawe rzeczy w internecie.
Przede wszystkim subskrybuje też kilka darmowych, a także płatnych newsletterów, oraz słucham podcastów.
Chętnie dzielę się tym co odkryłem z moją społecznością.
Jeżeli chcesz, bym także z Tobą podzielił się swoimi odkryciami, nowościami, publikacjami to zapraszam – zapisz się na mój newsletter. Raz w tygodniu otrzymasz wiadomość na swojego maila.
UWAGA – Po zapisaniu się, na adres który podasz poniżej, przyjdzie wiadomość którą należy potwierdzić. Dopiero potwierdzenie tego spowoduje zapis na newsletter.
Jeżeli w ciągu 15 minut nie otrzymasz wiadomości warto też sprawdzić folder SPAM.

[newsletter_form button_color=”#F39C12″]