Download - Responsive Web Design: Friend or Foe?
![Page 1: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/1.jpg)
Friend or foe?
RESPONSIVE WEB DESIGN
![Page 2: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/2.jpg)
It’s catching on...
![Page 3: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/3.jpg)
People are talking...
“Three Reasons Why Responsive Web Design Is Responsible Web Design”
-Mediapost
“Responsive web design is the ‘logical way’” -Internet Retailer
“There is an ongoing love/hate relationship with response web design”
-Mobile Marketer
![Page 4: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/4.jpg)
WHAT IS IT?
“The creation of a site that is able to adapt to the context in which it is being viewed”
![Page 5: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/5.jpg)
WHAT IS IT?
“The creation of a site that is able to adapt to the context in which it is being viewed”
Coined by Ethan Marcotte in 2010, but the concept has been around for years before.
![Page 6: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/6.jpg)
the connected devices landscape WHY WAS THIS CREATED?
![Page 7: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/7.jpg)
THEY’RE MULTIPLYING
![Page 8: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/8.jpg)
THEY’RE MULTIPLYING
![Page 9: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/9.jpg)
THEY’RE MULTIPLYING
![Page 10: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/10.jpg)
THEY’RE MULTIPLYING
![Page 11: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/11.jpg)
HOW DO WE SOLVE FOR THIS?
? ?
?
? ?
?
? ?
?
?
? ? ? ?
![Page 12: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/12.jpg)
THREE DISTINCT PARTS
Flexible grid Flexible images Media queries
![Page 13: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/13.jpg)
WHEN TO CONSIDER RWD?
CONTENT TYPE Is your content dynamic or static?
![Page 14: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/14.jpg)
WHY CONSIDER RWD?
UPDATE ONCE, RUN EVERYWHERE
CONTENT TYPE Is your content dynamic or static?
![Page 15: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/15.jpg)
WHY CONSIDER RWD?
CONTENT TYPE Is your content dynamic or static?
CONTENT STRATEGY Is it consistent or differentiated?
![Page 16: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/16.jpg)
WHY CONSIDER RWD?
ONLY ALLOWS FOR CONTENT PRIORITIZATION NEEDS SIMILAR REGARDLESS OF DEVICE
CONTENT TYPE Is your content dynamic or static?
CONTENT STRATEGY Is it consistent or differentiated?
![Page 17: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/17.jpg)
RESPONSIVE WEB IS BEST FOR...
DYNAMIC CONTENT
CONSISTENT CONTENT STRATEGY
![Page 18: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/18.jpg)
BENEFITS
+SINGLE-SOURCE PUBLISHING +LONG-TERM EFFICIENCIES IN MAINTENANCE +CONSISTENT BRAND EXPERIENCE AND MESSAGING
![Page 19: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/19.jpg)
DOWNSIDES
/EFFICIENCY ONLY THROUGH FULL IMPLEMENTATION /HIGH INITIAL COSTS /INDUSTRY STILL NASCENT STAGE
![Page 20: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/20.jpg)
implementation RESPONSIVE WEB DESIGN
NOT is an
a strategy
![Page 21: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/21.jpg)
HOW DO I USE IT?
Executions for smartphones... ...become the framework for the rest of digital experiences
MOBILE FIRST APPROACH
![Page 22: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/22.jpg)
START small
![Page 23: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/23.jpg)
IDEAL? YES!!!!!
small START
![Page 24: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/24.jpg)
IDEAL? YES!!!!! FEASIBLE? ...NO
small START
![Page 25: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/25.jpg)
TRY IT ON!
MOBILE/TABLET SPECIFIC
CAMPAIGN LANDING PAGE
HOMEPAGE
![Page 26: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/26.jpg)
DYNAMIC CONTENT CONSISTENT CONTENT STRATEGY
“FULL IMPLEMENTATION”
![Page 27: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/27.jpg)
mobile
![Page 28: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/28.jpg)
tablet
![Page 29: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/29.jpg)
desktop
![Page 30: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/30.jpg)
STATIC CONTENT DIFFERENTIATED CONTENT STRATEGY
“CAMPAIGN SPECIFIC”
![Page 31: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/31.jpg)
mobile
![Page 32: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/32.jpg)
tablet
![Page 33: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/33.jpg)
desktop
![Page 34: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/34.jpg)
DYNAMIC CONTENT DIFFERENTIATED CONTENT STRATEGY
“HOMEPAGE”
![Page 35: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/35.jpg)
mobile
![Page 36: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/36.jpg)
tablet
![Page 37: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/37.jpg)
desktop
![Page 38: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/38.jpg)
“US AND CAMPAIGNSPECIFIC”
STATIC CONTENT CONSISTENT CONTENT STRATEGY
![Page 39: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/39.jpg)
mobile
![Page 40: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/40.jpg)
desktop
![Page 41: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/41.jpg)
DYNAMIC CONTENT CONSISTENT CONTENT STRATEGY
“FULL IMPLEMENTATION, PRODUCT CATALOG”
![Page 42: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/42.jpg)
mobile
![Page 43: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/43.jpg)
tablet
![Page 44: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/44.jpg)
desktop
![Page 45: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/45.jpg)
FRIEND OR FOE?
![Page 46: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/46.jpg)
(as long as it’s implemented correctly) FRIEND!
![Page 47: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/47.jpg)
REMEMBER TO ANALYZE...
CONTENT TYPE AND STRATEGY MOBILE AUDIENCE STRENGTH? VALUE? CURRENT MOBILE EXPERIENCE INVESTED? WORKING?
MAYBE IT’S NOT “RIGHT NOW”
![Page 48: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/48.jpg)
FIND OPPORTUNITIES TO TEST
PRODUCT/SERVICE LAUNCH LANDING PAGE NEW MOBILE INITIATIVE
![Page 49: Responsive Web Design: Friend or Foe?](https://reader033.vdocuments.us/reader033/viewer/2022051209/5484107db4af9f8c0d8b4b1c/html5/thumbnails/49.jpg)
THANK YOU
nicolecardoza.com