june 24 - 26, 2014june 24 - 26, 2014 san diego, ca session 908 –real-world responsive web design:...
TRANSCRIPT
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
Page 2Session 908 – Real-world Responsive Web Design: A Case Study of the mLearnCon
Website – Tiffany Le Brun & Crystal Rose, The eLearning Guild
What Is Responsive Web Design?
Responsive websites respond
to their environments
Origins of RWD
June 24 - 26, 2014
San Diego, CA
Page 3Session 908 – Real-world Responsive Web Design: A Case Study of the mLearnCon
Website – Tiffany Le Brun & Crystal Rose, The eLearning Guild
5
WHY IS MOBILE IMPORTANT?
6
Early Smartphones
June 24 - 26, 2014
San Diego, CA
Page 4Session 908 – Real-world Responsive Web Design: A Case Study of the mLearnCon
Website – Tiffany Le Brun & Crystal Rose, The eLearning Guild
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
Page 5Session 908 – Real-world Responsive Web Design: A Case Study of the mLearnCon
Website – Tiffany Le Brun & Crystal Rose, The eLearning Guild
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
Page 6Session 908 – Real-world Responsive Web Design: A Case Study of the mLearnCon
Website – Tiffany Le Brun & Crystal Rose, The eLearning Guild
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
June 24 - 26, 2014
San Diego, CA
Page 7Session 908 – Real-world Responsive Web Design: A Case Study of the mLearnCon
Website – Tiffany Le Brun & Crystal Rose, The eLearning Guild
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
Page 8Session 908 – Real-world Responsive Web Design: A Case Study of the mLearnCon
Website – Tiffany Le Brun & Crystal Rose, The eLearning Guild
Project Details &
Challenges
mLearnCon 2013 Site
Lots of pinching and zooming!
June 24 - 26, 2014
San Diego, CA
Page 9Session 908 – Real-world Responsive Web Design: A Case Study of the mLearnCon
Website – Tiffany Le Brun & Crystal Rose, The eLearning Guild
Website vs. Conference Mobile App
vs.
IMPLEMENTATION
June 24 - 26, 2014
San Diego, CA
Page 10Session 908 – Real-world Responsive Web Design: A Case Study of the mLearnCon
Website – Tiffany Le Brun & Crystal Rose, The eLearning Guild
Designing for Responsive
Sketch sheets
Style Tiles—www.styletil.es
June 24 - 26, 2014
San Diego, CA
Page 11Session 908 – Real-world Responsive Web Design: A Case Study of the mLearnCon
Website – Tiffany Le Brun & Crystal Rose, The eLearning Guild
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
9. Samsung Galaxy S IV 348(0.66%) Phone
10. Samsung Galaxy S IV 323(0.62%) Phone
Media Queries
June 24 - 26, 2014
San Diego, CA
Page 12Session 908 – Real-world Responsive Web Design: A Case Study of the mLearnCon
Website – Tiffany Le Brun & Crystal Rose, The eLearning Guild
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
Page 13Session 908 – Real-world Responsive Web Design: A Case Study of the mLearnCon
Website – Tiffany Le Brun & Crystal Rose, The eLearning Guild
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
Page 14Session 908 – Real-world Responsive Web Design: A Case Study of the mLearnCon
Website – Tiffany Le Brun & Crystal Rose, The eLearning Guild
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
Page 15Session 908 – Real-world Responsive Web Design: A Case Study of the mLearnCon
Website – Tiffany Le Brun & Crystal Rose, The eLearning Guild
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%
grid-span-4 spans 4 columns 33.33%
grid-span-5 spans 5 columns 41.67%
grid-span-6 spans 6 columns 50%
grid-span-7 spans 7 columns 58.33%
grid-span-8 spans 8 columns 66.67%
grid-span-9 spans 9 columns 75%
grid-span-10 spans 10 columns 83.33%
grid-span-11 spans 11 columns 91.67%
grid-span-12 spans 12 columns 100%
The Code
June 24 - 26, 2014
San Diego, CA
Page 16Session 908 – Real-world Responsive Web Design: A Case Study of the mLearnCon
Website – Tiffany Le Brun & Crystal Rose, The eLearning Guild
Auto stacking—Under 900px
Auto stacking—Under 600px
June 24 - 26, 2014
San Diego, CA
Page 17Session 908 – Real-world Responsive Web Design: A Case Study of the mLearnCon
Website – Tiffany Le Brun & Crystal Rose, The eLearning Guild
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
Page 18Session 908 – Real-world Responsive Web Design: A Case Study of the mLearnCon
Website – Tiffany Le Brun & Crystal Rose, The eLearning Guild
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
Page 19Session 908 – Real-world Responsive Web Design: A Case Study of the mLearnCon
Website – Tiffany Le Brun & Crystal Rose, The eLearning Guild
ADDITIONAL INFORMATION
Future Implementations
• Adaptive Images
• FitText
June 24 - 26, 2014
San Diego, CA
Page 20Session 908 – Real-world Responsive Web Design: A Case Study of the mLearnCon
Website – Tiffany Le Brun & Crystal Rose, The eLearning Guild
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
June 24 - 26, 2014
San Diego, CA
Page 21Session 908 – Real-world Responsive Web Design: A Case Study of the mLearnCon
Website – Tiffany Le Brun & Crystal Rose, The eLearning Guild
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