More details on media queries

After going through week 2 tasks and spending time on experimenting and really understanding the code - you should have a fairly good idea about the main techniques of RWD. Still I would recommend reading the seminal article of the founder of the RWD idea Ethan Marcotte  where he discusses the main ideas of the methodology.

 

But you should be aware that in real life the use of RWD might require more details and be somewhat more complicated. Below I am offering a few aspects of such reality checks.

Using more than 2 screen designs

The book walks you through only two CSS groups. In reality you might want to create designs for more window/device sizes, like, for example, having 4 column for laptops, 2 columns for tablets, and 1 column for smartphones. Often it is not even about columns but the order and amount of information and number of interactions/services offered for different use cases (like detailed analysis on the desktop versus a quick hint on the phone, etc.). Below is a list of screen/window pixel formats usually requiring special considerations:

• 320px
• 480px
• 600px
• 768px
• 900px
• 1200px
  
  

Designing for all of them is not necessary and depends on the particular application, its uses, and… your resources. 

One combined CSS versus several

The book also offers the method of placing designs for various window sizes into one CSS file. In practice, you might have different groups responsible for different devices, audiences, and use cases. Each might develop a separate CSS that can be loaded when that specific window size is met (media query evaluates to true).
 

Example of the use of the <link> element in HTML like:

<link rel=”stylesheet” type=”text/css” media=”all and (color)” href=”styles/colorstyle.css”>

Alternatively, you can use @import rules like:

@import url(“styles/colorstyle.css all and (color); 

Different media queries

But the most interesting and important feature of media queries is their ability to examine the context of the device and particular browser state far beyond the window/screen size. Not all of these features are implemented in all browsers yet, but a lot of other media features are defined in w3.org standards. For example they include such features of device as: height, orientation, aspect-ration (4:3, 16:9, etc.), color/monochrome, resolution, and some others. Distinguishable media types include: ‘aural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’ and more.

 

The trend is in increasing the features that the browsers can determine and send to media queries that can play role of sensors of various context features (what device and what specific use is happening). This allows very adaptive/responsive development approaching raw native device programming with access to hardware and their OS. There are methods of obtaining such information from media queries and passing them to JavaScript where the response can be determined dynamically and programmatically. 

Logic of media queries

Another power of media queries is in the use of logic where each media query is in fact a logical statement with AND, OR, NOT, and ONLY  logical statement allowing the creation of very complex conditions you want your design to respond to.

AND-operator combines several media features into a single media query, comma separator between the features works like an OR-operator, while ONLY activates media query ONLY when the entire query evaluates to true, and NOT negates the whole query. Here are some examples:

 

@media (min-width: 700px) and (orientation: landscape) { ... }

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

 

See more details here.