Helping people make websites

I like making websites and I love helping other people make sites.

I started learning how to make web pages, writing HTML that is, in 1996. The most important tools back then were a browser (Netscape Navigator), text editor (Notepad) and FTP client (hmmm, I can’t remember what client I used). If you saw something cool on a webpage you could just view the source and learn how that developer had made it work. You could ask anyone you met online for their homepage and they had one. It might have had midi background music and blinking text, but it was theirs and it told their story. Social media is cool, but I can’t help feeling we lost some of that personal creativity.

Fast forward to 2015 and the profession has changed… in some ways a lot, and in other ways not so much. The best tools are still a web browser (Firefox, Chrome, IE, Opera, Safari—all the latest browsers have killer developer tools), text editor (Sublime) and some way to publish your content (FTP, git, other…). Only now there are so many other tools to help with design, development and operations… I am not going to list them here, but I am going to highlight some tools I’ve made to help others.

Global alert bar editor (2015)

https://www.flickr.com/photos/benjamins-boyle/16821036249/in/set-72157629342137529

My most recent creation, a simple authoring tool for creating the global alert bar used on Queensland Government websites in times of a natural disaster. It’s a simple form with live preview and markup. The initial impetus for this was to get the time element markup correct. I named it GABE for short and you can find it over on codepen: http://codepen.io/bboyle/pen/jEXwZr

It doesn’t publish—it just generates the HTML for old fashioned copy and paste.

Queensland Government templates and patterns (2002–2015)

I’ve helped code the CUE (consistent user experience) and SWE (single website experience) templates for Queensland Government since 2002. Rolling out a template across varied government websites and applications (and many different platforms and frameworks) with minimal conflicts and 4-week releases was a really great achievement. Centrally hosted assets (css, js and images) was the key to rolling out quick changes, and a healthy respect for the diverse platforms the template was integrated in. I might personally be a bit opinionated about troubleshooting CSS conflicts with the PrimeFaces UI framework; but professionally if that’s needed then that’s supported.

https://www.flickr.com/photos/benjamins-boyle/12560692123/in/album-72157629342137529/

The pattern library is a collection of UI elements that are supported in that template, ranging from simple content patterns (example: including document metadata in a link) to “advanced” content, such as a creating a single-page mapping application with only a simple CSV data file and some HTML templates.

Always a good challenge: balancing a quality customer experience with an easy authoring process! Two examples I am particularly tickled by are instruction-based form relevance, an approach to progressive disclosure in forms that requires no scripting (by the form author, I did the heavy lifting) and having folks run up angular apps with only CSV data and custom templates (the angular app code is centrally shared).

Form builder (2012)

https://www.flickr.com/photos/benjamins-boyle/12748690533/in/set-72157629342137529

I consider it a “proof-of-concept” but this single-page app has been used to create many of the email forms now live on http://www.qld.gov.au and was instrumental in getting everyone to stop talking about putting “services” online and actually start publishing them! The rush is on now to put more advanced tools in place (bring it on!)

Click anywhere to edit, drag and drop, switch to preview. Builds forms with semantic markup (my particular flavour), including HTML5 validation and progressive disclosure. There are a bunch of poorly documented keyboard shortcuts. I’d love to polish this up one day, it has a lot of potential. (Being usable without training would be a win!)

Get involved survey builder (2011)

https://www.flickr.com/photos/benjamins-boyle/6886762211/in/set-72157629342137529
https://www.flickr.com/photos/benjamins-boyle/6886760651/in/set-72157629342137529

Get involved is the Queensland Government consultation platform. The survey builder is not as easy to use as the form builder (above), in fact it inspired me into thinking “It should easier to make forms!” Still, I helped with the UI design (with some excellent editorial advice from Rory Daly) and it helps people make surveys, consider the language they use, and choose appropriate privacy settings.

Custom quality control tools (2007, 2012)

https://www.flickr.com/photos/benjamins-boyle/6886386819/in/set-72157629342137529

I worked on a couple of browser extensions to automate some of my quality control tasks, staring with custom stylesheets and scripts in Opera in 2007 to help check pages at Department of Communities.

In 2012 we tackled editorial quality by testing for passive voice, non-preferred terms, number formats and more. Computers are great at consistently performing the same checks over and over again, the challenge lies in figuring out how to test for some of these fuzzy concepts, how to present those results in a nice UI, and how to encourage people to use the tool when available. (Okay, behaviour change may be the biggest challenge in that list!)

Content management systems (2002–04, 2012)

TeamSite pops up every few years in my Queensland Government jobs. I implemented the workflows, templates and deployments for Education Queensland in 2002–04, and helped set up the environment for qld.gov.au in 2012. I’m not a huge fan of CMS products, I like flexibility in my workflow and systems like consistency so that’s an immediate challenge. Still, I am impressed when I see authors getting stuck in and making content! I have mixed opinions about whether or not they should learn HTML along the way 🙂

Jumbostore (1999)

Behind the online shopping mall “Jumbomall” there was “Jumbostore”—a content management environment for stores and products. I did a lot of the work on the UI and database to support this, customer support for merchants, and occasionally drew elephants for promotions.

Mentoring

My biggest contribution is mentoring. I’ve always enjoyed this on the job, but over at Thinkful I’ve found the best outlet for helping new developers on the path to mastery!

Yes, I do believe everyone can “learn to code” or more accurately, everyone can create.

Advertisement