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”.

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.

Here are some quick tests in Photoshop.

After some quick modifications to the margins for each individual letter in the header, here’s a before and after picture of the kerning in the header.

kerning before

kerning after

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.

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.

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.

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.

24 Ways is a series of 24 cutting-edge web design tutorials released from December 1st to December 24th 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

This is an excellent example of box shadows, done entirely with CSS. Also worth noting that other effects like curved corners and rotated divs are all done with CSS as well.

http://nicolasgallagher.com/css-drop-shadows-without-images/demo

Stealing some code from the site:

Using a Dynamic Content Gallery to showcase certain bits of work on the front page.

After speaking to Giuseppe via email, he wants me to change the colours to only consist of a light grey/white colour palette, so I’ll get working on incorporating those.

I’ve also been looking at the different ways in which I can incorporate a gallery, after fumbling around with various JQuery options, and some WP plugins I’ve stumbled across Shiba Gallery (the site is god-awful) which incorporates the noobslide script for the mootools Javascript framework. I’m still looking for other options, but for the moment, this looks like it’s the best one.

I’m also looking at using css3 text-shadow to make headers stand out on the page, in a style similar to the below, obviously the colours will need to be changed, but this is just a quick idea of what it could look like.

Testing text shadow.