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
Kim jesteśmy Kaśka Kozikowska Head of HCI/UX Marek Kaczkowski Front-end Developer
Trochę teorii RWD RESPONSIVE WEB DESIGN
Klient w sieci
Co to jest Responsive Web Design? Layout Grafika Urządzenia
Co to jest Responsive Web Design? Layout: Fluid grid 320 pikseli 768 pikseli 1024 pikseli
Co to jest Responsive Web Design? Grafika: adaptatywna 320 pikseli 768 pikseli 1024 pikseli
Co to jest Responsive Web Design? Urządzenia: Media queries
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.
Podejście standardowe MOBILE LAST
Mobile last Analiza cele biznesowe cele klienta Projektowanie UX architektura informacji prototypy klikalny, ale nie skalowalny Projektowanie grafiki prace w Photoshopie Kodowanie szablony html
Mobile last Analiza cele biznesowe cele klienta Projektowanie UX architektura informacji prototypy klikalny, ale nie skalowalny Projektowanie grafiki prace w Photoshopie Kodowanie szablony html
Mobile last Analiza cele biznesowe cele klienta Projektowanie UX architektura informacji prototypy klikalny, ale nie skalowalny Projektowanie grafiki prace w Photoshopie Kodowanie szablony html
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.
Mały przewrót kopernikański MOBILE FIRST
Wyobraźcie sobie
ż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.
że nie dostajecie klasycznych projektów graficznych Moodboard Breakpoints
że akceptujecie działające szablony html
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. * http://blog.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/
DZIĘKUJEMY