Aktualności
Responsive Web Design
Responsive Web Design jest to taki sposób projektowania i programowania serwisów internetowych, który pozwala na czytelne wyświetlenie strony na każdym urządzeniu: od komórki po komputer stacjonarny. W wielu serwisach jednak wciąż go nie używa. Zamiast tego na małym ekranie komórki wyświetlana jest albo oryginalna strona (bardzo pomniejszona) albo wersja przygotowana specjalnie dla telefonów, często tak uproszczona, ze wręcz tragiczna w obsłudze.
Zaplanowanie layoutu
Responsive Web Design często jest przedstawiany jako coś trudnego, czym mogą się zająć bardziej wtajemniczeni koderzy, tymczasem całość jest bardzo prosta, trzeba tylko już na etapie projektowania przewidzieć zmianę wielkości ekranu. Wiąże się to niestety z koniecznością uproszczenia layoutu i pozbycia się wszelkich wodotrysków, bo "zabawa" z dopasowywaniem rozbudowanej grafiki często jest po prostu nieopłacalne. Zresztą wodotryski są już od dawna niemodne i niepolecane z wielu innych powodów a strony wykonane w technologii Flash odpadają w przedbiegach. Wiele serwisów RWD ma wręcz minimalistyczny layout. Lepiej też zrezygnować z rozwijanych menu po najechaniu myszą - na ekranach dotykowych nie zadziała to dobrze.
Arkusz stylów
Samo oprogramowanie serwisu sprowadza się w zasadzie do odpowiedniego przygotowania pliku CSS w którym będzie opisany wygląd dla różnych rozdzielczości ekranu. We wszystkich przykładach, jakie widziałem, przedstawiane były kompletne style dla każdego zakresu wielkości. Tymczasem, żeby zmniejszyć wielkość pliku CSS, wystarczy przygotować standardowy arkusz dla komputera stacjonarnego z dużym monitorem a następnie nadpisać odpowiednie własności klas dla mniejszych ekranów. Jest jeszcze jeden plus takiego rozwiązania. Starsze przeglądarki Internet Explorer nie obsługują rozszerzenia @media więc wczytają po prostu standardowy szablon (a jako że na urządzeniach mobilnych raczej nie używa się MSIE, wiec tu nie będzie problemu).
Szerokości kolumn
Warto też zawczasu zaplanować i zaprojektować odpowiednie szerokości kolumn. Można to zrobić na 3 sposoby:
- kolumna tekstu zawsze dopasowująca się do szerokości ekranu - moim zdaniem pomysł trochę chybiony, bo przy monitorach panoramicznych linia tekstu będzie bardzo długa i niewygodna w czytaniu,
- zawsze stała szerokość kolumn (zależnie od rozdzielczości) - fajny patent gdy jest dużo elementów, które nie powinny swobodnie "pływać" tylko znajdować się w konkretnym miejscu,
- stała szerokość kolumny na dużych rodzielczościach i dopasowanie do ekranu na mniejszych - moim zdaniem rozwiązanie najlepsze, chociaż bywa, że nie zawsze się sprawdzi - zależy to od charakteru strony.
Po stronie serwera
Częstym problemem związanym z Responsive Web Design jest duża ilość danych przesyłanych do przeglądarki, chociaż często nie będą w ogóle wyświetlane. Można też przygotować niewielką funcję działającą na serwerze i sprawdzającą, z jakiego urządzenia przeglądana jest strona, dzięki temu już na tym etapie można pominąć wysyłanie części danych.
Kilka prostych kroków do przygotowania strony RWD
- zaprojektowanie skalowalnego layoutu, co się wiąże z ograniczeniem grafik i wodotrysków,
- umieszczenie w sekcji head metadanych:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />, co oznacza, że strona nie będzie się skalować do szerokości ekranu, - przygotowanie pliku CSS, w którym w rozszerzeniu @media będą opisane style dla odpowiednich zakresów rozdzielczości,
- obsługa wysyłania danych jeszcze po stronie serwera, co pozwoli zmniejszyć ilość przesyłanych danych w przypadków komórek,
- bycie elastycznym, bo to się zawsze przydaje.
