Re-codding by Hand
Now that you’ve opened up the generated html, you’ll also want to open up a blank html file right beside it. This is so we can examine part of the Imageready html while creating our own layout from scratch.
Like most designs, this super simple layout contained a header, content area, and footer. I got started by coding in all the styles for the layout, using the color codes I gathered while designing as background color, text, and link colors.
The style sheet shaped up like this:
[html]
[/html]
Once the stylesheet was complete, I went ahead to layout things like they were in the design. I placed the navigation elements on the right, by using “Unordered List” and “List Item” tags. I then added the welcome & introduction text to the right. Room for the “Work” images was left below, although I didn’t bother to add any images in as placeholders.
The html looked like this:
[html]
- HOME
- WHO WE ARE
- WHAT WE DO
- PROJECTS
- DOWNLOADS
- WORK
[/html]
The Differences
Our hand coded css based design clocked in at about 2.65 KB’s, an used only one image. The Imageready designed hit about 6.89 KB’s, and used 36 images. And this “design” was nothing but a header, footer, and a few sentences of text. Imagine how much file size and how many images you would save be hand coding all of your work.
Don’t simply go from Photoshop -> Imageready -> Internet. Take the time to clean up your code, and you’ll see plenty of benefits down the road.
New Feature Alert: What’s with these videos?
As a new Devlounge feature, we will begin guiding you with instrunctional videos. As our first ones, these didn’t turn out as well as we expected, but this gives us some time to work out the kinks. Stay tuned for more articles with a much more in-depth look at exactly how to get things down.
