Responsive web design
49 likes•28,724 views
Responsive web design involves creating layouts that adapt to different screen sizes using flexible grids and media queries. It allows for a device-agnostic approach and is easier to build than separate mobile sites. Key aspects of responsive design include planning with a mobile-first approach, prototyping, using consistent breakpoints based on content, usability testing, writing for different screens, designing visually hierarchical layouts, and addressing images and media. Testing is important throughout the process. While responsive design is a good base, other solutions like responsive or native apps may still be needed, and the job requires ongoing review.
Responsive web design
- 1. respon some stuff about responsive web design sive
- 2. intro: about phase 1: planning phase 2: content phase 3: design phase 4: build phase 5: after
- 3. about
- 4. the rise of mobile half of all searches are mobile some websites near 50% mobile explosion of devices we need to address mobile
- 5. what is responsive? creating flexible layouts that can adapt to suit the size or orientation of any device.
- 6. three things 1. flexible, grid-based layout 2. flexible images/media 3. media queries Ethan Marcotte
- 7. strengths? device agnostic easy to build (not plan)
- 8. weakness? bandwidth user experience overall management
- 9. responsive/ mobile/apps each has their place, responsive is not the only solution responsive is a perfect base
- 10. the future is ress “Such a tempting solution... you never have to touch the server” Luke Wroblewski
- 11. more than techniques 65% planning & testing 35% design & content 5% build
- 12. planning
- 13. mobile first plan for small expand for large http://www.lukew.com/ff/entry.asp?933
- 14. prototyping loose wireframes test the flow early
- 15. breakpoints based on content not devices
- 16. ux consistency procedural memory and confusing users
- 17. test frequently don’t make assumptions
- 18. content
- 19. simple content small screen does not always mean “simple content”
- 20. write wisely pyramid writing? hide/reveal? content folding?
- 21. desig design
- 22. design small design for small screen first
- 23. visual hierarchy maintain hierarchy at all screen sizes
- 24. content images simply shrinking your images may not be ideal
- 25. build
- 26. frameworks you may need to roll your own (but learn from others) test frequently http://twitter.github.com/bootstrap/
- 27. overlap? should your CSS be overlapping or contained?
- 28. javascript? will you use javascript or conditional comments?
- 29. responsive tables some techniques look cool, but be aware of the users http://dbushell.com/2012/01/04/responsive-calendar-demo/
- 30. responsive media there are so many solutions so do your research http://css-tricks.com/which-responsive-images-solution-should-you-use/ http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
- 31. after
- 32. style guides document your design and code for others that come after
- 33. review the job is never done!
- 34. wrap
- 35. 1. responsive should be the base 2. you may still need RESS or mobile 3. the build is only part of the process 4. mobile first at every stage 5. test at every stage