YAML – HTML Blog Build Part 1

I wrote about my hunt for a css framework previously.

This post is going to be about building my design in html using the YAML css framework before putting it to use in a subtext skin.  I have published a couple of posts related to subtext skins and other features you can quickly implement:

• 2 subtext skins ready to rock
• Free Online backup storage – alternatives to BT Digital Vault
• fSpring skin for subtext
• Subtext Galleries, using jQuery for funk
• Sharing the love
• Printer friendly your site
• More posts related to subext

Before building something I have to come up with some sort of idea of what I want the design to look like.  How I want it to entice users to hang about read more, click on a link, banner or even a category.  Now I am no designer but there are alot of sites out there that can give you influence.  There are quite a few css gallery sites which show some of the best on the web.  A comprehensive list can be found over on Martin Lucas’s Blog.

If you find a design that you transform into a blog skin/template please give credit to the designer.  These guys work hard and if you don’t acknowledge them then really it’s stealing.  Am sure the designer would appreciate the link back and if you’re really lucky the designer might even help you should you run into problems doing the conversion. I recently discovered a site using one of the skins I converted to subtext and the owner had removed all credits from the footer. Bad karma…..

I’d like to do something completely different from the norm.  There are some limitations that subtext imposes when it comes to rendering some of the components. I’ll go into more detail about these limitations later.

What am I looking for?

Right now take a time out, make a list of what you’d like to implement in your build.  If you struggle for ideas, try a little brainstorming session, have a look through some css gallery’s to give you some inspiration.  Make a list of things you like, things you dislike for example colours used.

My brainstorming session

3 columns. Wow factor. Bright. Easy navigation. Formatted form elements(contact,comment). Blockquote, xfn, vcard, vcalendar, list formatting. External and internal link differentiation. Orange, blue, red, lime. Flickr Gallery. Twitter. About page. Nicer Error Page. Round but not too round.

I am fortunate that I am running subtext as a single blog so I can change some of the core pages as it won’t affect anyone else.  If you’re running on a multiple blog installation then some of the above won’t be possible unless you and your users have a good understanding.

Layout and Colour Scheme

Layout

YAML comes with a nice builder : YAML Builder v1.0. The builder allows you to pick from a variety layouts.

I am going for a 3 column with teaser layout. The right column will be thinner though as you’ll see in the next post.

Colours

If your struggling for a colour palette I would recommend Color Combinations.  The site shows a variety of colour schemes that can be viewed by colour, and can be viewed in a test area. Another useful feature is that you can enter the URL and retrieve the colour scheme for that site.

Another good site is ColorSchemer

Right now I am still not sure what colours I am going to use. For the next post I am going to implement the base then play about with different schemes from the above sites.

Also be sure to check out – Free Online backup storage – alternatives to BT Digital Vault