Slide 1

Responsive Design What it is and why you need it

Slide 2

Todays 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 Dont forget responsive emails and forms

Slide 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

Slide 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

Slide 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

Slide 6

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

Slide 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?

Slide 8

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

Slide 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/

Slide 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

Slide 11

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

Slide 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

Slide 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

Slide 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

Slide 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!!!

Slide 16

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

Slide 17

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

Slide 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!!!

Slide 19

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