Otwórz Zamknij Wyszukaj

Responsive Web Design, czyli dlaczego liquid layout już nie wystarczy

18

11 września 2012

Kategorie: Publicystycznie

Dziś mam przyjemność zaprezentować tekst webmasterki Kasi Świderskiej, zaprzyjaźnionej Geek Girl poznanej na GGC, która na przykładzie strony firmowej agencji, w której pracuje, opowie co nieco o Responsive Web Design, filozofii Mobile First i Media Queries. Artykuł ten pierwotnie został opublikowany w dwóch częściach na blogu brandsites.pl. Proszę Państwa, oto najbardziej techniczny wpis na jestem.mobi ;-)

 

Web-developerzy muszą zmienić sposób myślenia o stronie WWW – wygodne korzystanie z Internetu przestało już być domeną desktopów.

Kiedy monitory o rozdzielczości 800×600 zaczęły być powolutku wypierane przez większe układy, fluid layout doskonale się sprawdzał, kiedy nie chcieliśmy ograniczać naszej strony do szerokości 800 pikseli. A potem nagle okazało się, że już nie trzeba… Bo nikt nie używa tak małych monitorów… I wszyscy zaczęliśmy projektować i pisać szersze strony.

I to był błąd w ocenie sytuacji.

Rozdzielczości 800×600, 640×480, 320×240 wracają i to z wielkim hukiem na ekranach netbooków, tabletów, smartfonów i komórek (które mają własne wypasione przeglądarki – zapomnijcie o stronach WAP!).

I teraz użytkownicy chcą korzystać z naszych stron, kupować w naszych sklepach, używać naszych aplikacji, stojąc w kolejce po bułki w osiedlowym sklepiku, siedząc na ławce w parku – tak samo, jak gdyby siedzieli w zaciszu swojego domu przy stacjonarnym komputerze z 21’’ monitorem.

Dlatego dłużej nie można zwlekać! A płynny układ strony nie jest substytutem strony responsywnej.

 

No dobrze. Ale co to właściwie jest Responsive Web Design?

Pierwszy raz pojęcie Responsive Web Design pojawiło sie w artykule Ethana Marcotte w maju 2010 roku. RWD to nowe podejście do projektowania i wdrażania stron. To koncepcja, wg której strona wykonana zgodnie z zasadami RWD jest zoptymalizowana oraz dostępna bez względu na rozmiar urządzenia, na którym jest wyświetlana. Pisząc dostępna, nie mam na myśli tego, że strona się po prostu wyświetli – ona ma mieć nawigację przystosowaną do rozmiaru ekranu, ma być czytelna i ma mieć scroll’owanie ograniczone do jednej osi: góra-dół. Korzystanie z takiej strony bez względu na urządzenie na jakim jest wyświetlana, ma być dla użytkownika komfortowe i intuicyjne.

Projektując/wdrażając fluid layout nadal robi się to z nastawieniem na stronę, która będzie przeglądana na monitorze komputera za pomocą myszki. Nie bierze się pod uwagę tego, że strona na komórce będzie obsługiwana palcem, a użytkownik konsoli PS3 będzie się poruszał po niej padem.

Dzisiaj musimy tak naprawdę przewartościować wszystko to, co wiemy o robieniu stron i zacząć robić je inaczej.

 

Po pierwsze – Mobile First!

Strony musimy zacząć projektować od “końca” – od wersji dla urządzeń mobilnych, o małych rozdzielczościach, których używa się inaczej – w innym środowisku – niż standardowych desktopów. Strony www to już nie jest sam look – w erze wszechobecnej mobilności mamy już prawdziwe look&feel. Większość smartfonów ma już wyłącznie dotykowe ekrany.

Nie możemy władować wszystkiego co ma znaleźć się na stronie do wersji mobilnej – musimy zacząć od prawidłowej hierarchizacji danych. Na urządzeniach mobilnych powinny wyświetlać się niezbędne, nierozpraszające elementy, które w sposób prosty i szybki pozwolą wykonać użytkownikowi czynność lub dotrzeć do potrzebnych informacji.

 

Przykład nr 1:

Stopka naszej firmowej strony i tego bloga zmienia się w zależności od rozdzielczości urządzenia, na którym jest wyświetlana strona. Bo o ile na komputerze czy nawet tablecie, wypełnienie formularza kontaktowego nie jest problemem, to zrobienie tego na małym ekranie bez fizycznej klawiatury jest mocno upierdliwe. Dlatego zamiast formularza kontaktowego, czy drugiego (małego) menu wyświetla się wielki numer telefonu, który aż się prosi, żeby go dotknąć i zadzwonić – bo przecież podstawową funkcją telefonu komórkowego jest dzwonienie.

Screen#1 – Stopka strony brandsites.pl na rozdzielczości większej niż 960 px.

Screen#2 – Stopka strony brandsites.pl na rozdzielczości mniejszej niż 640 px.

 

Kontekst

Projektując kiedyś strony nie zastanawialiśmy się, czy ktoś będzie jej używał w ekstremalnych warunkach – to było proste, strony przeglądało się na komputerze, w domu, w pracy, w kafejce internetowej. (Pomijam tutaj celowo takie kwestie jak dostępności stron dla niewidomych, bo jest bardzo obszerny temat – na zupełnie nowy wpis.)

Było łatwiej.

Bo teraz przecież nie wiemy, z jakiego urządzenia skorzysta nasz użytkownik i gdzie, i kiedy będzie to robił. Czy w tramwaju, czy w McDonaldzie, czy na bardzo głośnej imprezie. A skoro tego nie możemy przewidzieć, musimy się postarać żeby korzystanie z naszego produktu, kiedy ma się bardzo zziębnięte i zdrętwiałe palce, było nie tylko jak najbardziej możliwe ale też jak najmniej upierdliwe.
Trzeba teraz pamiętać, że palec jest mniej precyzyjny niż kursor myszki, czy rysik przy tablecie. To znaczy, że nie możemy zafundować użytkownikowi ściśniętego, małego menu, gdzie szansa trafienia we właściwy link będzie równa zeru.

 

Przykład nr 2:

Jeśli spojrzycie na naszą firmową stronę zauważycie, że większość kluczowych przycisków i linków ma na tyle dużą powierzchnię, żeby bez trudu dało się w nie trafić palcem przeglądając stronę. Bez trudu można przejrzeć wszystkie screeny projektów w sliderach, dzięki temu że projektując naszą stronę wzięliśmy pod uwagę to, że palec jest mniej precyzyjny – stąd duże przyciski, które zachęcają żeby ich dotknąć.

 

Dlaczego projektujemy strony w pierwszej kolejności dla urządzeń mobilnych?

Łatwiej jest dodawać elementy w miarę rozszerzania się strony, niż ukrywać przy zmniejszaniu.

Wiem – z technicznego punktu widzenia, możecie zarzucić mi, że piszę bzdury. Wróćmy jednak na chwilę do hierarchizacji danych – do niezbędnej w procesie tworzenia responsywnego modelu strony architektury informacji. Zaczynając od małego ekranu jest nam łatwiej określić, jakie elementy są niezbędne i jakie informacje są kluczowe, żeby musiały być widoczne na stronie w wersji mobilnej.

Z kolei zaczynając od dużej wersji, gdzie ładujemy wszystko – jest nam potem trudniej zrezygnować z części rzeczy i ukrywać je – pisałam o tym w kontekście “syndromu wielkiego tekstu” w roku 2011, kiedy nagle wszystkie informacje na stronie stają się tak ważne, że trzeba je napisać wielkimi literami na czerwono. Myślę, że identyczny problem pojawia się, kiedy zaczynamy projektować www od dużej wersji “nie, to jest zbyt ważne, żebyśmy mogli z tego zrezygnować w wersji mobilnej” lub “jak to nie wyróżnić? To też musi być bardzo widoczne!”.

Mały ekran urządzenia wymusza na nas określenie, które informacje na stronie są tak znaczące, że muszą znaleźć się na tej niewielkiej dostępnej przestrzeni.

 

Jak się zabrać za Responsive Web Design od strony technicznej

Udało się nam ustalić priorytety dla danych na stronie. Teraz trzeba ustalić, czy zmiana pomiędzy poszczególnymi designami będzie się odbywała płynnie (tak – użyjemy liquid layout i wartości procentowych i jednostek relatywnych jak em) – czy tak jak na naszej firmowej stronie, są ustalone trzy zakresy i dla nich jest ustawiany nowy layout. A tak poza tym to wdrażamy stronę tak jak zawsze.

Dodajemy dodatkowy meta tag, żeby mobilne przeglądarki nie próbowały przeskalować nam naszej strony:

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

Media Queries

W CSS3 dodano media queries i to znacznie bardziej ułatwiło pisanie stron www pod różne rozmiary okna przeglądarki. Dzięki media queries możemy serwować nowe style w zależności od tego na jakiej rozdzielczości jest wyświetlana nasza strona.

W naszym pliku CSS wstawiamy:

@media screen and (max-width: 959px) and (min-width: 640px) { … }

i między nawiasami klamrowymi wpisujemy style, jakie mają być użyte na stronie wyświetlonej na ekranie, którego rozdzielczość jest między 959px a 640px. Możemy w media queries ustawić też orientację urządzenia – landscape lub portrait:

@media (orientation: portrait) { … }

Więcej informacji można znaleźć na stronie dokumentacji media queries.

Pamiętaj o grafikach – tam gdzie się da używaj CSS sprites. Zdjęcia też rób responsywne:

img {max-width: 100%}

Więcej o płynnie zmieniających rozmiar obrazach zajdziecie w artykule Fluid Images.

Jeśli używacie sliderów na stronie – to polecam wybrać skrypt FlexSlider, który jest bardzo elastyczny i bezproblemowo da się go używać na responsywnych stronach (korzystamy z niego na naszej firmowej stronie).

 

Kilka dobrych rad na koniec

  1. Unikaj popupów, otwierania linków w nowej zakładce i wszelkich efektów typu light box na stronie w wersji na małych rodzielczościach (telefony, smartphony).
  2. Pisz poprawnie i zgodnie ze standardami. Trzymanie się wytycznych daje Ci większą gwarancję, że Twoja strona będzie się poprawnie wyświetlać w bardzo różnych i egzotycznych przeglądarkach.
  3. Zrezygnuj z Flasha. Flash nie jest obsługiwany przez urządzenia mobilne Appla. Kilka dni temu Adobe ogłosiło, że najnowszy plugin Flash dla Androida będzie też ostatnim. W chwili obecnej większość efektów uzyskiwanych za pomocą Flasha, można doskonale zastąpić przez trio: HTML5, CSS3 i JavaScript (w szczególności biblioteki JS takie jak jQuery i MooTools).
  4. Uważaj na skrypty JS. Nie każdy skrypt zadziała w każdej przeglądarce. Na przykład popularny Cufon nie działa na Operze Mobile.
  5. Zapomnij o position: fixed. To też nie działa w mobilnych przeglądarkach.

 

A dlaczego by nie zrobić osobno strony mobilnej pod innym adresem?

Wbrew pozorom wdrożenie dobrze zaprojektowanego responsywnego layoutu zajmuje mniej czasu, niż zrobienie osobnej strony dla urządzeń mobilnych. I czy będziemy robić dla każdego urządzenia nową wersję? Masz tablet? Wejdź na tablet.mojastrona.com! Komórka – mobile.mojastrona.com.

To się mija z celem – strona powinna być zaprojektowana i wdrożona raz a porządnie, zgodnie z koncepcją i założeniami Responsive Web Design. Od teraz każda nowa strona to zarazem mobilna strona.

Jeśli spędzimy mniej czasu przy responsywnym niż na zrobienie osobnej strony, to i koszt wykonania takiej strony będzie mniejszy.
Owszem, będzie drożej niż w przypadku standardowej strony www, ale ten koszt się zwraca – choćby przez to, że nasz klient nie straci swoich bardzo mobilnych klientów.

 

Nie ma ucieczki przed RWD

Jak mówi stare chińskie przysłowie “kto stoi w miejscu, ten się cofa” – jeśli tu i teraz nie zaczniemy wdrażać stron responsywnych, czeka nas zwyczajna klęska. Kiedy raz wypadniemy z nurtu, ciężko będzie nam wrócić na właściwe tory w naszej branży.

Era mobilności i pośpiechu niejako wymusza na nas dostosowanie się (a w zasadzie dostosowanie naszych stron i aplikacji) do wciąż zmieniającej się powierzchni, na której są wyświetlane.

 

Źródła i przydatne linki:

Przykłady:

Narzędzia:

Masz chwilę? Przeczytaj jeszcze:

  • Maciej

    Dobry artykul, ale przydalby sie (tutaj lub na stronie autorki) case study dla strony z duza iloscia tresci, by poznac zastosowanie w praktyce.

    • @bb4739e910537ab57e50ab423764f142:disqus – taki case study będzie :) tylko, że już jako całkiem osobny wpis.

  • Nie chcę narzekać ale dlaczego ta strona jeszcze nie jest w RWD?

    • Jest w RWD :) Zjedź pod stopkę bloga, po lewej jest: „Switch to our mobile site”

  • misiek

    Bez przesady. Moze zacznijcie robic strony na zegarki o rozdziałce 100px na 60px? Z internetu w smartfonach w Polsce korzysta się głównie wtedy gdy sie jest w galerii handlowej bo to wciąż droga impreza. Nie widze grupy docelowej – nowoczesnych mmłodych 30 latków którzy korzystaja z przeglądarki w komórce a nie na przykład w laptopie czy tablceie który ma juz standradowe webowe rozdzielczosci. Komórki z małymi rozdziałkami to powoli przeszłosć, wiekszosc ma w poziomie 800px a niedługo beda miały 1024 i strony beda robione pod minimum 1024 i tyle. Co do flasha, to nie zginie, bedzie wykorzystywany do gier, w internecie bedzie go mniej. Tekst typu tego ze ne krozystajcie z flasha bo Apple go nie ma to raczej powinien brzmiec nie kupujcie Apple bo nie ma obsługi flasha.

    • Maciek

      Bzdura. Bardzo słaby argument, na fakt, że komórki mają coraz większe rozdzielczości i strony robione pod < 960px będą ładnie wyświetlać na nich. Producenci upychają większą liczbę pikseli na cal, ale aby tekst był na nich dobrze widoczyny stosuja SKALOWANIE całości. Więc masz rozdzielczość w telefonie 1024 w szerokości, ale wszystko jest skalowane. Więc tutaj RWD sprawdza się świetnie.

      • No nie wiem, czy strona robiona pod 960 px będzie dobrze wyświetlać się na smartfonie nawet z rozdzielczością 960p. Serio chciałbyś na takim smartfonie zobaczyć stronę z pełnym, desktopowym menu z lewej czy z prawej strony? :P

        • rozdzielczość to nie jedyny atrybut media-queries, jaki można wykorzystać przy projektowaniu responsywnych stron.

          • A czy ja to sugerowałem? :)
            Po prostu piszę, że samo zrobienie strony pod < 960 px nie wystarczy.

  • Katarzyna

    Czym jest RWD na przykładzie bloga firmowego http://www.youtube.com/watch?feature=player_embedded&v=HpjJbdbLtuE

  • Pingback: Responsive Web Design, czyli dlaczego liquid la...()

  • Darek Darecki

    RWD oczywiście jak najbardziej tak, ale moim zdaniem tylko dla prostych stron typu blog wizytówka firmowa, etc.. w przypadku sklepów, portali aukcyjnych czy ogłoszeniowych itd… nie ma sensu ładować się w RWD tylko stworzyć aplikację pod konkretne OS.

    • Ojojoj, „APLIKACJĘ”?? Raczej stronę dedykowaną. Aplikacja to dopiero jest wyzwanie :)

  • Pingback: Rozmiar strony www? | pracownia grafiki()

  • Pingback: Rozmiar strony www? | pracownia grafiki()

  • Pingback: Rozmiar strony www? | pracownia grafiki()

  • Na dzień dzisiejszy artykuł nie aktualny – odsyłacie do http://www.brandsites.pl/ a tam jakaś zapleczówka.

jestem.mobi

Zamknij

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close