BCTheaderimage

Friday 26th Jul 2013

I had been thinking of a complete rework of my site for a while. When I finally found time I had also decided to also switch domain names from rethinkfx.com to bct.me. It was a big step to move to a new domain as rethinkfx had been online for nearly 13 years and still managed a respectable amount of hits even though many of the tutorials were out of date. However rethinkfx always seemed to portray a company or a brand rather than feeling like my personal site so I decided to take the plunge and re-do everything from scratch.

I knew I wanted my redesign to be much more visual and designed than I had attempted in the past, and I decided that this was a good opportunity to update both my technical and graphic design skills. I decided to stick with WordPress but redo nearly everything else from scratch. My CSS and PHP skills weren’t too bad but as I started researching more modern web trends I started to realise I’d become a dinosaur.

After a lot of research I settled on the skeleton boilerplate to define the grid and reset the styles. There’s tons of boilerplates out there but skeleton was responsive meaning that it would allow me to handle various resolutions all the way down to mobile phones (try re-sizing this window to see what I mean). I also found a fantastic tutorial on using skeleton up on tuts+, this helped me enormously at the start.

Being a nerd I also decided to test out using a raspberry pi as a local webserver, this meant I didn’t have to keep uploading files to the web each time I made a small change. But could still check them in an environment running PHP etc. The development server on the pi used lighttpd rather than apache and was more than fast enough for my purposes.

In the process I also decided to move all my photographs away from flickr and back onto my blog. You can read more about the process of batch downloading from flickr and automating photoblog posts in this tutorial.

The whole process took far longer than I expected but I really enjoyed digging deeper into PHP and discovering how much web design had moved on in the years since I last tackled a theme design. Probably the most rewarding aspect was taking the time to learn more about typography and grids in graphic design. There were a couple of articles that really helped me which I’ll link below:

Installing Lighttpd on the Raspberry Pi

Building a responsive layout with Skeleton

Grids are good – using grids in design

Five simple steps to better typography

Old sites

I’ve had some form of site on the web pretty much since I first discovered it at University in Bournemouth in 1994. While I was putting bct.me together I dug back through the internet archive and found some really early and quite embarrassing sites I’d made in the past. So here for your viewing pleasure is my Internet Homepage Memory Lane™

1994

From a cheeky bit of stolen webspace from my then holiday employer (http://www.uecnet.demon.co.uk/ben/) I carved out my first corner of the web. Clearly this is where my love affair with orange began.

You can see an archive of the site here: http://web.archive.org/web/19990220085609/http://www.uecnet.demon.co.uk/ben/

www_archive_1995

1998 to 1999 ish

After I moved to Singapore I set up a Geocities account. This was back when the web seemed be a tangled collection of forced metaphors aimed at drawing casual users in and so Geocities was laid out like a real city with themed neighbourhoods, streets and houses (houses, homes .. home page .. geddit?). I’m a little disappointed that I didn’t include an animated GIF of a man digging to show that the site was under construction. Read more about Geocities here.

http://web.archive.org/web/20011209050433/http://www.geocities.com/mr-ben/

 www_archive_1999

1999 to 2013

In 1999 I decided to buy a domain name and prepare for the coming millennium by designing a website. For the first 6 years rethinkfx was created as static HTML, laid out using tables. In 2006 I switched over to WordPress and then faffed about with the design lots over the years, I’ve included some screen grabs from the internet archive below.

www_archive_2000 www_archive_2001

www_archive_2002

www_archive_2003

www_archive_2008

www_archive_photoblog_2008

-->