16. 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
18. 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?
19. Why did CCCC
decide
to make
www.giveconfidently.c
a mobile-friendly?
20. 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
21.
22. 3 MAIN APPROACHES
1 Mobile-Optimized Content
2 Mobile Website
3 Responsive Design
23. 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
24. 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
25. 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
26. 2 EXAMPLES OF MOBILE WEBSITES
Mini-site: info, blog & Mini-site: blog only Full site (pretty much)
key actions m.350.org m.cancer.org
m.nature.org
27. 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
28. 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
29. 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
30. 3 EXAMPLES OF RESPONSIVE DESIGN
www.giveconfidently.ca www.staugustineschurch.ca/ https://www.fundraise.com/
31. 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)
32. MOBILE WEBSITE VS. RESPONSIVE DESIGN
RESPONSIVE
MOBILE 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
34. 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
36. 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 one
of the most meaningful ways you
can put your faith into action, but
how do you know the organization
you’re giving to is using the money
responsibly?”
37. SIMPLIFY USER INPUT
• Ask for less info
• Provide dropdown menus and checkboxes where possible
Mobile form design strategies
38. MAKE ROOM FOR FINGERS
• Apple’s recommended fingertip size is 44x44px
• Make buttons big enough; provide space around clickable
things
39. SUPPORT MULTIPLE SIZES & DEVICES
Don’t forget to check with different orientations of the same
device!
40. 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
41. How is website
design different for
mobile devices?
(In particular with
responsive design)
42. ASK HEATHER
• Keep it simple
• “Text on a diet”
• Design with mobile in mind
• Test on as many devices as possible!
Editor's Notes
Getting to know audience:-size of organization?-have you personally been involved in a website redesign before?-do you own a tablet or smartphone?Note: we’re assuming you know something about redesigning websites in general. All that stuff still applies. We’ll be focusing on the mobile aspects today.
Mobile devices: smartphones, cell phones (feature phone) and tablets-> we are focusing on smartphones and tablets-> you can access the internet on feature phones, but it’s so small and annoying to use that there’s not much we can do here.
Mobile web: going to a browser on your mobile device and navigating to a website-> we are NOT talking about mobile apps. That is a different topic and not in scope for today’s discussion. There’s a whole separate debate of mobile website vs. app, ask me later if you’re interested. Short answer is that mobile web is almost certainly the way to go in my opinion.
Ask everyone to get out their smartphones/tablets if they have them. If people don’t have one, look over the shoulder of someone who does.Visit the desktop version of each site.Get everyone to visit each site on their mobile. See what happens. Try to do some things on each site e.g. find out about the org, make a donation, become a member, read news/blog. Share results, as different people will have different devices.Basic idea:-if you have no mobile site, your site is hard to use on a mobile :(-with responsive design, your site stays the same but changes the layout to fit different devices. Do demo on desktop showing the layout change. ONE SITE!!-with a mobile site, you have 2 sites: one for desktop and one for mobile. The mobile one is made especially to look good on mobile. It may have less content than the desktop site.We will come back to this more later
Ask everyone to get out their smartphones/tablets if they have them. If people don’t have one, look over the shoulder of someone who does.Visit the desktop version of each site.Get everyone to visit each site on their mobile. See what happens. Try to do some things on each site e.g. find out about the org, make a donation, become a member, read news/blog. Share results, as different people will have different devices.Basic idea:-if you have no mobile site, your site is hard to use on a mobile :(-with responsive design, your site stays the same but changes the layout to fit different devices. Do demo on desktop showing the layout change. ONE SITE!!-with a mobile site, you have 2 sites: one for desktop and one for mobile. The mobile one is made especially to look good on mobile. It may have less content than the desktop site.We will come back to this more later
Ask everyone to get out their smartphones/tablets if they have them. If people don’t have one, look over the shoulder of someone who does.Visit the desktop version of each site.Get everyone to visit each site on their mobile. See what happens. Try to do some things on each site e.g. find out about the org, make a donation, become a member, read news/blog. Share results, as different people will have different devices.Basic idea:-if you have no mobile site, your site is hard to use on a mobile :(-with responsive design, your site stays the same but changes the layout to fit different devices. Do demo on desktop showing the layout change. ONE SITE!!-with a mobile site, you have 2 sites: one for desktop and one for mobile. The mobile one is made especially to look good on mobile. It may have less content than the desktop site.We will come back to this more laterhttp://giveconfidently.ca/multiple-view/
Ask everyone to get out their smartphones/tablets if they have them. If people don’t have one, look over the shoulder of someone who does.Visit the desktop version of each site.Get everyone to visit each site on their mobile. See what happens. Try to do some things on each site e.g. find out about the org, make a donation, become a member, read news/blog. Share results, as different people will have different devices.Basic idea:-if you have no mobile site, your site is hard to use on a mobile :(-with responsive design, your site stays the same but changes the layout to fit different devices. Do demo on desktop showing the layout change. ONE SITE!!-with a mobile site, you have 2 sites: one for desktop and one for mobile. The mobile one is made especially to look good on mobile. It may have less content than the desktop site.We will come back to this more later
We aren’t perfect – this is what our site looks like on mobile!See if anyone has a mobile site already.Get a volunteer to let us look at their site on GoMo (http://www.howtogomo.com/en/d/test-your-site/)Do you need a mobile site? We will get back to that.Note: even if your site isn’t mobile-optimized, your smartphone will still help you out-filling out forms-calling a number
Trend in mobile internet access is pretty clear. It is going up. The numbers are even higher if you focus on people under 55.Notes on this graph:Internet access overall continues to trend flat while mobile access continues its growth among online Canadians. -86% of Canadians have Internet access from any location and 80% have access from home, relatively unchanged over the past five years. -37% now have mobile Internet access compared to 5% in 2001. -95% under the age of 55 have Internet access and 47% have mobile access, compared to those aged 55+ – 68% with Internet access and 16% with mobile access.Ref:how many Canadians are using mobile devices and how? (find some data)stats on how many Canadians own smartphones: http://www.ipsos-na.com/news-polls/pressrelease.aspx?id=5596stats on usage of apps: http://www.ipsos-na.com/news-polls/pressrelease.aspx?id=5270% of mobile users w smartphones: http://www.iphoneincanada.ca/iphone-news/smartphone-penetration-has-reached-45-percent-in-canada-comscore/See stats from Jonathanhttp://www.marketingcharts.com/direct/appsdominate-android-user-time-18061/
More people are getting smartphones. Again, the trend is fairly clear.
Check your Google Analytics.-> ours tells us that 3.85% of visits are on mobile devices-> ask if anyone else knows their stats-somewhat a chicken and egg situation: people won’t visit your site on their mobile devices if it’s not mobile-friendly-depending on your community, you may be able to ask people what they want (survey) – e.g. at a churchSome experts recommend that you should start planning for a mobile site once your mobile traffic is 5% or more of your total web trafficAnalytics-also look at referrals from mobile social mediaAlso: ASK PEOPLE!!!!!!!
Brainstorm (or share pair?)
Story of Tierney donating to Leadnow last year-had done most of end-of-year giving-at a friend’s house for the weekend, had some extra time so was checking email – on my smartphone as I don’t have my laptop with me-one organization that I’m on the email list of has sent me an email asking for a donation of $20-I think “hey, why not”-click through to their donations page which is not mobile friendly-go through with the donation, but it is a pain and takes a whileLessons:-is it the end of the world if your stuff is mobile optimized? No-mobile is a reality, it’s not going away. Mobile devices are just getting more powerful and more ubiquitous
Don’t get swept up in the hype. Focus on what you are trying to do (and what your users are trying to do). Will a mobile site help you achieve this?Probably won’t include this:e.g. TechSoup CanadaGoal #1: e-commerce site for donations program. Fairly complex, also we are not trying to make $$ so we can get away without mobile version. Could argue we need it though. People do still use this aspect of our site on mobile for some reason.Goal #2: nonprofit tech resources. A lot of sharing in social media, newsletter, which are often viewed on mobile. Would be great to make this aspect more mobile-friendly.
Heather to discuss:-
Mobile is not going away
what are the different ways of approaching mobile optimization, and in what circumstances would which make sense? (WordPress template that is mobile optimized (or for other CMSs as well?), separate design or site for mobile, responsive design, only making some pages/forms mobile friendly, etc. **do more research here)technical limitations e.g. flashmobile site vs. certain pages mobile optimizedwhat are some challenges/issues you might encounter when optimizing your site for mobile?note about mobile newsletters - this may be easier and higher value
We will go through each one
Either just have a mobile page, or auto-detect whether visitor is on a mobile deviceAs discussed in the last section, there are many different ways people might get to specific content: newsletter, social media, QR code, text message, app, location-based stuffSome content is inherently mobile-optimized e.g. YouTube videos
This isn’t a perfect example since it’s part of a full mobile site, but you can see how it looks different from a non-mobile-optimized form
How do you know it’s a separate site?-often has a different URL e.g. “m.yoururl.com”-mini site with only basic information, key actions (donate, sign up, take action) -> “speed dating” approach-just blog-campaign /program mini-site e.g. at an event, specific campaign, program that has an on-the-go aspect, at a physical space (e.g. museum exhibit)-full mobile website
Hard to find a full mobile website in nonprofit world, or probably anywhere, because most websites are stripped down for the mobile version.British museum is one example of a mobile site that has a lot of the content on the main site. It’s not a responsive site, but there isn’t a separate URL – possibly detecting device rather than size? Is this a good example?
-typically used for making a mobile version of an existing websiteE.g. Nonprofitorgs.wordpress.com uses mofuse-nonprofitorgs’ site has blog items pulled automatically and a few pages of mostly static content
Examples?
Don’t have to start overAll done with stylesheets
Mobile website:-you get more control over the look because you can design something specifically for mobile – not have to adapt your main site and work with whatever is thereResponsive design:-one website to maintain. With a mobile website often it will be linked to the main website so you get content updates. With some options you even get theme updates.
Heather to discuss:-
-Don’t have to build separate sites. Doing the mobile design at the same time as the main design only made the process take a little bit longer than normal.
Ask people for ideasJust sharing a few here… there are lots more of course.Key idea: simple!!!!!
Text must be a readable size
On desktop you can afford to have more fields to fill in, if people want. Though in general you still want to make forms as simple as possible.On mobile, you have NO extra room – only include what is absolutely necessary
Pick one middle-of-the-road size for each range – one for tablet, one for smartphone. Make the design flexible so it can go a bit bigger or a bit smaller.
This is a really cool flash site but it doesn’t work on mobile.In this case it’s just a part of their site, so that’s fine. But if it’s your whole site… well you want some alternative for mobile users.
Heather to discuss:-
Keep design simple-avoid curves, circles, etc. Use more squares and rectangles-complicated designs don’t work well on mobile-some complex designs involve a lot of graphics, which is bad for mobile (need to download a lot of graphics)Text on a diet-be very concise and focused in your writing – you have very little space to work with-this will benefit your main site as well! People DON’T READ, whether they are on a desktop, tablet or smartphoneDesign with mobile in mind-keep in mind small screen size at all timese.g. “explore ways to give” pics-you will need more space between elements. It might look weird on the desktop, but on mobile it is needed to accommodate fingers!Test on as many devices as possible!-everybody would bring their device to get as wide a range as possible-checking all different sizes during design meetings – if you’re just looking at the designs on a big screen, you will not get the full picture-smartphones and tablets don’t have consistent screen sizes, so the more you try the better. Keep in mind the major ones: old Blackberry, touch Screen blackberry, iPhone, some of the Samsung phones with larger screen sizes, etc.-test both portrait and landscape views!-if people try it out on the device they are comfortable with, they can determine if the experience matches what they expect on their deviceOther points to note: some minor tweaking was needed to make the home page design look good on smartphone size
Resources:http://conviosummit2011.com/?wpfb_dl=480 (make sure this is the right link, it is a report)
