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 2 0 1 3 K r a k ó w 2 1-2 2 l u t y 2 0 1 3
R O Z D Z I A Ł 0 1 Czym jest responsive web design?
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
Mobile first http://www.lukew.com/ff/entry.asp?933 Dwie perspektywy responsive web design: User Experience i Front-end Developer
ROZDZIAŁ 02 Elementy responsive web design
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) */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { ( ) } /* Large screens */ @media only screen and (min-width : 1824px) { ( ) } /* iphone 4 */ @media 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
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: 14.583%; }.grid-3 { width: 22.917%; } ( ).grid-12 { width: 97.917%; margin: 0; } Dwie perspektywy responsive web design: User Experience i Front-end Developer
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
ROZDZIAŁ 03 Best practice w RWD
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
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
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. http://www.lukew.com/ff/entry.asp?1392 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
ROZDZIAŁ 04 Warsztat współczesnego front-end developera
Sublime, Emmet, Autosave Sublime Text 2 http://www.sublimetext.com/2 Sublime Package Control http://wbond.net/sublime_packages/package_control Emmet http://docs.emmet.io/ CodeKit http://incident57.com/codekit/ Chrome DevTools Autosave https://github.com/nv/chrome-devtools-autosave Strategia social media
Sass Sass http://sass-lang.com/ Bourbon http://bourbon.io/ Compass http://compass-style.org/ Scout http://mhs.github.com/scout-app/ Strategia social media
LESS LESS http://lesscss.org/ LESS Hat http://lesshat.com/ Lots of Love for LESS http://mateuszkocz.github.com/3l/ WinLess http://winless.org/ Strategia social media
Node.js Nodefront http://karthikv.github.com/nodefront/ GRUNT http://gruntjs.com/ Yeoman http://yeoman.io/ Brunch http://brunch.io/ Strategia social media
Dziękujemy. Lemon Sky Spółka z ograniczoną odpowiedzialnościa S.K.A. ul. Fabryczna 19 53-609 Wrocław NIP: 5862236051 ul. Elżbiety Drużbackiej 6 01-622 Warszawa