Dwie perspektywy responsive web design: user experience i front-end developer

Transkrypt

1 Dwie perspektywy responsive web design: user experience i front-end developer M O B I L E T R E N D S C O N F E R E N C E & A W A R D S K r a k ó w l u t y

2 R O Z D Z I A Ł 0 1 Czym jest responsive web design?

3 Czym jest responsive web design? Responsive web design (w skrócie RWD) to podejście do projektowania WWW, w którym dokument HTML jest przygotowany tak, aby był optymalnie wyświetlany na każdym urządzeniu (od monitora komputera stacjonarnego po ekran telefonu komórkowego). Dwie perspektywy responsive web design: User Experience i Front-end Developer

4

5 Mobile first Dwie perspektywy responsive web design: User Experience i Front-end Developer

6 ROZDZIAŁ 02 Elementy responsive web design

7 Elementy responsive web design Media queries pozwalają na używanie osobnych reguł CSS bazując na charakterystyce urządzenia na którym strona WWW jest wyświetla, najczęściej jest to szerokość przeglądarki. /* ipads (landscape) only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { ( ) } /* Large screens only screen and (min-width : 1824px) { ( ) } /* iphone 4 only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { ( ) } Dwie perspektywy responsive web design: User Experience i Front-end Developer

8 Elementy responsive web design Koncepcja fluid grid (elastycznej siatki) zakłada ustalanie rozmiaru elementów strony bazując na jednostkach względnych takich jak procenty i EM zamiast jednostek absolutnych którymi są piksele i punkty..grids [class*="grid-"] { display: inline-block; ( ) }.grid-1 { width: 6.15%; }.grid-2 { width: %; }.grid-3 { width: %; } ( ).grid-12 { width: %; margin: 0; } Dwie perspektywy responsive web design: User Experience i Front-end Developer

9 Elementy responsive web design "Elastyczne" elementy multimedialne (obrazy, klipy) również są wymiarowane względnie tak aby ich rozmiar nie przekraczał 100% szerokości elementu w którym są umieszczone. img, object, embed { max-width: 100%; } img { height: auto; }.video-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; }.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } Dwie perspektywy responsive web design: User Experience i Front-end Developer

10 ROZDZIAŁ 03 Best practice w RWD

11 Unobtrusive JavaScript *.HTML <input type="text" name="price" onchange="validateprice()" /> *.HTML <input type="text" name="price" id="price" /> *.JS Zepto(function($){ $('#price').change(validateprice); }) Dwie perspektywy responsive web design: User Experience i Front-end Developer

12 Progressive enhancement cake strategy Progressive enhancement to strategia z naciskiem na accessibility, semantyczny HTML, style CSS w osobnych plikach i technologie skryptowe. Gorsze urządzenia-> dostęp do podstawowej treści Lepsze urządzenia -> dostęp do rozbudowanej treści Dwie perspektywy responsive web design: User Experience i Front-end Developer

13 Wyzwania i inne podejścia Luke Wroblewski - stworzył wzorce którymi należy kierować się w 'uniwersalnym' projektowaniu multi-device. Zaproponował podejście RESS (Responsive Web Design with Server Side Components), które to jest lepiej 'zoptymalizowane' pod urządzenia mobilne. Np. implementacja dynamicznego CSS'a (Sass) może być częścią tego podejścia. Dwie perspektywy responsive web design: User Experience i Front-end Developer

14 ROZDZIAŁ 04 Warsztat współczesnego front-end developera

15 Sublime, Emmet, Autosave Sublime Text 2 Sublime Package Control Emmet CodeKit Chrome DevTools Autosave Strategia social media

16 Sass Sass Bourbon Compass Scout Strategia social media

17 LESS LESS LESS Hat Lots of Love for LESS WinLess Strategia social media

18 Node.js Nodefront GRUNT Yeoman Brunch Strategia social media

19 Dziękujemy. Lemon Sky Spółka z ograniczoną odpowiedzialnościa S.K.A. ul. Fabryczna Wrocław NIP: ul. Elżbiety Drużbackiej Warszawa