Using Responsive Web Design To Make Your Web Work Everywhere - Updated

Using Responsive Web Design To Make Your Web

Work EverywhereChris Love

http://Love2Dev.com@ChrisLove

My BioASP.NET MVPASP InsiderEdge User AgentWeb developer 25 yearsAuthor & Speaker

@ChrisLoveLove2Dev.com

Slide Deck & Source Code

Source Codehttp://GitHub.com/

docluv

Slide Deck http://slideshare.net/docluv/presentations

Responsive Web Design

Introduced by Ethan Marcotte 2010 - bit.ly/178an9e

Design responds

to thescreen size

Responsive web design

Optimal viewing experience & easy navigation

Responsive web design

Minimal resizing,

panning, and scrolling

Responsive web design

http://bit.ly/20p5Qc0

Why Responsive Web Design?

SEO

Hayley Francishttp://bit.ly/1VcJXNY

“Google not only recommends RWD as the best way to target mobile users, but also favors mobile-optimized sites when presenting results for searches made on a mobile device.”

http://bit.ly/1VcJXNY

SEO“Mobile websites can suffer from a high bounce rate if the content they offer is too stripped down, or too dissimilar from the content offered on the desktop site. Google will interpret this high bounce rate as a sign that a website isn’t offering relevant content to users, which is likely to lead to a drop in rankings.” Hayley Francis

http://bit.ly/1VcJXNY

Single Web Site/AppConsistent Content = Happy Users

Single Web Site/AppEasier to Maintain Code

Single Web Site/AppReduce number of devices used to

accomplish a goal

60% adults use at least 2 devices every day40% have changed device through an activity

http://bit.ly/22jCR95

Not Mobile Friendly Loses CustomersUser Frustration leads to Lower

Engagement Rates

Not Mobile Friendly Loses CustomersLower Brand Image

Responsive Best Practices

Design responds to the screen size

Viewport as a Whole Scales

No matter how small

No Horizontal Scrollbars

Predict Page Flow in each Viewport

No Hard Limits on Block Width

Don’t Cut Off Text Unpredictably

Don’t Wrap Menus

Use Shorter Menus

Use Hamburger & Standard Icons

Make Images Responsive

Scale or

Crop

Watch for Horizontal Scrollbar

Key to Intelligent Responsive DesignContent-driven Design

Key to Intelligent Responsive DesignWhat parts of the page become unimportant as the viewport gets smaller?

Key to Intelligent Responsive DesignDesign Mobile First

and Increase Viewport

Responsive Design Can you spot responsive websites?

Don’t Assume User Needs

Assuming User NeedsYou Can Determine User Expectations Based on Device

Most Mobile Activity Occurs on a Couch or Lean Back Scenario

Assuming User Needs“I think the key is not to assume anything. We don’t really know what our users have come to look at. So, we can’t say, “Oh, it’s okay. This person is on a mobile, so we’re going to cut out a load of the content so they can’t reach it.”

John Cleveley BBC Newshttp://responsivewebdesign.com/podcast/bbc.html

“[We had] this unspoken agreement to pretend that we had a certain size. And that size changed over the years. For a while, we all sort of tacitly agreed that 640 by 480 was the right size, and then later changed to 800:600, and 1024; we seem to have settled on this 960 pixel as being this like, default. It’s still unknown … this consensual hallucination that we’ve all agreed to participate in:

“Let’s assume the browser has a browser width of at least 960 pixels.”

bit.ly/1bhH6rw

Jeremy Keith

Co-founder - Clearleft

Blog - adactio

“The emergence of ideas like “responsive design” and “future-friendly thinking” are in part a response to the collective realization that designing products that solve one problem in one context at a time is no longer sustainable. By refocusing our process on systems that are explicitly designed to adapt to a changing environment, we have an opportunity to develop durable, long-lasting designs that renew their usefulness and value over time.”

bit.ly/1SMKcwR

Wilson Miner

TheManual.org“Perennial

Design”

“Any attempt to draw a line around a particular device class has as much permanence as a literal line in the sand. Pause for a moment and the line blurs. Look away and it will be gone. Let’s take the absolute best case scenario. You’re building a web app for internal users for whom you get to specify what computer is purchased and used. You can specify the browser, the monitor size, keyboard, etc.”

bit.ly/KzJH9G

Jason GrigsbyCo-Founder of

CloudFour.com & MobilePortland.comCo-Author of Head First Mobile Web

“How long do you think that hardware will be able to be found? Three years from now when a computer dies and has to be replaced, what are the chances that the new monitor will be a touchscreen?By making a decision to design solely for a “desktop UI”, you are creating technical debt and limiting the longevity of the app you’re building. You’re designing to a collective hallucination. You don’t have to have a crystal ball to see where things are headed.And once you start accepting the reality that the lines inside form factors are as blurry as the lines between them, then responsiveness becomes a necessity.”

Jason Grigsbybit.ly/KzJH9G

Responsive Web DesignTactics & Tools

Fluid Grid

Flexible Media

Media Queries

Media Queries@media (min-width: 600px) { /* Selectors & Rules */}@media (min-width: 820px) { /* Selectors & Rules */ }@media (min-width: 1080px) { /* Selectors & Rules */}

Chrome Device Mode

https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/

Emulate your site across different screen sizes and resolutions, including Retina displays.

Responsively design by visualizing and inspecting CSS media queries.

Evaluate your site’s performance using the network emulator, without affecting traffic to other tabs.

Set the Viewport

Responsive optionManually size to test and plan for unknown devices

Or Chose A Specific DeviceMost popular devices

Chrome Device Mode Presets• Sets the correct "User Agent" (UA) string.• Sets the device resolution and DPI (device pixel ratio).• Emulates touch events (if applicable).• Emulates mobile scrollbar overlays and meta viewport.• Autosizes (boosts) text for pages without a defined viewport.

Emulation Toggle States & Orientation

Default Browser UI with Chrome navigation barwith open keyboard

Slide Deck & Source Code

Source Codehttp://GitHub.com/

docluv

Slide Deck http://slideshare.net/docluv/presentations