Website Lab Notes

You can find the “always up to date” version of the briefing document for the Office Hours Website Lab here

I’ve posted the copy as at time of posting (around 6pm Pacific, 9pm Eastern) here for your convenience.

Notes for the Second Hour Introduction

  • Where we are now :
    • The site was created by Kenn Jordan, later maintained and updated by Roy and Simon, but keeping the majority of Kenn’s design
    • It was designed to load quickly, be very accessible and get you to the information you want quickly.
    • The site is quite visual, but uses accessibility tags so that blind and partially sited people can still navigate it.
    • You can quickly see recent and upcoming shows, with more information available if you click on the ‘Schedule’ link
    • The schedule shows both Office Hours shows and upcoming events in After Hours, as well as Office Hours related shows like Conversations with Tony Mobley
    • There’s also a link to show an archive of previous labs that were held in After Hours
    • Behind the scenes a number of the processes involved have been automated to significantly reduce the time needed to maintain the site
    • There are little tweaks like fading out the Youtube button so that you can see behind it but still recognise it as an image you can click on to play a video, or they can be removed entirely
    • We show previous shows in monochrome as a visual cue
    • There is a team of four people (Simon, Cindy, Adrian and Samuel (in order of joining)) who share the task of posting a show thumbnail each day, almost without fail before the end of the show (by almost I mean I’m fairly sure there was a day in the last year when it was a bit late)
    • Hopefully Adrian will be able to show the simplified process Simon made for them to upload images to the site easily (it previously needed images to be resized, converted and compressed before uploading to the site and the details entered manually)
  • Where we are going :
    • You’ll be able to see what’s coming up further in advance
    • We’ll have the ability for you to see who will be on future shows and book a place as a panelist on shows
    • We will have panelist profiles for those who would like them
    • The site will be more ‘data driven’, allowing us to bring back some features making archived shows easier to find and add new ones like being able to search for shows based on what was said during the show
    • (Feel free to add your own wish list here : )
  • Note: You may or may not want to mention that there is a curated list of topics and guests although that stopped being updated last year when the team struggled to find the time to continue curating new items (which took a significant amount of time to do), but the proposed ‘data driven’ site will make this a much quicker process
Lab: The Office Hours Website

  • Simon’s notes
    • I’ll provide an updated briefing when I’ve gone through the notes I have from the previous website review session. That might not be until shortly before the show.
    • This may be a very ruthless review. I’m fine with that, people can be as critical as they like.
    • I’ve used “Roy and Simon” throughout this document. Neither of us is particularly concerned about the order of the names.
    • I have a moonshot goal of supplying one or two short videos (likely 1 minute maximum) for playout in the second hour
      • These would be a brief overview of the site
      • An overview of the thumbnail upload process
    • The site was taking at least an hour or two a day to manage originally, and between Roy and myself we now have it at a stage where I’m disappointed if I have to spend literally more than a couple of minutes a day on it when I’m not doing the thumbnail (I like to confirm the scheduled updates have gone through OK)
  • In a Nutshell
    • Kenn created it
    • It was very functional but a lot to maintain
    • Roy and Simon joined Kenn and made it easier to maintain and tweaked it
    • Roy and Simon now maintain it.
  • Origins of the site :
    • Created by Kenn Jordan to be a clean, fast loading web site
    • It was taking at least an hour or two a day to manage with additional time spent at the weekend
  • Roy and Simon became involved :
    • Kenn ran a series of web labs, with a goal of finding volunteers to help maintain the site
    • Having each submitted the occasional typo or phrasing suggestion to Kenn for a number of months prior, Roy and Simon offered to help out with the web lab
    • They quickly saw ways the site could be more automated and removed the need for any other volunteers to manage it
    • Kenn’s other commitments meant he was left with less time to deal with the site, with Roy and Simon handling it exclusively for over a year now
    • Simon had been taking the daily thumbnails for the last year but this September was joined by Cindy, Adrian and Samuel who have been a big help
  • What we have done :
    • Roy’s automation in the scheduling spreadsheet cut the time of publishing the weekly schedule from several hours down to half an hour
    • Simon
      • Automated the process of highlighting the current day in the schedule (it used to be a manual process every day)
      • Wrote the code to build placeholder images for each day from its title
      • Sped up the process of collecting the thumbnail images
      • Removed the need to upload colour and monochrome images each day
      • Made the Youtube logo fade out to be less obtrusive but still obvious initially
      • Has written code to significantly reduce the time taken to maintain and update the site
    • Work in progress
      • Automatically publishing the site for the week from simple JSON data from the scheduling spreadsheet, that can also be used by the OH radio app and other outlets, cutting the weekly scheduling update down to a few minutes at most
      • (this is on hold subject to the outcome of the plans made from today’s show)
    • Future Plans (if approved)
      • Profiles for panelists
      • Panelist booking for shows
  • Background info in case it’s asked for :
    • Laura’s Question
      • Laura will be asking about our accessibility score, given that with Kenn it was 97% compared to 95% scored by IBM who make the most robust accessibility compliance checker (I seem to remember a comment that most sites score around 50% or less)
      • Our score has slipped a little due to glitches in the theme used and changes made moving from previous hosting. I’ll update you with the current score before the show.
      • We are very proud of how accessible our site is and intend to keep it that way as far as practical. We not only want it more inclusive of those who have difficulty consuming other websites but also a more comfortable experience for everyone. [You might want to check with Laura if that phrasing is appropriate]
      • The thumbnail team follow the advice of the OH accessibility group in forming the information for screen readers to describe their images
    • Web site design language/goals
      • (New goal of sustainability, reducing time and effort required to maintain)
      • Current day’s show in colour, previous shows in monochrome
      • Dark background to ease eye strain
      • High contrast text to make more accessible
      • Images loaded on demand and a target of 30kB per image for fast loading
      • Fonts are system fonts which are designed for readability and speed of drawing
      • Font used in placeholder image is “SF Pro” the current Apple system font, that they spent a lot of money making readable and accessible
    • Built on WordPress, the software powering the majority of websites
      • It’s free and very flexible with plugins for most things you would want to do and easy to write things to do everything else
    • Uses the “Focus” theme from DIYthemes.com
      • Optimised from Search Engine Optimisation and marketing perspectives, as well as being coded efficiently
      • Focus cards help with layout and posting the same information in several places