In this webinar Teresa Judd, Blackbaud's New Zealand Manager and Chris Bell, Blackbaud’s Web developer, discussed the importance of mobile optimisation for your website and how mobile works with NetCommunity. To view the recording and other NetCommunity sessions please visit our website: https://www.blackbaud.com.au/notforprofit-events/webinars/bbnc-boot-camp

1. 27/08/2013
MOBILE OPTIMISATION WITH
BLACKBAUD NETCOMMUNITY
Presented by:
Teresa Judd, New Zealand Manager
Chris Bell, Web Developer

2. 27/08/2013
www.blackbaud.com.au/notforprofit-events/webinars/bbnc-boot-camp
FULL SESSION LISTINGS
Blackbaud has launched a brand new webinar series between 27 August - 4 September, for all our Blackbaud NetCommunity
customers.
Attend to discover product hints and tips. Access how to sessions which will allow you to maximise the way you use Blackbaud
NetCommunity!
Session Date Time
Analytics and Analysis
In this session find out what analytics is and the tools within The
Raiser's Edge and NetCommunity that will help you measure and
manage your data.
Wednesday 28 August
11:00am AEST (Sydney), 1:00pm NZST (New
Zealand), 9:00am GMT +08:00 (Singapore, Hong
Kong)
Online Fundraising Best Practices: The A to
Z of Sending a Targeted Appeal
In this session work through a detailed checklist of all the steps you
need to send a targeted appeal with The Raiser's Edge and
NetCommunity.
Monday 2 September
11:00am AEST (Sydney), 1:00pm NZST (New
Zealand), 9:00am GMT +08:00 (Singapore, Hong
Kong)
Email Marketing: Email Design and
Deliverability
In this session take a look at the simple, efficient and effective email
designs within NetCommunity that will help your email marketing's
response and deliverability.
Tuesday 3 September
11:00am AEST (Sydney), 1:00pm NZST (New
Zealand), 9:00am GMT +08:00 (Singapore, Hong
Kong)
Building Your Community: Making Your Site
Audience Centric
In this session walk through developing an audience-centric website in
NetCommunity by determining where you are, where you want to be and
how to get your audience there with you.
Wednesday 4 September
11:00am AEST (Sydney), 1:00pm NZST (New
Zealand), 9:00am GMT +08:00 (Singapore, Hong
Kong)

3. 27/08/2013
• Understanding the Mobile User
• When Should I Begin?
• How Does Mobile Work in BBNC?
• Best Practices Going Forward
AGENDA

4. 27/08/2013
LET’S GET STARTED…

5. 27/08/2013
By 2015
mobile will outpace desktops as the
#1 method for accessing the web
- Source: Morgan Stanley

6. 27/08/2013
UNDERSTANDING THE MOBILE USER

7. 27/08/2013
• Views the website in a different context on mobile devices vs.
desktop
• Has different needs and goals
- The primary task for an airline desktop site is to book flights,
whereas the primary task for the mobile site is to check flight
status
• Know what they want and want it quickly
- Maps and directions, contact
information (81% of users)
- Social Networking
(76% of users)
- Finding local information
(73% of users)
MEET MR/MRS. MULTI-TASKER

8. 27/08/2013
• A design that works well for a desktop
is not optimised for mobile browsing
• Desktop resolutions are on the
increase (1990 = 800x600 pixels;
2000 = 1024x768
• Mobile device resolutions are smaller
(iPhone = 480x320)
OPTIMISING PRESENTATION

9. 27/08/2013
• A design that works well for a desktop
is not optimised for mobile browsing
• Desktop resolutions are on the
increase (1990 = 800x600 pixels;
2000 = 1024x768
• Mobile device resolutions are smaller
(iPhone = 480x320)
OPTIMISING PRESENTATION

10. 27/08/2013
HOW DO I KNOW IF I NEED A MOBILE
OPTIMISED WEBSITE?

11. 27/08/2013
ASK GOOGLE!
Click Advanced Segments

12. 27/08/2013
GOOGLE ANALYTICS
Choose “All Traffic” and
“Mobile Traffic” and click
Apply

13. 27/08/2013
MEASURE MOBILE TRAFFIC
“All” vs. “Mobile” traffic is
now included everywhere.
In this case 6.27% of total
visits come from mobile.

14. 27/08/2013
VARIETY OF APPROACHES TO MOBILE

15. 27/08/2013
3 MAIN APPROACHES TO MOBILE
Designated
Mobile Site
Full Site
Mobile
Replication
Responsive
Design
Increasing Complexity & Costs

16. 27/08/2013
- Infographic Source: www.monetate.com
RESPONSIVE

17. 27/08/2013
• Helps you make the most of mobile quickly
• Adapts to a smaller screen size
• Puts a priority on specific content
• Minimise input requirements on web forms to keep it user
friendly
• Minimises load time – maximising web speed
• All of this leads to an increase in conversions
DESIGNATED MOBILE SITE

18. 27/08/2013
SO…HOW DOES MOBILE WORK WITH
BLACKBAUD NETCOMMUNITY?

19. 27/08/2013
• A basic design
• A mobile specific style sheet*
• A mobile-specific layout*
• A mobile-specific template*
• A list of the existing or new pages that you’d like to have a
mobile version of
• Some mobile devices to test with
* Support for these available from BBNC v6.41
YOU WILL NEED:

20. 27/08/2013
THE DESIGN
Back
FOOTER
LOGO
Home
CONTENT

21. 27/08/2013
• Need to know CSS very well
• Need to understand @media queries
• Need to know how to write valid CSS
• Styling forms/parts for mobile requires advanced
CSS
• Mobile devices support A LOT MORE CSS
• Buttons, Gradients, Animation all with CSS
• Styling parts and layouts is the most time consuming
STYLE SHEET
SKILLOMETER

22. 27/08/2013
THE STYLE SHEET

23. 27/08/2013
STYLE SHEET PROPERTIES

24. 27/08/2013
SPECIFYING THE STYLE SHEET AS FOR MOBILE

25. 27/08/2013
• Need to be able to write valid HTML
• Need to understand id= and class=
• If you can write desktop HTML you can write mobile
HTML
• Layout changes affect lots of pages
• Requires content hierarchy planning
LAYOUTS
SKILLOMETER

26. 27/08/2013
THE LAYOUT

27. 27/08/2013
• Determine how many templates you need
• Mostly point and click now
• Most of the difficult work is done
• Create and insert site-wide content
• Good to know some HTML and CSS
TEMPLATES
SKILLOMETER

28. 27/08/2013
SPECIFYING WHICH TEMPLATE IS FOR MOBILE

29. 27/08/2013
THE TEMPLATE

30. 27/08/2013
• Identifies the page as being viewed on a mobile device
• Detects different screen sizes
• Should be added at Template level
VIEWPORT METADATA

31. 27/08/2013
VIEWPORT METADATA

32. 27/08/2013
• Determine how many pages you want/need
• Mostly point and click
• Most of the difficult work is done
• Create and insert page content
• Good to know some HTML and CSS
PAGES
SKILLOMETER

33. 27/08/2013
THE PAGE

34. 27/08/2013
THE MOBILE VERSION OF THE PAGE

35. 27/08/2013
• Uses same Parts/forms as your desktop website
• Need to know CSS very well to re-style parts for mobile
• Not all parts are mobile-ready
• Need to test every scenario of Part/form configuration
• Forms re-styled to be more vertical for small mobile screens
CONTENT FORMS
SKILLOMETER

36. 27/08/2013
1. Do the layout HTML & CSS
2. Add mobile CSS to the BBNC site
3. Create the mobile Layout in the BBNC site
4. Make sure that the content placeholders on the mobile layout have
different numbers from desktop layout (if necessary)
5. Upload the Javascript file into a Documents part in the BBNC site
6. Include the Javascript reference into the Layout HTML
7. Create the mobile Template in the BBNC site
8. Create an Unformatted Text part containing the viewport metadata
and make sure it is positioned in the <head>
9. View the mobile Template and Pages as ‘mobile device’ and add
parts as needed
10.Test!
REVIEWING THE STEPS

37. 27/08/2013
• Keep it quick as users are
on the move
• Simplify navigation
• Design for visibility
• Make it friendly and easy to
use
MOBILE SITE BEST PRACTICES
• Make your content relevant
for mobile users
• Make the brand seamless
• Use mobile site redirects for
device detection
And most importantly: Listen, Learn and Iterate

38. 27/08/2013
TO LEARN MORE ABOUT BBNC
MOBILISATION, VISIT:
https://www.youtube.com/watch?v=FjLirCEDw6c
Check out tips @ http://mobilewebbestpractices.com/

39. 27/08/2013
THANK YOU FOR ATTENDING!
Let your Account Manager know if you have any questions or
would like to schedule a session with one of our BBNC experts!
Session Date Time
Analytics and Analysis
In this session find out what analytics is and the tools within The
Raiser's Edge and NetCommunity that will help you measure and
manage your data.
Wednesday 28 August
11:00am AEST (Sydney), 1:00pm NZST (New
Zealand), 9:00am GMT +08:00 (Singapore, Hong
Kong)