Recomendados
Recomendados
Más contenido relacionado
Más de TechSoup Canada
Más de TechSoup Canada (20)
Último
Último (20)
Optimizing Your Website for Mobile Devices
- 3. ABOUT ME • Software engineer • Nonprofit technology blogger • Community manager @tierneys @techsoupcanada facebook.com/techsoupcanada techsoupcanada.ca/community/blog youtube.com/techsoupcanada
- 4. AGENDA 1.Is it mobile friendly? 2.Why mobile? 3.Approaches to mobile websites 4.Designing for mobile
- 5. MOBILE WHAT?? Photo credits: louisvolant, Adrian Measures
- 6. ELEMENTS OF MOBILE STRATEGY Text campaign Mobile app Mobile web mobil Text-to-donate e Mobile-optimized email
- 7. IS IT MOBILE FRIENDLY? 1 2 3 www.cccc.org www.giveconfidently.ca www.nature.org
- 8. IS IT MOBILE FRIENDLY? 1 www.cccc.org No Mobile Site
- 9. IS IT MOBILE FRIENDLY? 2 www.giveconfidently.ca Responsive Design
- 10. IS IT MOBILE FRIENDLY? 3 www.nature.org Mobile Site
- 11. WHAT ABOUT YOUR SITE?
- 13. DO CANADIANS HAVE MOBILE INTERNET? 37% in 2011 5% in 2001
- 14. MORE PEOPLE ARE GETTING SMARTPHONES Source: http://www.rositacortez.com/social-media-101/10-reasons-why-your-nonprofit-needs-a-mobile-site/
- 15. ARE YOUR VISITORS MOBILE?
- 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
- 17. ONCE UPON A TIME…
- 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
- 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
- 33. Why did CCCC choose responsive design?
- 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
- 35. A User-Centered Approach To Web Design For Mobile Devices iOS User Experience Guidelines
- 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!
Notas del editor
- 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)