june 24 - 26, 2014june 24 - 26, 2014 san diego, ca session 908 –real-world responsive web design:...

June 24 - 26, 2014

San Diego, CA

Page 1Session 908 – Real-world Responsive Web Design: A Case Study of the mLearnCon

Website – Tiffany Le Brun & Crystal Rose, The eLearning Guild

Real-world Responsive Web Design:

A Case Study of the mLearnCon

Website

2

In this Session…

• Introduction to responsive web design

• Demo of the mLearnCon site

• Project overview

• Implementation

• Additional resources

• Questions

June 24 - 26, 2014

San Diego, CA



What Is Responsive Web Design?

Responsive websites respond

to their environments

Origins of RWD

June 24 - 26, 2014

San Diego, CA



5

WHY IS MOBILE IMPORTANT?

6

Early Smartphones

June 24 - 26, 2014

San Diego, CA



7

2007 2008

Re-inventing the Smartphone

1.4 BillionSmartphones in use in 2013

83%of users want a seamless experience across

all devices

9 out of 10users say access to content however they

want it is important

Some Interesting Tidbits About Mobile:

June 24 - 26, 2014

San Diego, CA



9

Mobile Website Options

VS.

Dedicated

Mobile Website

Responsive

Web Design

Mobile Site vs. Responsive Web Design

Designing for mobile user needs(eg. e-commerce, directions, app downloads)

Ease of updating site

Optimizing for search engines

Quick site creation

Affordable web development

WHAT ARE YOUR BUSINESS NEEDS?

Key Good fit Better fit Best fit

June 24 - 26, 2014

San Diego, CA



11

So How Do You Choose?

Responsive Web design = better for

content-focused sites

Dedicated Mobile site = better for feature-

driven sites, where special custom

features are required

Mobile Screen Resolution Statistics320x568

12%

320x48012%

480x8008%

360x6407%

720x12807%240x320

6%

800x6003%

other45%

Mobile Screen

ResolutionMarket Share

320x568 12.09

320x480 11.95

480x800 8.24

360x640 6.85

720x1280 6.60

240x320 5.98

800x600 3.34

320x240 2.95

1080x1920 1.91

540x960 1.67

320x534 1.48

128x160 1.45

360x592 1.33

480x854 1.08

240x400 0.73

640x360 0.66

320x401 0.60

800x480 0.59

300x371 0.59

800x1280 0.50

Other 29.41Source:

StatCounter Global Stats

http://gs.statcounter.com/

June 24 - 26, 2014

San Diego, CA



Core Elements of a Responsive Site

• Fluid Grid: website is built on a grid that’s

based on percentages instead of pixels

• Flexible images & video: images scale

depending on the resolution of the screen

they are being viewed on

• Media queries: CSS property used to alter

the layout at various breakpoints in the

design

MLEARNCON WEBSITE DEMO

June 24 - 26, 2014

San Diego, CA



Project Details &

Challenges

mLearnCon 2013 Site

Lots of pinching and zooming!

June 24 - 26, 2014

San Diego, CA



Website vs. Conference Mobile App

vs.

IMPLEMENTATION

June 24 - 26, 2014

San Diego, CA



Designing for Responsive

Sketch sheets

Style Tiles—www.styletil.es

June 24 - 26, 2014

San Diego, CA



Our Users

Browser ShareScreen

size

1. Apple iPad 18,005(34.39%) Tablet

2. Apple iPhone 16,565(31.64%) Phone

3. (not set) 2,876(5.49%)

4. Samsung Galaxy S III 848(1.62%) Phone

5. Samsung Galaxy S IV 607(1.16%) Phone

6. Google Nexus 7 566(1.08%) Tablet

7. LG Nexus 5 403(0.77%) Phone

8. Samsung Galaxy Note II 355(0.68%) Phablet



Media Queries

June 24 - 26, 2014

San Diego, CA



Media Queries

• Extra Large (xl): 900px or larger

• Large (lg): 768px – 899px

• Medium (md): 600px – 767px

• Small (sm): 321px – 599px

• Extra Small (xs): 320px or smaller

Viewport Settings

<meta name="viewport" content="width=device-width, initial-scale=1">

With Viewport SettingMissing Viewport Setting

June 24 - 26, 2014

San Diego, CA



Flexible Images

img {

max-width: 100%;

height: auto;

width: auto\9; /* ie8 */}

Older Browsers

• response.js

• Implementing different widths for older

browsers

June 24 - 26, 2014

San Diego, CA



Fluid Grid System

1 1 1 1 1 1 1 1 1 1 1 1

2 2 2 2 2 2

3 3 3 3

4 4 4

6 6

1 11

2 10

3 9

4 8

5 7

12

Fluid Grid System

8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33% 8.33%

16.67% 16.67% 16.67% 16.67% 16.67% 16.67%

25% 25% 25% 25%

33.33% 33.33% 33.33%

50% 50%

8.33% 91.67%

16.67% 83.33%

25% 75%

33.33% 66.67%

41.67% 58.33%

100%

June 24 - 26, 2014

San Diego, CA



Fluid Grid System

Class Name Span Width Size

grid-span-1 spans 1 column 8.33%

grid-span-2 spans 2 columns 16.67%

grid-span-3 spans 3 columns 25%










The Code

June 24 - 26, 2014

San Diego, CA



Auto stacking—Under 900px

Auto stacking—Under 600px

June 24 - 26, 2014

San Diego, CA



Automatic Breaks vs. Controlled Breaks

.grid-auto-r

.grid-r

Below 600px: spans 12 columns

600px or greater: spans 4 columns

Below 600px: spans 12 columns

768px – 600px: spans 12 columns

768px or greater: spans 4 columns

Adding Padding/Margins

.pad

June 24 - 26, 2014

San Diego, CA



Other Utility

Visible and Hidden Classes

.visible-xl

.hidden-xl

Showing and hiding

depending on screen-size

Navigation

Mobile Menu Other Options

Plus and Minus Symbol

Grid Symbol

Unordered List Symbol

June 24 - 26, 2014

San Diego, CA



ADDITIONAL INFORMATION

Future Implementations

• Adaptive Images

• FitText

http://adaptive-images.com/

http://fittextjs.com/

June 24 - 26, 2014

San Diego, CA



Future Implementations?

• Responsive Icons

• Responsive Content

– http://arleym.com/

Additional Tools

• Firebug/Web Developer Tools

• Responsive Design View (FF)

• resizeMyBrowser

• Sketch Sheets

• MediaQueri.es

• Bootstrap / Foundation

• Google Web Starter Kit

https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View

http://MediaQueri.es

http://getbootstrap.com/

http://foundation.zurb.com/

https://developers.google.com/web/starter-kit/

June 24 - 26, 2014

San Diego, CA



Resources

• Beginners Guide to Responsive Web Design

• Responsive Web Design Tips and Notes

• Guidelines for Responsive Web Design

• Responsive Web Design, by Ethan Marcotte

Contact Us

Crystal [email protected]

Web Developer &

Production Design Lead

Tiffany Le [email protected]

Email/Web Developer

http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

http://www.sitepoint.com/responsive-web-design-tips-and-notes/

http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

http://www.abookapart.com/products/responsive-web-design

june 24 - 26, 2014june 24 - 26, 2014 san diego, ca session 908 –real-world responsive web design:...

Documents