1 / 14

Lloyd-Jamie Bennett – P11228763 Stylianos Michael – P11239856

Lloyd-Jamie Bennett – P11228763 Stylianos Michael – P11239856 . Responsive WEB Design: CSS Media Queries tech2015:Multimedia II assignment 2 : Research into a Multimedia Technology armaghan moemeni . Aims & Objectives . Briefing on Responsive Web Design (RWD) What is CSS Media Queries

taima
Download Presentation

Lloyd-Jamie Bennett – P11228763 Stylianos Michael – P11239856

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lloyd-Jamie Bennett – P11228763 Stylianos Michael – P11239856 Responsive WEB Design: CSS Media Queriestech2015:Multimedia IIassignment 2: Research into a Multimedia Technologyarmaghan moemeni

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

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

  4. RWD Techniques • Marcotte identifies three main techniques for RWD: • Fluid Grids • Media Queries • Flexible Media

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

  6. External CSS Media Queries • External - Aseparate file where you can declare all the styles that you want to use on your website.

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

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

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

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

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

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

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

  14. End Of Presentation • Any Questions?

More Related