Unlike the others, I haven’t included any documentation for Giuseppe.

The reasons for this are two-fold:

• There are help files already included, directly in the admin dashboard, with short descriptions and links to more in-depth documentation.
• I need to set the set the site up for Giuseppe anyway, and some of that time can be spent walking him through the process.

To expand on those points.

Included help files

There are help files included in the admin dashboard, which you can access at any point by clicking the help button at the top right of the screen. The help file then expands and shows short descriptions for everything on the screen, with links to useful wiki articles on wordpress.org.

For example, when writing a post, you’re presented with a link to the wiki article on writing and editing posts, which is suitably exhaustive and very well documented, as you could expect from a crowdsourced wiki article.

This is good, because it covers things that I would inevitably forget to include and lets the client know exactly what things do without needing to watch long videos or read through my badly written help-files.

I Have to Set it Up For Him

If Giuseppe wants to use the site I’ve made, I’m going to have to set it up for him. There are a number of things that will need to be installed, and things like the contact form contact address will need to be changed, along with making sure that the database is properly imported, making sure all the plugins are working and outputting the correct things.

It’s not expected that the client would be able to set up the site for him or herself, and that means that I have to do it. While doing this, I would also have the opportunity to walk him through the things that he can change, and point him towards the help system, something that a client will appreciate much more than a very impersonal “watch the video”.

As part of the finishing up process for the site, I’ve started optimising the site for search engines.

This is pretty easy with the framework I’m using, but there are a few options that I’d like that don’t come as default, such as the ability to create a sitemap.

Instead of the framework default, I used Yoast’s SEO plugin. Yoast is very highly regarded within both the WordPress and SEO communities, and this plugin really does help to optimise the parts of the site that can be optimised.

As part of this process, I also added relevant alt attributes to all images in the site, and made sure all relevant keywords are included in pages.

I’ve been trying to sort the gallery out for a while, and been growing increasingly frustrated with it. Basically, I’ve been trying to make thumbnail images 140 pixels wide, with a 20 pixel gutter in between. That’s been having to fit inside a 300px container, which, of course, is too small if all the images have padding.

That’s where the CSS3 nth-of-type selector options comes to play:

#yc_thumbnail_frame li{
	float:left;
	border:5px solid #f9f9f9;
	margin:0 0 20px 0;
	}
#yc_thumbnail_frame li:nth-of-type(2n+1) {
	margin-right:20px;
	}

All list items now have a 5 pixel border, a 20 pixel bottom margin and are floated left, however, only odd numbered list items have a 20 pixel right margin. This means that I can easily target specific list items to give them the attributes I want.

There are other uses available too, such as only adding a bottom border to the last list item in a navigation menu, for example, but for this site, that’s all I need to do.

After struggling with styling the contact form so that it looked consistent across different browsers, I came across an incredibly useful css framework, written by Nathan Smith, entitled Formalize.

This css framework, which also provides a short javascript (with different options for all the popular js frameworks, jQuery, Mootools, YUI, etc) enables consistent styling of all form elements throughout various web browsers, and looks rather nifty to boot. Using it is a massive time saver, important both for myself, and to keep costs down for potential clients in the future. This extra time means I’ll be able to polish up extra sections of the site to get them looking really good.

Here’s a small screenshot of it working on my site.

Now, I just need to adjust padding on the left hand side, and fix the form widths so that the left column is 620 pixels wide.

It’s worth reiterating that this is only a styling framework, and doesn’t generate the forms or anything like that at all.

I’ve so far been building Giuseppe’s site according to the 960 Grid System, but I’ve let some elements slip, such as images in the gallery, and the logo.

Reading this article has convinced me that I need to go back, and clean everything up so that all elements within reason fit within the grid guidelines.

Speaking to Giuseppe last week, he mentioned that he wanted a contact form on the site, along with his email address for people that preferred to email him manually, so that’s what I’ve been doing today. After playing with a supposedly good plugin, and having problems with it’s styling, in that it was forcing the different parts of the form into separate divs, thereby making each one fall below the previous, I decided on another option.

I copied the html mark-up that created the form, and, rather than using the shortcode provided by the plugin, which I was using before to create the form, I decided to copy and paste the html output in the page and then use and modify that so that it satisfied my exact needs. This proved relatively quick, so I’ve now good a nicely styled contact form. As an added benefit, the page should now load a few milliseconds faster, as the plugin is no longer trying to load some extra stylesheets and scripts.

A few more things to add of course, the send button is appalling, and needs to be styled. That should give me some interesting opportunities to play with css gradients and different link states.

I’ve also now added a bar to the right of the form where Giuseppe’s email address will be contained.

I came across this last year, but it’s relevant again for the Professional Practice module.

24 Ways is a series of 24 cutting-edge web design tutorials released from December 1^st to December 24^th on a yearly basis. It contains articles from well know web designers like Andy Clarke, who recently had an awesome HTML5/CSS3 web design book published entitled Hardboiled Web Design.

Particularly interesting articles from this year’s selection are:

• Everything You Wanted To Know About Gradients
• Real Animation Using JavaScript, CSS3, and HTML5 Video
• Golden Spirals
• Beyond Web Mechanics – Creating Meaningful Web Design