Matt Gray, Australian National University
Track: Web & HTML5; Audience: Beginner
Responsive web design is a philosophy and front end development strategy that makes websites accessible on a number of devices through the use of fluid grids, flexible layouts and media queries, allowing webmasters to design a site once and format it differently for many displays, such as desktops, laptops, tablets and phones.
At present, the ANU website is designed for a minimum display resolution of 1280 by 1024 pixels, which was a common practice several years ago when mobile display of websites was still a contentious issue. However, this concept of a ‘fixed-width’ display no longer meets the needs of our users.
This talk will show the technical and design requirements for converting your web site(s) to a responsive design. We will look at examples of working sites, and show what we are currently doing at ANU to move to a responsive design.
100.8 MB
2.9 MB
Here are some of the links that I’ll be using in my talk today:
Example sites:
http://foodsense.ishttp://www.anderssonwise.comhttp://earthhour.frhttp://www.bostonglobe.comhttp://www.stpaulsschool.org.ukhttp://asuonline.asu.eduand many more at…http://designmodo.com/responsive-design-examples/
ANU test site:
http://www-acep.anu.edu.au/ver4/
Further reading about responsive design:
Responsive Web Design eBook – http://www.abookapart.com/products/responsive-web-designA Dao of Web Design (John Allsopp) http://www.alistapart.com/articles/dao/Responsive Web Design (Ethan Marcotte) http://www.alistapart.com/articles/responsive-web-design/Responsive Web Design http://www.sitepoint.com/responsive-web-design/#fbid=nmtfiP3zMHvThere Is No Mobile Web (Jeremy Keith) http://goo.gl/pFCX7For a Future-Friendly Web http://goo.gl/BGcHnStructured Content First (Stephen Hay) http://goo.gl/HI6REPragmatic responsive design http://goo.gl/d2daWResponsive by default http://goo.gl/IiL35A Richer Canvas http://goo.gl/lWDxCResponsive Advertising http://goo.gl/MGhGoYou Say Responsive, I Say Adaptive http://goo.gl/tA1zJA Responsive Design Approach for Complex, Multicolumn Data Tables http://goo.gl/n8S1qResponsive Data Table Roundup http://goo.gl/3GVoxDebugging CSS Media Queries http://goo.gl/5eawIConvert a Menu to a Dropdown for Small Screens http://goo.gl/KDE9tMobile Content: If in Doubt, Leave It Out http://www.useit.com/alertbox/mobile-writing.htmlhttp://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/The ultimate responsive web design roundup http://www.webdesignerdepot.com/2011/09/the-ultimate-responsive-web-design-roundup/
Let’s try that again, with formatting…
Example sites:
http://foodsense.is
http://www.anderssonwise.com
http://earthhour.fr
http://www.bostonglobe.com
http://www.stpaulsschool.org.uk
http://asuonline.asu.edu
and many more at…http://designmodo.com/responsive-design-examples/