How to... Web Design

HTTPS by default

When you enter information into an online form, do you check for a padlock in your address bar? Would you have done the same 3 years ago? If there’s no padlock in your browser address bar, that means your data isn’t being transferred securely (in fact even if there is a padlock, it might still not be transferred securely… but that’s a different story). This means that anyone on the route between your computer and the machine hosting the website you’re sending data to could see said data.


In the post-Snowden world that we live in, I think it’s fair to say that people in general are more aware of the information that they’re sharing online. But as a website visitor, you have very little choice as to whether your favourite website offers a secure version or not, which is why, I guess, Google have started to use the presence of a secure version of a website in their rankings – to encourage web developers to give their visitors a secure browsing experience. Obviously banks provide a secure version by default, as do most social networks and shopping sites, but small businesses may not and I think this is the group that Google are trying to appeal to with this move.

Excitingly, the move has coincided with Let’s Encrypt (an American charity working to “reduce financial, technological, and education barriers to secure communication over the Internet”) moving to public beta, and they’re offering free HTTPS certificates, which allow you to create a secure version of your site. As our hosting company, Dreamhost, have partnered with Let’s Encrypt there was no reason for us not to transition this site (plus our personal site and church site) across to secure versions, and it was much easier than I thought it would be for each domain:

  1. Register for the free certificate through Let’s Encrypt and install the certificate on the site
    Dreamhost made this easy for me and it was a one-click action for each site
  2. Check that visiting https://<domain name> works
    At this stage on each site, I got a padlock in the address bar, but with validation errors, as not all of the links within the site were referencing the secure version – only those which were relative links
  3. Fix all of the links
    Now this was the fun part – trying to fix all of the links. As all of the sites are WordPress sites, I went through the following stages:

    • Set the WordPress URL and Site URL in the admin panel to be https://<domain name>
    • Go through my theme files and replace full URLs with relative URLs (embarrassingly I found quite a few, which were very sloppy of me – the newer bits of the sites were better though, using “bloginfo(‘stylesheet_url’)” and “bloginfo(‘template_url’)” properly)
    • Fix links within content. Now I really didn’t want to add another WordPress plugin to each site to create redirects, which is why I was happy when I came across some handy information at (step 6), which I nabbed and implemented. I was unhappy I hadn’t come across it sooner in the process!
  4. Set it so that visitors are directed to the HTTPS version of the site by default
    I added the following to the top of my .htaccess file for each site:

    RewriteEngine On
    RewriteCond %{HTTPS} !=on
    RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

  5. Tell Google
    The final step was to add the HTTPS version of each site as a new “property” in the Google Webmaster Search Console

All in all, about half an hour per site, once I’d done a bit of faffing around.

Be safe online, kids.

Web Design

SEO common sense

Search engines are one of the sets of rulers of the world wide web. I think that’s a fair statement, but happy to hear any counter-arguments. Ever since the dawn of the web, content producers have been trying to get content consumers to visit their sites. We seem to have passed the heyday of directories and categorisation (RIP GeoCities) and are firmly rooted now in an era where “Google” is almost synonymous with “the internet” for many people. Do you want to find a picture of a kitten? Ask Google (or ask Bing, or ask Jeeves or Lycos (yes, it is still around!) or DuckDuckGo…). That is unless your friends on your social media platform of choice have already directed you there, but I’ll ignore that, as the focus of this blog post is on search engines and SEO (search engine optimisation). You want to find a local plumber? I’m guessing that asking a search engine might be one of the options you consider.

Let’s look at this from the other side now. You are the provider of a service; maybe you’re a plumber, maybe you’re running maths workshops. You are aware that people are looking for plumbers and maths workshops via search engines; how do you make sure that your details feature as one of the top results? Before I go any further, I should say that I am not an SEO expert and therefore you should critically evaluate my musings on the subject before taking any action based on what I’ve written here. Back to the matter in hand; you’re running maths workshops and you want people to know about them.

It’s no surprise that I’ve picked maths workshops as an example here; we’ve recently been working with Nicky Bishop to develop a website for her to publicise the maths workshops she runs in East Sussex. Unsurprisingly, she would like visitors to her site and in addition to social media exposure, Nicky is aware that people will be using search engines. I disclosed fully that I’m no SEO expert and started reading up on SEO techniques. But actually, a conversation with a good friend was more helpful than anything I read, bringing me back to earth. To paraphrase Tim Wakeling:

Search engines are trying to find relevant websites that the searchers will want to read

A ground-breaking statement? Hardly. It’s common sense. But it was a good reminder that the bottom line is the person doing the search. They aren’t going to care about a list of keywords on your site, or hidden text; they’re going to care about the content. Has it answered their question? Relevant, up to date content is king. And search engines recognise this; it’s no use having a list of keywords on your site if the visitor hasn’t had their question answered. Whilst no-one knows the exact algorithms that Messrs Google and Bing (Yahoo! has been powered by the Bing engine since 2009) use for ranking websites, there are a few common sense things I (and others more qualified than me) suspect they are focussed on:

  • If my site has been linked to from another site with a high ranking, that probably indicates content of interest on my site
  • If my site has been updated recently, that probably indicates relevance
  • Do my page URLs correspond to the content within the pages? It’s much easier to see that a URL ending “/contact” is a contact page than a URL ending in “/page=132”
  • Are there words that crop up frequently in a certain page? If I’m writing an article about SEO, then it makes sense to mention the word “SEO” frequently in the text
  • Is it clear where links take visitors in the site? “Click here” tells you nothing about where that link is going to take you, whereas you might get a clue from something like “My mate bob who is a builder”

In essence, I want my website to be full of content that attracts and then holds the interest of your audience. By all means I might include certain words in the text of your site that I think my visitors might type into a search engine, but I write content for a human, not a search engine to consume.

All that considered though, there are some things that I can do to help search engines. I can include a sitemap, listing the various pages on my website that I think a search engine might want to index. I can include HTML5 semantic tags (I only really use “nav”, but I should probably use more) and I can go even further than that to include other semantic markup. Anyone human viewing the maths workshops diary will recognise that it lists events there. To ensure that a search engine would also recognise that as an event, why not mark it up as such:

<div itemscope itemtype=''class='diaryworkshop'>
<div class='event_date' itemprop='startDate' content='2015-09-12T09:30:00+0100'>Saturday 12 September 2015, 9:30am</div>
<div class='event_title'>
<div class='workshop_name' itemprop='name'>N1 Decimals, Rounding and Factors</div>
<div class='workshop_location' itemprop='location' itemscope itemtype=''>
<span itemprop='name'>Ashburnham Pavilion</span>
<div class='event_price'>£36 introductory offer</div>

That’s not putting in extra content for the search engines; it’s helping them to understand what’s on the page, by saying that it’s an event, then tagging the date, title, place and price.

And when I’ve done all of the things listed above, the search engines are there to give me a helping hand by telling me what they know about my website:

Will any of this work? Who knows! People write whole books about SEO… and these are just a few musings that make sense to me.

Illustration Web Design

Heading in a new direction?

In the last few weeks we’ve learned a lot about different types of compass… and it’s got nothing to do with our recent travels! Instead, it’s got everything to do with Compass Tutoring; the trading name of Nicky Bishop who provides private tutoring services. The initial brief was to refresh her logo and re-write her website, but after our first meeting with Nicky, she also asked us (well, Kiri) to provide her with new illustrations for the website, hence the research on different types of compass (or should it be “different types of compasses…?”).

Nicky was happy with the previous logo, but wanted to tweak the ‘A’ character so it looked a little bit more like a compass needle. She also wanted to move to using a serif typeface too (to make it a little more scholarly), so once we’d made those changes, our minimal work on it was complete (you can see the old and new logos on the website screenshots below).

Similarly, the previous website was pretty good in terms of a clean and simple design, but as there was no content management system behind it, Nicky was unable to make content changes herself.


In the process of creating a custom WordPress theme for Compass Tutoring, we retained most of the existing design elements and only made a few tweaks in terms of alignment of elements. The biggest change we made was to make it responsive, so that it displays well on any size screen. We also added a blog and some minimal social media sharing buttons on blog posts. Nicky, meanwhile, was making lots of changes to the content including re-factoring the navigation. And here’s the result:


The main bulk of the work though was providing a new set of illustrations for the site. On each page of the previous site, Nicky had chosen a different illustration of a compass, but these were from different sources and in different styles. So, she asked Kiri to put together a set of compass illustrations that would be more consistent and uniform for the new site.


It’s the first bit of paid illustration work that Kiri’s done as part of Lightbulb Head, as most of our previous work has been more graphic design focused. However, we might be plotting a course and navigating more in the direction of illustrative work in the future.


Finding the face of St. Mark’s

Over the last few months I’ve been doing a bit of consultancy work with the church that we used to attend in London; St. Mark’s Kennington. Amongst other tasks (such as making the church website responsive) this work involved considering how the church may be viewed externally. Now I’m not sure about using the word “brand” in the context of a church image, but essentially, it’s branding that I’m talking about. St Mark’s is a church not a business, but that doesn’t mean it has nothing to project. Developing a visual identity that is consistent and a true representation of the church helps to communicate its unique characteristics to the wider community.

Regardless of how much St. Mark’s chooses to put on display, people will form their own opinions about who they are. The image the church projects must genuinely reflect the ‘experience’ of being at St Mark’s, and authenticity and honesty are key when working towards a new, consistent visual presence. So, a questionnaire was circulated around the congregation with regards to how the church views itself and what the important aspects of its culture are. A multitude of responses were received, reflecting the diversity of the congregation, but one key, consistent aspect cropped up again and again; that of welcome.

The last thing we wanted to do (I use the word “we”, as Kiri and I worked together on the logo… in fact she probably did more work on it than me!) was to come up with something cheesy, but the key thing to communicate through a new logo was welcome. After throwing a few ideas down on paper, we settled on the concept of an open door with light flowing out. We also wanted to incorporate the shape of the church somehow, as it has quite a recognisable silhouette. A few meetings later (and a few hours of tweaking to make sure the logo worked in monochrome, both black on white and white on black, with the doorway still emitting light), we had our first design:


The fact that the allusion to the shape of the church building and the open door fitted within the “M” of St. Mark’s was a pleasant by-product. We were aware that the logo was “L”-shaped overall, but all of our attempts to fill the top corner with something ended up detracting from the open door, so we eventually just embraced the white space.

The proposed logo was circulated amongst the church council for comments and we received some very useful feedback. As a result of this, we realised that we hadn’t quite got the balance right between retaining the simplicity of the church silhouette and architectural correctness. It was also suggested that the straight edges on the outline of the “M” weren’t particularly welcoming. After a few tweaks, we had our second design, which has been adopted by St. Mark’s.


Along with the new logo we put together a pared-down style guide containing a suggested, consistent colour palette to use for all printed media and electronic media.

I’m still not sure whether churches need a brand as such, but I think a logo helps to make a church quickly identifiable.

Web Design

A multi-lingual website re-write

Sometimes life gets in the way of updating websites, and that’s what’s happened here! All of our efforts currently are being plugged into living full time in a motorhome as we travel around Europe, whilst documenting it as well as we can on our other website (

However, as we’ve been travelling, we’ve been stopping to help at various projects; telling them what our skills are, then being open to take on any tasks they’d like us to do. At HUB, Serbia, their need was for a bit of a facelift to their website. Whilst the current website was pretty good, it was difficult for them to update, there were specific parts of it (search engine-readable URLs, newsletter sign-ups) that weren’t working for them and they also wanted it to look a bit more modern. With part of their problem being a confusing content management system (they were using Joomla), they were basically asking for a re-platforming of the site, with a few design tweaks here and there, rather than a wholesale re-design. Oh, and did we forget to mention that the site had to operate in both Serbian and English? Gotta love a bit of a challenge!

Here’s the flash splashscreen and homepage from the old version of the site:



WordPress is the content management system that we know (and love), so we got to work. It’s not a particularly complicated website, but the main complexity with this site comes from the two languages. This is the first multi-lingual site that we’ve designed, so we’ve learned a lot this week! Essentially, from our understanding, you have 4 options when it comes to multi-lingual sites:

  1. A site per language – for example and for the Serbian and English versions
  2. Each page duplicated, one for each language – for example (Serbian) and (English)
  3. Two languages on each page – either Serbian and English text side by side, or only one language displayed at a time, with a switcher element
  4. One master website, with on-the-fly translation – the whole website written in Serbian, with the option for English speakers to have an automatic machine translation when they visit it

We pretty much discounted number 4 straight away; the previous version of the website had human translation of all content into English, so to have machine translation would be a step backwards. Numbers 1 and 2 would potentially raise synchronisation issues across the site unless there was something to prompt content editors to update all pages. Number 3 would confuse search engines. All of them have their down-sides… so which do we choose? Our first call was to see what W3C say about best practice for multilingual sites. Well, they’ve set up a site dedicated to the multi-lingual web, but it wasn’t particularly easy to find any guidance on which option to go with. The gut feeling was that options 1 and 2 felt best, so we started to hunt for WordPress plugins.

To add further complication to the multi-lingual conundrum, Serbian uses two alphabets; Latin and Cyrillic. There is a WordPress plugin (SrbTransLatin) which allows Cyrillic content to be displayed in either Latin or Cyrillic… this turned out to be very useful, as the content of the previous site is in Latin script and the Serbian WordPress localisation uses Cyrillic. Switch on plugin, turn to “always use Latin”. Bingo. So now we just needed something that could help to keep two Latin script versions of a page synchronised (as much as possible). To cut a long story, involving testing a couple of other plugins, we chose Xili Language to manage the synchronisation of pages in different languages.


This WordPress plugin adds a few little features here and there around the admin side of WordPress to tag pages and posts as written in a certain language. It’s not the most intuitive plugin to set up, but there’s extensive documentation and it’s quite good once you get your head around some of the quirks! In the case of creating pages, you specify the language of the page you’ve just created, then you’re prompted to add another page which is a translation of that page. The menus are then basically sorted out for you – if a visitor is viewing a Serbian page, the only other pages that will be shown in the menu will be Serbian pages. There’s then a PHP hook (a function named “the_curlang()”) which is then extremely useful to find out which language visitors are viewing the site in, so that you can add in extra content in headers and footers that are specific to that language.

So… just over a week on from receiving our brief, and complete with a little bit of scope creep, here is the updated site:


We’ve tried to retain the general feel of the site, whilst making minor improvements where possible. For example, we’ve removed the unused space at the top of each page and we’ve replaced the previous flash banner animation with a CSS3 and Javascript animation, where the images can be changed by adding and removing images from a WordPress gallery. We’ve added a videos page (as requested), added a calendar page (simple embed of a Google calendar), added a blog, used consistent icons for the contact page and embedded a Google map on their contact page. There’s also now just one stylesheet behind the whole site rather than the individual page stylesheets of the old site, which should help to improve consistency of pages across the site.

This has been a fun challenge and it will be interesting to see whether we’re called upon for any other website tweaks before our trip is up. For now, it’s back onto the road in Bertha!

Film How to... Photography

How to photograph your own wedding

It’s hard to break a habit of photographing weddings…even at your own wedding, so at our wedding last year (branded as KISTfest), we decided to set up a camera to take a picture every minute in the 2 days prior to the wedding and on the day itself. It’s not every groom that has to think about changing camera batteries, timelapse controller batteries and memory cards (we ended up filling four 4GB cards!) in the build-up to the wedding!

In order to get the best overall feel for the day, we needed the camera to be quite high up, so it was shot from a windowsill, overlooking the main marquee and the space in front; the hub of activity on the day. The windowsill position presented a few challenges with glare from the white frame, rain on the glass and then condensation on the morning of day 2. We also couldn’t go quite as wide as we wanted with the image, as the window frame would have featured. We think it was fairly successful though in capturing the the overall feel of the occasion though and we love freezing individual frames to see some of the great moments captured by the all-seeing eye.

As for camera settings…we didn’t do quite so well. It was one of the first time lapses we’d done and we foolishly decided to go for manual exposure so that you’d get a good feel for the changes in light. On the positive side, this decision gave us some lovely sunrise and sunset transitions of light, fading to and from black. But sadly it also led to some rather over-exposed shots of the marquee roof in bright sunlight and loss of detail at dusk. We’ve learned from that since though in our subsequent time lapses!

Kiri then created a soundscape to accompany the resulting time lapse, using mainly sound bytes from the day of the wedding, but a few off-the-shelf sounds to fill the gaps in the first two days.

Will we now be offering time lapse services as part of our wedding photography offerings? We’ll have to see when we get back from our travels!


Splitting a .mpo file

3D photography is something that I was massively into for a couple of years, starting when 3D films were beginning to make a resurgence at the cinema and 3D televisions were just entering the market. In that time I bought a Fujifilm W1 3D camera and a couple of 3D Loreo lenses so that I could take stereoscopic images using my existing SLRs.


The issue for me was always how to view the photographs afterwards; lenticular prints (ridged prints that let your right and left eye see different images) were the best option, but on my old photography site (… which will soon be owned by someone else) I wanted to give people options of how to view the photos. The options I gave were red / cyan anaglyphs (viewable using red / cyan glasses) or stereoscopic pictures (viewable using stereoscopic glasses, or by using the “magic eye” technique of going slightly cross-eyed.


Yes, I even had a bit of a foray into 3D wedding photography, with mainly positive feedback.

It was easy to manipulate the photos I’d taken on my SLRs into those formats, but I had a bit of a pain with the “.mpo” format produced by the Fujifilm W1. It comes with its own software bundle for Windows and Mac…I used (and continue to use) Ubuntu. So, I wrote a little bash script to help to batch extract the .mpo format images into something more useful for my standard image-processing workflow. It relies on ImageMagick and ExifTool, then I use AnaBuilder to further play (manually) with the anaglyph images it creates.

sudo apt-get install imagemagick
sudo apt-get install libimage-exiftool-perl

Credit should go to the 3D photography blog for getting me started with the exiftool commands. I’ll put in my standard caveat: the code below is probably sub-optimal, but it worked for me.

for img in *.mpo
echo " splitting " $img;


# create temporary left and right images
exiftool -trailer:all= $img -o $imgName"_L.jpg"
exiftool $img -mpimage2 -b > $imgName"_R.jpg"

echo " combining left and right for " $imgName;
# create stereo image
convert $imgName"_L.jpg" $imgName"_R.jpg" +append $imgName"-stereo.jpg"

# create red-blue image and resize it for anaBuilder (x dimension of 2000 pixels)
composite -stereo 0 $imgName"_L.jpg" $imgName"_R.jpg" $imgName"-redbluetmp.jpg"

# extract the dimensions of the image
pixelX=$(identify $imgName"-redbluetmp.jpg" | sed 's/^.*JPEG \(.*\)x.*$/\1/' | cut -d' ' -f2);
pixelY=$(identify $imgName"-redbluetmp.jpg" | sed 's/^.*x\(.*\)+.*$/\1/' | cut -d'+' -f1);

if [ $pixelX -gt $pixelY ] ; then
tempsize=`echo "scale=4; 2000/$pixelX" | bc`;
tempsize=`echo "scale=4; 2000/$pixelY" | bc`;

size=`echo "scale=4; $tempsize*100" | bc`;

convert $imgName"-redbluetmp.jpg" -resize $size% $imgName"-redblue.jpg"

# remove the temporary images
echo " removing temporary images"
rm $imgName"_L.jpg"
rm $imgName"_R.jpg"
rm $imgName"-redbluetmp.jpg"

I’ll admit that I’ve now moved away from 3D photography – whilst it was fun and niche, it was a bit of a distraction for me and I think in its current form it will only ever be a gimmick. What I’m waiting for is proper 3D – filming from multiple angles, then recreating holographically!

Web Design

On your marks…

Over the last 2 and a half years I have been cultivating the online presence of the church we go to; St. Mark’s Kennington. Although it’s grown and changed fairly organically, this week marks (pardon the pun) the date that the website is finally at a level where both Kiri and I are happy with it in terms of functionality and design. Obviously there’s still more that we’d like to do to it (for example optimising it for mobile, improving some of the photos), but for now we’re happy.


Our journey with the website started with a familiar story – a church website that was ok…but which needed a lot of regular attention to keep it up to date. The first step was to get the front page changed so that it showed activities that were going on this week, but without someone having to update the site each week. So with a bit of help from the Google Calendar Zend framework I wrote some PHP to display events from the church calendar that were coming up in the next week, then extended that so that upcoming non-recurring events could be shown as dates that people may wish to note in their diary.

From there, it was clear that it would be useful for the weekly news sheet to be made available on the website. By this time, I’d transitioned the site across to use WordPress, so I created a custom post type of “News Item” to allow our church administrator to add and remove news items easily. This was followed shortly by a custom post type of “Sermon” so that sermons could be easily uploaded to the site.

As I had taken on managing the web content as well, I started blogging a bit and thought it would be good if we had a social media presence, so I created a Facebook page and Twitter account. I hooked these up to the main website and the event calendar using IFTTT so that there would be automatic updates on the social media accounts when a news item was added, a sermon uploaded, a blog post written or when it was an hour before an event scheduled in the calendar.

Photos were a little lacking on the site and as a photographer, this made me a little unhappy, so with the help of the NextGEN Gallery plugin I added galleries of pictures of the church, church hall and ministry leaders. This was then extended to give the option to add pictures of events as and when they happened.

I was pretty happy with the functionality by now, but it didn’t look great. Enter Kiri. Kiri took what I’d created and wrapped it in a better design, encouraging me to tweak some of the functionality where it could be better. This included the addition of “highlights” on the front page of the site to replace an image carousel – functionality that allows the church to highlight important things going on in the life of the church.

So that’s where we are at this moment. As Kiri and I will be leaving St. Mark’s (and London) shortly, we’ll be handing over the management of the content of the site to someone else, but we intend to remain fully involved in the running of the site from technical and design perspectives.

Film Photography

At a crossroads

For several months we’ve been thinking that it would be really cool to climb up to the top of the tower at St. Mark’s Kennington and take some long exposure images of the crossroads at Oval tube station at night. But hey, why stop at just still images? Why not go for a time lapse? So that’s exactly what we did.

Last night, just after 7pm we climbed up the tower and set up a tripod in the roof space, with a camera on top pointing at the crossroads and a timer remote control attached. With the camera all set up (see below if you’re interested in the settings), we set it going, then headed into nearby Kennington Park to have a picnic.

We returned to the camera just before 10pm and this is the footage that it had captured (played back at 12 frames per second):

We’re quite pleased with this, although due to the limitations of where we could fit a tripod in the tower we couldn’t go as widescreen as we would have liked. We particularly like the detail of the London Eye rotating in the background though, which you can just about make out.

Once we’d taken a few long exposure photos from other angles, we came back down to earth, recorded some video footage at the base of the tower (so that we could have sound to accompany the time lapse), then headed off home.

For those who are interested, our time lapse settings were:

  • Fixed ISO of 400 (so the “grain” remained consistent through all images)
  • Manual focus (for consistency between images)
  • Aperture of f/16 (so as to have a largish depth of field)
  • Aperture priority (so the exposures would get progressively longer as it got darker)
  • Image preview off (to conserve battery)
  • Quality of images reduced (to allow 3000 images to fit on a 4GB memory card)
  • Photograph every 3 seconds

The first wedding…

Yesterday I had the pleasure of taking photos at the wedding of Emma and Ben near Maidstone; the wedding was in Mereworth, with the reception held just up the road in West Malling. The church was a lovely building, with a grand entrance and an amazing ceiling and it had a balcony affording good views of the proceedings. I was a little taken aback (as were some of the guests I think) when the vicar suggested that I should do the group photo of everyone from up there before the final hymn, but she was in charge!


The wedding was beautifully styled with a lot of the details hand-crafted by friends and family. The bus ride on an old Routemaster between the wedding and reception venues was a lovely touch, the sensitive decoration of the reception venue (complete with black and white movies in the background) and all of the smiling faces helped to make my job easier.

All weddings are special obviously, but for me this was a special one as it was the first wedding I’ve shot under the name of Lightbulb Head (the previous 30 or so were as “srphotos”). Whilst Kiri came to the last wedding that I shot under my old photography company, I did this one on my own and it felt a bit weird not having her to assist and capture moments where I couldn’t physically be in two places at once. I think we’ll probably do future weddings together.

All that remains is for me to once again congratulate Ben and Emma and thank them for sharing their special day with me.