Presentation is loading. Please wait.

Presentation is loading. Please wait.

Responsive Design What it is and why you need it.

Similar presentations


Presentation on theme: "Responsive Design What it is and why you need it."— Presentation transcript:

1 Responsive Design What it is and why you need it

2 Today’s Topics RWD v Mobile Which is right for you and your site(s)? A Few Numbers to Blow Your Mind So many devices, so little time… Remember the Entire Conversion Path Don’t forget responsive emails and forms

3 FIREFLY PARTNERS / Responsive Design T4G Forum / July 15, 2015 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

4 FIREFLY PARTNERS / Responsive Design T4G Forum / July 15, 2015 Imagine All the People… That is a lot of people. And a lot of phones…

5 FIREFLY PARTNERS / Responsive Design T4G Forum / July 15, 2015 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

6 FIREFLY PARTNERS / Responsive Design T4G Forum / July 15, 2015 Mobile Tipping Point http://www.orbitmedia.com/blog/site-redesign/

7 FIREFLY PARTNERS / Responsive Design T4G Forum / July 15, 2015 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?

8 FIREFLY PARTNERS / Responsive Design T4G Forum / July 15, 2015 Not Ready 

9 FIREFLY PARTNERS / Responsive Design T4G Forum / July 15, 2015 Ready! Check your site! http://ami.responsivedesign.is/ http://mobiletest.me/ http://juicecreative.co.uk/juicer/

10 FIREFLY PARTNERS / Responsive Design T4G Forum / July 15, 2015 Responsive Website Design Responsive Web Design: A design that changes the layout of the page based upon the device viewing the site

11 FIREFLY PARTNERS / Responsive Design T4G Forum / July 15, 2015 Responsive Website Design

12 FIREFLY PARTNERS / Responsive Design T4G Forum / July 15, 2015 Responsive Website Design More Info Started as early as 2004, gained popularity starting in ~2010 One URL for your site Delivers same code to browser Fluid layouts that adjust to screen size Images, navigation, other elements must change (shrink, stack, hide, etc.) depending on the screen size

13 FIREFLY PARTNERS / Responsive Design T4G Forum / July 15, 2015 Mobile Optimized Website Design More Info A subfolder (domain.com/mobile) or sub-domain (m.domain.com) is used Device specific – browser detection brings up correct version 2 sets of content Simplified navigation, larger, thumb-friendly buttons, only smaller images for faster load times on mobile site

14 FIREFLY PARTNERS / Responsive Design T4G Forum / July 15, 2015 RWD v Mobile Optimized Responsive DesignMobile Optimized One Design with Fluid LayoutsLayouts are Device Specific Easy to Maintain and UpdateTwo Sets of Content to Update Easier to Configure for SEOComplicated to Optimize for Search Menus, Images, Nav Hide or ShrinkSimplified Nav, Smaller Images Only Looks Good on All DevicesMobile-Centric Experience Potentially Slow Load TimesFaster Load Times Better for Complex ContentSimplified, Streamlined Content More Expensive but Lasts LongerLess Expensive, Frequent Updates Keep One DomainTwo 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-serving

15 FIREFLY PARTNERS / Responsive Design T4G Forum / July 15, 2015 The Entire Conversion Path Emails Online Forms Main Website 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!!!

16 FIREFLY PARTNERS / Responsive Design T4G Forum / July 15, 2015 The Entire Conversion Path

17 FIREFLY PARTNERS / Responsive Design T4G Forum / July 15, 2015 The Entire Conversion Path

18 FIREFLY PARTNERS / Responsive Design T4G Forum / July 15, 2015 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!!!

19 Questions? jen@fireflypartners.com 303-339-0080


Download ppt "Responsive Design What it is and why you need it."

Similar presentations


Ads by Google