Retro Responsive: From Fixed-Width to Flexible in 55 Minutes

Retro Responsive From Fixed-width to Flexible

in Fifty-five Minutes

p Rachel chartoff Web designer

Engineering IT shared services  

Rchartoff

ravelry.com

2013 Edible Book Festival

2013 Edible Book Festival

“As I Lay Frying”

Engineering IT SHARED SERVICES

Josh Potts Laura Hayden Rachel Chartoff Amy Adams Amy Hurst David Kees YOU?

responsive design IS:

“Design for the ebb and flow of things.” – Ethan Marcotte ² Device independence ² Visual flexibility ² Performance A

responsive design

IS design for

_______.

REACH YOUR AUDIENCE

American Adults (Jan 2014) ² 90% have a cell phone

² 58% have a smartphone

² 42% own a tablet computer

34% OF cell internet users go online

mostly using their phones Source: pewinternet.org/fact-sheets/mobile-technology-fact-sheet/ (updated regularly)

A

A

A

A

A

AWWW!

PHABLET

PHashion challenge?

si.wsj.net   www.abricocotier.fr  

SPACE IS NOT THERE TO BE FILLED

² Viewable angle ² Line length ² 960px still standard

Helpful Tools

p

Firefox:

Responsive Design View

Tools > Web Developer > Responsive Design View

CHROME: DEV TOOL RULERS

² View > Developer > Developer Tools ² Resize window to view dimensions

² Subscription-based tool ²  Interact with (almost) any browser ² Simulate mobile devices ² browserstack.com

Getting Started

i

an existing site

²  Header and footer ²  Header navigation bar ²  960-pixel container ²  Horizontally centered

G

A

container

container

header

container

header

content

container

header

content

footer

A FEW HTML ADDITIONS

Y

ADD A VIEWPORT META TAG

<meta name="viewport" content="width=device-width, initial-scale=1"> ² sizes content to the device’s viewport width ² ensures layout is not zoomed out on load ² Use both rules to ensure maximum compatibility

ADD A VIEWPORT CSS RULE, TOO

@viewport, @-ms-viewport { zoom: 1.0; width: extend-to-zoom;

}

SAVE US FROM compatibility MODE

<meta http-equiv="X-UA-Compatible" content="IE=edge">

² Ensures content is displayed with the most recent IE rendering engine

² Unless it’s an “intranet” ² Google “Compatibility view and

‘Smart Defaults’” for more info p

MEDIA QUERIES

w

Uh oh, browser support

² No media query support in <IE 8, Safari 2, Firefox 1,2

²  Include css3-mediaqueries.js by Wouter van der Graff

² code.google.com/p/css3-mediaqueries-js/

SMALLEST OR LARGEST sizes FIRST?

² Putting smallest sizes first utilizes the cascade, gets around IE8 issues

²  I write largest to smallest, then re-arrange before launch

MULTIPLE CSS FILES?

Your choice. I separate them for side-by-side viewing.

<link rel="stylesheet" type="text/css" href=“/style.css"> <link rel="stylesheet" type="text/css" href=“/responsive.css">

BASIC MEDIA QUERY FoRMAT

#container { width: 960px; }

@media only screen and (max-width: 960px ) { #container { width: 100%; }

}  

style.css  

responsive.css  

START WITH large containers

²  Change px or em widths to percentages ²  Remove floats ²  Check padding – may not need as much

Responsive containers

@media only screen and ( max-width: 960px ) { #container, #header, #content, #footer { width: 100%; float: none; padding: 0px; }

}  

responsive.css  

BASIC LAYOUT

SAME LAYOUT,

SIZED IN

PERCENTAGES

803 px

Size Down until it breaks down

²  When layout breaks, note pixel width ²  Make a new @media query with rules for

that max-width

REMOVE

FLOATS,

Stack nav

ITEMS

672 px

Alter font

sizes

320 px

HTML Source Order

²  Put important content first so it stacks at the top on smaller screens

²  Slide-out navigation can be anywhere in the source

A

Examine padding

²  Use less vertical padding to save mobile users from scrolling

²  Don’t remove too much space ²  Keep targets big

Responsive typography

•  More than just resizing the container and letting text reflow

•  Use resizable units: em or rem, not px •  Keep line height flexible too – and specify it

TRY using REM UNITS

•  REM = Relative EM •  Sizes text from the context of the root

element (html), not the container •  Avoids extra math •  Not supported by <IE8, so use px as backup

Sizing in PX and rem

@media only screen and ( max-width: 500px ) { body { font-size: 62.5%; } #site-name h1 { font-size: 24px; font-size: 2.4rem; line-height: 24px; line-height: 2.4rem; }

}  

responsive.css  

RESPONSIVE NAVIGATION

q

Responsive nav CHECKLIST

²  Offer same options as full-size site ²  Use established design patterns ²  There is no “hover”

Stacked

Stacked in

columns

Code and examples: www.hongkiat.com/blog/responsive-web-nav/

HAMBURGER

SLIDE-OUT:

FROM SIDE

HAMBURGER

SLIDE-OUT:

FROM TOP

SLICKNAV

² Keyboard Accessible

² Degrades gracefully without JavaScript

² Creates ARIA compliant menu

RESPONSIVE IMAGES

b

Please, think of the BANDWIDTH.

²  display: none hides the problem ²  Browsers load all images anyway ²  Detect smaller screens, load smaller images

HTML5 PICTURE TAG - SOMEDAY...

²  Draft specification ²  Not supported, but awesome <picture>

<source srcset="mobile.png, mobile-hd.png 2x">     <source media="(min-width: 480px)" srcset="tablet.png, tablet-hd.png 2x">     <source media="(min-width: 1024px)" srcset="desktop.png, desktop-hd.png 2x">     <img src="tablet.png" alt="A photo of London by night"> </picture>  

IN THE MEANTIME, choose...

²  HiSRC – jQuery plugin ²  Adaptive Images – server-side PHP ²  Sencha.io Src – third-party processor ²  Picturefill - JavaScript

Z

PICTUREFILL

²  Serves up images based on screen size ²  A little extra markup and a tiny JavaScript ²  Includes support for IE8 and <noscript> ²  Can be called programmatically ²  github.com/scottjehl/picturefill

N

PICTUREFILL EXAMPLE

<span  data-­‐picture  data-­‐alt="Jell-­‐O">    <span  data-­‐src="images/retrofood-­‐feature-­‐500.jpg"></span>    <span  data-­‐src="images/retrofood-­‐feature-­‐790.jpg"  data-­‐media="(min-­‐width:  500px)"></span>    <span  data-­‐src="images/retrofood-­‐feature.jpg"  data-­‐media="(min-­‐width:  790px)"></span>  

   <!-­‐-­‐  Fallback  content  for  non-­‐JS  browsers.  Same  img  src  as  the  iniMal  img.  -­‐-­‐>    <noscript><img  src="images/retrofood-­‐feature-­‐500.jpg"  alt="Jell-­‐O"></noscript>  

</span>  

N <script>  

 //  Picture  element  HTML  shim|v  it  for  old  IE  (pairs  with  Picturefill.js)      document.createElement(  "picture"  );  

</script>  <script  async="true"  src="scripts/picturefill.js"></script>  

IMAGE SIZE COMPARISON

264K

79K 179K

PICTUREFILL EXAMPLE N <span  data-­‐picture  data-­‐alt="Jell-­‐O">  

 <span  data-­‐src="images/retrofood-­‐feature-­‐500.jpg"></span>    <span  data-­‐src="images/retrofood-­‐feature-­‐790.jpg"  data-­‐media="(min-­‐width:  500px)"></span>    <span  data-­‐src="images/retrofood-­‐feature.jpg"  data-­‐media="(min-­‐width:  790px)"></span>  

   <!-­‐-­‐  Fallback  content  for  non-­‐JS  browsers.  Same  img  src  as  the  iniMal  img.  -­‐-­‐>    <noscript><img  src="images/retrofood-­‐feature-­‐500.jpg"  alt="Jell-­‐O"></noscript>  

</span>  

@media only screen and ( max-width: 960px ) { .photo-feature img { width: 100%; height: auto; }

}  

responsive.css  

960 px image

790 px image

500 px image

FINAL STEP: TEST!

F

CROSS-BROWSER TESTING IS IMPORTANT.

Basic user testing

²  Ask someone else to use it ²  Load it over a slow connection ²  Try lots of devices ²  Utilize testing software (BrowserStack.com) ²  Cheap and worth it!

GO BUILD SOMETHING AWESOME.

THANK YOU!

²  @rachelchartoff ²  slideshare.net/rachelchartoff ²  [email protected]