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
Mobile web vs. native apps: It's not about technology, it's about psychologyiQcontent
Cold logic makes a hard case for opting for mobile web apps over native ones. If you can build it in HTML, CSS, and javascript, then do, right? Except for the pesky little detail called the real world, where marketers demand apps, boardrooms pay for apps, and even worse, users seem to prefer them. Or do they?
In this talk, Brian will try to reframe the web vs native vs hybrid debate into a conversation about what your customers really need, and what they’ll actually use. The technology you choose for your mobile approach is of strategic importance, but you need to be thinking about much more than just technology.
Mobile web vs. native apps: It's not about technology, it's about psychologyiQcontent
Cold logic makes a hard case for opting for mobile web apps over native ones. If you can build it in HTML, CSS, and javascript, then do, right? Except for the pesky little detail called the real world, where marketers demand apps, boardrooms pay for apps, and even worse, users seem to prefer them. Or do they?
In this talk, Brian will try to reframe the web vs native vs hybrid debate into a conversation about what your customers really need, and what they’ll actually use. The technology you choose for your mobile approach is of strategic importance, but you need to be thinking about much more than just technology.
To remain viable in the publishing environment it is important for publishers stay current with evolving technology. To help publishers prepare for this new reality, SSP, in collaboration with the World Bank, presents an important full-day seminar on Digital Opportunities and Challenges. This two-part seminar explores the choices that choices publishers will have to make early in the process to enhance their return on investment as they transition to an evolving digital landscape, and presents practical examples of strategies for packaging & delivering content to different channels (not just mobile devices).
The morning session will provide an overview of the current market for electronic publishing with specific examples of business models used by a university press, a commercial publisher, and an association. The afternoon session will cover the various electronic readers, emerging mobile applications relevant to publishers, and digital rights management to include discussions on piracy and intellectual property. Together, both sessions will give a comprehensive overview of what is happening in the new digital arena.
Join us if you want to:
-Catch-up on the current state of digital transition
-Discuss emerging business models
-Examine the evolving digital devices and mobile applications used to disseminate content
-Gain insight on emerging piracy issues
This full day seminar will be invaluable to anyone interested in understanding the opportunities and challenges involved in delivering and marketing your content in a digital environment. This includes marketing coordinators, production managers, acquisitions editors, and senior management at small to medium-sized publishers of scholarly content currently in both book and journal form.
Responsive web design is one of the new age techniques to offer a better user experience. It is also an effective approach to cut down on the overall cost.
On the 12th of March, Art Director Gabriel Tamborini and Designer Gabriel Tamborini took over the Apple store Sydney, offering up their insights and tips on designing for digital in a mobile world.
Find out more about Reactive's takeover of the Apple store here http://bit.ly/PJgBHR
Earlier this month, I presented an updated talk on Mobile Strategy for Servoy. This one hour talk looks at the 3 options for a mobile strategy: Responsive Web, Mobile Optimized, and/or Native. I also explained why HTML5 is not a strategy; it is merely a technology you can use to implement any and all of these options. And we briefly discussed the three faces of Mobile First and how this methodology helps companies break out of old habits to create better customer experiences.
Responsive & Adaptive Design: Delivering Websites That Delight Your UsersBBDO
Considering that mobile and tablet users constitute an ever-growing share Internet traffic, designing websites with a mobile-first strategy is crucial to a sites success. This paper considers the two UX design techniques that can bring beautiful web design to the smaller screen.
Brief presentation covering 5 things the attorneys and firms in the National Association of Consumer Advocates (NACA) can do to increase their search engine, and social media presence on the internet.
Four Freebies and a Bargain: No- and Low-Cost Tech ToolsTechSoup Canada
There’s no doubt that technology can enhance charitable and nonprofit work, making your organization more efficient and better able to fulfill your mission. But with tight budgets at most organizations, there’s usually little or no funds allocated to technology spending. This workshop will present you with how your organization can obtain no- and low-cost technology resources, support and information. Find out how you can get product donations from over 25 major technology providers, such as: Microsoft, Adobe, Cisco Systems, Symantec, and Intuit Canada.
- By: Jane Zhang
To remain viable in the publishing environment it is important for publishers stay current with evolving technology. To help publishers prepare for this new reality, SSP, in collaboration with the World Bank, presents an important full-day seminar on Digital Opportunities and Challenges. This two-part seminar explores the choices that choices publishers will have to make early in the process to enhance their return on investment as they transition to an evolving digital landscape, and presents practical examples of strategies for packaging & delivering content to different channels (not just mobile devices).
The morning session will provide an overview of the current market for electronic publishing with specific examples of business models used by a university press, a commercial publisher, and an association. The afternoon session will cover the various electronic readers, emerging mobile applications relevant to publishers, and digital rights management to include discussions on piracy and intellectual property. Together, both sessions will give a comprehensive overview of what is happening in the new digital arena.
Join us if you want to:
-Catch-up on the current state of digital transition
-Discuss emerging business models
-Examine the evolving digital devices and mobile applications used to disseminate content
-Gain insight on emerging piracy issues
This full day seminar will be invaluable to anyone interested in understanding the opportunities and challenges involved in delivering and marketing your content in a digital environment. This includes marketing coordinators, production managers, acquisitions editors, and senior management at small to medium-sized publishers of scholarly content currently in both book and journal form.
Responsive web design is one of the new age techniques to offer a better user experience. It is also an effective approach to cut down on the overall cost.
On the 12th of March, Art Director Gabriel Tamborini and Designer Gabriel Tamborini took over the Apple store Sydney, offering up their insights and tips on designing for digital in a mobile world.
Find out more about Reactive's takeover of the Apple store here http://bit.ly/PJgBHR
Earlier this month, I presented an updated talk on Mobile Strategy for Servoy. This one hour talk looks at the 3 options for a mobile strategy: Responsive Web, Mobile Optimized, and/or Native. I also explained why HTML5 is not a strategy; it is merely a technology you can use to implement any and all of these options. And we briefly discussed the three faces of Mobile First and how this methodology helps companies break out of old habits to create better customer experiences.
Responsive & Adaptive Design: Delivering Websites That Delight Your UsersBBDO
Considering that mobile and tablet users constitute an ever-growing share Internet traffic, designing websites with a mobile-first strategy is crucial to a sites success. This paper considers the two UX design techniques that can bring beautiful web design to the smaller screen.
Brief presentation covering 5 things the attorneys and firms in the National Association of Consumer Advocates (NACA) can do to increase their search engine, and social media presence on the internet.
Four Freebies and a Bargain: No- and Low-Cost Tech ToolsTechSoup Canada
There’s no doubt that technology can enhance charitable and nonprofit work, making your organization more efficient and better able to fulfill your mission. But with tight budgets at most organizations, there’s usually little or no funds allocated to technology spending. This workshop will present you with how your organization can obtain no- and low-cost technology resources, support and information. Find out how you can get product donations from over 25 major technology providers, such as: Microsoft, Adobe, Cisco Systems, Symantec, and Intuit Canada.
- By: Jane Zhang
Did you know that by 2013 there will be more people using mobile phones than PCs to get online? Get a jump start this year by creating a mobile version of your website. In this presentation we reviewed a 15-point checklist to get your mobile site in tip-top shape so that it offers the best experience possible to your mobile viewers.
Mobile presence & location based marketingPriyanka Rana
Slides talk about value of mobile marketing , various tools and technologies that support mobile marketing along with discussion of location-based marketing.
Google recently changed its search algorithm to move mobile-friendly websites to the top of its search results. In May, the number of Google searches on mobile exceeded the number of desktop searches for the first time. Mobile optimization is no longer just a nice-to-have -- it's a necessity to have a mobile-friendly website, email, and engagement platform. With less than 40% of websites -- and fewer than 16% of donation forms -- being mobile friendly, there is a lot of work to prepare for the looming mobilegeddon.
Designing for Mobile - Hileman Group Lunch & Learn SeriesHileman Group
The mobile web is no longer a concept – it's a mainstream reality that will impact any organization that aims to communicate with target audiences online.
Mobile website --- Web is in pocket....Naga Harish M
Now a days smart phones growing very fast. And also web access from mobile phone also more. So, we most have mobile version website. Create mobile web site using HTML5 and CSS3.
Designing Websites With a Mobile First ApproachDan Moriarty
Learn about designing and building your website to be mobile first, meaning you begin at the smallest screen size available. Make your design, content, and planning decisions here, and then enhance and expand to the desktop
Technologies: Expert in the Room Webinar: Optimizing your Website for MobileRandstad USA
Key Takeaways:
- Why optimize for mobility
- Defining your approach
- Mistakes made when designing for mobile
- Best practices for developing a mobile website
In response to COVID-19, Together Project's staff and volunteers had to quickly adapt and pivot their programs in order to continue providing social support to newcomers in Canada. While their new model is only a few months in the making, Together Project has learned a great deal about how to set up an online volunteering program.
In this presentation, Anna Hill and Andrew Lusztyk (from Together Project) share with us their insights, including:
- How to get started setting up an online volunteering program;
- Tips and tools to develop a greater capacity to onboard and train volunteers remotely;
- Benefits and challenges of online volunteering;
- How online volunteering can help vulnerable demographics––from equipping volunteers to tackle new challenges
View the webinar recording here: https://youtu.be/NEm0Vu-IhpA
NOTE: This presentation was for new users of Power BI and/or those interested in brushing up on the basic functions and features of the program. View webinar recording on YouTube: https://youtu.be/ybfzGdHlumc
Microsoft's Power BI allows you to monitor key metrics, spot real-time trends and create personalized dashboards without being a data expert. Our expert, Alyssa Ford from Tech Impact, walks us through why Power BI is a powerful, low-cost tool that allows you to take your data from virtually any source (Excel files, Salesforce, SurveyMonkey, SQL server, SharePoint, etc.) and how to turn it into meaningful visualizations.
In this presentation, Alyssa covers:
– the basics of Power BI,
– what it can do,
– how licensing works,
– and some use-case examples.
Google Ads 101: Increase Your Nonprofit’s Presence With $10,000 a month Of AdsTechSoup Canada
This slidedeck is from a webinar hosted by TechSoup Canada featuring Simon and Lily of ConnectAd. They will help you understand how to register, access & use your Google Ads account to grow your nonprofit’s online presence. They'll show you how Google Ads can help your nonprofit connect to and engage with donors, volunteers, and supporters.
You will learn:
- How the Google Ads Grant can be useful to nonprofits
- How to apply for your Google Ads Grant account
- Step by step how to create your first campaign inside your Google Ads Grant account
The webinar is for beginners looking to learn how to access & use the main features of Google Ads. To see the webinar recording and other resources please visit http://bit.ly/GoogleAdsWebinar
Note that you must be a registered nonprofit in Canada to be eligible for Google Ad Grants. To apply for Google Suite for Nonprofits please visit http://bit.ly/2UGtfbw
Growth Strategies To Scale Up Your Small NonprofitTechSoup Canada
There are lots of small business growth strategies that you can apply to the nonprofit sector: from new products and services, to territory expansion and the elusive social enterprise development. Carla Langhorst of SmallBusinessSolver.com will explain how you can apply growth principles in financial and marketing planning to your nonprofit. Carla will show the you the business strategies and tools you can use so that your nonprofit can assess risk and scale up sustainably.
In this webinar, you will learn:
- About the emerging revenue generation trends that nonprofits are doing,
- How to strategically grow from your core operations while mitigating risk,
- The types of online resources you can access and use to continue evolving your strategic plans.
Ten Years of TechSoup Canada: Insights, ideas, and tips from a decade of #nptechTechSoup Canada
In 2019, TechSoup Canada turns 10! The past decade has taught us a lot about using technology as a tool for social impact, and we are eager to share that knowledge with you.
In our team's special 10 Year Anniversary webinar we explore the lessons of the past decade, trends shaping nonprofit technology today, and tips and tricks for making the most of your TechSoup Canada membership.
What you will learn:
-Key lessons from a decade of helping Canadian nonprofits use tech more effectively
-Tech trends to embrace and which ones to approach more cautiously
-Tips and tricks for maximizing your TechSoup Canada membership
How to be CASL & GDPR Compliant for the New Year 2019TechSoup Canada
In this webinar, Antoine Bonicalzi, Marketing Director* for Cyberimpact, will talk about how you can comply with CASL &GDPR by taking a few simple steps. All in simple plain English, no legal jargon guaranteed! Antoine will cover exactly what CASL & GDPR are, and how they apply to your nonprofit so that you’ll be ready to make 2019 your best data privacy & consent driven year yet.
In this webinar you will learn:
- How to handle your contacts’ personal data
- How to obtain & handle meaningful consent
- The types of software to help you stay compliant
- The channels of communication (e-mail & other digital communication) you can use to promote your work while remaining compliant
* Please note that Antoine is not a lawyer, the content of this webinar does not constitute legal advice. For legal advice, please consult legal experts.
Phil Downe - Avoiding Shady IT Vendors (final version)TechSoup Canada
In this webinar, IT contract specialist Phil Downe of Relations Management Group explains how to do cloud-based software negotiations with confidence.
The webinar answers the following questions:
How can you avoid vendor captivity and software traps?
How can you prepare for a negotiation, including leveraging and timing the deal?
How can you draft a contract and prevent contract ambiguity?
In this webinar, IT contract specialist Phil Downe of Relations Management Group explains how to do cloud-based software negotiations with confidence.
The webinar answers the following questions:
How can you avoid vendor captivity and software traps?
How can you prepare for a negotiation, including leveraging and timing the deal?
How can you draft a contract and prevent contract ambiguity?
Digital Storytelling: Understanding Social Media and Visual Storytelling Tool...TechSoup Canada
This presentation will explore how digital storytelling, through visuals, videos, and live stories can amplify and better communicate your nonprofit story. This presentation will also show how some nonprofits are using social media platforms for digital storytelling, with examples of successful campaigns on Facebook, Twitter, Instagram, and Snapchat.
In this presentation you will learn:
- How to tailor content and visuals to your organization’s social media platforms;
- Tools you can use to create images, infographics, and fonts to build your visual storytelling elements;
- Tangible ways to employ ethical practices into sharing digital stories.
nonprofits to find effective and creative ways of sharing their stories.
With so much communication happening between family, friends, businesses, and organizations – we can’t rely on the same old year-end fundraising practices to grow our year-end revenue.
In this webinar, Brady Josephson will walk you everything we’ve learned about year-end fundraising, and share key fundraising techniques that will help you cut through the clutter and grow your year-end revenue.
In this webinar you’ll learn:
- Some of the best days and times to send their emails to stand out in the overcrowded inboxes.
- How to send highly relevant emails that will get opened and help raise more money in December
- How to create high converting, year-end donation pages to make the most of this high traffic season.
Creating a Content Strategy for your Nonprofit WebsiteTechSoup Canada
Planning a new website for your nonprofit organization? A website content strategy will serve as a guide for many of the decisions you’ll make. You'll know what content you need to develop, what you can reuse or re-purpose, and what content is most important. Because it creates clarity about your site's purpose, audience and the outcomes you’re seeking, a content strategy will also guide specific decisions about website design and development.
What you'll learn:
- During this webinar, we’ll explore the benefits (which go far beyond content planning) of creating a clearly defined and documented website content strategy.
We will look at:
- Why you need to develop your content strategy before you start any website design or development work.
- The elements to include in a website content strategy – along with the steps involved in building one.
- Specific and productive ways to include internal stakeholders in the planning process.
Avoiding "Shady" IT Vendors: Doing Cloud-based Software Deals with ConfidenceTechSoup Canada
In this webinar, IT contract specialist Phil Downe of Relations Management Group explains how to do cloud-based software negotiations with confidence.
The webinar answers the following questions:
How can you avoid vendor captivity and software traps?
How can you prepare for a negotiation, including leveraging and timing the deal?
How can you draft a contract and prevent contract ambiguity?
Strategies for Donor Retention Using Your CRM SoftwareTechSoup Canada
CRM software can be a great tool to help you report and communicate effectively in your fundraising efforts. Philip Manzano of Keela.co will teach you how to show donor impact and retain donors by creating reliable reports and data. This webinar is for nonprofit professionals with essential fundraising skills who are looking to improve their craft with the use of CRM software.
In this webinar you will learn:
· Meaningful ways to connect with your donors and promote relationship building in your fundraising activities;
· To create reliable reports and ways to share information, case studies or stories with donors;
· To leverage your data with reports for donor retention, including how to create and customize reports.
How Your Nonprofit Can Avoid Data Breaches and Ensure Privacy Part 2TechSoup Canada
Part 1 of this webinar series provided an overview of cybersecurity and explained the cyber risks and legislation affecting nonprofits. In part 2 of the series, Imran Ahmad of Miller Thomson, LLP returns to answer your questions on cybersecurity and to delve deeper into cybersecurity maintenance and best practices to avoid data breaches. This includes the implementation of measures to prevent data breaches in the pre-attack phase, to the implementation of security best practices in the event of a cyber attack or breach.
What you will learn:
· How to develop key cybersecurity-related documents;
· How to maintain an internal matrix of when to notify affected individuals;
· How to review contracts from a cybersecurity compliance perspective.
How your nonprofit can avoid data breaches and ensure privacyTechSoup Canada
Increasingly, nonprofits hold large quantities of digital assets (such as donor information, grant application details, financial records, etc.). Organizations of all sizes and industries are being targeted by cyber criminals. Cyber-attacks will often devastate an organization’s operations and have significant financial, legal and reputational consequences.
In this webinar, Imran Ahmad of Miller Thomson, LLP will explain how implementing best practices from a pre-breach standpoint can go a long way to mitigate the negative consequences of a cyber-attack.
What you will learn:
- what the cyber threat landscape looks like
- how to ensure privacy of your digital assets
- steps to take in the aftermath of a cyber-attack
#nptech 2018: Trends, Insights, and PossibilitiesTechSoup Canada
What does the coming year hold for nonprofit technology? We asked a handful of subject matter experts to share their thoughts on the tech trends and opportunities the nonprofit sector should embrace in the coming year. With Alexander Dirksen of First Nations Technology Council, Marlene Oliveira of moflow, Yaa Otchere of Not An Elephant, Maryam Sahebol-Amri of TechSoup Canada, and Carolyn Tackett and Rogelio Lopez of Access Now.
There are many accounting platforms aimed at helping nonprofits achieve compliance, and QuickBooks is one of the most popular. In this presentation, Jean Elwell and Bob Wang of Legacy Advantage discuss using QuickBooks to ensure that your nonprofit is audit-proof. Join us!
Finding Meaning in the Numbers: Making Data-Informed Decisions Across Your Or...TechSoup Canada
Does your nonprofit track vital data -- but lack the time and resources to make sense of it? Don't worry! TechSoup Canada is here to help make your data work for you.
Join us to learn how to create a reasonable and manageable data strategy, and how to foster a culture of data-informed decision making across your entire organization.
In this webinar, you will learn how to:
-harness the potential of business intelligence and Big Data
-create and implement an integrated data strategy
-overcome institutional resistance and foster a culture of data-informed decision making
-use dashboards to gain insight into a variety of data sources
In this webinar, we get an overview of the comprehensive set of cloud services (Office 365, Azure, and Dynamics) that Microsoft donates to eligible nonprofits through TechSoup Canada. We also hear from local nonprofit Dixie Bloor Neighbourhood Centre about how migrating to Office 365 transformed their operations.
Update on Canada's Anti-Spam Legislation for Nonprofits and CharitiesTechSoup Canada
Back by popular demand, Maanit Zemel from Zemel van Kampen LLP (http://www.canadatechlaw.com), will walk nonprofits through Canada's Anti-Spam Legislation (CASL) for nonprofits and charities, and what's involved in the next deadline for CASL that will come into effect on July 1st, 2017.
What you will learn in this webinar:
- How CASL applies to nonprofits and charities
- What's changing in the next deadline, July 1st, 2017*: transition period for implied consent ends
- How to be compliant with the legislation
*Update as of June 7th 2017: CASL Private Right of Action indefinitely suspended and will not take effect on July 1st, 2017. Read more: https://www.the-cma.org/resource/newsroom/2017/casl-pra-suspension
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/
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?
19.
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
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
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)