RESPONSIVE WEB DESIGN: CSS MEDIA

QUERIESTECH2015:MULTIMEDIA II

ASSIGNMENT 2: RESEARCH INTO A MULTIMEDIA TECHNOLOGYARMAGHAN MOEMENI

Lloyd-Jamie Bennett – P11228763

Stylianos Michael – P11239856

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

RWD Techniques Marcotte identifies three main techniques for

RWD:

Fluid GridsMedia QueriesFlexible 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 <style>.....</style> 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. 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/what-are-css-media-queries.html [Accessed: 09 Feb 2014].http://www.adobe.com/devnet/dreamweaver/articles/introducing-media-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].

End Of Presentation

Any Questions?