RESPONSIVE WEB DESIGN
August 5, 2013
OVERVIEW
• WHAT IS RESPONSIVE WEB DESIGN?
• WHY RWD?
• HOW RWD WORKS
• WHEN TO USE RWD
• RWD + PHARMA
WHAT IS
RESPONSIVE WEB DESIGN?
THE WAY IT WAS
Visit us on the World Wide Web!
Surf your Netscape to http://www.yahoo.com
THE WAY IT WAS (RECENTLY)
yahoo.com
m.yahoo.com
THE WAY IT IS TODAY
RESPONSIVE WEB DESIGN DEFINED
A Responsive Web Design (RWD) is a website that has the
ability to reconfigure its layout, n...
RWD IS A WEB SOLUTION
WHY RWD?
ETHAN MARCOTTE INTRODUCED
RWD IN 2010
“Now, more than
ever, we‟re designing work
meant to be viewed along
a gradient of di...
THE WAY IT WAS IN 2010
Device Share of
Website Traffic
3.8%
MORGAN STANLEY INTERNET TRENDS, 2010
950
Global Mobile Web
Use...
THE WAY IT WAS IN 2010
In 2010, Mary
Meeker (Morgan
Stanley Research)
predicted that
mobile internet
would take over
deskt...
3G AND WIFI-ENABLED TABLETS
MADE THEIR DEBUTS
iPad
April
Kindle 3
April
Galaxy
September
THE WAY IT IS TODAY
“Smartphones and tablets
are completely reshaping
the way consumers connect
with content... with
audie...
THE WAY IT IS TODAY
1.2
Global Mobile Web
Users
(17% of mobile
subscribers)
BILLION
IDC, FEBRUARY 2012
5.9
Global Mobile
S...
“Multi-platform
consumption is today‟s
new reality. One in 3
minutes spent online is
beyond the PC.”
37% 63%
COMSCORE MOBI...
THE WAY IT IS TODAY
“The biggest screen size is 13.5 times larger than the
small one.” MOBIFY GLOBAL NETWORK SURVEY, 2012
...
THE WAY IT IS TODAY
UltraHD—with a minimum resolution of 3,850 x 2,160
pixels—is set to debut this fall.
4x the resolution...
WHY IS THIS IMPORTANT?
2010 2011 2012 2013
Digital 3:14 3:50 4:31 5:09
• Online* 2:22 2:33 2:37 2:19
• Mobile (Nonvoice) 0...
HOW RWD WORKS
RWD IS BUILT USING
THE FOLLOWING TOOLS
FLUID GRIDS +
BREAKPOINTS
FLEXIBLE IMAGES +
TYPE
MEDIA QUERIES
<link rel=”styleshee...
320 pixel width768 pixel width
NAVIGATION
FEATURED CONTENT AREA
SIDEBAR
PROMOTIONAL
CONTENT
PROMOTIONAL
CONTENT
PROMOTIONA...
BREAK POINTS REPRESENT UNIQUE
LAYOUTS BASED ON DESIGNATED SCREEN
SIZES
LAYOUT 1
768 pixels and higher
LAYOUT 2
481-767 pix...
CHOOSING BREAK POINTS
Desktop
Mini Tablet
Smartphone
Tablet Portrait
Tablet Landscape
Laptop
Big screen
CHOOSING BREAK POINTS
Smartphone
Big screen
Computer
Tablet
CHOOSING BREAK POINTS
Smartphone
Everything Else
CONTENT CAN BE HIDDEN OR REARRANGED
AT DESIGNATED BREAK POINTS
LAYOUT 1
768 pixels and higher
LAYOUT 2
481-767 pixels
LAYO...
FLEXIBLE IMAGES AND TYPE ADJUST
ACROSS SCREEN SIZES AND BREAK POINTS
COPY: CARRIE COUSINS, ADOBE.COM
IMAGE: CSS TRICKS, RU...
HOW DOES RWD REALLY WORK?
Content
What does it say?
+
Presentation
What does it look like?
+
Logic
What does it do?
LET‟S GET TECHNICAL
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8" />
<title>Sample Page</title>
<link rel="...
IT‟S ALL ABOUT STYLE
Normal
<link rel="stylesheet" href="example.css" />
Screen and Print
<link rel="stylesheet" media="sc...
<link rel=”stylesheet”
media-”(max-width:1440px)”
href=”example-1440.css” />
<link rel=”stylesheet”
media-”(max-width:768p...
IT‟S… COMPLICATED
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)...
WHEN TO USE RWD
RWD BENEFITS
RWD leverages a single codebase, making it the
most cost-effective long-term solution.
• Ensures content cons...
RWD + SEO
“Sites that use responsive web
design... is Google‟s
recommended configuration.
• It keeps your desktop and mobi...
RWD LIMITATIONS
RWD is limited to hiding and rearranging
content at different break points—it does
not consider changes to...
RWDMobile-Optimized Websites
MOBILE-OPTIMIZED VS. RWD
• Mobile-only solution
• Enables different tools and
content for dif...
RWD + PHARMA
MRL REVIEW CURRENTLY POSES
THE BIGGEST CHALLENGE TO
RWD
Successfully implementing RWD across
multiple break points and bro...
KLICK + RWD + MRL REVIEW
LESSONS LEARNED
Klick collaborates with Brand and MRL teams
early and often to determine the best...
KLICK + RWD + MRL REVIEW
LESSONS LEARNED
Klick can help you educate MRL teams on the
benefits on responsive design when it...
THANK YOU
Upcoming SlideShare
Loading in …5
×

Klick on Responsive Web Design

1,806 views

Published on

Responsive web design is all the rage, but what is driving the approach? and what are the technical realities?

Published in: Education, Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,806
On SlideShare
0
From Embeds
0
Number of Embeds
520
Actions
Shares
0
Downloads
30
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Klick on Responsive Web Design

  1. 1. RESPONSIVE WEB DESIGN August 5, 2013
  2. 2. OVERVIEW • WHAT IS RESPONSIVE WEB DESIGN? • WHY RWD? • HOW RWD WORKS • WHEN TO USE RWD • RWD + PHARMA
  3. 3. WHAT IS RESPONSIVE WEB DESIGN?
  4. 4. THE WAY IT WAS Visit us on the World Wide Web! Surf your Netscape to http://www.yahoo.com
  5. 5. THE WAY IT WAS (RECENTLY) yahoo.com m.yahoo.com
  6. 6. THE WAY IT IS TODAY
  7. 7. RESPONSIVE WEB DESIGN DEFINED A Responsive Web Design (RWD) is a website that has the ability to reconfigure its layout, navigation, content and images based on the browser display size and orientation on which it is presented.
  8. 8. RWD IS A WEB SOLUTION
  9. 9. WHY RWD?
  10. 10. ETHAN MARCOTTE INTRODUCED RWD IN 2010 “Now, more than ever, we‟re designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, allowing us to design for the ebb and flow of things.”
  11. 11. THE WAY IT WAS IN 2010 Device Share of Website Traffic 3.8% MORGAN STANLEY INTERNET TRENDS, 2010 950 Global Mobile Web Users (18% of mobile subscribers) MILLION ITU, 2010 5.3 Global Mobile Subscriptions (77% of total population) INTL TELECOMMUNICATION UNION (ITU), 2010 BILLION
  12. 12. THE WAY IT WAS IN 2010 In 2010, Mary Meeker (Morgan Stanley Research) predicted that mobile internet would take over desktop internet usage. GlobalUsers(inmillions) Global Mobile vs. Desktop Internet User Projection MORGAN STANLEY RESEARCH, 2010 2014
  13. 13. 3G AND WIFI-ENABLED TABLETS MADE THEIR DEBUTS iPad April Kindle 3 April Galaxy September
  14. 14. THE WAY IT IS TODAY “Smartphones and tablets are completely reshaping the way consumers connect with content... with audiences fragmenting even further as content gets shared across platforms.” COMSCORE MOBILE FUTURE IN FOCUS, 2013
  15. 15. THE WAY IT IS TODAY 1.2 Global Mobile Web Users (17% of mobile subscribers) BILLION IDC, FEBRUARY 2012 5.9 Global Mobile Subscriptions (87% of total population) IDC, FEBRUARY 2012 BILLION Device Share of Website Traffic (Q1 2013) 10.4% MONETATE ECOMMERCE QUARTERLY 10.6% 79% 5.3B in 2010 950M in 2010 3.8% in 2010
  16. 16. “Multi-platform consumption is today‟s new reality. One in 3 minutes spent online is beyond the PC.” 37% 63% COMSCORE MOBILE FUTURE IN FOCUS, 2013 THE WAY IT IS TODAY Global PC (Desktop/Notebook) and Tablet Shipments MORGAN STANLEY RESEARCH/GARTNER, 2013 GlobalUnitsShipped(inmillions) 50M units shipped 3 years after debut!
  17. 17. THE WAY IT IS TODAY “The biggest screen size is 13.5 times larger than the small one.” MOBIFY GLOBAL NETWORK SURVEY, 2012 11.4% Smartphone 19.5% Common 12” Notebook 7.3% Common in larger laptops
  18. 18. THE WAY IT IS TODAY UltraHD—with a minimum resolution of 3,850 x 2,160 pixels—is set to debut this fall. 4x the resolution of the current largest screen
  19. 19. WHY IS THIS IMPORTANT? 2010 2011 2012 2013 Digital 3:14 3:50 4:31 5:09 • Online* 2:22 2:33 2:37 2:19 • Mobile (Nonvoice) 0:24 0:49 1:33 2:21 • Other 0:26 0:28 0:31 0:36 TV 4:24 4:34 4:38 4:31 Average Time Spent per Day with Major Media, 2010-2013 * includes all internet activities on desktop and laptop computers EMARKETER, JULY 2013 Delivering content at the right screen size is critical to user engagement. 9+ hours a day with digital technology
  20. 20. HOW RWD WORKS
  21. 21. RWD IS BUILT USING THE FOLLOWING TOOLS FLUID GRIDS + BREAKPOINTS FLEXIBLE IMAGES + TYPE MEDIA QUERIES <link rel=”stylesheet” media-”(max- width:1440px)” href=”example- 1440.css” /> <link rel="stylesheet" media="screen" href="example.css" />
  22. 22. 320 pixel width768 pixel width NAVIGATION FEATURED CONTENT AREA SIDEBAR PROMOTIONAL CONTENT PROMOTIONAL CONTENT PROMOTIONAL CONTENT FLUID GRIDS ENABLE WEBSITES TO SCALE PROPORTIONATELY BETWEEN BREAK POINTS 1440 pixel width Discover and promotional content stacked Discover moves above promotional content
  23. 23. BREAK POINTS REPRESENT UNIQUE LAYOUTS BASED ON DESIGNATED SCREEN SIZES LAYOUT 1 768 pixels and higher LAYOUT 2 481-767 pixels LAYOUT 3 480 pixels and smaller Updated navigation and removed social column Hidden navigation and single column Choose breakpoints carefully: determines total project budget and effort.
  24. 24. CHOOSING BREAK POINTS Desktop Mini Tablet Smartphone Tablet Portrait Tablet Landscape Laptop Big screen
  25. 25. CHOOSING BREAK POINTS Smartphone Big screen Computer Tablet
  26. 26. CHOOSING BREAK POINTS Smartphone Everything Else
  27. 27. CONTENT CAN BE HIDDEN OR REARRANGED AT DESIGNATED BREAK POINTS LAYOUT 1 768 pixels and higher LAYOUT 2 481-767 pixels LAYOUT 3 480 pixels and smaller Hidden content does not minimize download time for smaller screen sizes: all content is loaded in the browser before the website is displayed. Instagram feed removed, video moved above headline Color bars removed
  28. 28. FLEXIBLE IMAGES AND TYPE ADJUST ACROSS SCREEN SIZES AND BREAK POINTS COPY: CARRIE COUSINS, ADOBE.COM IMAGE: CSS TRICKS, RUNDOWN OF HANDLING FLEXIBLE MEDIA “The quality of images is much more important than the number of images. Also as important as image quality is load time... when thinking about mobile users, who typically have more limited bandwidth. FLEXIBLE IMAGES “The key concept (for) responsive typography is line length... type should be optimized (for) screen width... 50 to 70 characters per line are ideal, but that drops to 35 to 50 on mobile devices. FLEXIBLE TYPE
  29. 29. HOW DOES RWD REALLY WORK? Content What does it say? + Presentation What does it look like? + Logic What does it do?
  30. 30. LET‟S GET TECHNICAL <!DOCTYPE html> <html lang="en"><head> <meta charset="utf-8" /> <title>Sample Page</title> <link rel="stylesheet" href="example.css" /></head><body> <div id="the_box"> <h1>Some Text</h1> </div> </body></html> #the_box{ background:red; color:white; font-family:Helvetica,Arial,sans-serif; font-size:18pt; font-weight:bold; height:500px; margin:50px auto; padding:30px; text-align:center; width:500px;}
  31. 31. IT‟S ALL ABOUT STYLE Normal <link rel="stylesheet" href="example.css" /> Screen and Print <link rel="stylesheet" media="screen" href="example.css" /> <link rel="stylesheet" media="print" href="example-print.css" /> Screen Size <link rel="stylesheet" media="(max-width:320px)" href="example-320.css" />
  32. 32. <link rel=”stylesheet” media-”(max-width:1440px)” href=”example-1440.css” /> <link rel=”stylesheet” media-”(max-width:768px)” href=”example-768.css” /> <link rel=”stylesheet” media-”(max-width:480px)” href=”example-480.css” /> MEDIA QUERIES COLLECT SCREEN SIZE DATA, APPLYING RESPECTIVE CSS STYLES MAX-WIDTH information tells the browser which website layout to deliver
  33. 33. IT‟S… COMPLICATED /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ }
  34. 34. WHEN TO USE RWD
  35. 35. RWD BENEFITS RWD leverages a single codebase, making it the most cost-effective long-term solution. • Ensures content consistency across devices, platforms and browsers • Avoids the need to create specific websites for each new device and resolution • Ideal for experiences that have a single website strategy across devices and platforms (e.g., content publication websites) See Simon Smith‟s blog post, Responsive Design From the Trenches, for more insights.
  36. 36. RWD + SEO “Sites that use responsive web design... is Google‟s recommended configuration. • It keeps your desktop and mobile content on a single URL, (making it) easier for Google‟s algorithms to assign indexing properties to your content.” PIERRE FAR, RECOMMENDATIONS FOR BUILDING FOR SMARTPHONE- OPTIMIZED WEBSITES (WEBMASTER CENTRAL BLOG) “At Bing, we want to keep things simple by proposing the „one URL per content item‟ strategy.‟ • You have more ranking signals coming to this URL • Redirection to alternate URLs is not the best approach for best SEO results. DUANE FORRESTER, BUILDING WEBSITES OPTIMIZED FOR ALL PLATFORMS (BING BLOGS)
  37. 37. RWD LIMITATIONS RWD is limited to hiding and rearranging content at different break points—it does not consider changes to usability and functionality across different devices and platforms. Strategy should continue to determine the right website solution, whether RWD, mobile-optimized website or an application. RWD is a tool in the toolbox, but not necessarily the best solution to address all web challenges and issues.
  38. 38. RWDMobile-Optimized Websites MOBILE-OPTIMIZED VS. RWD • Mobile-only solution • Enables different tools and content for different use cases • Requires maintaining separate websites and codebases • Mobile-first solution • Same tools and content across devices and platforms • Maintenance of a single codebase
  39. 39. RWD + PHARMA
  40. 40. MRL REVIEW CURRENTLY POSES THE BIGGEST CHALLENGE TO RWD Successfully implementing RWD across multiple break points and browser display sizes requires substantial MRL investment to ensure fair balance, ISI and PI appear consistently across multiple variations. During the development phase, content editors should review each break point for content accuracy.
  41. 41. KLICK + RWD + MRL REVIEW LESSONS LEARNED Klick collaborates with Brand and MRL teams early and often to determine the best review format and MRL timing expectations. When content is consistent across break points, look to show one set of content layouts and responsive website grids (easiest to prepare) When content is hidden or rearranged across break points, may be required to show content layouts across all sizes as MRL may consider each to be a unique experience requiring separate review (requires additional time and budget)
  42. 42. KLICK + RWD + MRL REVIEW LESSONS LEARNED Klick can help you educate MRL teams on the benefits on responsive design when it is the design solution of choice. Can create a RWD proof of concept / prototype to share with MRL prior to commencing development. Share RWD presentation and lead discussion with your Brand and MRL teams.
  43. 43. THANK YOU

×