RESPONSIVE WEB DESIGN

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

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.

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

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

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)

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

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

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

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)

Viewport Sizes Some nice folks have provided the actual devices sizes for several devices http://viewportsizes.com/

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)

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

Media Queries (Introduction) New to CSS3 but most browsers support them now We introduce a new rule (@media) 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

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

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 https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_types

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

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

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

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

Responsive Images (Example – Part 2)

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

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