Sunday, July 24, 2011

Khalida.biz website - the making of.. part 1: menu setup

Hi peeps! As promised, for the fellow web geeks :) here is a short rundown of how the new Khalida.biz website was designed and created.


First of all: the setup of this site is pretty simple, which was a very conscious decision, as the old website(s), (there was a separate one for the school) was becoming too hard to maintain in between traveling.

I started with mapping out the menu's and deciding on languages (only English for now) before creating the background and menu pages. To be able to embed the class information pages from the school website AND keep the pages themselves relatively narrow (ie: easier to read on phones) I had to work with sub-menus this time.

I also decided that I wanted to keep working with plain .html for the webpages and refer to .css files for the layout, as I did with my previous websites. This makes the pages themselves a bit easier to read and maintain.

For Khalida.biz the menu map looks something like this:

Index
Khalida
 Classes
 Schedule
Photos
Video
Contact
Shop

I wanted to use a different background/header for each of the main menu items, but keep the background the same for the sub-menus, so the setup above meant I that for the website design I needed 8 pictures, to create 8 backgrounds, each with their own .css file.

Every page would then link to the .css file with the correct background (for instance all the classes pages would use the same .css file 'purple_classes.css')


So, that's that, menu decisions were made, and I happened to have 8 pictures ready that I could use from the DVD Shoot in Montreal described in this blog post :)

In the next blog I will show you how I came to the actual design you now see on the website.

No comments:

Post a Comment