Lloyd-Jamie Bennett – P11228763
Stylianos Michael – P11239856








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




A design strategy coined by Ethan Marcotte in ‘A List
Apart’ article 2010.
‘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.

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






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.




Smaller file size for nonsupporting 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

 A stylesheet which is included in the main HTML documents. The style sheet is written within
<style>.....</style> tags and between this tags style properties are listed.



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 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.






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





ALLSOPP, J. 2000. Dao Of Web Design. [Online] 07 April. Available at: http://alistapart.com/article/dao [Accessed: 24 Mar 2014].
CSSMEDIAQUERIES. 2014. What are CSS Media Queries, and how to implement them.. [online] Available at: http://cssmediaqueries.com/whatare-css-media-queries.html [Accessed: 09 Feb
2014].http://www.adobe.com/devnet/dreamweaver/articles/introducingmedia-queries.html
MARCOTTE, E. 2010. Responsive Web Design. [online] Available at: http://alistapart.com/article/responsive-web-design/ [Accessed: 20 Mar
2014].
WILLIAMSON, J. 2012. lynda.com Training | Responsive Design
Fundamentals. [online] Available at: http://www.lynda.com/Web-Responsive-
Design-tutorials/Responsive-Design-Fundamentals/104969-2.html
[Accessed: 24 Mar 2014].

 Any Questions?