I recently redesigned and coded the website for the Marine Biological Association. I designed the site mobile first as I feel this makes sense to start with the linear nature of a webpage and it’s elements and then see where these elements can best be focused as the screen size increases.
The site also uses responsive design techniques with a fluid grid. I found Responsive Web Design by Ethan Marcotte had some useful techniques in it and also the templates from the 978 Grid System to calculate layout widths.
As the site is primarily for presenting static page content and adding news posts I chose WordPress for the back end. There are a few custom plugins that I have written in there to deal with membership forms and other bespoke areas of the site.
You can see the site at http://www.mba.ac.uk
Tom is a talented young photographer and designer form Plymouth. Lately he has been working for Prime Delux, who’s online store I developed, taking photos for them and also dealing with the admin side of the store.
The images he has added to the site have really improved the overall look and feel as well as giving the user a better view of the products.
You can check out his improved portfolio site at http://www.tomfrankhamimagery.co.uk/
I was impressed with the flexibility of the responsive design demo shown at http://978.gs/demo/
So I decided to make some simple psd files with guides and a grid overlay folder for each of the layouts. Now all I have to do is implement it on my site.
And I’d like to share them with you.
Download the templates
JC Surf has been updated with The Stormrider Guides.
Often referred to as The Surfer’s Bible the guides are often an essential part of planning and partaking in a surf trip to some of the premier spots around the world.
If you are interested in stocking the guides then get in touch with JC.
I’ve now signed up for a Typekit account and have used Ligurino on this site for it’s clean lines.
The interface for choosing and adding fonts is fantastic and very very user friendly.
The fonts look great on a Mac although there does seem to be a few rendering issues on Windows.
I’d be especially keen to use this for logos or headings as the larger font sizes seem to display the best.
I’ve done work on Macs before and always enjoyed it but I’ve managed to get my hands on a MacBook Pro which I’ll be doing lots of my work with.
Having read a couple of iPhone developer books I’m very keen to get stuck into a bit of app development and see what I can come up with.
The first evening was pretty much spent installing programs and typing into Google “mac short cut for ……” but after a few days of working on it I can highly recommend it. It’s lightning fast and opening up new programs is almost seamless. This really helps my workflow as I’m not getting distracted whilst the new program opens up.
Not to mention the excellent battery life, it’s really nice to have a laptop that can be used as one and not have to look for a power supply before even thinking about getting into some work.
I’ve been working on a site powered by Drupal and needed to find the number of rows a database query returned. Simple enough and quite common procedure. But, the Drupal database API no longer offers the db_num_rows() function.
I had a quick Google around and the answered seemed to be to run the query twice but the second time using a count query. Two calls to the database when only one is necessary? Not on my watch. The piece of code is to appear on the home page so it will be called upon frequently.
My solution was too loop through the results set and add the formatted HTML to an array. Then check if there are any items in the array, if so loop through it an output them if not display the message that there are currently no results.
I know it’s still doubling up but I think it is a slightly more elegant solution than the double database call.