Odświeżenie strony www na konkretnym przykładzie

Wielu klientów zgłasza się do nas w celu odświeżenia swojej strony internetowej, która została wykonana kilka lat temu. Często taka strona jest niedostosowana do urządzeń mobilnych, źle zoptymalizowana, brakuje jej certyfikatu SSL, a nawet może być zainfekowana. Pokażemy to na przykładzie realizacji dla strony madohora.pl.

Zidentyfikowanie problemu

Mieliśmy przyjemność odświeżyć, czyli zrobić stronę internetową od podstaw dla ośrodków wypoczynkowych „Madohora — zdrowie i wypoczynek”. Właściciel strony borykał się z problemem zainfekowanej strony, spowodowane to było prawdopodobnie brakiem aktualizacji wtyczek i motywu na stronie stworzonej za pomocą systemu CMS WordPress. Zapewne została jakaś luka bezpieczeństwa, którą wykorzystał haker czy też wirus i katastrofa gotowa. Objawiało się to tym, że użytkownicy chcący wejść na stronę byli przekierowywani na inną stronę proponowaną przez wirusa.

Łatwo się domyślić, że taka strona to mnóstwo niebezpieczeństw — między innymi kradzież danych, haseł nie tylko właścicieli i administratorów, ale też użytkowników, którzy zdecydowaliby się korzystać ze strony, na przykład wypełniając jakiś formularz.

Analiza strony oraz serwera

Poprosiliśmy właściciela strony www madohora.pl o przekazanie danych dostępowych do serwera jak i panelu administracyjnego w celu sprawdzenia, gdzie leży problem i jak go możemy rozwiązać.

Nasze działania i rekomendacje

Po wejściu na serwer poprzez FTP okazało się, że jest mnóstwo plików i folderów, które okazały się niepotrzebne. Były w nich również zainfekowane pliki, poukrywany kod, który przechwytywał loginy i hasła oraz robił przekierowanie na dziwne strony. Dodatkowo w bazach danych wszystkich stron widniały skrypty, więc byłoby mnóstwo sprzątania.

W takich sytuacjach bardzo ważne jest wsparcie hostingu oraz jego sprawność od samego początku — dlatego zawsze polecamy sprawdzone firmy, z których sami korzystamy. Warto zwrócić uwagę na kopie zapasowe wykonywane przez firmę, na której utrzymujemy stronę internetową. Zalecamy te, które oferują zazwyczaj  28 dni wstecz kopii zapasowych, wtedy mamy spory okres czasu by uratować stronę, zabezpieczyć i cieszyć się spokojem.

Najlepsze rozwiązanie i nasza propozycja

Po dokładnej analizie problemu przyszedł czas na zaproponowanie rozwiązania. Strona była wykonywana dosyć dawno temu, więc najlepszym co można by w tej sytuacji zrobić to wykonać ją od nowa, odświeżyć i wykorzystać najlepsze technologie.

Zaczęliśmy oczywiście od usystematyzowania treści w celu wykonania projektów graficznych wedle dzisiejszych standardów użyteczności na stronach internetowych (UX).

Wymagania i cele projektu:

• Podział strony www na dwa ośrodki wypoczynkowe.
• Zmniejszenie ilości treści oraz zwiększenie jej czytelności.
• Pokazanie pięknych zdjęć krajobrazów i ośrodków.
• Idealne dopasowanie do urządzeń mobilnych (RWD).
• Przejrzysty cennik.
• Strona w języku polskim i angielskim.
• Łatwość edycji treści i mediów.

Zaczynamy projektowanie strony internetowej

Zdecydowanie postawiliśmy na użyteczność i prostotę. Wchodząc na stronę madohora.pl, możemy wybrać jeden z dwóch ośrodków. Dwa kafelki z pięknym zdjęciem w tle, co najważniejsze możemy kliknąć cały obszar zdjęcia / kafelka co znacznie ułatwia użytkownikom korzystanie ze strony. W górnej belce mamy najważniejsze informacje takie jak logo, wybór języka czy też numer telefonu, przez który możemy dokonać rezerwacji — dzięki temu stali użytkownicy z łatwością odnajdą numer, wchodząc na pierwszą stronę.

Charakterystyczne elementy i kolorystyka

Projektując stronę www dla klienta madohora.pl, postanowiliśmy dodać charakterystyczne elementy znajdujące się w logo do treści na stronie. Dodało to charakteru wszystkim treścią na stronie i pozwoliło zadbać o spójność, dzięki czemu wszystko do siebie pasuję.

Ładna kolorystyka kojarząca się z naturą i wypoczynkiem dodaje stronie świeżości oraz pięknie komponuję się z białym kolorem, co daje efekt ładu i relaksacji — a o to nam chodziło, projektując dla ośrodka rekreacyjno — wypoczynkowego.

Responsywność strony www

Oczywiście wszystkie projekty, które wykonaliśmy na wersję desktopową (laptopy, monitory), zrobiliśmy również na wersje mobilne, czyli tablety i smartfony. W dzisiejszych czasach wykonanie strony dostosowanej do wszystkich urządzeń jest wręcz wymagany, ponieważ większość osób przegląda internet za pomocą smartfonu. Natomiast co jest bardzo ważne, że nie wszyscy robią to dobrze — warto zwrócić uwagę na:

• Poprawność elementów klikalnych takie jak buttony czy linki. Czy są odpowiedniej wielkości i czy nie wychodzą poza ekran.
• Jeżeli używamy animacji w wersjach desktopowych to sprawdzić, czy nie przeszkadzają one na telefonach. Czy nie są zbyt zaawansowane na danych sprzęt (mogą zawiesić działanie telefonu).
• Warto zadbać o odpowiednie ładowanie obrazów, czyli dostosowanie zdjęcia do odpowiedniego rozmiaru danego urządzenia. Inaczej wyświetlać się powinno zdjęcie na monitorze a inaczej na telefonie. Chodzi również o optymalizację. Wiele ludzi korzysta z LTE, dlatego warto zadbać o mniejszy rozmiar zdjęcia np. 100-200 kb.
• Warto odpowiednio dopasować odstępy między elementami i sekcjami. Na pewno na telefonie warto zadbać o to by jak najlepiej zagospodarować miejsce, by użytkownik nie musiał dużo scrollować.

Programowanie strony i odpowiednie działania oraz konfiguracja

Po wykonaniu i akceptacji wszystkich projektów przechodzimy do punktu programowania. Warto w tym momencie zastanowić się, na jakim serwerze będziemy utrzymywać stronę. Sprawdźmy, jakie obsługuje wersje PHP, czy posiada darmowy certyfikat Let’s encrypt, przez ile dni przechowują kopie zapasowe, jakie serwer ma parametry i wiele innych…

Motyw szyty na miarę

Na stronie madohora.pl wykonaliśmy indywidualny motyw, przy pomocy ACF PRO oraz Gutenberga, aby klient oraz jego pracownicy mogli z łatwością edytować poszczególne elementy takie jak zdjęcia i treści. Nagraliśmy krótkie i zrozumiałem wideoszkolenia by pokazać jak korzystać z panelu CMS WordPress.

Podstawowe zabezpieczenia strony www

Oczywiście wprowadziliśmy odpowiednie mechanizmy zabezpieczające stronę przed wirusami takie jak:

• Automatyczna aktualizacja wtyczek oraz samego WordPress.
• Zmiana domyślnego prefixu tabel w bazie danych.
• Limit logowania (3 próby logowania = blokada).
• Używanie trudnych haseł.
• Wygenerowaliśmy certyfikat SSL.

Optymalizacja zasobów i prędkości ładowania

Szczególną uwagę warto zwrócić na przygotowanie obrazów, trzeba takie obrazy odpowiednio zmniejszyć do rozdzielczości, jaka odpowiada danemu urządzeniu oraz użyciu kompresji stratnej 80%, by zdjęcie ważyło troszkę mniej.

Zainstalowaliśmy dwie wtyczki, które w tym pomagają:

• WP SMUSH, kompresuje bezstratnie obrazy zmniejszając ich wagę.
• Converter for Media, który zamienia na nowoczesny format używany na stronach o nazwie  WebP.

Kilka słów i zaleceń na sam koniec

Miło nam kiedy możemy pomóc klientom zadbać o ich stronę internetową, cieszy nas gdy nasza praca daję wartość w postaci pięknej strony internetowej, którą z przyjemnością się przegląda. Chcemy podziękować Panu Maciejowi z madohora.pl, za to, że się do nas zgłosił.

Kilka elementów, które pozwoli cieszyć się dobrze działającą stroną:

• Miej aktualny certyfikat SSL.
• Utrzymuj mała ilość wtyczek na swojej stronie.
• Nie korzystaj z page builderów typu elementor, visual composer. Generują one straszny kod.
• Dbaj o aktualizacje wtyczek i WordPress na bieżąco.
• Firma, która wykonuje stronę, powinna zapewnić dobrej jakości kod za pomocą indywidualnie napisanego motywu.
• Najlepiej, gdy będziesz mieć do użycia własne bloki gutenberga.
• Dobierz odpowiedni serwer, który ma bardzo dobre wsparcie oraz utrzymuje kopie zapasowe przez 20-30 dni wstecz.

Strona można zobaczyć pod adresem madohora.pl