Hindi Society Site Design Notes
The Hindi Society (Singapore) Web site has been designed using XHTML 1.0 and CSS. Use of tables has been kept to a minimum (as you'll see if you do a View Source, and could actually have been done away with altogether: the Email Form was done without tables). Pages have been validated with W3 XHTML Validator (XHTML) and W3 CSS Validator (CSS). The Site has been tested with the following browsers - IE 6.0, 5.5, IE 5.0, Netscape 7.0 and Opera 6.05 (last still giving some minor problems); pages appear best with a screen resolution of 1024 x 768.
The inspiration for using CSS/XHTML came from a SitePoint article (HTML Utopia: Designing Without Tables Using CSS, Julian Carroll, 12th April 2001 - link to article below) I came across by chance while looking for Web-page design guidelines. I read the article through, fell in love with the concept of separating content from formatting, made up my mind to take the plunge and didn't look back. (Of course, it helped considerably that CSS was easy to learn, especially with all the help out there - see below.)
Two great side-benefits of using CSS are that the pages load more quickly - because HTML file sizes are smaller when you use external style-sheets - and are much easier to maintain.
A number of sites - especially AListApart and SitePoint - proved invaluable in my pursuit of design Utopia. Here are links to the articles I found most useful:
- A List Apart
- CSS Beyond the Browser - Going to Print, Eric Meyer, http://www.alistapart.com/stories/goingtoprint/
- Flexible Layouts with CSS Positioning, Dug Falby, http://www.alistapart.com/stories/flexiblelayouts/
- From Web Hacks to Web Standards - A Designer's Journey, Jeffrey Zeldman, http://www.alistapart.com/stories/journey/
- Practical CSS Layout - Tips, Tricks & Techniques, Mark Newhouse, http://www.alistapart.com/stories/practicalcss/
- To Hell With Bad Browsers, Jeffrey Zeldman, http://www.alistapart.com/stories/tohell/
- Builder.Com
- Get Started With Cascading Style Sheets, Matt Rotter & Charity Kahn, http://builder.cnet.com/webbuilding/pages/Authoring/CSS/?tag=st.cn.sr1.ssr
- CSS Reference Table, Matt Rotter & Charity Kahn, http://builder.cnet.com/webbuilding/pages/Authoring/CSS/table.html?tag=st.bl.7258.dir2.bl_table
- The CSShark Answers FAQs
- Frequently-Asked Questions, http://www.mako4css.com/CSSFAQ.htm
- Glish
- CSS Layout Techniques: for Fun and Profit, Eric Costello, http://glish.com/css/
- HTML Goodies
- CSS Tutorials, EarthWeb, http://www.htmlgoodies.com/beyond/css.html
- Sitepoint
- An Introduction to Cascading Style Sheets, Matt Mickiewicz, http://www.sitepoint.com/article/43
- Build Your Site Navigation With CSS, Larisa Thomason, http://www.sitepoint.com/article/1033
- CSS Is Easy!, Kevin Yank, http://www.sitepoint.com/article/309
- Fancy Paragraphs With CSS, Nigel Peck, http://www.sitepoint.com/article/942
- HTML Utopia: Designing Without Tables Using CSS - Parts 1 and 2, Julian Carroll, http://www.sitepoint.com/article/379
- Introduction to CSS Shorthand, Ove Klykken, http://www.sitepoint.com/article/966
- Practical Web Design: Fundamentals of Web Design Parts 1 And 2, Mike Tuck, http://www.sitepoint.com/article/990
- XHTML Web Design for Beginners - Part 1, Nigel Peck, http://www.sitepoint.com/article/1010/1
- XHTML Web Design for Beginners - Part 2, Nigel Peck, http://www.sitepoint.com/article/1010/2
- Miscellaneous Sites
- Adding a Touch of Style, Dave Raggett, http://www.w3.org/MarkUp/Guide/Style.html
- New York Public Library Style Guide, http://www.nypl.org/styleguide/xhtml/guidelines.html
- W3C Webstandards Organisation, http://webstandards.org/act/campaign/buc/tips.html
Design's pretty straightforward, as you can see, except that I decided to place the links on the right instead of the left. After all, most people are right-handed and read from left to right; why are links usually on the left?
Pages are hand-coded. I did start off with HoTMetaL PRO 6.0, a terrific product, but after the initial period of fumbling around with unfamiliar HTML tags and syntax, I found it more natural to add/modify tags manually. YMMV (Your mileage may vary.) Good to have a HTML and CSS reference handy, though.
I used the TextPad 4.0 text editor, available from www.textpad.com. Textpad's a very nifty editor that hugely simplifies updating millions (ok, tens) of text files with the same changes. With all the design and layout changes I was testing, I don't know what I would have done without it. Also, its Find and Replace functions, allowing the use of Unix regular expressions, are a marvel to use.
CSS, of course, is a little more daunting the first time around, so what I did is look at the Sitepoint and AListApart Web sites and source codes to try and figure out what was going on. (Why reinvent the wheel?) Believe I have, for the most part - the Hindi Society site doesn't quite require very complicated layouts or state-of-the-art coding, client-side or server-side.
The 'fancy' graphics elements you see were created using www.cooltext.com (text headings) and Xara Webstyle 3.1, from www.xara.com (buttons and graphics links). Form handling is very competently taken care of by FormMail.pl, Ver 1.92, from Matt Wright's Script Archive, www.scriptarchive.com.
The page background is taken from a picture, suitably blurred and lightened, of the Hindi Centre khadi uniform.
Suggestions for improvement are welcome.
Vinay Kumar Rai
First Principles Consulting
9th April 2003
