It's been a loooong Christmas Break, hasn't it? With the pressure of the Major Project Proposal and Grow Project hovering over our heads I imagine that many people, myself included, have been really feeling the stress of things.
Fortunately I and, from what I've been seeing on the twitters, many other IMD students are finally bringing things to a close. Today I'm going to be going over the design process I've undertaken with regards to the Grow Community Gardens Site.
Establishing a Starting Point
In my last post on the topic of Grow Project I had just finished off the logo for the charity. Pretty much from the get go I had an idea of a somewhat graphical, seemingly handmade design.
Grow, as a charity, have a very hands-on approach to things. They were directly involved with the starting points of both the Waterworks and Helen's Bay gardens and this is something that I wanted to carry across to the logo I designed as well as the site design.
Whilst I want the site to have an appearance of being something that the charity could have created themselves, it is important that the site is also designed and developed in such a way that it is professional. This involves creating a balance between hand-made, simplistic design and professional quality work.
In one of my Major Project blog posts I covered a lot of paper prototypes that I have been working on. Paper serves as a fantastic tool to work out the basic aspects of a project. This is as true with Grow as it was with my Major Project.
Fortunately I had a solid idea for the style I wanted for the site, and sketching the style of the site design that I wanted.
From Paper to Pixels
With the idea for the site style quickly established I quickly put together a concept for the site header.
I was immediately quite pleased with the design that I had put together, as it met up very nicely with the aim that I had for the site itself. From here I jumped straight into the markup of the site itself.
One of the requirements of the Grow Project was that, when developing using WordPress, that we make use of the fantastic Starkers Theme by Elliot Jay Stocks. This was perfect for me as my personal preference for WordPress theming is to work from Starkers anyway, and I've recently completed a project that involved making some pretty drastic changes to the Starkers Theme 1.
This knowledge has proved to be quite useful in terms of how to tweak some bits of the site, allowing me to create custom elements of the site. This first started out with creating the header and navigation. On the home page I also wanted to show a mission statement as one of the most notable aspects of the site.
I also wanted to ensure that the donate button was somewhat noticeable across all pages. I did this by providing this particular link with a separate cloud, which helped ensure that it breaks away from the rest of the site Navigation:
On page header sections that aren't the home page, the mission statement is removed from the page, providing slightly more space for the site content.
The site content itself, for the most part, uses a similar two column layout throughout. There is a sidebar that contains content displayed on every page, with a set of consistent data being rendered on every page with the sidebar, and certain page specific content being rendered on certain pages.
This page-specific content is used as a sub-navigation for certain page areas, to make it as easy as possible for site users to navigate around the site. The universal content is a search field, links to various social media, links to Garden Categories that have posts made on them and finally weather conditions for the gardens.
It should be noted, however, that the weather section of the sidebar can be quite fiddly at times, refusing to render the relevant weather at times. This is an issue that I have been unable to get to the bottom of, and I am increasingly believing that it is related to the infrastructure at Yahoo! as much as anything else.
The site content is laid out differently depending on the type of page. The three main page types are Pages, Categories and Single Posts. Each work similarly, but with slightly different visuals. Individual pages are quite plain in their appearance, fitting into the overall theme of the site quite nicely.
Categories and Single Posts use a similar layout to one another. Categories display multiple posts, whilst single posts display a single post and all comments on that post.
The Home Page is a beast of a different nature. This page has a set of content designed to help highlight what the charity is about. It does this by talking about what Grow is about, with a slideshow to provide a visual to go along with the content.
The site footer is split into two sections. The top half of the footer is dedicated to a site map to help users navigate the site. It is more comprehensive than the navigation in the header, in that it provides a direct link to both pages and sub-pages of the site.
The second section of the site has three areas to it. Two of these are similar in nature, covering the Funders and Sponsors of the Charity, and providing contact information when there aren't any (as is the case with Sponsors).
The final area of the footer is related to the designer of the site, namely me. It's a simple message covering how the site was designed and developed by myself.
There is one area of the site which is designed to be completely different. The Gardens page is an area that was mentioned during our brief was that they wanted to be able to show their own gardens as well as other gardens on a map. When I got to thinking about this I realised that any maps embedded on a single page could quickly get very cluttered with multiple gardens. To prevent this I decided to create a whole page map that would be used for all of the gardens that Grow wanted to display.
The navigation for this page was also modified to fit the adjusted content of the site:
That covers the design aspect of the site, but there is quite a bit more being done to make the site as usable as it is. In particular I made use of WordPress's functionality to create custom post types as well as one plugin to add some useful functionality to WordPress.
Custom Post Types
Custom Post Types allow developers to define custom sections for content which can be used for custom sections. I've used this for three different areas of the site, which I will cover shortly:
- Gardens Page
- Funders Page
- Sponsors Page
Each of these pages have one thing in common, they need to be specifically set up. The following is the snippit of code I used for one of them:
$args = array( 'labels' => array( 'name' => __( 'Gardens' ), 'singular_name' => __( 'Garden' ), 'add_new' => __( 'Add New' ), 'add_new_item' => __( 'Add New Garden' ), 'edit' => __( 'Edit' ), 'edit_item' => __( 'Edit Garden' ), 'new_item' => __( 'New Garden' ), 'view' => __( 'View Garden' ), 'view_item' => __( 'View Garden' ), 'search_items' => __( 'Search Gardens' ), 'not_found' => __( 'No Gardens Found' ), 'not_found_in_trash' => __( 'No Gardens found in Trash' ), 'parent' => __( 'Parent' ), ), 'public' => true, 'show_ui' => true, 'capability_type' => 'post', 'rewrite' => true, 'query_var' => 'Garden', 'supports' => array('title', 'editor', 'custom-fields', 'thumbnail') ); register_post_type( 'gardens' , $args );
This creates a custom post section which can then be used separate from Posts or Pages:
This is how I was able to set up the Gardens section, as well as gather weather information to display on the site. The custom Garden pages are set up to allow for a couple of custom fields, for latitude, longitude and the location of the garden:
It was also used to allow for easy addition and removal of Sponsors and Funders from the site's footer.
WordPress is a very popular platform and, as a result, there are a multitude of plugins available to do pretty much anything that you would want it to do. One of the most important plugins, in my opinion, is something to handle Search Engine Optimisation, otherwise known as SEO. This is important as it helps your site be found. After all, what is the point of having a site if it's not findable.
For a long time I'd been using All in One SEO, but have recently made the leap to Yoast's SEO Plugin. It's a very similar plugin but with one big change, it makes it a lot easier to see how SEO affects the page in question:
Omissions from the Site
Due to the time frame of the site development there were some things that I would have loved to implement but couldn't manage in the time frame. It is my stance to implement something fully or not at all. There is no point in doing something if it's not going to be completed. This is the case with a mobile version of the site. I'm a big fan of Responsive Web Design, but didn't have the time to fully implement, or even experiment, with developing a mobile version of the site.
Validation of the Site
In terms of site validation the site validates as valid HTML5. I had been having some issues with the single post pages, but was able to track down a rogue
</p> element hidden in amongst the comment form the site is using. With this resolved the site now validates fully.
In terms of CSS the site doesn't validate, but this isn't due to sloppy CSS. It happens because I'm making use of CSS3 to enhance aspects of the site in specific browsers, without hampering browsers that don't support these newer attributes.
The site functions fully in the following browsers:
- Chrome (OS X and Windows)
- Safari (OS X and Windows)
- Firefox (OS X and Windows)
- Opera (OS X and Windows)
- Internet Explorer 8
In addition to this the site also functions in older versions of Internet Explorer, versions 6 & 7, though there is a hit to the visual of the site itself. The following are screenshots of the browser output in various browsers. I will cover any issues that come up with specific browsers:
Internet Explorer 6 has issues with a couple of pieces of styling used in this design. The most obvious issue, when you look at the site, is that it simply doesn't support Alpha Transparency in PNG files. This causes an issue with the header area, where such images are used in great amounts.
The second issue is the lack of hills in the site header, as well as in the footer. This is an issue with the
:before pseudo selector for applying content. This is used in the design to insert the hilly areas of the header and footer, to avoid adding unnecessary markup to the site.
Internet Explorer 7 has a better set of support for the Grow Site than Internet Explorer, in that it supports PNG Alpha Transparency. Unfortunately this is where the improvements end, as Internet Explorer 7 also doesn't support the CSS
:before pseudo selector either.
Fortunately support for the CSS
:before selector is supported in Internet Explorer 8. With Internet Explorer this is the base-line that I work to unless it is specifically required that I work towards earlier versions of the browser.