O czym Web Developer wiedzieć powinien.

Praca Web Developera może czasem przyprawić o niezły ból głowy. Ilość wiedzy, którą należy posiadać lub przynajmniej mieć świadomość o niektórych kwestiach, jest naprawdę spora. Oto “kilka” rzeczy, o których Web Developer powinien wiedzieć/pamiętać.

O rozdzielczości ekranu słów kilka

Już na etapie projektowania strony nie można zapominać o tym, że strona będzie wyglądać inaczej na monitorze o rozdzielczości 1024×768, a inaczej na monitorze 1920×1080. Pomiędzy tymi dwiema jest już 900px różnicy! To jak strona dla rozdzielczości 800×600. A tych rozdzielczości jest naprawdę sporo. Warto przed rozpoczęciem projektowania sprawdzić aktualne statystyki dotyczące wykorzystywanych rozdzielczości, a następnie wybrać najniższą z nich i potraktować ją jako rozdzielczość wyjściowa. Dobrze jest również zaplanować w jaki sposób strona powinna dostosowywać się do wyższych. Pomimo tego, że jest to działka głównie web designera, to jednak sposób w jaki strona powinna zachować się w większych/mniejszy rozdzielczościach, możliwości w jaki sposób to zrobić, powinny być skonsultowane z osobą, która to następnie będzie składać. 

Do tego celu można wykorzystać statystyki na stronie StatCounter.

Top 10 rozdzielczości ekranu na świecie z okresu Lipiec – Wrzesień 2012. Źródło: StatCounter.

I tak w statystykach z ostatnich 2 miesięcy widać, że najpopularniejszymi rozdzielczościami jest 1366×768 (blisko 22%) i 1024×768 (około 19%). Ale na przykład 1920×1080 ma blisko 6% udziału. I jest jeszcze ponad 18% “Innych” rozdzielczości. Oczywiście inny podział może być w USA inny w Europie. Można ograniczyć lub poszukać statystyk dla regionu z którego będzie odbiorca. Różnice nie będą znaczne i nie zmienią faktu, że należy brać pod uwagę różne rozdzielczości.

Jest to jedna z tych kwestii, gdzie klient z większym monitorem, koniecznie będzie chciał, aby strona wyglądała pięknie w jego rozdzielczości. Należy wówczas delikatnie mu to wyperswadować i uświadomić, że to nie on jest najważniejszym odbiorcą strony (pomimo tego, że płaci ;o)).

Nie zapominajmy jeszcze o smartfonach i tabletach! Te urządzenia również mają przeróżne rozdzielczości. Swoją drogą niedługo może się okazać, że będziemy mieć bardzo duże rozdzielczości, jak również bardzo małe o których trzeba będzie pamiętać jednocześnie, a czasem nawet przygotowywać osobne layouty. Choć właściwie to już tak jest i nosi nazwę – Responsive web design.

Moje okno na internet – czyli przeglądarki internetowe

Firefox, Chrome, Opera, Safari, IE7, IE8, IE9, przeglądarki na urządzeniach mobilnych itd. Specjalnie nie wymieniłam IE6, ponieważ już dawno powinno się przestać ją wspierać – chyba, że duży procent odbiorców danej strony rzeczywiście jeszcze jej używa. Wówczas należałoby zastanowić się czy opłacalne jest dalsze wspieranie IE6 w porównaniu z ilością pracy, którą należy włożyć aby wszystko działało. Nie wymieniam wersji przeglądarek takich jak FF czy Chrome ponieważ świetnie sobie radzą z aktualizacją do nowszych wersji.

Do rzeczy. Czy istnieje ktoś komu udało się zakodować stronę, która wyświetlałaby się dobrze we wszystkich przeglądarkach od razu? Nie mówię oczywiście o efekcie końcowym kiedy strona zostaje już opublikowana na serwerze docelowym. Zazwyczaj tworząc swój kod HTML i CSS sprawdzamy na bieżąco jak to się wyświetla w naszej ulubionej przeglądarce (lub też w IE, jako tej najbardziej problematycznej). Czasem może sprawdzimy na drugiej. Na koniec kiedy strona wygląda już dobrze, pora na testy. Otwieramy stronę w przeglądarce, której na bieżąco nie sprawdzaliśmy i okazuje się, że wszystko jest przesunięte, pojawił się jakiś margines niewiadomo skąd, gdzieś jakaś ramka lub jakiś pixel który nam przeniósł blok tam gdzie nie trzeba. WTF? No właśnie.

Nie można zapominać, że strona może różnie wyświetlać się w każdej przeglądarce. Pomimo tego, że powstała taka organizacja jak W3C, która pomaga ustandaryzować kwestie związane między innymi z HTML czy CSS, nadal pewne kwestie odnośnie tego jak coś zaimplementować zostawia do zinterpretowania przez przeglądarki. Zdarza się to coraz rzadziej, ale nadal jest to problematyczne. W tej chwili nie wspominam o HTML5 czy CSS3 i o tym jak to działa i czy działa. To zupełnie inna sprawa do której dojdę później.

Czy jest jakiś złoty środek? Oprócz tego, żeby pisać swój kod zgodnie ze wszystkimi regułami, to nie. Wydawałoby się, że to wystarczy. Jednak człowiek nie jest nieomylny, zdarza mu się o czymś zapomnieć, nie zauważyć i popełnić jakiś błąd, który w jednej przeglądarce zostanie pominięty, a w innej wręcz przeciwnie. Spowoduje, że cała strona się “rozjedzie”. Związane jest to z różnym sposobem obsługi błędów. Część przeglądarek jest bardziej wyrozumiała na pewne błędy i “sama próbuje je naprawić”, a część nie. Gdyby wszystkie traktowały błędy tak samo, może nie byłoby aż takich problemów. Chociaż musiałoby tak być od samego początku. Bo nawet jeśli coś w końcu pięknie wygląda w IE9 i pozostałych to na 99% gdzieś będzie jakiś problem w IE7. ;o)

JavaScript-owe interakcje i ich brak

JavaScript w ostatnim czasie zyskał na popularności pomimo tego, że w dalszym ciągu jest wyśmiewany przez niektórych programistów. Jest to prosty sposób, aby między innymi wprowadzić jakieś animacje na stronie czy interakcję z użytkownikiem bez konieczności przeładowania strony. Coraz częściej da się zauważyć, że niektórzy zapominają o tych użytkownikach co z JS nie korzystają. Jak również, że coraz więcej osób uważa, że bez JS nie da się tworzyć “nowoczesnych stron”.

Ja swojego zdania nie zmienię. JavaScript jest DODATKIEM. Nie powinno się na nim polegać i zawsze należy zapewnić obsługę bez JavaScriptu. Istnieją użytkownicy, którzy korzystają z internetu bez włączonego JS (naprawdę), jak również tacy, którym wyłączono JS ze względu na bezpieczeństwo. Wiele ataków na strony czy na samych użytkowników odbywa się właśnie poprzez JS. Za mało? Czy roboty wyszukiwarek internetowych korzystają z JavaScriptu? Nie. Dalej. Czy walidacja w JS uchroni przed wysłaniem nieprawidłowych danych? Jeśli ktoś uważa, że tak, to nawet niech się do tego nie przyznaje… Według mnie, brak zapewnionej obsługi bez JS musi mieć naprawdę bardzo dobry powód.

SEO i odpowiednia optymalizacja strony

Bardzo fajnym źródłem wiedzy jest “SEO starter Guide” przygotowany przez google, jak również jego całe centrum pomocy. Przez to, że wielkimi krokami wkracza HTML5, na pewno same wskazówki specjalistów SEO nieznacznie się zmienią, bo i algorytmy wyszukiwarek będą musiały się zmienić.

Swoją drogą, wydaje mi się, że SEO i same roboty wyszukiwarek mają pozytywny wpływ na zwiększenie dostępności strony dla osób niepełnosprawnych. Choćby dlatego, że wymuszają użycie nagłówków czy alternatywnych tekstów. Pod warunkiem oczywiście, że treść zawarta w poszczególnych elementach ma służyć użytkownikowi, a nie wyszukiwarkom. Największym błędem, który niektórzy popełniają jest tworzenie treści i nagłówków pod wyszukiwarki, a nie pod użytkownika. Prawda jest taka, że jeśli będziemy myśleć o samym użytkowniku i tak będziemy przygotowywać stronę i jej strukturę, mamy większe szanse na sukces. Ale to już zależy od całego zespołu, który pracuje nad stroną i samego klienta, a nie tylko web developera.

Bezpieczeństwo ponad wszystko

Coraz rzadziej tworzy się strony, które nie mają jakiegoś zaplecza zbudowanego w oparciu przykładowo o PHP. Nawet jeśli jest to prosty formularz kontaktowy trzeba zdawać sobie sprawę z niebezpieczeństw. Jest to temat bardzo szeroki, którego nie da się ująć w kilku zdaniach czy akapitach. Należy sobie jednak zdawać sprawę, że strony są podatne i mają słabe punkty. W zależności od tego jak rozbudowana jest nasza strona warto przyjrzeć się czy czasem nie zostawiamy jakiejś furtki, którą ktoś mógłby w przyszłości wykorzystać. SQL Injection, Code Injection, XSS to tylko niektóre z podatności. Każdy powinien mieć minimalną wiedzę na temat możliwych niebezpieczeństw (jeśli są), w tej części za którą są odpowiedzialni.

Nowe i stare – czyli o HTML5 i CSS3 słów kilka

HTML5 i CSS3 to zarówno zbawienie jak i przekleństwo. Nawet jeśli HTML5 do 2016 roku osiągnie status rekomendacji (jeszcze całkiem niedawno był to 2022 rok ;o)) nie zmieni to sposobu w jaki powinniśmy działać teraz. Skoro nie zmieni, to po co czekać. Należy zwracać uwagę na to jakie elementy HTML5 są już wspierane przez większość przeglądarek i zacząć je wykorzystywać. Jest jedno ale. Pomimo tego, że część elementów zostało już zaimplementowanych w najnowszych przeglądarkach, to w starych działać one nie będą. Tak samo jak tylko część przeglądarek może wspierać już dany element, a część nie. Dlatego też, jeśli decydujemy się na wykorzystanie HTML5, konieczne jest wsteczne zapewnienie działania. Choć nie sądzę, aby to się miało zmienić. Nawet jeśli będzie rok 2016 i HTML5 będzie w powszechnym użyciu, to i tak będą użytkownicy, korzystający ze starszych wersji przeglądarek (skoro do dziś są tacy co używają IE6 …). Oczywiście to do nas (i do klienta) należy decyzja czy trzeba zapewnić wsteczną kompatybilność, być może z wielkim napisem na pół strony “Zaktualizuj przeglądarkę”, czy nie należy sobie tym zawracać głowy. Pamiętajmy jednak, że czasem użytkownik nie ma pełnej kontroli nad oprogramowaniem z którego korzysta. Tak więc decyzja powinna być podjęta na podstawie analizy grupy odbiorców do której dana strona ma dotrzeć.

O ile HTML5 powinno mieć zapewnioną obsługę w starszych wersjach przeglądarek (ze względu na nowe elementy), o tyle czy przy CSS3 jest to konieczne? To zależy. Jeśli wpływa to znacznie na wygląd strony, to zapewne tak. Ale czy stworzenie zaokrąglonych rogów lub wyświetlenie super wypasionej czcionki poprzez JS jeśli przeglądarka nie obsługuje CSS3 jest konieczne? Raczej nie. Jest to dodatkowy kod, który nie jest potrzebny, a który może dodatkowo spowolnić działanie strony. Zapewnienie takiej wstecznej kompatybilności ma właśnie swoje minusy, dlatego konieczne jest wskazanie tych elementów, które w znaczny sposób wpłyną na działanie i odbiór samej strony i dla nich ją zapewnić. W wykrywaniu i obsłudze brakujących elementów HTML5 i CSS3 pomoże Modernizr.

Podsumowanie

Z całą pewnością tematy nie zostały wyczerpane. Myślę też, że należy przekonać się o niektórych sprawach na własnej skórze ;o) Przy większych projektach za każdą z tych kwestii może być odpowiedzialna inna osoba. Jednak do stworzenia prostej strony wystarczą właściwie dwie osoby – web designer i web developer. Nie ma możliwości, aby każdy wiedział wszystko i był w tym ekspertem. Każdy czuje się lepiej w wybranych zagadnieniach i je stara się szlifować. Czasem jednak świadomość istnienia pewnych kwestii jest ważniejsza niż całkowita nie wiedza.