For training call +44(0)1273 6222 72

Your basket is empty View Cart shopping cart

theBLOG

Responsive Web Design: Media Types and Media Queries

Written by Giselle – Fri 04 Jan 2013

In this post, our responsive web design trainer Giselle guides you through the differences between Media Types and Media Queries with regards to modern web design.

Media queries is a new module in the CSS3 W3C (World Wide Web Consortium) specification. Media Queries combine the older Media Types, which target a particular media type - e.g. a screen - with conditions that must be met by a particular device in order for a set of styles to be applied to it - e.g. the width of a screen. Media queries enable you to change the appearance of your site for different devices while the HTML remains the same (although some of it may be hidden).

You can learn more about Media Queries in our Responsive Web Design training.

Media Types

In the CSS2 specification Media Types targeted different devices but did not allow you to differentiate between devices of the same type but with different physical characteristics, e.g. two mobile phones with different screen sizes.

Responsive-Web-Design-iphone5_vs_iphone4s

Stylesheets for specific media were specified in the

of a page,

 

 

 

 

Or within a style sheet,

@media print {

body {

font-size: 12pt;

}

}

Other difficulties with Media Types included the fact that early mobile device browsers ignored them for the most part and later browsers defaulted to screen-based style sheets.

Check out this article for more information on Media Types.

Read More


What is Responsive Web Design?

Written by Aaron Charlie – Mon 20 Jun 2011

NEW! We've launched our ownResponsive Web Design Course. Learn how to design and build sites that will render on any screen without losing functionality with our best practice workshop. Combine the course with HTML5, CSS3 & JavaScript on our Mobile Web Week and you will be able to build your own sites from scratch!

5 years ago, the only considerations web designers really had to deal with when designing for different users were cross browser testing and different screen resolutions.

 

Today (and forevermore!), to ensure that your website is truly accessible to all of your users, you have to make sure that your design works for a huge range of mobile devices - iPhones, iPads, Blackberries etc etc... all with different browsers and screen resolutions (many of which are now in 'portrait' orientation, as opposed to the traditional 'landscape' web browser)

One way of doing this is to design a different version of your site for every device - however that's a lot of work.

Enter Responsive Web Design..

What is Responsive Web Design?

Responsive Web design is an approach to web design that ensures that your site responds to your user’s environment, and to their behaviour, based on a range of variables including screen size, platform and orientation.

Rather than create multiple versions of a site for each device - ONE website design will be suitable for all users, by using flexible layouts, images and CSS techniques including media queries. The website adjusts itself to the user - rather than the other way round.

HTML5 and CSS3 are an important part of responsive web design, and as more and more browsers begin to support these technologies responsive websites will become more popular.

Read More



Looking for Online Training?

AgilePM, PRINCE2® & MSP® eLearning

A flexible, cost-effective way to gain your AgilePM, PRINCE2 & MSP qualifications online with our APMG accredited AgilePM eLearningPRINCE2 eLearning & MSP eLearning packages.


ITIL®, PRINCE2®, PRINCE2 Agile®, MSP®, M_o_R®, P3O®, MoP®, MoV® courses on this website are offered by The Knowledge Academy, ATO of AXELOS Limited. ITIL®, PRINCE2®, PRINCE2 Agile®, MSP®, M_o_R®, P3O®, MoP®, MoV® are registered trade marks of AXELOS Limited. All rights reserved.