Key Coding Tips for Nonprofit Professionals
May 23, 2018
Content Management Systems (CMS) and fundraising and email software (such as Blackbaud Luminate Online, Salsa, and Constant Contact) are essential tools for nonprofit organizations. As a nonprofit professional, especially if you are in the communications and fundraising department, managing and updating this content requires some digital knowledge and skills. Though many software vendors often advertise “no coding or web-developer skills required”, this is never entirely true. At some point, you will find yourself staring at a bunch of letters and numbers in Code View; even the best drag-and-drop and fanciest user interfaces need some custom work from time to time. WYSIWYG (What You See Is What You Get) interfaces can be tricky to work with and often add unnecessary code to your content that could cause problems.
Some basic coding skills can help minimize some of the frustrations of simple website tasks. The core of any web page is HTML and CSS, and they go hand in hand. Think of HTML as the main structure/frame of a house, and CSS is the finishing material like the roof tiles and side cladding that defines the design and the aesthetic. Though different software has different user interfaces and productivity widgets, the core HTML and CSS code is essentially the same. Once you have a basic understanding of HTML and CSS, you can edit code in any software.
Tip: Right click over any webpage in your favourite browser and select ‘View Source’ or ‘View Page Source’ to see the source code behind a page.
Where to Start Learning?
The web is complex and so is the technology that goes into making all the pieces work seamlessly. No single developer can be all knowing, and most developers have their area of expertise and specialization. Learn the basics coding skills and useful tools of the trade:
1. Basic HTML and CSS
2. Tools – Code Editor and other useful software
3. Troubleshoot and test with developer tools
Basic HTML & CSS
For the interest of this article, as a beginner, focus on learning basic HTML and CSS, the basic building blocks of any websites. The basic skills will help you identify some basic code and understand anatomy of your webpage.
W3Schools.com is a good place to start learning HTML and CSS. The built in ‘Try it Yourself’ platform is a quick and easy way to try out code and a great learning tool.
There are lots of video tutorial from basic to advanced coding. LevelUp is a great place to start:
Put your learning to practice and start making simple edits to your website in Code View or by editing the HTML code in your next marketing email.
Tip: Working with images
One of the common mistake when working with images is improper image sizing rendering images distorted and the wrong size. Large image can slow down your webpage load time, especially for mobile devices. Resize images to the actual size for a webpage and lower quality to an acceptable level to minimize file size for efficiency, which is especially important for email deliverability.
Free image resizing online tool: http://www.picresize.com
Tools – Code Editor and Other Useful Software
There are lots of professional software like Adobe Dreamweaver and other developer tools that you may want to purchase. For beginners, you already have the basic tools. Your computer comes with a simple text editor application that you need to get started editing code:
- Notepad (Windows)
- TextEdit (Mac)
Tip: Before you start – set the format to ‘Plain Text‘ (usually under the Format menu. Also check your app preference to default to plain text mode and file opening/saving mode.)
You may also use an online editor like CodeAcademy for learning tools and making quick email edits.
More advanced code editors:
- Notepad++ (Windows, colour-coded to make it easy to see different types of code)
- TextWrangler (Mac)
- SublimeText (Windows/Mac, professional tool, very popular for web developers)
Tip: Save the code/file with the .HTML extension to make the file a webpage that you can then open in your browser for a quick preview.
As of September 2017, the most popular web browser is Chrome, according to GlobalStats. All browsers come with a code inspector tool similar to Chrome DevTools. It’s a staple of all developer workflow. You can make a quick edit in the Inspector to see how your change will affect the page, especially useful if you are working with CSS. Here’s a quick video to help you get started using DevTools: https://www.youtube.com/watch?v=9xA80triUT0&t=30s
Web technology is constantly changing and there is the good and the bad. Lots of smart programmers are always coming up with new tools and frameworks to help us do more things easier, but that also means as a nonprofit professional, you have to keep up with the changes. The information is never hard to find. Apart from the traditional community college and special coding schools, there are tons of learning resources online both free and for a price. Google what you would like to learn and you will find no shortage of information. The development community is very open to sharing and collaboration. YouTube is a great resource if you prefer a more visual and audio learning styles.
- Smashing Magazine is great for learning new trends and tools
- PutsMail let you test your email code like actual email delivery
Tip: ALWAYS keep versioning when working with code. Make a copy of an existing page/code before making any edits. This will allow you to go back to your original version if you accidentally delete something. Think of it as insurance and don’t be afraid to break the code – it’s a healthy way to learn!
About the Author
Francis has had more than 10 years’ experience in the non-profit industry. Francis has helped non-profits turn creative vision into innovative web solutions with in-depth knowledge of fundraising software, such as Blackbaud Luminate.
In addition to his knowledge of software and the non-profit industry, Francis is ready for Canada’s 150 this year with his Discovery Pass and hiking gear. He is ready to discover his own backyard this summer!