Responsive UI Design

A talk i gave at the legendary tech tuesdays events at work

Transcript

1. By Manny Ferreira RESPONSIVE UI
2. What is it? & why How do I do RESPONSIVE Media Queries Out in the Jungle Patterns JS Patterns no-Js Patterns Tools + Links
3. What is it & why Responsive design is not just another fad it’s a reaction to the reality of designing for users who expect to experience your web site across multiple devices and screen sizes.! RWD is a design strategy that is centred on designing your content so that it responds to the environment that it encounters. It encompasses the use of:
 1. Fluid Grids! 2. Media queries! 3. Flexible images and media (navigation systems etc.)
4. ! FLEXIBLE MEDIA RESPONSIVE WEB DESIGN FLUID GRIDS MEDIA QUERIES Content etc. ect. etc Video Navigation IMAGES ASSETS What is it & why: RWD
5. How do I do responsive Using a combination of….! 1. Fluid grids, (using % NOT px so that your content reflows beautifully )! 2. Media queries! 3. The Viewport! 4. Set Breakpoints (device widths 480px | 768px | 1024px | 1 million px )! 5. Considering screen densities (72ppi , 220ppi, 326ppi – RETINA not yo’ aunt Rita)! 6. Responsive images ! 1. Conditionally loading images (yes that is right lots more work. gotta make tons more images to accommodate each device/media query https://github.com/scottjehl/picturefill)! 2. Image scaling – this one not so great, mobile users download huge image)
6. Fluid grids 30% Divisions of website, containers width’s have been set using percentages not pixels. 70% 100% 100% 100% 100% 100% 100%
7. Media Queries @media only screen and (min-width: 1920px) { /* Desktop styles */ } @media only screen and (max-width: 1280px) and (min-width: 768px) { /* Tablet, small to medium latops styles, */ } @media only screen and (max-width: 767px) { /* Mobile styles */ } Allows you to write CSS styles that respond to changes in screen size or orientation.
8. Media Queries: browser support 10.0! 9.0! ! ! 8.0! 7.0! 6.0 Feature Detect! /modernizr.com 3.5+ 4.0+ 9.5+ 0.01+ Wadda Boyjtie!! POLYFILLS! /css3-mediaqueries-js! /Respond.js! /scottjehl/picturefill
9. Out in the JUNGLE
10. \ TWN.COM
11. \ WWF.ORG
12. \ regentcollege.co.uk
13. \ tuj.ac.jp
14. \ 2012.deconstruct.co.uk
15. \ radiotjanst.se
16. \ bostonglobe.com
17. \ currys.co.uk
18. Patterns Single-Level 1. Toggle 2. Footer Anchor 3. Select Menu 4. Left Nav Flyout 5. OFF CANVAS 6. Priority+ 7. Top Links 8. Stacked Top Links Multi-Level 1. Multi-Toggle 2. Multi-Toggle v2 3. Multi-Toggle v3 4. Multi-Toggle with Active Parent Links 5. Multi-Toggle with Active Parent Links - Pure CSS 6. The Skip the Subnav Breadcrumbs 1. Across the Top 2. Breadcrumbs Dropdown 3. Last-One Only
19. JS -Patterns 3 Js enable devices only please ! 1. Left Nav Flyout 2. OFF CANVAS 3. Multi-Toggle 4. Multi-Toggle v2 5. Multi-Toggle v3 6. Multi-Toggle with Active Parent Links
20. Single-Level 1. Toggle 2. Footer Anchor 3. Select Menu 4. Multi-Toggle with Active Parent Links - Pure CSS 5. The Skip the SubnavPriority+ 6. Top Links 7. Stacked Top Links No Js -Patterns 3
21. Tools + Links • https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser- Polyfills! • http://bradfrostweb.com/blog/web/responsive-nav-patterns/ • http://foundation.zurb.com/ • http://twitter.github.com/bootstrap/ • http://www.yaml.de/ • http://jquerymobile.com/ ! • http://stuffandnonsense.co.uk/projects/320andup/ • http://gridsetapp.com • http://semantic.gs/ • http://www.columnal.com/ • http://www.w3.org/community/respimg/! • http://jasonweaver.name/lab/offcanvas/! • https://github.com/davatron5000/Foldy960 • http://simplegrid.info/ • http://www.cssgrid.net/ • http://www.getskeleton.com/ • http://goldengridsystem.com/ • http://twitter.github.com/bootstrap/ • Responsivewireframes • http://styletil.es/ IT ALL! LOOKS! THE! SAME