1. RESPONSIVE WEB DESIGN

2. Goals Create web sites that are responsive to Why Device window size
Device resolution
Device orientation
Why
A pixel is not a pixel because of varying screen densities

3. CSS 2.1 Specification
If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length.

4. How it Works? As usual, there is no magic
We have another layer of rules that define which CSS style to apply based on
Device size
Device resolution
Aspect ratio (mostly portrait / landscape)
Ethan Marcotte is credited with the idea

5. Terms Responsive – react quickly to any change
Adaptive – easily modified for a new purpose or situation
Mobile – design separate web sites for mobile

6. Responsive Design (Components)
Flexible layouts – the practice of building a web site’s layout with a flexible grid capable of dynamic resizing
Media queries – provide the ability to specific different styles based in device circumstances
Width of the viewport
Device orientation
Flexible media – making media scalable (video and images)

7. A Word about the <meta> Tag
HTML5 and CSS3 introduced a method available through the <meta> tag to enable the viewport.
The <meta> element is used to represent any data that cannot be represented by other elements
What’s in the <name> attribute usually defines the contents / purpose of the <meta> tag

8. Viewport (Introduction)
It’s the visible region of the web page
The viewport size varies with the device
Phones have smaller screens than tablets than desktops
The device resolution also comes into play
Zooming also comes into play

9. Viewport Details
<meta name="viewport"  content="width=device-width, initial-scale=1.0“ />
It uses name and content attributes
name is always “viewport”

10. Viewport (content) width property controls the size of the viewport
Use a specific number of pixels (width=600px)
Or the special value (width=device-width, initial-scale=1)
The width of the screen in pixels set to match the width of the device
At a scale of 100% (zoom-factor is 1)

11. Viewport Sizes
Some nice folks have provided the actual devices sizes for several devices

12. New Relative Size Units
Remember all of the size units of measure
There are more for the viewport
Viewport width (vw)
Viewport height (vh)
Minimum of viewport’s height and width (vmin)
Maximum of viewport’s height and width (vmax)

13. The Magic Formula
Flexible layouts should not used fixed units of measure
Because the size of the viewport is constantly changing
So use ems or percentages
So we have the following simple formula
target / context = result

14. Media Queries (Introduction)
New to CSS3 but most browsers support them now
We introduce a new rule that includes a block of CSS if a condition is true and excludes the CSS if the condition is false
To be consistent with the terminology introduced before, we call these media queries

15. Media Queries (Types)
Media types refer to a general category of device
print
screen
speech
all

16. Media Queries (Features)
These are just more detailed characteristics of the user agent or device
We call them media feature expressions
Media feature expressions are enclosed in parenthesis
It’s a long list

17. Media Queries (Features)
width = width of the viewport
height = height of the viewport
orientation = viewport orientation
resolution = pixel density of the device
aspect-ratio = width / height aspect ratio
Usually for portrait / landscape mode

18. Media Queries (Logical Operators)
and – all media features must be true in order for the rule to be included
not – negate a media query
only – use with older browsers

19. Responsive Images (Introduction)
We are controlling how images scale on different devices and orientations
Best practices
Shrink (scale) images on mobile devices so that we don’t have to zoom
But don’t let images get too big on large devices
See ResponsiveImages.html

20. Responsive Images (Example – Part 1)
Rule applies when screen < 400px
Set width to 94% of viewport

21. Responsive Images (Example – Part 2)

22. Responsive Grids (Introduction)
Recall the grids we have used before
To make them responsive, we display column beneath each other rather than next to each other.
That’s really about it

23. Responsive Grids (Example)
Reset multi-column to single column