How We Built MotherGeek

Quite a lot of people have asked me recently where I got the template from for my blog.
The quick answer is: “It’s not a template. DaddyGeek designed and built it for me.”

A few people wanted a bit more info, and since I am useless when it comes to website techy talk, DaddyGeek has written this blog post to explain exactly how the website came to look and and function as it does:

Back in early 2011, Mothergeek decided she wanted to start a blog.  As with most people, we used WordPress and a purchased template to begin with – partly because we were unsure if it was something that would be stuck with, and partly for ease.  For most people, WordPress is a good option when it comes to starting a blog – it’s relatively easy to use and there are a wide range of plugins available to extend its functionality (though don’t over-do it – it can quickly start looking messy!).

In March this year, Mothergeek started to take blogging even more seriously, and traffic levels were creeping up to a point where it was worth sticking with.  It was decided that we would move away from WordPress with Mothergeek V2.  There are a few reasons for this – firstly, although WordPress is powerful, you’re still limited to what you can do. Secondly, I like to know a system inside-out, and know that I can implement any functionality I dream up.  I’ve used the Coldfusion programming language for almost 12 years, so it was a natural choice that we develop Mothergeek V2 using that language.

We started off by outlining the functionality we wanted – a ‘proper’ logo, reviews separate from regular blog posts, a mobile version (which accounts for approximately 35% of all traffic) and an easy-to-use control panel that could be used on iPhones and iPads, as well as on the laptop.

The logo came first, the theme being based around a power button (to signify ‘geek’) and a baby face.  The colour purple used throughout the site came from the initial logo sketches, and was chosen because it was neither blue or pink, nor too dark or too light.

Next up, I started on the design of the site.  Many people choose to design in photoshop first, and code later – but I find it quicker to code from the beginning, this also reduces the risk of designing a layout that proves difficult to code.  The overall design used today has only minor differences to the initial design.  As both designer and coder, I’m able to design to suit code, and vice-versa, which speeds up the process of putting a site together significantly.

The coding behind the site is relatively straightforward – all the content is held in a MySQL database and served on demand.  In reality, the site actually only has around half a dozen pages.  The site is hosted on a dedicated server, which allows for additional flexibility when it comes to functionality. 

The mobile version of the site was developed at the same time as the web version, and is essentially a slimmed-down version, formatted for smartphone use.  The web version detects the type of device viewing the site, and redirects you to the appropriate page on the mobile version if necessary,

Each page includes @TheMotherGeek’s twitter feed.  These are dynamically pulled in and parsed on the page. Error checking ensures that if Twitter is down, it doesn’t affect the page loading.  Recently, we also added the ability to comment on blog posts via Twitter – this uses similar coding, looking for a specific hashtag (which is given on all enabled posts) and adding the comment the same way comments are added on site.  The exception to this is tweet comments are done ‘behind the scenes’ rather than on request – a scheduled task looks for and adds comments every 2 minutes,  rather than every time the page loads. Additional scripting removes links in tweets to prevent spam, as well as removing @TheMotherGeek from tweets to make them appear more ‘natural’.  Your Twitter name and a link to your profile is added to each comment automatically.

Every comment made using the form enters a moderation queue.  We receive an email for each comment added, and we’re able to either approve it or mark it as spam by email, this is useful for ensuring comments are moderated quickly, even while on the move.  Some spam prevention measures have been adopted, such as blacklisting certain keywords, and closing comments on older posts.

As with most site owners, monitoring stats becomes something of an obsession. We track usage with 2 features – in the first instance, we have a custom tracking tool that logs each page view, the platform used (i.e web or mobile version) and any referring website. If you find Mothergeek via a search engine, we also log the query you typed to find us – which helps us know what people are finding us on (and, quite frankly – some of the queries are weird!).  This custom tracking code generates the stats you see at the top of every page.  Secondary tracking is provided by gaug.es and is primarily used as a backup.

Another feature we added, which you will see on most reviews here, is live pricing. We have connected to a central API that checks prices every day, so even a post a year old will always have current pricing displayed.  Recently, we expanded this by including Voucher Codes within the pricing table, potentially saving you more. 

Finally, you’ll notice that the site does not have any non-standard ‘badges’, nor any advertising.  This was a deliberate decision from the start.  We do include badges in a manner, but these are reformatted to a common size to fit within the ‘Networks’ area.  This prevents the pages becoming messy and cluttered.  Advertising is always rejected, as are sponsored posts.

DaddyGeek.

So there you have it! DaddyGeek explains it all!
Hope your head isn’t as fried as mine was when he tried to explain all the techy stuff to me!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.