Skip to content

How to StyleIT!

by admin on May 17th, 2009

This is a follow-up review to sixrevision’s great article on creating a ‘wornpaper’ photoshop layout.

How do you convert a good photoshopped website to actual xHTML and CSS?

First Steps

Before you do anything, identify what and where you will put the tags.

For instance, the whole document needs an enclosing DIV with a paper background.

Then, a header division, and a footer division. In the main division, there should be a header, then content wrapper.

Why seperate the header and content? Well, it’s necessary because the background for the header is transparent, and the content uses a notebook-like background image.

Then, the intro needs a div, and the posts, and sidebar.

With the structure figured out, not onto the xHTML.

Writing the xHTML

The first thing you need to do is to indentify a doctype. I choose xHTML strict, but I didn’t serve it as xhtml. Why? Well, if there is any sort of error, you can’t view the page, and IE doesn’t support xhtml being served as xml.

Remember to include the wrapping html tags, and the head (which needs to include a page title) and the body, where the actual content will be put.

Starting top down, I wrapped everything in a wrapper div for the background image (just personal preference. You usually can usually style the body tag).

They I created the primary divs I laid out before. Remember that squeaky-clean indentation is important, so is nesting stuff properly.

The navigation and category tags are within in horizontal-unordered lists. Everything else is wrapped in DIVs.

After the header, I went on and did the content section, where, as before discussed laid out the main content and header stuff.

It’s extremely important to provide meaningful div ids and classes. I prefer IDs for main layout elements, and classes for everything else.

For instance, use header-bar for the top. content-wrap to wrap the content, and search-form for the search form.

I left a few clearing breaks (<br>) tags, so the floats can be properly cleared, and provide and opportunity to space the layout.

The posts were specified in an IMG header and CONTENT, filling each-other with text.

For SEO purposes, use header tags whenever necessary. It’s usually good practice to cut out extra div’s, and to wrap inline content in spans, and paragraphs, in p tags (not divs).

When adding the search form, it’s important to wrap your form elements with a paragraph, fieldset, or something else after form.

Divisions (divs) are good for layout, but aren’t as good to use with content.

I made the desicion to put my sidebar in divs, not list elements becasue, frankly, they don’t look as crisp without styles (I really like lists, but not bullets in the layout.)

Now, it’s time to see how everything looks. It should look something like –

DesignIT Wireframe

DesignIT Wireframe

Slicin’ and Dicing

It’s typically a hard compromise, slicing the images. Typically, you try for the most compression, smallest images, while keeping everything seamless and crisp as possible. You don’t want your backgrounds to be too large, so they take half a year to load, and people won’t see them, but you don’t want them so small they look textured and cheesy. I cut the images the best I could, a little feathering around the edges could be a good trick also, if your having problems. There were only five main images here. The main background, the paper background, the widget background, and the header and footer jagged edges. Each had it’s own image, but I combined the jagged edges into one image using a css sprites technique.

I used the GIMP (photoshop has the same thing) save as dialogue to compress stuff. Typically graphics, and vector-like crisp stuff, particularly stuff with transparency should be PNGs and images without transparencies, and are like images, irregular and, well, images, should typically be saved as JPGs.

Then I got a good image for the search button and another for the RSS feed.

I took the product images and all the others from the tutorial.

The CSS

First, write a wireframe, which just lays out all your html tags you want to style, keeping all your rules on one line for readability, and indenting.

.wrapper{ width:1000px; }
   .content { padding:15px; }
      .content nav { display:inline-block; }
   .content post { font-size:1.2em; }
.footer { position:fixed; }

Formatting the CSS in that way.

I’ll write another tutorial on the technique I used for the CSS

You can see my css in action at StyleIT Demo

.

Final Tweaks

You can see that it looks pretty good!

But, remember, there are always places to improve, most of the trouble I had with the CSS was the styling of the posts and the post images.

Disclaimer : This was NOT TESTED OR INTENDED to work in Internet Explore, (any version before 8), due to my lack of time. If anyone wants to fix it for me, be my guest.

That’s all?

Sorry everyone but, I’m afraid it is. I’ll be posting a followup post (hopefully). Soon to cover the CSS. Hope you liked it! Until next time…

- Iain (~finis)
VN:F [1.4.8_745]
Rating: 7.3/10 (4 votes cast)

From → Uncategorized

No comments yet

Leave a Reply

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS