Mobile Optimisation with Blackbaud NetCommunity - Boot Camp Series

  • 795 views
Uploaded on

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 …

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

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
795
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
6
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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)