Yasmeen Ghauri
My first steps in web design, back in 1994, were all around fashion models. I was 20 at the time, starting 2nd year at Beg University, and it was a jolly good time of super models like Cindy, Paulina, Linda…and Yasmeen.
At first, I had a web site featuring 10-12 of them, but soon realized that it’s too much of a work for the perfectionist side of me. So I focused on just one, one I found totally mesmerizing.
The one and only. Yasmeen Ghauri.
There were several incarnations during past ten years, and current one is on-line at www.Yasmeen-Ghauri.com, built as XHTML 1.0 Strict and partially powered with MovableType.
Since this is a pet project, I could do whatever I wanted. As target browser, I chose my favorite, Mozilla Firebird and CSS2 was built according to Mozilla support. Of course, I had to support IE/Win in a way, but doing only what I absolutely had to do. No more, no less.
Image-replacement is the heart of the new layout. Site is totally accessible in any browser, be that latest desktop browser, PocketPC2002 handheld, or something else. Only those surfers that set images off will not be able to use the site, as LIR is inaccessible for them. Then again, why would anyone surf the site about beautiful model with images off. :)
Site really has just one column. On some pages it seems there’s more then one - an illusion created with absolutely positioned boxes. I wanted clean, simple layout, which will emphasize the content, and use image-replacement to spice-up the pages with various Yasmeen photos.
I had an existing web site which used table-based layout, which I completely discarded and started from scratch, as an experiment: how to properly create valid, structured document, from planning to delivering, which will be usable on all platforms. At first, I wanted to create a solid base, which could easily be expanded later.1
Sad fact about web site design is that often you need to create a design without having the actual content in place. In this case, I built my own content, so I first entered all of it. Phase two: use appropriate markup without a single hint of style.
General layout
Yasmeen Ghauri, as the site name, is the obvious H1. After it comes the unordered list of site sections. I considered placing skip navigation link, or moving it at the page bottom, but decided to keep it below the main heading. List is short, it fits on half the PocketPC2002 screen, and skip navigation link would look like a nail in the head. Although it’s considered good usability practice, I think that it should be avoided when possible, because it has no structural meaning at all. If you have a long navigation, first consider re-arrangement, and then think about placing such link.
Section name is natural H2.
Home page content is Movable Type output. MT is generating just the news part which is included in the ASP page using server-side include (SSI). MT templates are also structured accordingly, with entry title being H3, and the date and entry body marked as paragraphs.
When you look at the home page unstyled, you clearly recognize headings, navigation and paragraphs. Core (about the site) and Talk (news and articles archive) are similarly built.
Motions section features video materials. I have few dozen clips, but expect to have much more - I needed to divide them into sub-sections to avoid too long pages, but I didn’t want to do it now, as some of those sections would have one or two clips.
Semantically, this is intra-section navigation, so unordered list does the job again. Each sub-section has its own heading, marked as H3, continuing the page flow.
Each video is described with its title, general information and short summary. Title is H4, and rest of the data are paragraphs.
Walls section has its own sub-navigation, but much longer than previous ones. Photos are divided in four gallery rooms, and each group has a certain number of walls (ok, forget the fact that room usually have 4 walls). I used ADxMenu for it, so I used 2-level unordered list. And this is a long list, 2 desktop screens long.
Therefore, it goes below the content, and the page flows nicely. Pick the wall, checkout pictures, pick another wall. Repeat.
Foundation set, walls erected. Now, we need some doors and windows, and some paint. In the next post.
1 If you load it on handheld device like Compaq iPaq, all of it displays nicely, without a separate page. Newer devices, based on PocketPC2003 load fully-styled version - I have yet to find time to code handheld style for them. PPC2k3 is not a problem - that is basically identical to IE5.5/Win. Palm 5 browsers are problem. I could only test on simulator and its browser partially support styles (where he ignores handheld media and goes for screen), tries to render them, but fails miserably on some much used stuff. I hope newer version of it will come up soon.