Grow – A Website Development Process
January 1, 2011In the last post I explained my logo design process for Grow Community Gardens. This post is an overview of how I designed the Grow Community Gardens website, coded it in HTML and CSS and added wordpress integration! You can find the final version here.
Website Background
In the last post I briefly touched on the kinds of websites Siobhan liked. They were:
Her two least favourite were:
I wondered what is was that parkrun and communitygarden have in common that I could try to recreate and improve upon in my site. I flicked back and fourth between the two sites and concluded that they were both fresh, white, clean and had definite coloured shapes with no blurry edges. Both had horizontal navigation and a layout that was simple and easy to follow. The sites did not contain clutter or distracting adverts. These were all guidelines for me to follow that were more likely to please Siobhan than something completely different. I didn’t want to copy the sites exactly, but drawing ideas and inspiration from them seemed appropriate as a framework to start of with.
I felt I knew the aim of project well enough to make a start. I knew the problem that had to be solved and the goals that had to be achieved. The mood of the site had to entice potential volunteers and sponsors and impress people enough to want to be a part of Grow in anyway they could.
Wire-framing + inspiration
I sketched the wire-frames I had in mind out. The home page was to include an intro, recent blog posts, links and a weather forecast. The other pages would all be full width apart from the news section, which required a sidebar to show the most recent blog posts. Each blog post would also require a featured image and links to other posts. You can see the wire-frames below:
Click to see this Homepage wire-frame larger
Click to see this Pages wire-frame larger
Click to see this News wire-frame larger
It was Meagan Fisher at Build Conference 2010 who talked about gathering inspiration after the wireframing stage. She would collect everything from images and textures to full websites and videos to gain inspiration for the project at hand. I set about doing that by taking pictures when I was outside of the trees and grass and taking screen shots from the internet. Here are three from my collection of around ten:
Click to see these amazing nature inspired wallpapers
Click to see these lovely icons on the Apple Website
Click to go to the green globe ideas website - great illustration!
ColourScheme
I used Adobe Kuler to help me decide on the colours to use for the site. I prefer Kuler over 0to255 as Kuler is much more sociable and you can share your colour palettes with others. You can see my six main colours below. I made an account and saved the colour scheme on the Adobe website. If you click the graphic below, you’ll be able to see it on Adobe.com.
My Colour Palette for the Grow Website
Designing the Homepage
To make the homepage more exciting, I decided to design the middle section as if you’re looking at a scene from one of the grow gardens. There is a compost heap, a blackboard, a whiteboard, party flags, and a table with a lot of food, dips and a cake! Below this is the forecast section. I would have loved if the forecast was more important than the blog posts, as it would have looked nice on a blue background, but unfortunately it only made sense that the blog posts came directly below the introduction and recent photo gallery. Take a look at a few development pictures below.
Click to see the full design
Click to see the Grow design with the 24 column grid
Click to see the detail on the table, I created in Photoshop
The importance of the Grid
The grid plays a key role in design all over the world. Using a grid structure keeps everything inline and organized. In Mark Boulton’s five part grid system series, Mark comments on the value of using a grid system:
These grids have quickly become a convention, and for good reason too. They are quick to create, fairly stable across many platforms and don’t degrade to the same degree as table based layouts. This is all good.
For the Grow Website, I decided to use Nathan Smith’s 960 grid system. A psd is available from the site, so I based my layers in Photoshop around the guides provided. The sheer quantity of websites using Nathan’s system was more than enough to convince me. If you read on to the coding section of this post, you’ll see how I was more than impressed by the system.
Coding the Homepage in HTML5
I wanted to use the most up to date language available to make the Grow website stand the test of time for as long as it could! I chose HTML5 and CSS3 to build the site. It was the first time I’d really used some of the new HTML5 elements like
The first new piece of code I stumbled across was:
<!doctype html>
I couldn’t believe that the whole blurb at the start of the HTML had been cut out and it still worked! This was the first line of code in the HTML5 boilerplate code I started out with. I downloaded Snippets, a handy app for mac that makes inserting code snippets a breeze.
I declared the head tag, title, meta data, favicon and the 960grid stylesheets.
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6">
<![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7">
<![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8">
<![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9">
<![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link href="css/reset.css" rel="stylesheet"/>
<link href="css/960_24_col.css" rel="stylesheet" />
<link href="css/text.css" rel="stylesheet" />
<link rel="stylesheet" href="css/style.css">
<script src="js/libs/modernizr-1.6.min.js"></script>
<title> GROW </title>
<style>
header, aside, section, footer, article, nav
{display:block;}
#siteInfo {clear:both;}
#subbanner-images {clear:both;}
</style>
</head>
The next thing to do was code the header. I used the header tag and made a div with id “toplinks”. To make the header span the width of the 24 columns in the design, I added
class="container_24"
Rather than add the logo as an image, I used “Grow” in an h1 tag and gave it a class of “grid_9″. This made the h1 span 9 columns of the 960 grid. As 24-9 is 15, I figured I’d have 15 columns to make up the navigation if they were to be alongside each other. To do this I gave the nav tag of class “grid_15″, liek this:
<nav class="grid_15"> <ul> <li> <a href="#" class="selected">About</a> </li> <li> <a href="#">Learn</a> </li> <li> <a href="#">Gardens</a> </li> <li> <a href="#">Join</a> </li> <li> <a href="#">Support</a> </li> <li> <a href="#">News</a> </li> <li> <a href="#">Partners</a> </li> <li> <a href="#">Contact</a> </li> </ul> </nav>
From there, using the 960 grid system was easy. The only problem I came up against was when a column must be blank, for example between the intro paragraph and the watering can. To do this I gave the paragraph a class with a suffix. This made a blank column to the right of the text. The code for creating the text with watering can is:
<div id="welcometext" class="grid_12 suffix_1"> <h2>Welcome to Grow</h2> <p>Paragraph Text</p> <div id="wateringcan" class="grid_11"> <img src="img/wateringcan.jpg" alt="Watering_Can"/> </div>
So you can see that 12 + 1 + 11 = 24 and that’s how easy the 960 grid is to use!
The rest of the page was easy enough to create.
You can view the HTML for the homepage here.
The CSS
The 960 grid system stylesheet ensured all the elements were within the 960pixels in the middle of the page. It was my job however, to use CSS3 to position them more accurately! I unstuck myself a few times by declaring a misbehaving div as bright red. That way I could see exactly what it was doing and I could start to correct the problem. Most other problems were float related and were quickly solved by adding overflow:hidden or clear:both. One of my favourite parts of the CSS is the blue CSS3 button at the top of the homepage. The button makes use of CSS3 gradients in firefox and webkit browsers and has a hover over set of declarations too! If you’re interested in creating CSS3 buttons, you should check out this great list of resources over at Speckyboy.
Another of my favourite CSS3 features that I used was CSS3 transitions to fade the navigation hover-overs in, in webkit browsers. Andy Clarke’s Hardboiled Web Design came in very useful for explaining how to do this. If you haven’t got the book, you are missing out!
You can view my entire CSS Stylesheet from the web developer toolbar in firefox.
Here are some screenshots of the CSS being applied, after I sliced the PSD up!
Click to see this screen larger
Click to see this screen larger
Click to see this screen larger
Integrating Starkers
Starkers is a striped down version of the standard twenty-ten WordPress theme. It was created by Elliot-Jay Stocksfor anyone to use as a base to create their own WordPress themes.
I found it very easy to use as a lot of the code was already commented with things like “Don’t delete this!” or “This is the start of the loop”. A great help to me was the Smashing WordPress book by Thord Daniel Hedengren. It helped me understand the WordPress loop and basically how to create an entire theme! The hardest part was to display the most recent posts on the two boards on the home page.
The Helen’s Bay posts would need to go to the Whiteboard and the Waterworks posts to the Blackboard. To do this, I gave a waterworks related post a tag called “Waterworks”. I called it from the homescreen with this snippet:
$args = array( 'posts_per_page' => 2, 'order'=> 'DESC', 'orderby' => 'date', 'category_name'=> 'Waterworks' ); $postslist = get_posts( $args ); foreach ($postslist as $post) : setup_postdata($post); ?> <a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark" class="white"><?php the_title(); ?></a> <?php endforeach; ?>
You can see above how the code will display two posts, in a descending order by date, with category name “Waterworks”.
Typography
As a user of Typekit, I could not resist adding three or four of their typefaces sparingly to the Grow site. You’ll see on the homepage typekit fonts have been used on the compost heap and for the word “Food”. I picked a rough looking font for the compost heap and an elegant handwritten font for food, to portray the daintiness and sophistication of the food grown and cooked by the Grow Community team! The titles on the black and whiteboards are also from Typekit as I wanted it to look like a grow member had just scribbled them on! It was important to me that “Waterworks News” and “Helen’s Bay News” were actual headings rather than images, to make my markup more semantic! Check out the fonts I used below.
Click to see the Typekit fonts used in the website