Lloyd-Jamie Bennett – P Stylianos Michael – P

Aims & Objectives  Briefing on Responsive Web Design (RWD)  What is CSS Media Queries  Importance Of Media Queries & Usability  Constraints  Demonstration  Responsive Frameworks  Future Developments Of The Technology

Responsive Web Design  A design strategy coined by Ethan Marcotte in ‘A List Apart’ article  ‘The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must 'accept the ebb and flow of things.’ - (Jon Allslop, 2000).  He described the theory and practice in a book called Responsive Web Design in 2011.

RWD Techniques  Marcotte identifies three main techniques for RWD: Fluid Grids Media Queries Flexible Media

What Is CSS Media Queries?  Module in CSS3 specification  Queries that conform to different Media Screens  Allows content rendering to conform to conditions such as screen resolution.  Can be executed Internally & Externally  One of three main techniques of RWD.

 External - A separate file where you can declare all the styles that you want to use on your website. External CSS Media Queries

Benefits & Constraints Of External CSS Media Queries  Smaller file size for non- supporting browsers  Easier to manage and organise.  Can feed to old IE using conditional comments  Extra HTTP requests  Out of sight so could be forgotten when updating

Internal CSS Media Queries  A stylesheet which is included in the main HTML documents. The style sheet is written within..... tags and between this tags style properties are listed.

Benefits & Constraints Of Internal CSS Media Queries  No extra HTTP requests  Visible in one file which can be convenient.  Adds extra kb in file size  JavaScript is required for browser compatibility work around for older versions of IE

Demonstration  Demonstration Time: Example of a Responsive Web Page using CSS Media Queries. NOTICE how the elements on the web page adapt to the size of the browser to preserve readability.

Responsive Frameworks  Twitter Bootstrap  Foundation 3  Mobile Boilerplate (Focuses on producing mobile responsive sites)  Skeleton  Developers are also using fluid grid systems such as Golden Grid System, Simple Grid, Columnal etc.

Future Developments Of CSS Media Queries  New queries for devices.  Full Support from all web browsers (Especially Internet Explorer).  Download speed of Responsive Websites on mobile devices is still progressing.  Time taking and expensive.  Less dependent on JavaScript

References  ALLSOPP, J Dao Of Web Design. [Online] 07 April. Available at: [Accessed: 24 Mar 2014].  CSSMEDIAQUERIES What are CSS Media Queries, and how to implement them.. [online] Available at: are-css-media-queries.html [Accessed: 09 Feb 2014]. media-queries.html  MARCOTTE, E Responsive Web Design. [online] Available at: [Accessed: 20 Mar 2014].  WILLIAMSON, J lynda.com Training | Responsive Design Fundamentals. [online] Available at: Design-tutorials/Responsive-Design-Fundamentals/ html [Accessed: 24 Mar 2014].

End Of Presentation  Any Questions?