Logo

Blog o JavaScript, jQuery, HTML5, CSS3 i 4. Porady jak pisać dobrej jakości kod, tutoriale, nowości.

Responsive web design - elastyczne strony

  • 01.12.2011 15:30:16
  • CSS
  • 11

Pamiętacie czasy w których rozdzielczość 800x600 pikseli wiodła prym? Dzisiaj to już przeszłość, ale ze względu na pojawienie się innych urządzeń za pomocą których można przeglądać Internet temat wraca jak bumerang. Problem w tym, że tych rozdzielczości jest tak wiele, że projektanci dostrzegli w tym problem.

Problem

Najlepiej będzie posłużyć się przykładem jaki pokazał Ethan Marcotte w swojej książce pt. "Responsive Web Design". Ethat posłużył się malarzem, który musi stworzyć swoje dzieło na płótnie. Jest mały szkopuł, to płutno może mieć różne rozmiary - począwszy od małych karteczek, przez kartki z zeszytu i skończywszy na wielkich płótnach do wieszania na ścianach.

Podobny problem jest dzisiaj ze stronami internetowymi. Laptopy mają różne rozdzielczości, do tego urządzenia mobilne takie jak smartfony (telefony z dotykalskimi ekranami), tablety a nawet konsole do gier!

Jak wielki jest to problem?

Punkt widzenia zależy od punktu siedzenia.

Jedni właściciele stron (blogerzy, sklepikarze, właściciele mniejszych lub większych firm) są mniej świadomi, drudzy zaś wiedzą w czym rzecz. Główne pytanie jakie należy sobie zadać to: czy to się opłaca? Wiadomo, że inaczej na ten problem będzie patrzył właściciel popularnego sklepu, który generuje dużo zamówień i gra o mobilnych klientów może się opłacić. Strony firmowe to też inna bajka. Jedni właściciele będą chcieli iść z biegem czasu (trendami) a innym będzie - mówiąc kolokwialnie - zwisać.

Na pewno ten trend można zauważyć na stronach osób i firm związanych z naszą branżą. Jednak, jak się okaże w dalszej części wpisu - nie tylko :).

Dzisiaj...

Dzisiaj w większości przypadków, jeżeli pojawiają się wersje mobilne stron to zazwyczaj są one tworzone pod specjalnymi adresami. Subdomeny np. m.strona.pl czy nawet katalogi strona.pl/mobile/artykul/2234/... itd. Problem w tym, że takie rozwiązania nie są najlepsze, nie dość, że trzeba tworzyć specjalny kod strony (front-end i backend) to jeszcze dochodzi kwestia pod wyszukiwarki (duplikowanie treści).

Wiem. Nie zawsze się da, ale czy to naprawdę takie trudne/ciężkie?

Media Queries i CSS3

Jeszcze nie tak dawno, tworzenie alternatywnych stylów CSS dzieliło się na:

Dzięki CSS3 ten wachlarz staje się znacznie większy i możemy tworzyć style ze względu na rozdzielczość ekranu a wszystko za sprawą jednego polecenia przy dołączania stylów w sekcji head:

media="screen and (min-width: XXX) and (min-height: YYY)"

Gdzie XXX i YYY to odpowiednio minimalna szerokość i minimalna wysokość. Z tego co zauważyłem, to min-height rzadko się stosuje. Można jeszcze określać maksymalne szerokości:

media="screen and (max-width: XXX) and (max-height: YYY)"

Jeżeli ktoś woli mieć wszystko w jednym miejscu (pliku) to może zrobić to w następujący sposób;

@media all and (max-width: XXX) and (min-width: YYY) {
   selektor {
      /* ... */
   }
   /* ... */
}

Proces tworzenia elastycznej, skalowalnej i gibkiej strony

Powyższy obrazek przedstawia oficjalną stronę Baracka Obamy, która jest gibka - dostosowuje się do szerokości urządzenia (swoją drogą polecam zajrzeć do źródeł stylów CSS). Dodatkowo na obrazku umieściłem strzałki obrazujący poprawny proces projektowania strony przez grafika i kodera.

Jak widać, grafik zaczyna od największej wersji do najmniejszej. Koder zaś tworzy w odwrotnej kolejności.

Czy warto?

Wiele osób zaraz zacznie lamentować czy warto zawrać sobie tym głowę. Przecież tworzy się tyle dodatkowego kodu css, odpowiednie obrazki, trzeba tworzyć elastyczne marginesy i odstępy. Pracy jest dużo. Wg mnie warto zatroszczyć się o każdego użytkwonika. Stworzyć mu odpowiedni komfort poruszania się po stronie. Po co użytkownik ma coś powiększać, zmniejszać by przeczytać czy nawet kupić?

Zdaję sobie sprawę, że przerabianie istniejącej strony na bardziej elastyczną to może być duży koszt, ale nie popadajmy w skrajności. Dla chcącego nic trudnego. Po za tym, podczas tworzenia zupełnie nowej strony warto zaznaczyć, że strona będzie elastyczna i grafik na pewno weźmie to pod uwagę - chyba, że grafik nas nie lubi :P.

Jeszcze jedno: książka, galerie css

Gdyby ktoś chciał się wgłębić w ten temat na poważnie, to polecam przeczytać książkę Ethana Marcotte'a (na dniach postaram napisać się recenzję) oraz przeglądać co jakiś czas galerię elastycznych stron - mediaqueri.es. Na mediaquesri.es, nie dość, że jest to miejsce w którym można znaleźć inspirację, to można podejrzeć najlepszyć w akcji :).

Autor wpisu

Piotr cichosz (shpyo) — Front-end developer Twórca kilku serwisów internetowych oraz autor kilku blogów. Pasjonat nowych, otwartych technologii.

Komentarze

Gavatar Winston_Wolf

01.12.2011 Winston_Wolf

..jeżeli przyjmiemy zasadę 'mobile first' dodatkowej pracy wcale nie jest wiele ..

Gavatar Konrad

01.12.2011 Konrad

Powiedzmy sobie szczerze, że firmom w Polsce się to nie opłaca na obecną chwilę. Musiałby zapłącić grafikowi i koderowi więcej, a zysk jest znacząco mniejszy.

Inaczej ma sie sytuacja na Zachodzie, gdzie dojeżdzając do pracy pociągiem, co 4 osoba surfuje na iPadzie lub czyta coś na Kindle, a każdy ma telefon z dotykowym wyświetlaczem i przegląda internet lub maila. Czy ktoś takie coś zaobserwował w Polsce? Bo ja nie.

Poza tym, kupowanie w sklepie na telefonie? Naprawdę? Najpierw trzeba się logować do banku, a później wpisać kod potwierdzający aby zatwierdzić przelew albo jeszcze najlepiej wyciągnać kartę i przepisać numerki do formularza. Ktoś w to wierzy?

Gavatar procek

01.12.2011 procek

Zgadzam się po części z przedmówcą, ale dorzucę jeszcze coś od siebie: Nie każdy layout da się przerobić na urządzenia mobilne (często istnieją sytuację, że strona ma zadany width i height wprost, "bo ma się mieścić na jednej planszy" - jak mawiają klienci) inna sprawa do rozbudowane layouty skryptów sklepów. Czy ktoś miałby tyle nerwów, aby zrobić elastyczną skórkę do MAGNETO? Pewnie, że się da, ale czy to się opłaca? Zadowolimy 0,5% użytkowników, a właściciel wyłoży za to więcej niż za poprzednią wersję strony wraz z zapleczem? Jasne, że z punktu widzenia kodera to się opłaca, bo jest coś do zrobienia, ale patrząc na jego klienta jest dokładnie odwrotnie (Amerykę odkryłem :D ).
Inna sprawa, że niektóre strony powinny być wręcz dostępne dla urządzeń mobilnych: strony firmowe, strony urzędów itp.

Gavatar shpyo

02.12.2011 shpyo

@Kamil: może się nie opłaca, ale mimo wszystko warto rozważyć to. Co do kupowania przez telefon, to opłaty same w sobie mogą być problematyczne, ale przecież zawsze można opłacić zakupiony towar gdy będziemy przy komputerze.
@procek: można postarać się przekonać klienta, może to być ciężkie, ale wychodzę z założenia, że z wyedukowanym klientem lepiej się współpracuje :)

Gavatar Konrad

02.12.2011 Konrad

@shpyo: Domyślam się, że pisząc "Kamil" miałeś na myśli "Konrad". No właśnie to rozważyłem. Koszt tego jest wyższy niż zysk — nie robimy tego. Radzę poczytać trochę o ekonomii i wtedy będziesz rozumiał podejście klienta.
Z mojego doświadzenia jak wykonywałem zlecenia dla klientów odnośnie iPada to zazwyczaj byli to zagorzali fani tego urzadzenia. Więc nie kierowali się względami ekonomicznymi. Nie musze chyba dodawać, że ich liczba była znikoma.

Można opłacić później? Jak todąd spotkałem się z tym, że zawsze się płaci od razu przy zamówieniu, albo można wybrać opcję za pobraniem.

Gavatar budi

07.12.2011 budi

Szczerze powiem, że nie zawracał bym sobie głowy takim "uelastycznianiem" strony. Za dużo roboty i za mało korzyści. Może za kilka lat się to zmieni.

Gavatar Milena

11.12.2011 Milena

Jeśli chodzi o wszelakie czytniki ekranu (vide iPad) to jeśli wirtyna zrobiona jest dobrze pod destopy i laptopy można wprowadzić tylko niewielkie zmiany kosmetyczne zeby wszystko ładnie się wyświetlało i było nieco lżejsze. Jestem zwolenniczką nie-cofania-sieci do czasów sprzed 10 lat, dzisiejsze urządzenia nie są ułomne, a prędkości, nawet mobilne, znacznie szybsze niż modemowe.

+ dochodzą jeszcze CMSy coraz częściej używane, które mają:
1) mobilne wsparcie
2) skórki na licencji GPL (w tym i takie holdujace zasadom responsive design)
3) skórki typowo mobilne (bywa że rownież na licencji GPL)
Co znacznie upraszcza pracę własną i wkład własny. Być może jestem już nieco zbyt cyniczna i wygodna, natomiast jeśli coś można zrobić szybciej... Lubię to robić szybciej.

Współpraca z Klientami to osobna bajka. Z jednej strony oni maja prawo się nie znać i mieć własne przekonania. Gdyby się znali nie prosiliby nas o pomoc.
Z innej natomiast często tez dysponują ograniczonym budżetem, więc często gęsto tną funkcjonalność. Jeśli Klient nie daje się przekonać mozna nauczyć go jak monitorować ruch z mobilnych urządzeń (choćby w Analyticsie), zauważy, ze ruch jest duży - być może wpadnie drugie zlecenie odświeżenia strony.

Swoją drogą jako posiadacza tabletu (z którego produkuję ten komentarz) i smartphona często przeglądam strony z tych dwóch urządzeń opatrzonych logo jabłka. To co bardziej mnie wkurza niż brak strony mobilnej to flash do krytycznych elementów witryn bez alernatywy. Dla przykładu formularz otwierania konta w Alior Banku jest dla mnie z tych urządzeń zdecydowanie niedostępny.

A jeśli chodzi o Magento, To są darmowe mobilne skórki. Idealne jako startety ;) o ile zgadzam sie, ze elastyczna skórka może być problemem zazwyczaj nie wartym czasu, o tyle alternatywa z osobna subdomeną i skórką nie zawsze bywa trudniejsza w realizacji.
Lubię powtarzać pewien banał: każde rozwiazanie ma swoje plusy i minusy. Efektywne kodowanie w tym gąszczu to dobranie takiego rozwiązania, zeby było możliwie dobre, możliwie mało czasochłonne, możliwie spełniające założenia funkcjonalne (a wagi zapewne zależą od każdego z nas z osobna).

Gavatar pik

04.01.2012 pik

Stronka Alior banku też dała mi się we znaki na smartfonie. Dawno się tam nie logowałem z poziomu urządzenia mobilnego - mam nadzieję, że już to poprawili. W niektórych przypadkach jednak warto zadbać o tą elastyczność.

Gavatar Krzysiek

21.01.2012 Krzysiek

Na razie na pytanie do klientów, czy chcą wsparcie dla urządzeń mobilnych, odpowiedzi same negatywne. Jest to dodatkowy koszt, który w naszym kochanym kraju z 3 świata, zupełnie się nie opłaca. Warto jednak śledzić te trendy, dla prywatnych projektów i większych aplikacji webowych.

Gavatar dex

23.02.2012 dex

kwestia czasu kiedy bedzie to standardem

Gavatar Kot

05.09.2012 Kot

Wydaje się, że RWD już wkrótce to będzie konieczność. Nie jest to sprawa prosta w przypadku skomplikowanych serwisów. Zresztą nawet gotowe skórki sa najczęściej dość proste. Uruchomienie sklepu internetowego w oparciu o RWD jest skomplikowane (koszyk, rejestracja).

Zapraszam na nasz poradnik o RWD: http://www.aptus.pl/www/porady/responsive_web_design.php

P.S. Wkrótce postarma się opisać nasze boje ze sklepem.

Dodaj komentarz