TOP 5 błędów, które popełniasz tworząc stronę WWW

Witajcie po krótkiej przerwie związanej z moją obroną pracy dyplomowej na uczelni. :) W piątek zakończyłem formalną edukację i z radością wracam do pisania. By nie zwariować od wpisów na temat „jak zrobić to a tamto” czas na „jak nie robić”. Przedstawiam krótki ranking najpaskudniejszych błędów technicznych, jakie możesz popełnić, tworząc stronę WWW.

5. Wymyślasz koło na nowo

Bycie oryginalnym jest kuszące, ale nie jest dobrym kierunkiem przy tworzeniu strony WWW. Pamiętaj: co byś nie robił, większość czasu Twoi użytkownicy spędzają na innych stronach. Użytkownicy przyzwyczajeni są do pewnych utartych schematów. O ile Twoja strona nie istnieje dla innowacji per se, tylko dla przeprowadzenia użytkownika przez jakiś proces, np. kupna produktu, to zżynaj od reszty ile wlezie. Im bardziej znany zżynany, tym lepiej.

Użytkownika zaskocz swoją ofertą, dobrym hasłem, czymkolwiek. Ale na miłość boską nie myśl, że do oznaczenia menu lepszy będzie kwiatek zamiast znanej wszystkim ikony „hamburger icon” (hamburger icon).

4. Zapominasz, kto tu rządzi

Rządzi użytkownik. Koniec, kropka.

Nie uruchamiaj mu automatycznie wideo (no chyba, że czytasz to z siedziby YouTube), jeżeli będzie chciał włączyć wideo, to je sobie włączy. Temat jakiejkolwiek muzyki na stronie pominę dyplomatycznym milczeniem.

Nie pokazuj mu okienek, o które nie prosił.

Antyweb - popupNie rób tak. „Ale co, jeśli-„ NIE. RÓB. TAK.

Każde zdarzenie na stronie powinno być bezpośrednio lub pośrednio wywołane przez użytkownika. Jeżeli tak nie jest, użytkownik nie będzie czuł się jak u siebie. A tego nie chcemy, prawda?

3. Zapominasz o telefonach

Mijają lata, a wielu właścicieli stron WWW zapomina o użytkownikach urządzeń mobilnych.

Responsive Web Design

Wciąż miniaturki stron z tekstem drobnym maczkiem nie są rzadkim widokiem. W dobie Responsive Web Design naprawdę nie ma na to już żadnego wytłumaczenia! Strony responsywne robi się łatwo, przyjemnie i tanio. Pomimo tego zapominają o tym nawet najwięksi…

Strona Play na telefonie komórkowymAre you fucking kidding me…?
Obok tego screena miał pojawić się jeszcze screen ze strony Reserved. Ale, skubani, zdążyli wdrożyć wersję mobilną przed publikacją tego wpisu ;) Szacun!

Poza wielkością samej strony warto popracować nad tym, co powinno na niej się znaleźć. Nie wszystkie ramki, linki i obrazki są niezbędnie potrzebne użytkownikowi 4-calowego urządzenia.

Temat Responsive Web Design z pewnością będzie wracał w obszerniejszych formach na „łamy” tego bloga, także stay tuned!

W telefonach nie ma myszki

Stwierdzenie idiotycznie proste, ale jednak jakimś cudem udaje nam się o tym zapomnieć. Wspomniana wyżej strona Play jeszcze do niedawna opierała się w całości na najeżdżaniu myszką na poszczególne elementy menu, by rozwinąć to właściwe podmenu, w którym dopiero dało się coś kliknąć. Było to powodem mojej niekończącej się radości, bowiem event najechania na element na ekranie dotykowym kończy się – rzecz jasna – z chwilą podniesienia palca z ekranu, a więc podmenu ze strony Play natychmiast w takiej sytuacji znikało.

I oni sprzedają telefony komórkowe.

2. Nie optymalizujesz plików przed publikacją

Wcięcia, komentarze – piękny kod to oczywiście podstawa wydajnej i przyjemnej pracy nad rozwojem strony. Ale w momencie publikacji kod Twojej strony nie powinien nikogo interesować. Zmniejszenie rozmiarów plików źródłowych przed publikacją naprawdę mocno może wpłynąć na wydajność Twojej strony, a to przekłada się na niemałe pieniądze. Jeżeli strona ładuje się ponad 4 sekundy, tracisz 25% użytkowników. Co więc należy zrobić?

Skompresuj pliki CSS i JS

To akurat żadna filozofia. Pozbycie się zbędnych białych znaków w zupełności wystarczy, by sporo zyskać. W przypadku mojego CSS-a, napisanego dla mojego pracodawcy, 200-kilobajtowy CSS zmniejszyłem jednym kliknięciem w Notepad++ o 15% usuwając z niego zbędne białe znaki. Można także wesprzeć się narzędziami takimi, jak chociażby CSS Minifier. W ww. narzędziu plik zmniejszył mi się o ponad 30%.

Siostrzane narzędzie dostępne jest dla plików JavaScript: JavaScript Minifier. Tu również możemy spodziewać się oszczędności tego samego rzędu.

Nie należy również zapominać o tym, że często w projektach używa się dodatkowych bibliotek, jak np. jQuery UI. Takie biblioteki są potężne, ale nie tylko w funkcjonalności, ale i w swojej wadze. Przed publikacją gotowej strony koniecznie sprawdź, z których funkcji skryptu korzystasz i przygotuj specjalną, skrojoną na miarę wersję biblioteki.

Obrazki

Niemało jest stron, w których najwięcej ważą właśnie obrazy. Niestety, „optymalizacja” sprowadza się zazwyczaj jedynie do zapisu JPG w nieco gorszej jakości. Tymczasem są dostępne w sieci narzędzia, które czynią cuda. Serio, cuda. Moja reakcja, gdy użyłem tego narzędzia po raz pierwszy była tylko jedna…
Co to za czary?!O jakim narzędziu mowa? O Kraken.io. Sam serwis jest narzędziem webowym, w którym mamy dostępnych kilka opcji. Najważniejszą z nich jest wybór pomiędzy stratną a bezstratną kompresją. Ta druga jest oczywiście o wiele mniej skuteczna, ale wciąż warta świeczki, gdy obrazów na stronie mamy dużo.

Grafika

Nie zawsze jednak kompresja obrazów będzie najlepszym rozwiązaniem. W przypadku grafiki warto rozważyć użycie formatu wektorowego SVG, zamiast popularnych grafik rastrowych. Tym bardziej, że format ten nie powinien powodować problemów w żadnej nowoczesnej przeglądarce. Przykład z mojego służbowego biurka:

Logo Woblink - PNGPNG, 7.59 KB, rozdzielczość: Retina

Logo Woblink - SVGSVG, 3.53 KB, rozdzielczość: ∞

Widzicie różnicę? Ja też nie.

1. Nie dostosowujesz strony dla użytkowników niepełnosprawnych

Zaskoczony? Jeśli tak, to znaczy, że trafiłem z numerem jeden.

Większość z Was dba o wsparcie przestarzałych przeglądarek jak Internet Explorer w wersji 7 czy 8, ale zupełnie zapomina o użytkownikach niepełnosprawnych. Ze statystycznego punktu widzenia to absurd. W Polsce żyje około 6 mln osób niepełnosprawnych (GUS, Stan Zdrowia Ludności Polski, 2004). 30% spośród nich, a więc 5,7% z całego społeczeństwa, to osoby niepełnosprawne wzrokowo. Internet Explorera 7 i 8 używa w Polsce sumarycznie nieco… ponad 3% użytkowników.

By strona była „czytelna” dla użytkowników specjalnego oprogramowania dla osób niepełnosprawnych należy poznać kilka reguł tworzenia takich stron. Z pewnością tematu nie można jednak opisać po łebkach jako jeden z podpunktów szerszego artykułu. Trzeba wziąć się za problem na poważnie. Oczywiście, napiszę o tym niedługo na blogu. :)