Mobile websites
•Als PPTX, PDF herunterladen•
1 gefällt mir•2,164 views
Are you missing opportunities because your website is difficult to navigate on a mobile device? This presentation looks at: -Should you optimize your website for mobile -What are the main approaches to creating a mobile-optimized site -What are some best practices for mobile design This presentation is aimed at anyone from a nonprofit, social enterprise or small business with a non-techy background. It focuses on the various options for mobile-friendly sites and the pros/cons to consider to make a decision, rather than discuss the technical details of how mobile-friendly websites are implemented. For more information: http://www.techsoupcanada.ca/learning_centre/articles/optimizing-your-nonprofit-website-for-mobile
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (6)
Ähnlich wie Mobile websites
Ähnlich wie Mobile websites (20)
Mehr von TechSoup Canada
Mehr von TechSoup Canada (20)
Mobile websites
- 3. DONATIONS PROGRAM Is my org eligible? You may be eligible to a) Does your business get donations of… number end in RR0001? b) Do you have a Letters Patent from Industry Canada? c) Are you incorporated as a not-for-profit corporation with your province? d) Are you a library?
- 4. ABOUT ME • Software engineer • Nonprofit technology blogger • Community manager @tierneys @techsoupcanada facebook.com/techsoupcanada techsoupcanada.ca/community/blog youtube.com/techsoupcanada slideshare.net/techsoupcanada
- 5. AGENDA 1.Is it mobile friendly? 2.Why mobile? 3.Approaches to mobile websites 4.Designing for mobile
- 6. MOBILE WHAT?? Photo credits: louisvolant, Adrian Measures
- 7. ELEMENTS OF MOBILE STRATEGY Text campaign Mobile app Mobile web mobil Text-to-donate e Mobile-optimized email
- 8. IS IT MOBILE FRIENDLY? 1 2 3 www.cccc.org www.giveconfidently.ca www.nature.org
- 9. IS IT MOBILE FRIENDLY? 1 www.cccc.org No Mobile Site
- 10. IS IT MOBILE FRIENDLY? 2 www.giveconfidently.ca Responsive Design
- 11. IS IT MOBILE FRIENDLY? 3 www.nature.org Mobile Site
- 12. WHAT ABOUT YOUR SITE? GoMo: http://www.howtogomo.com/en/d/test-your-site/
- 14. DO CANADIANS HAVE MOBILE INTERNET? 37% in 2011 5% in 2001
- 15. THINK MOBILE FIRST Source: http://www.rositacortez.com/social-media-101/10-reasons-why-your-nonprofit-needs-a-mobile-site/
- 16. ARE YOUR VISITORS MOBILE?
- 17. 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?
- 20. 3 MAIN APPROACHES 1 Mobile-Optimized Content 2 Mobile Website 3 Responsive Design
- 21. 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 • Sign up page • Key content or content that is mobile-optimized by default Sample code for a mobile-friendly donation form: http://open.convio.com/downloads/mobile- friendly-donation-form.html Case study of a mobile-friendly sign up form: http://www.nten.org/articles/2012/how-to-quickly- optimize-your-website-for-mobile-devices
- 22. 1 EXAMPLES OF MOBILE-OPTIMIZED CONTENT Mobile donation form Mobile petition m.cancer.org care2.org
- 23. 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
- 24. 2 EXAMPLES OF MOBILE WEBSITES Mini-site: blog only Mini-site: key info Full site (pretty much): m.cyberbullying.co.uk burkemuseum.org m.cancer.org
- 25. 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
- 26. 2 APPROACHES TO MOBILE WEBSITES 2. Mobile Themes & Plugins • Website themes that are optimized for mobile • CMS plugins that detect mobile and apply a mobile theme • Wordpress: WordPress Mobile Pack, WPTouch, WPTap • Drupal http://drupal.org/project/mobile_tools • Joomla http://extensions.joomla.org/extensions/mobile • Plone http://plone.org/products/web-and-mobile
- 27. 2 APPROACHES TO MOBILE WEBSITES 3. DIY • For advanced or unusual sites, you may want to build it yourself • Like building a website, but mobile-friendly 4. Advanced Mobile Platforms • Desktop & mobile site based off the same code, but customized for each platform e.g. Moovweb
- 28. 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
- 29. 3 EXAMPLES OF RESPONSIVE DESIGN www.giveconfidently.ca www.staugustineschurch.ca/ www.fundraise.com/
- 30. 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)
- 31. WHICH APPROACH TO TAKE? 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
- 32. HOW MUCH WILL IT COST? • Mobile website services start at $9/month • Pre-built mobile or responsive themes cost between $0-100 • Costs for custom development vary greatly depending on your goals • Could be free if you have some IT skills and can make some tweaks for responsiveness • Could be very expensive if you want a DIY mobile site from scratch
- 33. A User-Centered Approach To Web Design For Mobile Devices iOS User Experience Guidelines
- 34. PUT YOUR TEXT ON A DIET 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?”
- 35. SIMPLIFY, SIMPLIFY, SIMPLIFY • Ask for less info • Provide dropdown menus and checkboxes where possible Mobile form design strategies
- 36. MAKE ROOM FOR FINGERS • Apple’s recommended fingertip size is 44x44px • Make buttons big enough; provide space around clickable things
- 37. SUPPORT MULTIPLE SIZES & DEVICES Don’t forget to check with different orientations of the same device!
- 38. FOLLOW GOOD WEBSITE PRACTICES • Following standards will make any website easier to use on mobile devices • HTML5 features are increasingly supported by mobile browsers http://mobilehtml5.org/ • E.g. form input – using a special tag on a form field can make a special keyboard or input option pop up http://www.quirksmode.org/html5/inputs_mobile.html
- 39. 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
Hinweis der Redaktion
- 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.Note: feature phones are particularly relevant if you are working outside of North America as they are quite widespread. A bit of a separate topic though.
- 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?)
- 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.
- 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 oneThis is obviously a big simplification, the actual options are more nuanced. But it should give you an idea of the options out there.
- 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?
- Examples?
- Don’t have to start overAll done with stylesheets
- Show giveconfidently.ca page with different sizes
- This is really a growing area
- 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.
- Ask people for ideasJust sharing a few here… there are lots more of course.Key idea: simple!!!!!Many of these things you can do on your desktop site as well.
- Text must be a readable size“TEXT ON A DIET”
- 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 necessaryE.g. HelpAttack takes the approach of not collecting credit card info up front on a mobile, because that’s too much stuff to type in. Instead they will get your info and follow up with you later. Better to get some info than none at all.“Email list signups, petitions, Likes, retweets, and shares are easy things to do with a phone - present those simple options.”
- 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.
- Resources:http://conviosummit2011.com/?wpfb_dl=480 (make sure this is the right link, it is a report)