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

▶
responsive web design rwd
SMART_READER_LITE
LIVE PREVIEW

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

Apr 08, 2024 239 likes •531 views

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

slide-1
SLIDE 1

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

Presented ¡by: ¡

Megan ¡Garden, ¡Marke,ng ¡Director ¡

Responsive ¡Design: ¡

Is ¡It ¡Right ¡For ¡Your ¡Customers? ¡

THE ¡WEBINAR ¡WILL ¡BEGIN ¡SHORTLY ¡

slide-2
SLIDE 2

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

Presented ¡by: ¡

Megan ¡Garden, ¡Marke,ng ¡ Director ¡

Responsive ¡Web ¡Design: ¡

Is ¡It ¡Right ¡For ¡Your ¡Customers? ¡

slide-3
SLIDE 3

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

Responsive ¡Web ¡Design ¡(RWD) ¡

  • What ¡is ¡Responsive ¡Design? ¡
  • Why ¡Responsive ¡Design? ¡
  • Responsive ¡Design ¡Methods ¡
  • Is ¡it ¡right ¡for ¡your ¡customers? ¡

Today’s ¡Agenda ¡

slide-4
SLIDE 4

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

What ¡is ¡Responsive ¡Design? ¡

slide-5
SLIDE 5

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

What ¡is ¡Responsive ¡Design? ¡

“Responsive ¡websites ¡ respond ¡to ¡their ¡ environment.” ¡

slide-6
SLIDE 6

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

What ¡is ¡Responsive ¡Design? ¡

10x20 ¡

slide-7
SLIDE 7

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

What ¡is ¡Responsive ¡Design? ¡

10x20 ¡ 10x15 ¡

slide-8
SLIDE 8

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

What ¡is ¡Responsive ¡Design? ¡

10x20 ¡ 10x15 ¡ 5x5 ¡

slide-9
SLIDE 9

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

What ¡is ¡Responsive ¡Design? ¡

Desktop ¡

slide-10
SLIDE 10

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

What ¡is ¡Responsive ¡Design? ¡

Desktop ¡ Tablet ¡

slide-11
SLIDE 11

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

What ¡is ¡Responsive ¡Design? ¡

Desktop ¡ Tablet ¡ Phone ¡

slide-12
SLIDE 12

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

What ¡is ¡Responsive ¡Design? ¡

“Responsive ¡websites ¡ respond ¡to ¡their ¡ environment.” ¡

slide-13
SLIDE 13

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

Non-­‑Responsive ¡

slide-14
SLIDE 14

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

Responsive ¡

slide-15
SLIDE 15

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

Why ¡Responsive ¡Design? ¡

slide-16
SLIDE 16

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

Why ¡Responsive ¡Design? ¡

28% ¡

SELF ¡STORAGE ¡ MOBILE ¡VISITORS* ¡ *Based ¡on ¡July ¡2013 ¡

slide-17
SLIDE 17

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

Why ¡Responsive ¡Design? ¡

2014 ¡

MOBILE ¡EXCEEDS ¡

slide-18
SLIDE 18

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

Why ¡Responsive ¡Design? ¡

91% ¡

WITHIN ¡REACH ¡24/7 ¡

150 ¡

TIMES ¡/ ¡DAY ¡

slide-19
SLIDE 19

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

Responsive ¡Design ¡Methods ¡

  • Flexible ¡Grid ¡(AdapRve ¡or ¡Fluid ¡Design) ¡
  • Media ¡Queries ¡(CSS3) ¡

Ethan ¡MarcoWe ¡– ¡2010 ¡“A ¡List ¡Apart” ¡

slide-20
SLIDE 20

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

Responsive ¡Design ¡Methods ¡

  • Mobile ¡Websites ¡(okay) ¡
  • Fluid ¡Grid ¡(be]er) ¡
  • Media ¡Queries ¡(be]er) ¡

Fluid ¡Grid ¡+ ¡Media ¡Queries ¡is ¡best ¡

Three ¡OpRons ¡(not ¡exclusive) ¡

slide-21
SLIDE 21

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

Responsive ¡Design ¡Methods ¡

  • 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 ¡

Mobile ¡Websites ¡

slide-22
SLIDE 22

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

Responsive ¡Design ¡Methods ¡

  • 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/ ¡

Fluid ¡Grid ¡

slide-23
SLIDE 23

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

Responsive ¡Design ¡Methods ¡

  • 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/ ¡

Media ¡Queries ¡

slide-24
SLIDE 24

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

Methods ¡Summary ¡

  • Duplicate ¡

content ¡

  • Excessive ¡

maintenance ¡

  • Poor ¡UX ¡
  • Bounce ¡rates ¡
  • Bad ¡for ¡SEO ¡

mobile.url ¡

  • 1 ¡URL, ¡1 ¡clean ¡

set ¡of ¡code ¡

  • Flexible ¡design ¡
  • Improved ¡UX ¡
  • More ¡costly ¡
  • Poten,ally ¡

good ¡for ¡SEO ¡

Fluid ¡Grid ¡

  • 1 ¡URL, ¡1 ¡clean ¡

set ¡of ¡code ¡

  • Screen ¡specific ¡
  • Improved ¡UX ¡
  • Poten,ally ¡

good ¡for ¡SEO ¡ ¡

Media ¡Queries ¡

slide-25
SLIDE 25

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

SEO ¡vs ¡User ¡Experience ¡(UX) ¡

  • SEO ¡implicaRons ¡are ¡small ¡
  • UX ¡implicaRons ¡are ¡huge ¡
  • It’s ¡all ¡about ¡converRng ¡visitors ¡to ¡rentals ¡

What ¡to ¡consider ¡

  • Find ¡the ¡best ¡possible ¡scenario ¡– ¡ ¡

Desktop, ¡Tablets, ¡Phones ¡

  • Fluid ¡grid, ¡media ¡queries, ¡or ¡combinaRon ¡

So… ¡

slide-26
SLIDE 26

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

Is ¡Responsive ¡Right ¡for ¡You ¡Customers? ¡

  • Mobile ¡isn’t ¡coming, ¡it’s ¡here ¡
  • Your ¡business, ¡your ¡customers ¡
  • Solid ¡user ¡experience ¡
  • Quality, ¡digesRble ¡content ¡
  • Conversions ¡

Absolutely! ¡

slide-27
SLIDE 27

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. ¡

slide-28
SLIDE 28

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

Q ¡& ¡A ¡

Chat ¡us ¡your ¡ques,ons! ¡

(913) ¡871-­‑2221 ¡ webinars@storageahead.com ¡