Responsive Web Design (RWD) Todays Agenda What is - PowerPoint PPT Presentation

Responsive ¡Design: ¡ Is ¡It ¡Right ¡For ¡Your ¡Customers? ¡ THE ¡WEBINAR ¡WILL ¡BEGIN ¡SHORTLY ¡ Presented ¡by: ¡ Megan ¡Garden, ¡Marke,ng ¡Director ¡ TWEET your favorite quotes, feedback, and questions to @storageahead #SAwebinars

Responsive ¡Web ¡Design: ¡ Is ¡It ¡Right ¡For ¡Your ¡Customers? ¡ Presented ¡by: ¡ Megan ¡Garden, ¡Marke,ng ¡ Director ¡ TWEET your favorite quotes, feedback, and questions to @storageahead #SAwebinars

Responsive ¡Web ¡Design ¡(RWD) ¡ Today’s ¡Agenda ¡ • What ¡is ¡Responsive ¡Design? ¡ • Why ¡Responsive ¡Design? ¡ • Responsive ¡Design ¡Methods ¡ • Is ¡it ¡right ¡for ¡your ¡customers? ¡ TWEET your favorite quotes, feedback, and questions to @storageahead #SAwebinars

What ¡is ¡Responsive ¡Design? ¡ TWEET your favorite quotes, feedback, and questions to @storageahead #SAwebinars

What ¡is ¡Responsive ¡Design? ¡ “Responsive ¡websites ¡ respond ¡to ¡their ¡ environment.” ¡ TWEET your favorite quotes, feedback, and questions to @storageahead #SAwebinars

What ¡is ¡Responsive ¡Design? ¡ 10 x 20 ¡ TWEET your favorite quotes, feedback, and questions to @storageahead #SAwebinars

What ¡is ¡Responsive ¡Design? ¡ 10 x 20 ¡ 10 x 15 ¡ TWEET your favorite quotes, feedback, and questions to @storageahead #SAwebinars

What ¡is ¡Responsive ¡Design? ¡ 10 x 20 ¡ 10 x 15 ¡ 5x5 ¡ TWEET your favorite quotes, feedback, and questions to @storageahead #SAwebinars

What ¡is ¡Responsive ¡Design? ¡ Desktop ¡ TWEET your favorite quotes, feedback, and questions to @storageahead #SAwebinars

What ¡is ¡Responsive ¡Design? ¡ Desktop ¡ Tablet ¡ TWEET your favorite quotes, feedback, and questions to @storageahead #SAwebinars

What ¡is ¡Responsive ¡Design? ¡ Desktop ¡ Tablet ¡ Phone ¡ TWEET your favorite quotes, feedback, and questions to @storageahead #SAwebinars

What ¡is ¡Responsive ¡Design? ¡ “Responsive ¡websites ¡ respond ¡to ¡their ¡ environment.” ¡ TWEET your favorite quotes, feedback, and questions to @storageahead #SAwebinars

Non-­‑Responsive ¡ TWEET your favorite quotes, feedback, and questions to @storageahead #SAwebinars

Responsive ¡ TWEET your favorite quotes, feedback, and questions to @storageahead #SAwebinars

Why ¡Responsive ¡Design? ¡ TWEET your favorite quotes, feedback, and questions to @storageahead #SAwebinars

Why ¡Responsive ¡Design? ¡ 28% ¡ SELF ¡STORAGE ¡ MOBILE ¡VISITORS* ¡ *Based ¡on ¡July ¡2013 ¡ TWEET your favorite quotes, feedback, and questions to @storageahead #SAwebinars

Why ¡Responsive ¡Design? ¡ 2014 ¡ MOBILE ¡EXCEEDS ¡ TWEET your favorite quotes, feedback, and questions to @storageahead #SAwebinars

Why ¡Responsive ¡Design? ¡ 91% ¡ WITHIN ¡REACH ¡24/7 ¡ 150 ¡ TIMES ¡/ ¡DAY ¡ TWEET your favorite quotes, feedback, and questions to @storageahead #SAwebinars

Responsive ¡Design ¡Methods ¡ Ethan ¡MarcoWe ¡– ¡2010 ¡“A ¡List ¡Apart” ¡ • Flexible ¡Grid ¡(AdapRve ¡or ¡Fluid ¡Design) ¡ • Media ¡Queries ¡(CSS3) ¡ TWEET your favorite quotes, feedback, and questions to @storageahead #SAwebinars

Responsive ¡Design ¡Methods ¡ Three ¡OpRons ¡(not ¡exclusive) ¡ • Mobile ¡Websites ¡(okay) ¡ • Fluid ¡Grid ¡(be]er) ¡ • Media ¡Queries ¡(be]er) ¡ Fluid ¡Grid ¡+ ¡Media ¡Queries ¡is ¡best ¡ TWEET your favorite quotes, feedback, and questions to @storageahead #SAwebinars

Responsive ¡Design ¡Methods ¡ Mobile ¡Websites ¡ • Duplicate ¡website ¡made ¡solely ¡for ¡phones ¡ • Re-­‑directs ¡to ¡m.yourwebsite.com ¡ • Poor ¡user ¡experience ¡ • 2 ¡separate ¡domains ¡with ¡same ¡data ¡ • Hard ¡to ¡execute ¡& ¡maintain ¡ ¡ m.storage.com ¡ TWEET your favorite quotes, feedback, and questions to @storageahead #SAwebinars

Responsive ¡Design ¡Methods ¡ Fluid ¡Grid ¡ • Also ¡called ¡AdapRve ¡design, ¡Flexible ¡grid ¡ • Percentage ¡based ¡& ¡relaRve ¡measurements ¡ • Moves ¡and ¡re-­‑flows ¡as ¡you ¡resize ¡ • Challenge ¡is ¡mostly ¡on ¡the ¡designer ¡– ¡ ¡You ¡can’t ¡be ¡all ¡things ¡to ¡all ¡people ¡ hWp://www.designinfluences.com/fluid960gs/ ¡ TWEET your favorite quotes, feedback, and questions to @storageahead #SAwebinars

Responsive ¡Design ¡Methods ¡ Media ¡Queries ¡ • Styles ¡relaRve ¡to ¡devices ¡ • Styles ¡relaRve ¡to ¡viewports ¡(screensizes) ¡ • Tailored ¡with ¡lots ¡of ¡CSS ¡(code) ¡ The ¡browser’s ¡play-­‑by-­‑play ¡instrucRons ¡ • Great ¡design ¡for ¡99% ¡of ¡devices ¡ hWp://978.gs/demo/ ¡ TWEET your favorite quotes, feedback, and questions to @storageahead #SAwebinars

Methods ¡Summary ¡ mobile.url ¡ Fluid ¡Grid ¡ Media ¡Queries ¡ • Duplicate ¡ • 1 ¡URL, ¡1 ¡clean ¡ • 1 ¡URL, ¡1 ¡clean ¡ content ¡ set ¡of ¡code ¡ set ¡of ¡code ¡ • Excessive ¡ • Flexible ¡design ¡ • Screen ¡specific ¡ maintenance ¡ • Improved ¡UX ¡ • Improved ¡UX ¡ • Poor ¡UX ¡ • More ¡costly ¡ • Poten,ally ¡ • Bounce ¡rates ¡ good ¡for ¡SEO ¡ • Poten,ally ¡ • Bad ¡for ¡SEO ¡ good ¡for ¡SEO ¡ ¡ TWEET your favorite quotes, feedback, and questions to @storageahead #SAwebinars

SEO ¡vs ¡User ¡Experience ¡(UX) ¡ What ¡to ¡consider ¡ • SEO ¡implicaRons ¡are ¡small ¡ • UX ¡implicaRons ¡are ¡huge ¡ • It’s ¡all ¡about ¡converRng ¡visitors ¡to ¡rentals ¡ So… ¡ • Find ¡the ¡best ¡possible ¡scenario ¡– ¡ ¡ Desktop, ¡Tablets, ¡Phones ¡ • Fluid ¡grid, ¡media ¡queries, ¡or ¡combinaRon ¡ TWEET your favorite quotes, feedback, and questions to @storageahead #SAwebinars

Is ¡Responsive ¡Right ¡for ¡You ¡Customers? ¡ Absolutely! ¡ • Mobile ¡isn’t ¡coming, ¡it’s ¡here ¡ • Your ¡business, ¡your ¡customers ¡ • Solid ¡user ¡experience ¡ • Quality, ¡digesRble ¡content ¡ • Conversions ¡ TWEET your favorite quotes, feedback, and questions to @storageahead #SAwebinars

Upcoming ¡Webinars ¡ Register ¡at ¡storageahead.com/webinars ¡ September ¡12, ¡2013 ¡at ¡11:00 ¡AM ¡CDT ¡ “Aggregator”: ¡Not ¡Necessarily ¡a ¡Four-­‑Le]er ¡Word ¡ Does ¡the ¡word ¡"aggregators" ¡make ¡you ¡cringe? ¡MaW ¡Friederich, ¡a ¡member ¡of ¡ StorageAhead's ¡business ¡development ¡team, ¡will ¡share ¡his ¡insights ¡on ¡how ¡to ¡ make ¡online ¡storage ¡facility ¡networks ¡work ¡for ¡you—whether ¡it's ¡as ¡a ¡website ¡ replacement, ¡companion ¡markeRng ¡or ¡a ¡way ¡to ¡track ¡results. ¡ TWEET your favorite quotes, feedback, and questions to @storageahead #SAwebinars

Q ¡& ¡A ¡ Chat ¡us ¡your ¡ques,ons! ¡ (913) ¡871-­‑2221 ¡ webinars@storageahead.com ¡ TWEET your favorite quotes, feedback, and questions to @storageahead #SAwebinars