RESPONSIVE DESIGN Sources: Kadlec, T. (2012). Implementing responsive design. Berkeley, California: New Riders Publishing. MarcotteMarcotte, E. (2010). Responsive Web Design

RESPONSIVE DESIGN

Responsive Web Design  RWD is about adopting a more flexible, device agnostic approach to design for the web.  Device-agnostic because can’t know what devices people will use.

Responsive Web Design  Start by building baseline experience.  Used three exiting tools:  Media queries  Fluid grids  Scalable images (Marcotte, E., 2010)

Media queries  Allow designers to deliver styles based on media type.

Media queries  Can include MQ in CSS as part of screen and (max-device-width: 480px) {.column { float: none; } }

Media queries  Multiple property values in a single query by chaining them together with the and keyword

Defined media types  All Suitable for all devices.  Braille Intended for braille tactile feedback devices.  Embossed Intended for paged braille printers.  Handheld Intended for handheld devices (typically small screen, limited bandwidth).  Print Intended for paged material and for documents viewed on screen in print preview mode.  Projection Intended for projected presentations.  Screen Intended primarily for color computer screens.  Speech Intended for speech synthesizers.  Tty Intended for media using a fixed-pitch character grid (such as teletypes).  Tv Intended for television-type devices.

Defined media types  device-width, orientation, and print and (orientation: portrait) { }

Breakpoints  Point where media query delivers a new set of styles.  Some sites have just two layouts triggered at a single breakpoint.  Responsive sites often use three designs targeted at  typical phone,  tablet,  and desktop widths.  Think in terms of  single column,  wide single column, and  multiple columns, then  defining the logical breakpoints points in EMs - more future friendly.

Common Break Points This breakpoint chart shows the pixel widths of some popular devices.

Target column width = 329px 329px ÷ 988px = 33.29% Fluid Grids target ÷ context = result Title – target width= 700px 700px ÷ 988px = *100 =70.85% Context Width= 988px

Scalable images Scale to size of containing element div#image-icons img {max-width:50% }

Scalable images  Style rule to make images scale down to fit their container: img { max-width: 100%; }  As layout gets smaller, images in it will scale down to fit width of containing element.  If container is larger than image, the image does not scale larger.  It stops at 100% of its original size.  max-width property, remove width and height attributes in the img elements in the HTML document, or the image won’t scale proportionally.

src.sencha.io <img src=' alt='My smaller image' /> Absolute Path to image

Adaptive Layout  Two or three different fixed layout designs that target the most common device breakpoints.  May be quicker  less disruptive to produce

VIEWPORT

Web Design! Web Design!

Mobile device Desktop | Browser Web Design! Page displayed much smaller on the mobile device. Why?

Web Design! The text is way too small to read without zooming in. Mobile Safari thinks page is 980px wide 320px 980px ? 980px Web Design!

Mobile Safari assumed page was a document designed for the desktop. It gave website a width of 980 pixels and presented it zoomed out. 320px 980px ? Web Design!

Mobile Safari sized the 980px page to fit device 320px Web Design! 980px

Web Design! Must tell the browser that webpage is optimized for mobile. Tell device that the device width is 320px, not the default value of 980px. Do that with meta viewport element. Best to use device-width. Let device figure out the size. 320px

Tells browser to: set width of viewport equal to the width of the device screen (width=device-width), whatever that is. initial-scale - sets the zoom level to 1 (100%).