responsive web design: how to maximise your content for devices that haven't been invented yet
DESCRIPTION
Responsive Web Design is about developing a website that will automatically adjust to any device screen size. MMT Digital focuses on a content centric approach to RWD which enables us to make the best use of website content on any screen size that technology throws our way in the future.TRANSCRIPT
![Page 1: Responsive Web Design: How to maximise your content for devices that haven't been invented yet](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c7b5394a79599f758b45ce/html5/thumbnails/1.jpg)
Responsive Web Design: How to maximise your content for devices that haven’t been invented yet
James Cannings
![Page 2: Responsive Web Design: How to maximise your content for devices that haven't been invented yet](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c7b5394a79599f758b45ce/html5/thumbnails/2.jpg)
![Page 3: Responsive Web Design: How to maximise your content for devices that haven't been invented yet](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c7b5394a79599f758b45ce/html5/thumbnails/3.jpg)
![Page 4: Responsive Web Design: How to maximise your content for devices that haven't been invented yet](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c7b5394a79599f758b45ce/html5/thumbnails/4.jpg)
![Page 5: Responsive Web Design: How to maximise your content for devices that haven't been invented yet](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c7b5394a79599f758b45ce/html5/thumbnails/5.jpg)
![Page 6: Responsive Web Design: How to maximise your content for devices that haven't been invented yet](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c7b5394a79599f758b45ce/html5/thumbnails/6.jpg)
![Page 7: Responsive Web Design: How to maximise your content for devices that haven't been invented yet](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c7b5394a79599f758b45ce/html5/thumbnails/7.jpg)
![Page 8: Responsive Web Design: How to maximise your content for devices that haven't been invented yet](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c7b5394a79599f758b45ce/html5/thumbnails/8.jpg)
![Page 9: Responsive Web Design: How to maximise your content for devices that haven't been invented yet](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c7b5394a79599f758b45ce/html5/thumbnails/9.jpg)
“Mobile users want to see our menu, hours and delivery number. Desktop users definitely want this 1Mb png of someone smiling at a salad.”
![Page 10: Responsive Web Design: How to maximise your content for devices that haven't been invented yet](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c7b5394a79599f758b45ce/html5/thumbnails/10.jpg)
![Page 11: Responsive Web Design: How to maximise your content for devices that haven't been invented yet](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c7b5394a79599f758b45ce/html5/thumbnails/11.jpg)
![Page 12: Responsive Web Design: How to maximise your content for devices that haven't been invented yet](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c7b5394a79599f758b45ce/html5/thumbnails/12.jpg)
![Page 13: Responsive Web Design: How to maximise your content for devices that haven't been invented yet](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c7b5394a79599f758b45ce/html5/thumbnails/13.jpg)
Mobile-first RWD
![Page 14: Responsive Web Design: How to maximise your content for devices that haven't been invented yet](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c7b5394a79599f758b45ce/html5/thumbnails/14.jpg)
Great article on Responsive Typography:
• http://informationarchitects.net/blog/responsive-typography-the-basics/
Great article on the science behind column widths and text sizes:
• http://www.smashingmagazine.com/2013/03/01/logical-breakpoints-responsive-design/
![Page 15: Responsive Web Design: How to maximise your content for devices that haven't been invented yet](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c7b5394a79599f758b45ce/html5/thumbnails/15.jpg)
![Page 16: Responsive Web Design: How to maximise your content for devices that haven't been invented yet](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c7b5394a79599f758b45ce/html5/thumbnails/16.jpg)
![Page 17: Responsive Web Design: How to maximise your content for devices that haven't been invented yet](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c7b5394a79599f758b45ce/html5/thumbnails/17.jpg)
![Page 18: Responsive Web Design: How to maximise your content for devices that haven't been invented yet](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c7b5394a79599f758b45ce/html5/thumbnails/18.jpg)
![Page 19: Responsive Web Design: How to maximise your content for devices that haven't been invented yet](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c7b5394a79599f758b45ce/html5/thumbnails/19.jpg)
![Page 20: Responsive Web Design: How to maximise your content for devices that haven't been invented yet](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c7b5394a79599f758b45ce/html5/thumbnails/20.jpg)
![Page 21: Responsive Web Design: How to maximise your content for devices that haven't been invented yet](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c7b5394a79599f758b45ce/html5/thumbnails/21.jpg)
![Page 22: Responsive Web Design: How to maximise your content for devices that haven't been invented yet](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c7b5394a79599f758b45ce/html5/thumbnails/22.jpg)
![Page 23: Responsive Web Design: How to maximise your content for devices that haven't been invented yet](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c7b5394a79599f758b45ce/html5/thumbnails/23.jpg)
![Page 24: Responsive Web Design: How to maximise your content for devices that haven't been invented yet](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c7b5394a79599f758b45ce/html5/thumbnails/24.jpg)
![Page 25: Responsive Web Design: How to maximise your content for devices that haven't been invented yet](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c7b5394a79599f758b45ce/html5/thumbnails/25.jpg)
The future?
@media (max-resolution: 131dpi) and (min-width: 767px) > {
}
@media (max-resolution: 341dpi) and (min-width: 767px) > {
}
![Page 26: Responsive Web Design: How to maximise your content for devices that haven't been invented yet](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c7b5394a79599f758b45ce/html5/thumbnails/26.jpg)
Focus on the contentNot the devices
Embrace the squishinessLet the content define the breakpoints
Progressively enhance the UXStart with the LCD
Embrace new technologyBut make sure it works on IE6!
But don’t compromise the experience on older devices
![Page 27: Responsive Web Design: How to maximise your content for devices that haven't been invented yet](https://reader034.vdocuments.site/reader034/viewer/2022051515/54c7b5394a79599f758b45ce/html5/thumbnails/27.jpg)
http://www.mmtdigital.co.uk
https://twitter.com/MMT_Digital
https://www.facebook.com/mmtdigital
http://www.linkedin.com/company/mmt-digital