responsive design lessons
DESCRIPTION
This is a short presentation on some lessons and tips I've learnt through some of my first responsive design projects. This talk is from a Pecha Kucha night at UX Brisbane.TRANSCRIPT
![Page 1: Responsive Design Lessons](https://reader034.vdocuments.site/reader034/viewer/2022052218/54c830ae4a7959986d8b456c/html5/thumbnails/1.jpg)
My Lessons from Responsive Design
DAN NAUMANN
![Page 2: Responsive Design Lessons](https://reader034.vdocuments.site/reader034/viewer/2022052218/54c830ae4a7959986d8b456c/html5/thumbnails/2.jpg)
Responsive Design
Responsive web design
(RWD) is a web design
approach aimed at crafting
sites to provide an optimal
viewing experience ...
across a wide range of
devices
http://en.wikipedia.org/wiki/Responsive_web_design
![Page 3: Responsive Design Lessons](https://reader034.vdocuments.site/reader034/viewer/2022052218/54c830ae4a7959986d8b456c/html5/thumbnails/3.jpg)
Responsive Designhttp://www.kareyhelms.com/2012/08/new-work-plbsearch/
![Page 4: Responsive Design Lessons](https://reader034.vdocuments.site/reader034/viewer/2022052218/54c830ae4a7959986d8b456c/html5/thumbnails/4.jpg)
Frameworks
![Page 5: Responsive Design Lessons](https://reader034.vdocuments.site/reader034/viewer/2022052218/54c830ae4a7959986d8b456c/html5/thumbnails/5.jpg)
Frameworkshttp://usablica.github.io/front-end-frameworks/compare.html
![Page 6: Responsive Design Lessons](https://reader034.vdocuments.site/reader034/viewer/2022052218/54c830ae4a7959986d8b456c/html5/thumbnails/6.jpg)
Wireframes (Process)
![Page 7: Responsive Design Lessons](https://reader034.vdocuments.site/reader034/viewer/2022052218/54c830ae4a7959986d8b456c/html5/thumbnails/7.jpg)
Wireframes (Process)http://www.divshot.com/
![Page 8: Responsive Design Lessons](https://reader034.vdocuments.site/reader034/viewer/2022052218/54c830ae4a7959986d8b456c/html5/thumbnails/8.jpg)
Browser vendors x Versions x Screen sizes
Testing
![Page 9: Responsive Design Lessons](https://reader034.vdocuments.site/reader034/viewer/2022052218/54c830ae4a7959986d8b456c/html5/thumbnails/9.jpg)
Testinghttp://responsivenews.co.uk/post/56884056177/wraith
![Page 10: Responsive Design Lessons](https://reader034.vdocuments.site/reader034/viewer/2022052218/54c830ae4a7959986d8b456c/html5/thumbnails/10.jpg)
Responsive Images
![Page 11: Responsive Design Lessons](https://reader034.vdocuments.site/reader034/viewer/2022052218/54c830ae4a7959986d8b456c/html5/thumbnails/11.jpg)
Bandwidth?
Responsive Images
Javascript?
Attributes?
Same image?
<picture>?
![Page 12: Responsive Design Lessons](https://reader034.vdocuments.site/reader034/viewer/2022052218/54c830ae4a7959986d8b456c/html5/thumbnails/12.jpg)
Mobile Firsthttp://themes.elmastudio.de/nori/
![Page 13: Responsive Design Lessons](https://reader034.vdocuments.site/reader034/viewer/2022052218/54c830ae4a7959986d8b456c/html5/thumbnails/13.jpg)
Mobile First
Focus content and features
Post processing
![Page 14: Responsive Design Lessons](https://reader034.vdocuments.site/reader034/viewer/2022052218/54c830ae4a7959986d8b456c/html5/thumbnails/14.jpg)
Rems
Rems = Root ems
![Page 15: Responsive Design Lessons](https://reader034.vdocuments.site/reader034/viewer/2022052218/54c830ae4a7959986d8b456c/html5/thumbnails/15.jpg)
Rems
Relative sizing without the problems of
ems
![Page 16: Responsive Design Lessons](https://reader034.vdocuments.site/reader034/viewer/2022052218/54c830ae4a7959986d8b456c/html5/thumbnails/16.jpg)
Rems
12px 13px 14px
![Page 17: Responsive Design Lessons](https://reader034.vdocuments.site/reader034/viewer/2022052218/54c830ae4a7959986d8b456c/html5/thumbnails/17.jpg)
Rems
Any dimensions!
Fonts, padding, etc.
![Page 18: Responsive Design Lessons](https://reader034.vdocuments.site/reader034/viewer/2022052218/54c830ae4a7959986d8b456c/html5/thumbnails/18.jpg)
Patternshttp://getbootstrap.com/2.3.2/
![Page 19: Responsive Design Lessons](https://reader034.vdocuments.site/reader034/viewer/2022052218/54c830ae4a7959986d8b456c/html5/thumbnails/19.jpg)
Patterns
http://bradfrostweb.com/
Brad Frost
![Page 20: Responsive Design Lessons](https://reader034.vdocuments.site/reader034/viewer/2022052218/54c830ae4a7959986d8b456c/html5/thumbnails/20.jpg)
Dan Naumann @danielnaumann
Thank you!