27/08/2013

MOBILE OPTIMISATION WITH

BLACKBAUD NETCOMMUNITY

Presented by:

Teresa Judd, New Zealand Manager

Chris Bell, Web Developer

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)

27/08/2013

• Understanding the Mobile User

• When Should I Begin?

• How Does Mobile Work in BBNC?

• Best Practices Going Forward

AGENDA

27/08/2013

L E T ’S GE T S TART E D…

27/08/2013

By 2015 mobile will outpace desktops as the

#1 method for accessing the web

- Source: Morgan Stanley

27/08/2013

UNDE RS TANDING T HE MOBIL E US E R

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

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

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

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 ?

27/08/2013

ASK GOOGLE!

Click Advanced Segments

27/08/2013

GOOGLE ANALYTICS

Choose “All Traffic” and

“Mobile Traffic” and click

Apply

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.

27/08/2013

VARIE T Y OF AP P ROACHE S TO MOBIL E

27/08/2013

3 MAIN APPROACHES TO MOBILE

Designated

Mobile Site

Full Site

Mobile

Replication

Responsive

Design

Increasing Complexity & Costs

27/08/2013

- Infographic Source: www.monetate.com

RESPONSIVE

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

27/08/2013

S O… HOW DOE S MOBIL E W ORK W IT H

BL ACKBAUD NE T COMMUNIT Y ?

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:

27/08/2013

THE DESIGN

Back

FOOTER

LOGO

Home

CONTENT

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

27/08/2013

THE STYLE SHEET

27/08/2013

STYLE SHEET PROPERTIES

27/08/2013

SPECIFYING THE STYLE SHEET AS FOR MOBILE

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

27/08/2013

THE LAYOUT

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

27/08/2013

SPECIFYING WHICH TEMPLATE IS FOR MOBILE

27/08/2013

THE TEMPLATE

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

27/08/2013

VIEWPORT METADATA

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

27/08/2013

THE PAGE

27/08/2013

THE MOBILE VERSION OF THE PAGE

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

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

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

27/08/2013

TO LEARN MORE ABOUT BBNC

MOBILISATION, VISIT:

https://www.youtube.com/watch?v=FjLirCEDw6c

Check out tips @ http://mobilewebbestpractices.com/

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)