an introduction to responsive design - version 2
If you can't read please download the document
DESCRIPTION
These are the accompanying slides from a workshop I delivered to UCLan students on the 9th October 2014 on the topic of responsive design. This was the third time I'd delivered the talk, and I felt the need to update the presentation with more modern techniques and ideas. The original presentation from November 2013 can be found here - http://www.slideshare.net/richardsonweb/an-introduction-to-responsive-design-30162238 The task list from the workshop can be found here: http://www.richardsonweb.co.uk/responsive_tasks.pdfTRANSCRIPT
- 1. Front End Developer Sigma Consulting Solutions Ltd. @meevil
- 2. Liam Richardson Front end developer at Sigma Studied Web & Multimedia at UCLan Graduated in May 2013 Creating responsive websites since around 2012 Takes weird selfies in public places
- 3. Valuable tips and tricks that will help you create cooler websites, faster The fundamentals of responsive design How to approach a responsive project How to adapt pre-existing knowledge Why we make websites responsive in the first place What the future holds In store
- 4. - Keith Doyle, Navopia
- 5. Lesson 1
- 6. Lesson 2
- 7. Lesson 3
- 8. 80% 74% 69% 64% 62% 47%
- 9. Mobile first Luke Wroblewski
- 10. Lesson 4
- 11. .container{ width: 960px; margin: 0px auto; padding: 40px; }
- 12.
- 13. .left-column { float: left; width: 700px; } .right-column { float: right; width: 160px; }
- 14.
......
- 15. Everything must be wrapped up in a row Rows contain columns Rows can contain up to 12 columns
- 16.
.........
- 17.
............
- 18. @media only screen and (max-device-width: 480px) { body{background-color: red;} }
- 19. @media only screen and (max-device-width: 480px) { .container{ width: 100%; } } .container{ width: 25%; }
- 20. Lesson 5
- 21. Lesson 6
- 22. Removing features and / or content as the screen size becomes smaller
- 23. Adding features as the screen size becomes larger
- 24. HTC Hero Desktop PC iPhone 6
- 25. Lesson 7
- 26. display: flex;
- 27. Lesson 8
- 28. Large-6 columns?