Lasa webinar with @jasoncsking on developing and designing a new website. Resources on writing a brief, choosing a CMS, accessible design and website security. Supported by London Councils via our London for All project. See http://www.lvsc.org/londonforall/ Date: February 2015 Licence: CC Attribution, Non-commercial, Share-alike

1. New Website
Initiative

2. Webinar Presenters
Miles Maier @LasaICT
Jason King @jasoncsking
www.londoncouncils.gov.uk/grants
London Councils is committed to fighting for more resources for London and getting the best possible deal for London's 33 councils. London Councils has a
website about its grants service. To read about our grants funding and the work of some of the 300 groups we support
Supported by:

3. • London For All – partnership of LVSC, Lasa,
ROTA, WRC and HEAR
• Only pan-London charity tech advice service
• www.lvsc.org/londonforall/

4. About Lasa
• 30 years in the sector
• Technology leadership, publications, events
and consultancy
– www.lasa.org.uk
• Welfare Rights
www.rightsnet.org.uk

5. Webinar Tips
• Ask questions
Post questions via chat or raise your virtual hand
• Interact
Respond to polls during webinar
• Focus
Avoid multitasking. You may just miss the best part of the
presentation
• Webinar PowerPoint & Recording
PowerPoint and recording links will be shared after the
webinar

6. Jason King
• Freelance web designer and trainer
• Many clients from welfare rights and law
sector
• Worked for charities in the UK and Australia
on managing technology and websites
Twitter: @jasoncsking

7. 1. Do research
Do some research and make a note of sites and designs you like, and find out
what the good ones look like.
•Good non-profit web design:
nptechforgood.com/2014/02/25/11-responsively-designed-nonprofit-websites-to-s
from

8. 2. Write a project brief
Personally I never quote on a project until I've seen a detailed
brief that shows the client has thought through what they need.
•What should a brief contain?
ictknowledgebase.org.uk/websitebrief
•10 things not to leave out:
boagworld.com/business-strategy/web-design-brief
•WCAG 2 accessibility standards, a legal requirement:
w3.org/TR/WCAG20
•Find a volunteer IT professional to help prepare the brief:
it4communities.org.uk

9. 3. Find a web developer
Once your brief is written, get it signed off by committee, and
you have something to send to potential web designers.
•Find a web developer: ask other charities who built their site
and use suppliersdirectory.org.uk
•You need a contract: this helps avoids disputes later
stuffandnonsense.co.uk/projects/contract-killer

10. 4. Chose a CMS
There are many CMS to choose from, and various ways to build a website.
Commission your website from a web developer who can confidently explain
how their preferred CMS can match your project brief's requirements.
•Which CMS for your charity? http://bit.ly/1jPhmsO
•Drupal – needs to be installed on your own hosting: drupal.org
•WordPress.com – hosted for you, mostly free, but charge to use your own
domain name: wordpress.com
•WordPress.org – used by a quarter of new websites, it's free but you need
to pay for hosting and perhaps someone to install it: www.wordpress.org
•WordPress themes – a cheap way to get a professional looking website,
plenty of choice and they can be customised to match own branding:
ElegantThemes.com StudioPress.com www.WooThemes.com

11. 5. Layout
Traffic to websites is increasingly from mobile and tablet devices, and you’ll
need to make sure your new design resizes and displays properly across
different screen sizes and devices.
•A mobile responsive non-profit website (view it on your phone /
tablet): uk-sands.org
•Wireframes help you plan page layouts:
usability.gov/how-to-and-tools/methods/wireframing.html

12. 6. Code and test
It's better to get a web professional to check the code manually
than to use automated testing tools, but you can at least check
the html and css code validate, and see what it looks like on
mobile devices.
•Abilitynet does accessibility audits of websites:
abilitynet.org.uk/accessibility-services/user-testing
•Test html code validates 100%: validator.w3.org
•Test CSS code: jigsaw.w3.org/css-validator
•How fast do your pages load? tools.pingdom.com/fpt
•Test on mobile devices: mattkersley.com/responsive

13. 7. Write, launch and promote
Promotion should be continual, not just at launch. Use social
networking tools (Facebook, Twitter etc) as well as email
newsletters to drive traffic to your website. Get other quality,
relevant websites to link to your site. Use Google Grants to take
advantage of free advertising.
•Writing for the web:
usability.gov/how-to-and-tools/methods/writing-for-the-web.html
•Get a Google Grant: google.co.uk/grants
•What about social media? socialmediasurgery.com

14. 8. Update and assess
Keep refreshing the content, keep promoting the content, keep
analysing success.
•Use Google Analytics for free and detailed web stats:
google.com/analytics
•Use Google Webmaster Tools to ensure Google sees all your
content: google.com/webmasters/tools

15. 9. Security
Once your site is up and running you’ll need to keep its security
features up to date, just as you would with a computer.
•Set up regular full backups of your website. BackWPup (free)
and BackupBuddy (paid)
•Reduce vulnerabilities by keeping the CMS and any plugins/add-
ons up-to-date.
•Have a support/maintenance contract with your website
developer.
•Rename the admin account and upgrade strength of your
password howsecureismypassword.net

16. 10. Other resources
• Knowledgebase:
www.ictknowledgebase.org.uk/youronlinepresence
• Nonprofit website project handbook: http://bit.ly/W83q0K
• Optimise your online content toolkit: http://bit.ly/W83KfV
• Social Media Decision Guide: http://tinyurl.com/2esjkxv

17. Twitter @LasaICT
Web www.lasa.org.uk
Rightsnet
www.rightsnet.org.uk
ICT Knowledgebase
www.ictknowledgebase.org.uk