Responsywna typografia, media queries i parallax scrolling
Skopiuj linkStrony dla urządzeń mobilnych to brzmi jak coś z 2011 roku, kiedy granie w Angry Birds było hipsterską niszą. Obecnie mamy pełne spektrum urządzeń do czytania internetu: od małych zegarków po ekrany wielkości kamienicy. Na szczęście zmieniły się też przeglądarki i da się nad tym zapanować używając HTML5/CSS3/JS
Ze względu na mnóstwo rozmiarów ekranów: zarówno fizycznych, jak i w pikselach, praktycznie nie sposób zrobić wersji strony internetowej dla każdego z nich.
Na szczęście jednocześnie doszliśmy do momentu, w którym wszystkie ważne przeglądarki internetowe wystarczająco dobrze interpretują kod w standardzie HTML5/CSS3 a także mają bardzo wydajne silniki JavaScript. W listopadzie 2013 te „wszystkomające” przeglądarki stanowiły 99,2% przeglądarek łączących się z polskimi witrynami.
Dlatego można już nie tylko teoretycznie, ale też praktycznie bardzo wiele zdziałać na polu responsywności. Przygotowałem stronę, która z jednej strony testuje, jak używane przez ciebie w danym momencie urządzenie jest widziane przez media queries oraz javascript a z drugiej pokazuje, jak tego można użyć w praktyce.
Warto zwrócić zwłaszcza uwagę na tzw. responsywną typografię, czyli dostosowywanie wielkości liter do aktualnego ekranu. Największy problem z nią jest taki, że aby tekst był czytelny, trzeba uwzględnić nie tylko rozmiar ekranu fizyczny, jego rozdzielczość ale też typową odległość danego typu urządzenia od oka czytelnika. Chodzi o to, żeby na koniec odbicie litery na siatkówce oka internauty mieściło się w odpowiednim zakresie.
Tło przesuwające się metodą parallax scrolling dorzuciłem jako bardzo popularny obecnie gadżet na stronie. Warto pamiętać, że jest to tylko gadżet i szybko stanie się stary i ograny, podobnie jak 10 lat temu gradienty i ,,litery odbijające się w wodzie” a 5 lat temu skeumorfizm czyli strony wyglądające jak stare urządzenia ze skóry, drewna czy metalu.