Strona główna » Projektowanie interakcji

Responsive web design – niezbędnik projektanta

3 października 2012 napisała Barbara [ 14 odpowiedzi ] Drukuj wpis

Ciągle jeszcze w  naszym kraju mało projektuje się responsywnych stron internetowych. Czasem wydaje się, że bardziej aktualny jest dylemat „strona mobilna czy aplikacja”, a opcja responsive nie jest w ogóle brana pod uwagę. Natomiast na rynkach zachodnich można mówić już o prawdziwym boomie na projektowanie responsywne. Dlatego też postanowiłam zebrać ciekawe źródła odnoszące się do projektowania adaptujących się stron.

Podstawy responsive web design

Responsive Web Design Ethana Marcotte’a – artykuł na blogu A List Apart, od którego wszystko się zaczęło. To w nim Ethan Marcott ukuł termin RWD, wyłożył karty na stół i rozpoczął ogólnoświatową debatę. Jego świetnym rozszerzeniem będzie książka pod tym samym tytułem.

Książka "Responsive Web Design" E. Marcotte'a

Beginner’s Guide to Responsive Web Design – artykuł dla zupełnych “świeżaków”, z którego można się dowiedzieć czym jest RWD oraz poznać podstawy tworzenia „płynnego” gridu.

Fluid Grid – podstawą RWD jest dobór elastycznego gridu, który zmienia się proporcjonalnie wraz ze zmianą szerokości strony. W tym artykule Ethan Marcotte tłumaczy zasady ustalania zmiennego gridu w projektach responsywnych.

Kiedy stosować i jaką strategię obrać?

Wybór odpowiedniej strategii produktu interaktywnego to ciężki orzech do zgryzienia. Trzeba zawsze rozważyć mocne i słabe strony rozwiązań.

Mobile Websites vs Responsive Design: What’s the right solution for your business? -  niedawno opublikowany świetny artykuł Google, a w nim ciekawe porównanie stron mobilnych oraz responsywnych. I choć odpowiedź na pytanie, „co wybrać” jak zwykle brzmi „to zależy”, to artykuł pomoże w wyborze odpowiedniego kierunku.

 

Strona mobilna czy responsive – zestawienie; opracowanie: Google

Separate Mobile Website Vs. Responsive Website – dylemat strona mobilna czy responsywna rozpatrywana w kontekście wyborów prezydenckich w USA i odmiennych strategii obranych przez czołowych kandydatów.

Which One: Responsive Design, Device Experiences, or RESS? – Dla najbardziej zaawansowanych: artykuł Luke’a Wroblewskiego rozpatrujący trzy strategie. Ciekawy, bo opisuje również RESS – czyli częściowe wykorzystanie responsive do prezentacji treści.

Mity responsive – o tym, że responsive nie jest lekiem na całe zło i trzeba o tym pamiętać.

Proces projektowy i warsztat projektanta

Dla projektantów interakcji tworzenie tego typu produktów interaktywnych to nowe wyzwanie, które zmusza często do przedefiniowania zasad procesu projektowego.

Design Process in the Responsive Age – prezentacja Pon Kattera okiem projektanta UX, w której znajdziecie wiele wskazówek, jak zorganizować proces projektowania rozwiązań responsywnych.

Design Process in the Responsive Age from Pon Kattera

Mobile First – koncepcja procesu projektowania UX, która kładzie ogromny nacisk na urządzenia mobilne. Zdaniem jej autora, Luke’a Wroblewskiego, to właśnie rozpoczęcie projektowania responsywnego od wersji mobile, pozwoli skupić się na kluczowych treściach i funkcjach, a nawet prowadzi do innowacji.

 

Luke Wroblewski, Mobile First

Managing user expectations in responsive design – bardzo ważny i świeży głos w dyskusji o RWD. Porusza tematykę modeli mentalnych użytkowników, którzy od kilku lat przyzwyczajani byli do stron mobilnych i ich pełnych wersji oraz tego, jak można ułatwić naukę interakcji ze stronami responsywnymi.

Responsive Layouts, Responsively Wireframed -  artykuł odnoszący się do samego warsztatu tworzenia prototypów zawierający przykład makiet low-fidelity.

Wzorce projektowe i inspiracje

Galeria stron Media Queries – zbiór świetnych przykładów stron responsywnych. Niezwykle inspirująca galeria dla wszystkich projektantów. Obowiązkowa pozycja na liście!

 

Inspirująca galeria mediaqueri.es

Responsive Patterns – imponująca kolekcja wzorców i modułów niezwykle przydatna przy poznawaniu możliwości tej metody tworzenia witryn.

Przyborniki

Nie ma projektowania bez szkicowania pomysłów i makiet niskiej szczegółowości. W ich stworzeniu na pewno pomogą dedykowane szkicowniki.

Responsive Web Design Sketch Sheets – zestawy szkicowników stworzonych przez Jamesa Brocklehursta oraz Jeremy’ego Alforda.  Niezbędne na wczesnych etapach projektowania responsywnych stron internetowych. Do pobrania i wydrukowania.

Jeden z notatników do wydrukowania

Jeden z notatników do wydrukowania

 

To na początek :) Potem można zabrać się za pogłębianie wiedzy i projektowanie pierwszych rozwiązań.

A może macie już doświadczenia z projektowaniem stron responsywnych?

 

 

Autorka

Barbara Rogoś-Turek

www: http://witflow.com
Managing Partner i Research Director w WitFlow. Trenerka, prelegentka, propagatorka projektowania użytecznego i budzącego pozytywne emocje. Ewangelistka pracy grupowej. Po godzinach wyszukuje przejawy dobrego user experience i designu poruszając się na różowym rowerze po ulicach Wrocławia. Czytaj więcej
Tagi: , , , , ,
  • Korneliusz

    Szkoda że polska branża UX coraz częściej (mówię o blogerach) woli wklejać linki do zagranicznych opracowań zamiast samemu coś skleić. Chodzi mi o to że nie każdy ma tak zaawansowany angielski by bez problemu przeczytać tak specjalistyczne teksty. A małe niezrozumienie choćby jednego wyrazu może wywrócić całość przesłania do góry nogami.

  • Magda

    świetny artykuł :) 

  • Barbara Rogoś-Turek

    @4194d689e9f8667b7595a56fa999ef29:disqus  - odsyłam do artykułów na naszym blogu. Chyba nie ma wątpliwości, że autorskich wypowiedzi tu nie brak. Jeśli chodzi o zestawienia, to pokazują one całe spectrum danego tematu i są świetnym źródłem wiedzy. 
    @Magda – dzięki!

  • http://uxwatch.blogspot.com/ Adrian

    Rynek UX w krajach anglojęzycznych jest dużo większy, niż polski, dlatego też większość materiałów jest tam kierowanych.

    Raczej się to nie zmieni (w końcu więcej ludzi na świecie mówi po angielsku, niż po polsku), więc szlifowanie języka Szekspira jest IMO koniecznością dla osób wiążących swoją karierę z UX

  • Marta

    Bardzo przydatne szkicowniki :)

    Z moich doświadczeń wynika, że projektowanie w RWD to dość czasochłonna sprawa, aczkolwiek korzyści dla wybranych klientów są bardzo duże. Bardzo ciekawą rzeczą do zaobserwowania jest też zmiana priorytetów w poszczególnych rozdziałkach :) Dobrą praktyką jest wyjście od pracy na wersji desctopowej i najmniejszej mobi, a dopiero potem przejście do pozostałych makiet. 

  • Korneliusz

    Ale to jest polski blog pisany po polsku i prowadzony przez Polaków więc rozumiem że jest skierowany dla Polaków a nie dla Angolów.

    Poza tym po co Angole mieliby wchodzić na polski blog o UX po to żeby dostać link do angielskiego materiału. Oni już to mają, nie trzeba im tego kopiować. A skoro już jest to blog dla Polaków to warto aby materiały były po polsku.

  • Korneliusz

     A skoro już mówimy o użyteczności i grupie docelowej produktu. To chciałbym zauważyć że właśnie grupą docelową tego produktu są Polacy. Angielskie treści więc są trudniejsze. Blog jest nieużyteczny :)

  • Lightxp

    Pierwszy link prowadzi do:
    „file:///C:/Users/Basia/Downloads/Ethana%20Marcotta”

  • Barbara Rogoś-Turek

    Dzięki! Już poprawione

  • Grzegorz

    Btw RWD, UXBite niestety nie jest przykładem.

  • http://www.facebook.com/iga.moscichowska Iga Mościchowska

    A skąd wiesz, jak zdefiniowałyśmy sobie grupę docelową? Być może właśnie do niej nie należysz?

  • Korneliusz

    Chcesz mi powiedzieć że grupą docelową tego bloga są Anglicy (inni zagraniczni władający tym językiem)?

    To bardzo ciekawe. Skoro tak to zmieńcie całość bloga na język angielski i wszystko będzie pasowało. Poza tym jakoś nie widzę żeby wpisy komentowali anglojęzyczni.

    O co tak naprawdę mi chodzi? Myślę że to wynika z trzech rzeczy:

    - po pierwsze nie chce Wam się pisać własnych artykułów (oczywiście są takie, ale odnoszę się teraz do tych będących zbiorem linków do zagranicznych treści)
    - po drugie Polacy coraz bardziej zachwycają się tym językiem angielskim, bo angielski jest taki bardziej łał. bardziej pro i w ogóle beautiful. Czasem aż rzygać się chce.- po trzecie chyba nie przemyśleliście do końca do kogo są skierowane Wasze wpisy, i nie wmówisz mi że blog jest dla zagranicznych i oni ten blog odwiedzają częściej niż Polacy. Wychodzicie z założenia że ludzie władają angielskim jak polskim. Otóż oderwij się od rzeczywistości.Osobiście wychodzę z założenia że jak wchodzę na polską stronę bo mnie ona interesuje to chce widzieć teksty po polsku i koniec kropka. Jakbym chciał inglisz kreatif text to bym wszedł na angielskiego bloga i tyle.

  • Stefan

    Dokladnie. Strona na ktorej sie rozpisujecie o zaletach RWD, jest tylko desktopowa. Wiec jak to Korneliusz zauwazyl materialy sa tylko po czesci przetlumaczone i dostawione wlasne przecinki. To tak jakby szewc pisal o produkcji butow ADIDASA na przykladzie starego pantofla z metka firmy.

  • @dev_e_lopment

    zgadzam się całkowicie z Korneliuszem. Polacy zapominają polskiego z lenistwa i czesto artykuły z Angielskiego tłumaczone są na zasadzie „polski mowa, ciężka język” typowy przykład tłumaczenia „media query” jako „zapytania mediów” to nawet nie jest polski. Przestańcie używać Google translate i Bing.