• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Klick on Responsive Web Design
 

Klick on Responsive Web Design

on

  • 1,250 views

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

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

Statistics

Views

Total Views
1,250
Views on SlideShare
782
Embed Views
468

Actions

Likes
2
Downloads
23
Comments
0

5 Embeds 468

http://www.klick.com 461
http://cloud.feedly.com 3
http://klickholidayvideo.com 2
http://klickusainc.org 1
https://www.google.com 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Klick on Responsive Web Design Klick on Responsive Web Design Presentation Transcript

    • 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, navigation, content and images based on the browser display size and orientation on which it is presented.
    • 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 different experiences. Responsive web design offers us a way forward, allowing us to design for the ebb and flow of things.”
    • 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
    • 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
    • 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 audiences fragmenting even further as content gets shared across platforms.” COMSCORE MOBILE FUTURE IN FOCUS, 2013
    • 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
    • “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!
    • 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
    • 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
    • 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
    • HOW RWD WORKS
    • 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" />
    • 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
    • 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.
    • 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 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
    • 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
    • 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="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;}
    • 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" />
    • <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
    • 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 */ }
    • WHEN TO USE RWD
    • 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.
    • 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)
    • 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.
    • 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
    • RWD + PHARMA
    • 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.
    • 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)
    • 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.
    • THANK YOU