Skin Chooser

Site Info:

Page Design

Document Specs: XHTML 1.0 Strict; CSS 2.0; Javascript

System Recommendations: CSS supporting browser, Javascript & cookies enabled

Best Viewed in: Mozilla Firefox

Tested Browsers: IE 5.0+ :: Mozilla 0.9+ :: Opera 7.0+ :: Netscape 6.0 :: Konqueror :: Lynx

 

Designing and creating RamPages has been a really great learning experience. When I started, I was a rank layman with nothing but a meagre knowledge of html. A week and several articles, online references, forums and discussion boards later, I have become a firm believer in the concept of separating style, structure and behavior. I do have enough previous exerience with chalking up a minor website, so I must tell you that after the mess one had to wade through in the markups of earlier pages, CSS is the logical way to go.

 

My pages are hence written in valid xhtml 1.0 (strict) and css. Hopefully, the minimalistic design will keep it simple and elegant. However, in no way does that mean that css is not capable of awesome designs. You'll find some of those at csszengarden, definitely a pointer to where css based designs can take us.

 

The one major hindrance to a mass exodus to css layouts is the issue of browser compatibilty. I was shocked by the total irreverence shown by different browsers in following a standard. Designing a page becomes such a haltered process that you lose the very flexibility that you hope to gain. I really would like to point a finger at our dear friend IE in this context. It is a pity that despite its pathetic inability to render stylesheets according to specifications, it forces itself down designers' throats. One simply cannot ignore the huge user base that will be affected if the design breaks in IE. For eg, almost 55% of my viewers use IE6. Thankfully, a couple of these problems are being addressed in IE7. It's about time that all the browsers got their act together and standardised their interpretations & renderings of stlye sheet rules so that designers can stop worrying about cross-browser hacks.

 

I have tested my pages in several browsers on both Linux and Windows platforms. I would like to add a 'Best viewed in Firefox' banner to this page. The navigation style was inspired from Adam Kalsey and Silver Orange. I did manage a couple of improvements over Kalsey's tabs. The sub-menus are now positioned relative to the main menu, and the design can stand considerable font-resizing.

 

To do my little bit to push css as 'the path to enlightenment', I have made my pages skinnable. You should be able to select different skins if you have javascript and cookies enabled. You will find the pull down menu at the top right of the page lists the available skins.

 

There are several ways to set up a skinnable page framework. ASP and PHP snippets are available in the csszengarden faq section. But unfortunately, my univ domain doesnt permit server-side includes. I have hence settled for this neat javascript fix explained beautifully by Paul Sowden at ALA. Modified it to include pulldown menus and image switching. The script switches relevant images as the style changes. Which is why I would not advise changing the page styles from the browser menu (wherever available). This doesnt update the images. Id be glad if you could suggest an alternative fix to the whole issue. Do pop me an email anytime you have any ideas.

 

I havent been able to do comprehensive cross-browser compatibilty testing as I dont have access to Mac machines and several older browser versions. I will be grateful if somebody can give me a bug report for the browser(s) they use . I also wanted to share the markup, styles and scripts that make up this page design. These design files are under a derivative, share-alike license from Creative Commons. You are free to use them as-is or to modify them as you please. However, I will appreciate it if you can mail me or leave a message .

 

 

Get Firefox!