Ditch the App, Go Responsive!

Ditch the App, Go Responsive! Daniel O'Connor (danoc.me) #acpsf

State of the Web

Boston Globe Sept. 2011 • First responsive major news website
• Set a standard and started a trend

TIME Oct. 2012 • First fully responsive global news site
• Continue to support their mobile application

Pipe Dream Feb. 2012

Daily Orange Aug. 2012

Daily Kansan Aug. 2012

Ditch the App! • Existing solutions... ◦ don't make sense
economically ◦ poorly designed ◦ glorified RSS readers • Custom apps are expensive/hard to build • Must support multiple operating systems • Where's the demand?

Detecting Mobile Visitors • Server-side - check the user agent
string • Client-side - media queries

Ingredients of Responsive Design • Fluid layout • Flexible images
and media • Media queries

Fluid layout • Layout should adjust to the browser viewport
• Use percentages instead of pixels for width #main { float: left; width: 65%; } #sidebar { float: left; width: 35%; } <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>The HTML5 Herald</title> <link rel="stylesheet" href=" style.css"> </head> <body> <div id="main">Main</div> <div id="sidebar">Sidebar</div> </body> </html>

Flexible images and media • Images and media should resize
with browser • Max-width of img, embed, object, and video img, embed, object, video { max-width: 100%; }

Media Queries • Adapt the layout to smaller devices •
Target each breakpoint in the layout @media only screen and (max-width : 980px) { #search-form .search-bar { width: 180px; } }

Viewport • Mobile browsers assume website was designed for desktop
• Specify viewport to notify the browser: <meta name="viewport" content="initial-scale=1.0, width=device-width" />

Advanced Issues • Images are too large for mobile: http://adaptive-images.com/
• IE 6-8 doesn't support media queries: https://github.com/scottjehl/Respond • Detect viewport with Javascript: http://responsejs.com/labs/dimensions/

Tools • Responsive Design Bookmarklet: http://responsive.victorcoulon.fr/ • Chrome Developer Toolbar:
http://bit.ly/T2FuI5

Questions? @itsdanoc danoc.me/acpsf [email protected]

Ditch the App, Go Responsive!

Ditch the App, Go Responsive!

Daniel O'Connor

Other Decks in Technology

Featured

Transcript