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) { ... }
