Encoding a Photoshop Mockup into XHTML & CSS

Continuing from a recent tutorial, Create a Vibrant Blog Design in Adobe Photoshop, we'll now look at taking the concept and implementing it into an actual webpage constructed in xhtml and css. By exporting the imagery from Photoshop and coding up the page we'll produce a working example of the overall blog design.

At the end of the last tutorial, we had created a complete mockup of the front page including overall layout, colour and design, proposed typography and sample content. Now it's time to review the concept and plan out which elements can be created in pure xhtml and css, and which parts require the use of images.

The first element to be exported is the large background. All other layers are hidden and a large selection of the document is exported through the Save for Web and Devices option.
On first impressions it's easy to think that such a large image is going to be too large in filesize for website design, but in actual fact the outcome is only 30kb with optimised jpeg compression, balancing between image quality and overall file weight.

The main content area is then exported, making another large selection including the whole centre panel along with the visual effects such as shadow and transparent border effect. The upper sidebar is also included in this area due to the complex use of transparency

To allow the webpage to expand vertically, a section of the lower content area is exported that will repeat vertically.

To finish off the layout of the webpage the footer area is exported, a selection around the image is made that matches the overall width and includes the grey gradient of the graphic.

In order to export the sidebar, the main content area is temporarily stretched vertically.

Because the concept makes use of individual sidebar sections the graphic will make use of two images – an upper section that is long enough to accommodate more than the sections will ever be realistically, and a small bottom section that crops off the long section into the individual panels. This is a similar approach to the sliding doors techniques used on menus.

The long slip is exported, including the transparency effects of the border in the selection.

Next up is the thin bottom section that finished off the sidebar section.

A thin slip is exported from the menu background, this is another image than can be repeated horizontally depending on the length of the menu text. The transparency of PNG files is taken advantage of here to allow the menu to be overlaid on the varied colours of the background.

The individual post areas on the concept use the same border effects as the sidebar, but because they don't overlap onto the background and don't have any complex transparency they will be made purely with css.

The lower section of the content panels however use a slight blue gradient, this can simply be exported as a thin strip that will be repeated horizontally.

The little comment bubble, arrow, rss and email icons are then individually exported along with the blog logo.

The complete concept has now been separated into individual images, a total of 13 images will make up the page, five of which are layout specific. The complete size of the combined images comes to 95kb, which even for the minority still on dial up will soon download when viewing the webpage.

A html webpage is setup to contain the structure of the layout. A separate css style sheet is linked from the document which will include visual rules for the design.

A div with an id of container is added which will allow the content to be centred and one of the backgrounds to be fixed to. Remember we also have a thin background image that will repeat vertically, until CSS3 is more widely supported a second div is required to place this image onto.
A H1 tag is used to state the website name, and will also be the base for the logo. The upper navigation and rss/email subscription options are laid out as unordered lists.

The CSS for the layout of the page is then written, starting with a reset to remove any browser defaults. The large background image is attached to the body and global font style setup. The container, content and footer divs are also styled with the appropriate background images.

Continuing with the CSS styling, the code for the design of the individual elements is then added, setting up the header one and unordered lists to display the appropriate images and colours.

With this initial coding in place the html can be previewed in the browser, so far the layout is displayed centrally on the page with logo and navigation in place.

Next up is to flesh out the post snippets, using a container around the post will allow the styling of the panel as we mentioned earlier, instead of using images.

CSS styling for this section of the page adds the colours and border to the panel and sets up the styling of the post title and paragraph text. With the site being related to web development, the majority of the viewers are likely to be Firefox users, this means we can use the moz-border-radius to display rounded corners on the panel as per the original concept. For other browsers this will simply degrade to a square corner.

Testing this in the browser then shows this styling for real, showing how the use of CSS background color and border can recreate the original effect from Photoshop.

The html structure for the sidebar is then laid out, using a container on the sidebar sections allows the use of the two background images that make up the sliding doors technique for the expanding of the sidebar content.

More CSS styling is added to manipulate the html elements, customising the sizing, colour and typography.

The sidebar styling can then be seen in the browser, notice how the long image used for the sidebar sections is cropped shorter depending on the length of the content within them.

Next up is to quickly go back to the post snippet and add the read more option and comments information.

Styling for these elements is then added, using specific classes on the two paragraphs allows the comment bubble and read more arrow icons to be added as background images.

The panel is then complete and viewable in the browser, the repeating of the thin background image gives the impression of a solid panel on which the text is set.

The overall layout is then complete, although still in concept stages the page can now be viewed in the browser in order to gain a feel of how it will display at varied resolutions as well as simulating the hover effects of the links.

As always with web design, once the site is created the work never stops there. Testing in Firefox, Opera and Safari went without issue, however Internet Explorer had other intentions.

A few modifications to the CSS styling soon ironed out the problems. Changing the styling of the navigation from an inline block to it's default block format and adjusting the floating did the job.

The subscription options seemed to be suffering from the stepping problem as commonly experienced in IE, this is simply fixed by adding display: inline to the list items.

Soon after implementing these changes the site was back to normal and ready for construction as a WordPress theme, where a little more styling will be required to cover the generated coding and of course, the inner page with comment area.

While it would have been nice to explain every line of code in more detail, the article would have lasted forever and probably become quite repetitive. Hopefully by viewing the complete html and css you'll be able to see how each element is constructed. Check out the completed webpage.