SEMINARIUM Dwie perspektywy w projektowaniu na Responsive Web Design (User experience i webdeveloper)

Transkrypt

1 Katalizator Innowacji - usługi doradcze dla biznesu realizowane w modelu audytu benchmarkowego. Projekt współfinansowany przez Unię Europejską z Europejskiego Funduszu Rozwoju Regionalnego. Dotacje na innowacje. Inwestujemy w waszą przyszłość. SEMINARIUM Dwie perspektywy w projektowaniu na Responsive Web Design (User experience i webdeveloper) 19 listopada 2012, Warszawa

2 Kim jesteśmy Kaśka Kozikowska Head of HCI/UX Marek Kaczkowski Front-end Developer

3 Trochę teorii RWD RESPONSIVE WEB DESIGN

4 Klient w sieci

5 Co to jest Responsive Web Design? Layout Grafika Urządzenia

6 Co to jest Responsive Web Design? Layout: Fluid grid 320 pikseli 768 pikseli 1024 pikseli

7 Co to jest Responsive Web Design? Grafika: adaptatywna 320 pikseli 768 pikseli 1024 pikseli

8 Co to jest Responsive Web Design? Urządzenia: Media queries

9 Dlaczego warto wykorzystać RWD? Platforma jest niezależna od urządzenia, które wyświetla stronę. Daje możliwość dostosowania się do urządzeń, które nie są dostępne jeszcze na rynku. Umożliwia redukcję kosztów utrzymania wersji mobilnych platform. Zwiększa łatwość zarządzania treścią serwisu i utrzymania spójności. RWD nie zadziała w przypadku wykorzystywania w serwisie skomplikowanych animacji. RWD nie zadziała w większości starszych urządzeń typu feature phone, a także wykorzystujących przeglądarkę IE7 (ok. 4% użytkowników). Proces testowania jest żmudny i wymaga dostępu do różnych urządzeń. Dopasowuje sposób wyświetlanych treści do kontekstu użycia. Za pomocą HTML 5 i CSS3 można znacznie zredukować niezbędny transfer na pobranie strony.

10 Podejście standardowe MOBILE LAST

11 Mobile last Analiza cele biznesowe cele klienta Projektowanie UX architektura informacji prototypy klikalny, ale nie skalowalny Projektowanie grafiki prace w Photoshopie Kodowanie szablony html

12 Mobile last Analiza cele biznesowe cele klienta Projektowanie UX architektura informacji prototypy klikalny, ale nie skalowalny Projektowanie grafiki prace w Photoshopie Kodowanie szablony html

13 Mobile last Analiza cele biznesowe cele klienta Projektowanie UX architektura informacji prototypy klikalny, ale nie skalowalny Projektowanie grafiki prace w Photoshopie Kodowanie szablony html

14 Mobile last czego się nauczyliśmy W procesie projektowym RWD ważniejsze jest jak strona się zachowuje. Tworząc projekty graficzne przed skalowalnym prototypem html owym i wprowadzając poprawki na gotowych szablonach wydłużamy proces i zwiększamy koszt. Tracimy kontrolę nad spójnością elementów strony. Projekty stworzone w Photoshopie nie można przełożyć 1:1 do szablonu RWD. Powinniśmy tworzyć strony złożone z modułów. Warto wykorzystywać Adobe Edge w procesie tworzenia szablonów RWD.

15 Mały przewrót kopernikański MOBILE FIRST

16 Wyobraźcie sobie

17 że zaczynamy projektowanie od wersji mobilnej html skalowalny szablon gotowy do testowania na różnych urządzeniach JESZCZE BEZ GRAFIKI Kto jest klientem i jakie są jego cele? Zaczynamy od interfejsu urządzenia mobilnego Założone wcześniej wielkości ekranów.

18 że nie dostajecie klasycznych projektów graficznych Moodboard Breakpoints

19 że akceptujecie działające szablony html

20 Dlaczego warto eksperymentować z mobile first responsive web design? Strategiczne podejście, które wychodzi od kluczowych potrzeb użytkownika i celów biznesowych, co umożliwia ich optymalną realizację niezależnie od platformy. Jason Grigsby pokazał, że 60% stron*, które przeanalizował jest mniejsza od wersji desktopowej o mniej niż 10%. Podejście mobile first narzuca kodowanie lżejszych strona na urządzenia mobilne. W przypadku wyjścia od skalowanych prototypów mamy możliwość testowania szablonów na docelowych urządzeniach już na etapie prototypów. *

21 DZIĘKUJEMY