mobile optimisation with blackbaud netcommunity - boot camp series
DESCRIPTION
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-campTRANSCRIPT
![Page 1: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/1.jpg)
27/08/2013
MOBILE OPTIMISATION WITH
BLACKBAUD NETCOMMUNITY
Presented by:
Teresa Judd, New Zealand Manager
Chris Bell, Web Developer
![Page 2: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/2.jpg)
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)
![Page 3: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/3.jpg)
27/08/2013
• Understanding the Mobile User
• When Should I Begin?
• How Does Mobile Work in BBNC?
• Best Practices Going Forward
AGENDA
![Page 4: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/4.jpg)
27/08/2013
L E T ’S GE T S TART E D…
![Page 5: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/5.jpg)
27/08/2013
By 2015 mobile will outpace desktops as the
#1 method for accessing the web
- Source: Morgan Stanley
![Page 6: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/6.jpg)
27/08/2013
UNDE RS TANDING T HE MOBIL E US E R
![Page 7: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/7.jpg)
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
![Page 8: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/8.jpg)
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
![Page 9: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/9.jpg)
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
![Page 10: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/10.jpg)
27/08/2013
HOW DO I KNOW IF I NE E D A MOBIL E
OP T IMIS E D W E BS IT E ?
![Page 11: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/11.jpg)
27/08/2013
ASK GOOGLE!
Click Advanced Segments
![Page 12: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/12.jpg)
27/08/2013
GOOGLE ANALYTICS
Choose “All Traffic” and
“Mobile Traffic” and click
Apply
![Page 13: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/13.jpg)
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.
![Page 14: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/14.jpg)
27/08/2013
VARIE T Y OF AP P ROACHE S TO MOBIL E
![Page 15: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/15.jpg)
27/08/2013
3 MAIN APPROACHES TO MOBILE
Designated
Mobile Site
Full Site
Mobile
Replication
Responsive
Design
Increasing Complexity & Costs
![Page 16: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/16.jpg)
27/08/2013
- Infographic Source: www.monetate.com
RESPONSIVE
![Page 17: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/17.jpg)
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
![Page 18: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/18.jpg)
27/08/2013
S O… HOW DOE S MOBIL E W ORK W IT H
BL ACKBAUD NE T COMMUNIT Y ?
![Page 19: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/19.jpg)
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:
![Page 20: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/20.jpg)
27/08/2013
THE DESIGN
Back
FOOTER
LOGO
Home
CONTENT
![Page 21: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/21.jpg)
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
![Page 22: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/22.jpg)
27/08/2013
THE STYLE SHEET
![Page 23: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/23.jpg)
27/08/2013
STYLE SHEET PROPERTIES
![Page 24: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/24.jpg)
27/08/2013
SPECIFYING THE STYLE SHEET AS FOR MOBILE
![Page 25: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/25.jpg)
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
![Page 26: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/26.jpg)
27/08/2013
THE LAYOUT
![Page 27: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/27.jpg)
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
![Page 28: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/28.jpg)
27/08/2013
SPECIFYING WHICH TEMPLATE IS FOR MOBILE
![Page 29: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/29.jpg)
27/08/2013
THE TEMPLATE
![Page 30: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/30.jpg)
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
![Page 31: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/31.jpg)
27/08/2013
VIEWPORT METADATA
![Page 32: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/32.jpg)
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
![Page 33: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/33.jpg)
27/08/2013
THE PAGE
![Page 34: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/34.jpg)
27/08/2013
THE MOBILE VERSION OF THE PAGE
![Page 35: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/35.jpg)
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
![Page 36: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/36.jpg)
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
![Page 37: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/37.jpg)
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
![Page 38: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/38.jpg)
27/08/2013
TO LEARN MORE ABOUT BBNC
MOBILISATION, VISIT:
https://www.youtube.com/watch?v=FjLirCEDw6c
Check out tips @ http://mobilewebbestpractices.com/
![Page 39: Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series](https://reader034.vdocuments.mx/reader034/viewer/2022042614/554fae89b4c9057b298b4f7e/html5/thumbnails/39.jpg)
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)