Examples and Best Practices in Responsive Web Design

WHAT IS RESPONSIVE DESIGN?

What is Responsive Design?

fluid gridflexible imagesmedia queries– Ethan Marcotte, 2010

What is Responsive Design?

Responsive web design is the practice of building a website suitable to work on every device and every screen size, no matter how large or small, mobile or desktop.– Shay Howe, 2013

What is Responsive Design?

Good User Experience.– Me, Just Now

WHEN DID THIS BECOME A THING?

1995 – The Good

• Usability!• Flexibility!• Responsive-ish (really!)

1995 – The Bad

• Design was crude• Branding was minimal• No fancy fonts• No crazy styles• No flash (yay)• dial-up Internet (limited bandwidth)

Most Likely Device

Progress 1995 thru 2005

The Mobile Web 2005

The Mobile Web 2005

2007

The Mobile Web 2007

Web Design Advances in 2008

Still Ignoring Users

The Wrong Discussions

Responsive Design is Born 2010

…Inconsistent window widths, screen resolutions, user preferences, and our users’ installed fonts are but a few of the intangibles we negotiate…

…Mobile browsing is expected to outpace desktop-based access within three to five years…

…We’re designing for mice and keyboards, for T9 keypads, for handheld game controllers, for touch interfaces.

http://alistapart.com/article/responsive-web-design

Responsive Design is Born 2010

…Inconsistent window widths, screen resolutions, user preferences, and our users’ installed fonts are but a few of the intangibles we negotiate…

…Mobile browsing is expected to outpace desktop-based access within three to five years…

…We’re designing for mice and keyboards, for T9 keypads, for handheld game controllers, for touch interfaces.

http://alistapart.com/article/responsive-web-design

Responsive Design is Born 2010

…Inconsistent window widths, screen resolutions, user preferences, and our users’ installed fonts are but a few of the intangibles we negotiate…

…Mobile browsing is expected to outpace desktop-based access within three to five years…

…We’re designing for mice and keyboards, for T9 keypads, for handheld game controllers, for touch interfaces.

http://alistapart.com/article/responsive-web-design

Responsive Design is Born 2010

• Stop pretending there is a most common device.• Our visitors will have desktops, laptops, phones,

watches, refrigerators, televisions, tablets, etc..• They expect the site to have the same capabilities no

matter what.

Responsive Design is Born 2010

• Stop pretending there is a most common device.• Our visitors will have desktops, laptops, phones,

watches, refrigerators, televisions, tablets, etc..• They expect the site to have the same capabilities no

matter what.

Responsive Design is Born 2010

• Stop pretending there is a most common device.• Our visitors will have desktops, laptops, phones,

watches, refrigerators, televisions, tablets, etc..• They expect the site to have the same capabilities no

matter what.

Responsive Design 1-2-3

1. Flexible Layouts

1

2

3

4

1

42 3

Responsive Design 1-2-3

2. Flexible Images and Video

1

2

3

4

1

42 3

Responsive Design 1-2-3

3. CSS Media Queries

.introtext { font-size: 100%;}

@media (min-width: 768px) {.introtext { font-size: 150%; }

}

HOW DO WE DO THIS?

Still Lots of Ideas and Questions

• Responsive vs. Adaptive• Mobile First• Media Queries on Mobile?• PX vs % vs EM vs REM• Breakpoints?• Polyfills and Modernizr (Yay!)

• Bootstrap (Thank you Twitter!)

• Preprocessors vs. Postprocessors (SASS, Pleeease, etc.)

…and more.

We’re still figuring it out.

Progress waits for no one.

January 2014 – Mobile Takeover

Google waits for no one.

April 2015 – Mobilegeddon

…priority to web sites that display well on smartphones and other mobile devices

DOES IT MATTER?

Many of your members will ONLY interact with your organization through your website this year. Was that a good experience?

DOES IT MATTER?YES!

Many of your members will ONLY interact with your organization through your website this year. Was that a good experience?

Impact of Responsive Design

• Search Engine Ranking• Members (current, potential)

• Staffing (current, potential)

• Sales• Dues• Event Attendance

Impact of Responsive Design

• Search Engine Ranking• Members (current, potential)

• Staffing (current, potential)

• Sales • Dues• Event Attendance• Revenue!

PLANNINGA fresh coat of paint won’t cut it!

What are we working with?

Tech• Take Inventory• Software Upgrades• Integration Needs• Opportunities for consolidation

What are we working with?

Content • Take inventory• What is missing?• What should go away?• What can be simplified?• What could be done better?

What are we working with?

Design• Does the site look professional?• Are there places where we can improve the experience?• What is working?• What can be improved?

What are we working with?

RESPONSIVE RiSE

AASA

Care Providers

Care Providers

AAAE

Other Resources

• Responsive Web Design http://alistapart.com/article/responsive-web-design

• Bootstrap http://getbootstrap.com/

• SASShttp://sass-lang.com/

• Tuts+http://webdesign.tutsplus.com/

• CSS Trickshttps://css-tricks.com/

Thank youDan Peterson TGDMegan Shankle ISG SolutionsGeoff Parks ISG Solutions