/
Responsive Design Responsive Design

Responsive Design - PowerPoint Presentation

jane-oiler
jane-oiler . @jane-oiler
Follow
416 views
Uploaded On 2017-08-29

Responsive Design - PPT Presentation

What it is and why you need it Todays Topics RWD v Mobile Which is right for you and your sites A Few Numbers to Blow Your Mind So many devices so little time Remember the Entire Conversion Path ID: 583316

design mobile responsive http mobile design http responsive site devices www ready people web forms test website conversion path

Share:

Link:

Embed:

Download Presentation from below link

Download Presentation The PPT/PDF document "Responsive Design" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.


Presentation Transcript

Slide1

Responsive Design

What it is and why you need itSlide2

Today’s Topics

RWD v Mobile

Which is right for you and your site(s)?

A Few Numbers to Blow Your MindSo many devices, so little time…

Remember the Entire Conversion Path

Don’t forget responsive emails and formsSlide3

Imagine All the People…

Numbers to Consider

There are 7.2B people in the world

There are 7.5B mobile devices

The mobile phone went from 0 to 7.5B in 30

years

There are more devices than people and they are multiplying 5x faster than humans

http://www.independent.co.uk/life-style/gadgets-and-tech/news/there-are-officially-more-mobile-devices-than-people-in-the-world-9780518.html

Slide4

Imagine All the People…

That is a lot of people.

And a lot of phones…Slide5

Mobile Tipping Point

The number of people using mobile devices to access the web has surpassed those using a desktop for the first time in history

Amazon.com and Google both saw mobile numbers surpass desktop in 2014

People spend more time on mobile devices per day than they watch television

http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics

/

http://

www.businessinsider.com/chart-of-the-day-americans-spend-more-time-using-mobile-devices-than-tv-2014-11

Slide6

Mobile Tipping Point

http://www.orbitmedia.com/blog/site-redesign

/ Slide7

Mobile Tipping Point

What Does This Mean for YOU?

!!!Your audience is visiting your site on a mobile device!!!

Are you ready

?

Is your site ready?

Are your emails ready?

Are

your online

forms ready?Slide8

Not Ready

Slide9

Ready!

Check your site!

http://ami.responsivedesign.is

/

http://mobiletest.me

/

http://juicecreative.co.uk/juicer/Slide10

Responsive Website Design

Responsive Web Design:

A design that changes the layout of the page based upon the device viewing the siteSlide11

Responsive Website DesignSlide12

Responsive Website Design

More Info

Started as early as 2004, gained popularity starting in ~2010One URL for your site

Delivers same code to browserFluid layouts that adjust to screen sizeImages, navigation, other elements must change (shrink, stack, hide, etc.) depending on the screen sizeSlide13

Mobile Optimized Website Design

More Info

A subfolder (domain.com/mobile) or sub-domain (m.domain.com) is usedDevice specific – browser detection brings up correct version

2 sets of contentSimplified navigation, larger, thumb-friendly buttons, only smaller images for faster load times on mobile siteSlide14

RWD v Mobile Optimized

Responsive

DesignMobile Optimized

One Design with Fluid LayoutsLayouts are Device SpecificEasy to Maintain and Update

Two Sets of Content to Update

Easier

to Configure for SEO

Complicated to Optimize

for SearchMenus, Images, Nav Hide or ShrinkSimplified Nav, Smaller Images OnlyLooks Good on All DevicesMobile-Centric ExperiencePotentially Slow Load TimesFaster Load Times

Better for Complex Content

Simplified,

Streamlined Content

More Expensive

but Lasts Longer

Less

Expensive, Frequent Updates

Keep One Domain

Two Domains

http://www.smartz.com/web-development/mobile/mobile-vs-responsive-design/

 

http://www.atomic74.com/click/responsive-vs-mobile-friendly-websites-whats-the-difference

 

http://

www.clickseed.com/seo/responsive-design-vs-separate-mobile-site-vs-dynamic-servingSlide15

The Entire Conversion Path

Social Media - Paid Ads

Partner Websites - Blog Posts

Events - Other Sources

Consider All Touch Points

Email is still the #1 tool for communicating with donors and supporters – MAKE SURE IT LOOKS GOOD ON MOBILE DEVICES!

All forms – email sign up, donation forms, action alerts, surveys, etc. – must look and function well on mobile devices

TEST, TEST, TEST!!!Slide16

The Entire Conversion PathSlide17

The Entire Conversion PathSlide18

Key Takeaways

What Will Stick?

More mobile web browsing than desktop as of 2015

Your web pages, online forms, and emails must look and function well on mobile devices

TEST, TEST, TEST!!!Slide19

Questions?

jen@fireflypartners.com

303-339-0080