Examples and Best Practices in Responsive Web Design

Transcription

1 Examples and Best Practices in Responsive Web Design

2 WHAT IS RESPONSIVE DESIGN?

3 What is Responsive Design? fluid grid flexible images media queries Ethan Marcotte, 2010

4 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

5 What is Responsive Design? Good User Experience. Me, Just Now

6 WHEN DID THIS BECOME A THING?

7

8 1995 The Good Usability! Flexibility! Responsive-ish (really!)

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

10 Most Likely Device

11 Progress 1995 thru 2005

12 The Mobile Web 2005

13 The Mobile Web 2005

14 2007

15 The Mobile Web 2007

16 Web Design Advances in 2008

17 Still Ignoring Users

18 The Wrong Discussions

19 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.

20 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.

21 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.

22 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.

23 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.

24 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.

25 Responsive Design Flexible Layouts

26 Responsive Design Flexible Images and Video

27 Responsive Design CSS Media Queries.introtext { font-size: (min-width: 768px) {.introtext { font-size: 150%; } }

28 HOW DO WE DO THIS?

29 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.

30 We re still figuring it out.

31 Progress waits for no one. January 2014 Mobile Takeover

32 Google waits for no one. April 2015 Mobilegeddon priority to web sites that display well on smartphones and other mobile devices

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

34 Many of your members will ONLY interact with your organization through your website this year. Was that a good experience? DOES IT MATTER? YES!

35 Impact of Responsive Design Search Engine Ranking Members (current, potential) Staffing (current, potential) Sales Dues Event Attendance

36 Impact of Responsive Design Search Engine Ranking Members (current, potential) Staffing (current, potential) Sales Dues Event Attendance Revenue!

37 A fresh coat of paint won t cut it! PLANNING

38 What are we working with? Tech Take Inventory Software Upgrades Integration Needs Opportunities for consolidation

39 What are we working with? Content Take inventory What is missing? What should go away? What can be simplified? What could be done better?

40 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?

41 What are we working with?

42 RESPONSIVE RiSE

43 AASA

44 Care Providers

45 Care Providers

46 AAAE

47 Other Resources Responsive Web Design Bootstrap SASS Tuts+ CSS Tricks

48 Thank you Dan Peterson TGD Megan Shankle ISG Solutions Geoff Parks ISG Solutions