Optimizing Your Website for Mobile DevicesPresentation Transcript
ABOUT TECHSOUP CANADA
ABOUT ME• Software engineer• Nonprofit technology blogger• Community manager @tierneys @techsoupcanada facebook.com/techsoupcanada techsoupcanada.ca/community/blog youtube.com/techsoupcanada
AGENDA1.Is it mobile friendly?2.Why mobile?3.Approaches to mobile websites4.Designing for mobile
MOBILE WHAT?? Photo credits: louisvolant, Adrian Measures
ELEMENTS OF MOBILE STRATEGY Text campaign Mobile app Mobile web mobil Text-to-donate e Mobile-optimized email
IS IT MOBILE FRIENDLY? 1 2 3www.cccc.org www.giveconfidently.ca www.nature.org
IS IT MOBILE FRIENDLY? 1 www.cccc.org No Mobile Site
IS IT MOBILE FRIENDLY? 2 www.giveconfidently.caResponsive Design
IS IT MOBILE FRIENDLY? 3 www.nature.org Mobile Site
WHAT ABOUT YOUR SITE?
DO CANADIANS HAVE MOBILE INTERNET? 37% in 2011 5%in 2001
MORE PEOPLE ARE GETTING SMARTPHONES Source: http://www.rositacortez.com/social-media-101/10-reasons-why-your-nonprofit-needs-a-mobile-site/
ARE YOUR VISITORS MOBILE?
WHY ARE MOBILE VISITORS ON YOUR SITE?• Saw an ad/poster• Clicked through via social media• Clicked through via email• Used a QR code• Need to find contact info on the go• They just happen to be on mobile
ONCE UPON A TIME…
WHAT ABOUT YOU?• Who is your audience?• Why are they coming to your site?• How are they getting to your site?• What are their goals?• What are your goals?
Why did CCCC decide to makewww.giveconfidently.c a mobile-friendly?
ASK HEATHER• “Think mobile first”• Can see clear trend towards mobile• Want to be proactive about adopting new technologies, not fall behind• Experience as a user shows good mobile design is important• Already had to design a new site: good time to think about mobile• Reach & engage a younger demographic
3 MAIN APPROACHES 1 Mobile-Optimized Content 2 Mobile Website 3 Responsive Design
1 MOBILE-OPTIMIZED CONTENT Big Idea • Specific content, pages or forms are mobile-optimized • This content is meant to be accessed via mobile Could be… • Donation form • Petition/advocacy action • Key content or content that is mobile-optimized by default
1 EXAMPLES OF MOBILE-OPTIMIZED CONTENT Mobile donation form m.cancer.org Sample code for a mobile- friendly donation form: http://open.convio.com/downloa ds/mobile-friendly-donation- form.html
2 MOBILE WEBSITE Big Idea • Separate site, optimized for mobile • Could be a full site, or with reduced content • Often linked to main site Could be… • Mini-site with basic info, key actions (donate, sign up), blog • Campaign/program/event website • Full mobile website
2 EXAMPLES OF MOBILE WEBSITESMini-site: info, blog & Mini-site: blog only Full site (pretty much)key actions m.350.org m.cancer.orgm.nature.org
2 APPROACHES TO MOBILE WEBSITES 1. Mobile Website Service • A CMS specifically for mobile websites • Your main website is the starting point • Options to build your mobile website using their CMS, or get an expert to do it • Often a small monthly charge, some have a free ad-supported version • Examples: Mofuse, GoMobi, WinkSite, Duda Mobile, Bmobilized, Mobify
2 APPROACHES TO MOBILE WEBSITES 2. Mobile Themes & Plugins • Website themes that are optimized for mobile • Examples: WPTouch, WPTap, WordPress Mobile Pack 3. DIY • For advanced or unusual sites, you may want to build it yourself • Like building a website, but mobile-friendly
3 RESPONSIVE DESIGN Big Idea • One site that changes layout depending on the size of the browser/device • Looks good on all devices • Same content on all devices
3 EXAMPLES OF RESPONSIVE DESIGNwww.giveconfidently.ca www.staugustineschurch.ca/ https://www.fundraise.com/
3 APPROACHES TO RESPONSIVE DESIGN 1. Responsive Themes • Themes that are built to be responsive • E.g. www.yootheme.com/ builds responsive themes for Joomla & WordPress 2. DIY • Designers can use CSS to create a responsive design. Need a designer with expertise in this area. • Various templates and frameworks are available to make development faster (http://webdesignledger.com/resources/responsive-web-design-templates-and- frameworks)
MOBILE WEBSITE VS. RESPONSIVE DESIGN RESPONSIVEMOBILE WEBSITE DESIGN• More control over • One website & look & functionality theme to maintain• Reduced content is • One place to easier to digest update content• Easy to create when starting with • Easiest to include existing desktop when building a site new website• Can pull content from main site
Why did CCCCchoose responsive design?
ASK HEATHER• Big cost savings – don’t have to pay extra for a mobile site• Don’t have to worry about different device sizes (e.g. tablet)• Simple maintenance – only one website to update
A User-Centered Approach To Web Design For Mobile Devices iOS User Experience Guidelines
PRIORITIZE CONTENT Be succinct. Smaller screen sizes require even more careful attention to the content displayed to the user. Put on your editor’s hat and cut unnecessary content, then cut some more. When you’re done, prioritize the content and display the most important content first.“Giving to a Christian charity is oneof the most meaningful ways youcan put your faith into action, buthow do you know the organizationyou’re giving to is using the moneyresponsibly?”
SIMPLIFY USER INPUT• Ask for less info• Provide dropdown menus and checkboxes where possible Mobile form design strategies
MAKE ROOM FOR FINGERS• Apple’s recommended fingertip size is 44x44px• Make buttons big enough; provide space around clickable things
SUPPORT MULTIPLE SIZES & DEVICESDon’t forget to check with different orientations of the same device!
DOES IT WORK ON MOBILE?• Some elements don’t work on mobile e.g. Flash, pop-ups• Some things just aren’t possible e.g. hover http://www.talktofrank.com/cocaine-basement
How is websitedesign different for mobile devices? (In particular withresponsive design)
ASK HEATHER• Keep it simple• “Text on a diet”• Design with mobile in mind• Test on as many devices as possible!