Dzisiaj jest sobota, 21 października 2017
Ile za zlecenie czyli jak wycenić własną pracę?Historia mojego... sukcesu?Dlaczego jesteś głupi, chory i biedny?
Responsive Web Design

Responsive Web Design

sobota, 2012-12-084304tutoriale, internet

Grafika na baner pochodzi z serwisu Fotolia.pl

O RWD napisano już megabajty tekstów, w końcu istnieje i jest stosowane od kilku lat. Jako że grafoman ze mnie niezgorszy, dodam swoje trzy grosze i zwłaszcza że moje podejście do wielu spraw bywa nietypowe :)

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 (między innymi w niniejszym blogu, ale jak czas pozwoli to po nowym roku się to zmieni). 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 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, bo „zabawa” z dopasowywaniem rozbudowanej i dopieszczonej grafiki często jest po prostu nieopłacalne. Zauważcie, że wiele serwisów RWD ma wręcz minimalistyczny layout. Lepiej też zrezygnować z rozwijanych menu po najechaniu myszą - na ekranach dotykowych jest to bez sensu. Także odświeżając moją stronę ad3.eu uprościłem maksymalnie design.

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 wielu 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 MSIE nie obsługują rozszerzenia @media więc wczytają po prostu standardowy szablon (a jako że na urządzeniach mobilnych nie używa się MSIE, wiec tu nie będzie problemu).

Szerokości kolumn

Warto też zawczasu zaplanować i zaprojektować szerokości kolumn. Można to zrobić na 3 sposoby:

  1. kolumna tekstu zawsze dopasowująca się do szerokości ekranu - moim zdaniem pomysł trochę chybiony, bo czytanie tekstu na dużym monitorze będzie udręką,
  2. zawsze stała szerokość kolumn (zależnie od rozdzielczości) - tu jednak często pojawiają się zbędne marginesy na mniejszych ekranach, gdzie już dałoby się spokojnie czytać "od deski do deski",
  3. 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 też można

Częstym problemem poruszanym w związku z RWD jest duża ilość danych przesyłanych do przeglądarki, chociaż często nie będą w ogóle wyświetlane. Ja to rozwiązałem w ten sposób, że po stronie serwera mam metodę sprawdzającą czy strona jest przeglądana na komórce czy nie. Jeśli tak, to część danych w ogóle nie jest wysyłana do przeglądarki. Szybkie i skuteczne.

Kilka prostych kroków

Nie będzie to tutorial, bo tych jest w internecie sporo, ale może komuś się przyda:

  1. zaprojektowanie layoutu, którą będzie się dało skalować, co się wiąże z ograniczeniem grafik i wodotrysków,
  2. umieszczenie w sekcji head metadanych:
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    - oznacza to, że strona nie będzie się skalować do szerokości ekranu,
  3. przygotowanie pliku CSS, w którym w rozszerzeniu @media będą opisane style dla odpowiednich zakresów rozdzielczości,
  4. w selektorze BODY dodaj wartość: -webkit-text-size-adjust:100%;
  5. obsługa wysyłania danych jeszcze po stronie serwera, co pozwoli zmniejszyć ilość przesyłanych danych w przypadków komórek,
  6. bycie elastycznym, bo to się zawsze przydaje.
Jeśli podoba Ci się wpis,
koniecznie zalajkuj,
skomentuj i zapisz się na