Description

The design above shows a web coded version of pages 128 - 129 from the (printed) Ikea catalogue for the first half of 2008. The original scanned pages are featured along with this text. Notice the tear mark where this double paged spread was removed from the magazine for scanning.

I chose this design to turn into a web page because it's something that by its nature hasn't been coded before (and so I couldn't just copy); it offered a challenge as I wasn't sure if it could be replicated faithfully on the web. Also, as far as I know there was no precedent set on how to go about it.

Coding

Initially it's important to determine the meaning of the page. Ultimately the text content on this page describes the items on sale. xHTML offers a number of ways to code this list of Title/Description content, but in this case I decided to place the text inside a 'definition list'. It is on this meaningful markup that I based the style (visual design) of the page.

Clever Stuff

• The first thing you may have seen is that when an image is hovered over using the mouse, the corresponding description is highlighted in the list.
• On newer browsers the definition list has numbers despite not being coded inside an HTML list (normally a list is required to produce bullet points or numbering of any kind). This is done using the CSS2 command 'counter-increment'.
• I've placed the text in a fixed height container meaning it needs a scroll bar. This is a compromise enabling the text to be readable (if the default size was any smaller it would need to be constantly resized up).
• Concerning the previously mentioned highlighted borders around the images, you may notice that some borders disappear behind adjacent products. This is intentional as some of the products do sit in front of their neighbours.

Designing

The style (colour, layout, image) on the page comes completely from CSS (Cascading Style Sheets). This aids the accessibility and usability of the site because if the style sheet is switched off (e.g. in Firefox select "View >> Page Style >> No Style") the text content can be viewed on its own. The download size of the page would be reduced as, the way this page is coded, there would be no images loading without CSS.

Images

The images on the page are reduced versions of the originals, however they are still large in file size. The largest is 52Kb and the smallest less than 4Kb. I guess this seems excessive, however be confident that I've used Adobe Photoshop to reduce the image sizes as much as possible without sacrificing quality. This would've been an issue for other types of pages (e.g. a homepage) aimed at a different audience, however in this instance and as a one off example page, I think it's justifiable.

I've processed all of the images using Adobe Photoshop. They all needed scratches removing and, as mentioned before, resizing (pixel and file size). The images spanning the central fold needed special attention and some creativity mainly using the 'Clone Stamp' and 'Polygonal Lasso' tools in Photoshop. You'll probably be able to make out from the thumbnail of the original pages that I've had to recreate bits of the products in order to seamlessly stitch the two sides together. Nowhere was this more of a problem than on product seven, the circular earthenware bowl.

Layout

Once I had the images copied and processed I mocked up the layout of the page in Adobe Fireworks. I settled on a width of 960 pixels, large enough to get the pictorial detail in but small enough to fit on the average computer screen ("Currently 1024×768 Extended Graphics Array is the most common display resolution", Wikipedia). For info: I don't normally work in pixel width, usually I use EM or percentage based sizing. This method of sizing just seemed to fit this case.

The layout of the page uses 'absolute' positioning which means it can't be resized. Although on many pages this would've been a cop-out and could've presented accessibility problems, there is method here. The original page is image heavy and sparse on text. The images are situated next to each other with no room for movement. Using the graphic elements I had to start with, where the products disappear underneath one another, that's the end of the image. As mentioned before, the text can still be resized and the page can be viewed without style switched on. Also due to its semantic code, the page would make sense to screen reader users.

Functionality

In the future this page could include the product microformat (when the standard is complete) for extra functionality. An upgrade to this page would include JavaScript that scrolls the list to show a product's description when the user hovers over its image. It would also be good to get the highlight to 'hug' the edges of each product, at the moment the square borders present a small amount of ambiguity.