Scripts.Indisguise.Org - a hobbyist's blog and scripts archive

Here’s a fabulous resource that I just couldn’t not blog about: a set of Web 2.0-esque Photoshop layer styles for buttons, from Navdeep of Deziner Folio.

I tried it out and it looks and feels fabulous — definitely a must if you work with user interfaces on the Web and the like. I’m not normally a preset style user, but this is a great resource: there’s a lot of variations of the look and feel and color of each style in the set. It really does speed up button creation, and gives me a lot of possible ideas for new looks of certain scripts. ;)

I’m resurfacing to post a quick shoutout for everyone who’s into web design: you should all take the 2007 Web Design Survey at A List Apart. You should take it if you’re a web designer, so that we know who we are. You should take it even if only for the prizes! It’s quick and painless and a breeze to go through. They’re releasing the results after the survey ends on May 22 this year, so get your answers in before the deadline.

It’s already the sixth from where I am, but the CSS Naked Day practice is interesting and something I would have done if I had found out about it earlier. Basically, it’s to promote Web standards, using correct/proper semantics in your markup, and making sure that even without your clothes—I mean, your design—your website is still, well, readable.

I remember hearing about this last year, but it slipped my mind that it would happen again this year. I shall remember next year! Especially since I’ve been increasingly (over the past year or two) moving more and more towards the separation of content and design and making sure I follow current Web standards. I feel that everyone should! Standards are there to make sure we all understand each other; what’s the use if we don’t follow them to the best of our ability?

Here are five tips to start you off on the journey towards following Web standards:

1. Use Chris Pederick’s Web Developer Extension. Believe me, it helps a lot. You find out a lot of detail about the styles you’re using, about how your markup elements overlap, plus other nifty functions such as resizing your window (liquid layout love ♥) and removing CSS to see your website naked ;) (Internet Explorer users, you might want to check out Internet Explorer Developer Toolbar. It’s in beta 3 already, and can run with IE6.)
2. Use standard XHTML tags over DIVs. This is something I’m continually moving into steadily, but already I’m seeing the reasons why it’s better to say <h1>My nice title</h1> than <div class="title">My nice title</div>. Yes, I used to write my code that way because hey, you work with an element that’s devoid of styles, and that’s easier. (DIVs just have the display: block style.) But what happens when there are no styles whatsoever? Everything then becomes the same. There’s no distinction between your headings and your text.
3. As a follow-up on the above, reset all your elements’ margins and padding to zero. This makes for tighter control over your design, as all XHTML elements come with their own preset margins and paddings. This reset can be done by adding the following on the top of your stylesheet:

   * { margin: 0px; padding: 0px; }

4. Validate your markup. Yes, this is important. This is important because valid markup really makes cross-browser compatibility easier. Yes, Internet Explorer will always try to do things its way, but valid markup means you’re following set standards. There are four types of markup standards you can follow: HTML 4.01, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.0 Frameset. For an explanation on these, you can look at W3C’s HTML and XHTML FAQ.
5. Learn, learn, and continue learning. The Web is a constantly changing thing, and new techniques and ways of doing things emerge quickly. Try to keep abreast of these changes, and weigh the pros and cons of implementing these changes; after all, we need to make sure that a complete switch won’t alienate readers/visitors.

Good luck on the journey, may you find it as enjoyable as I did. ♥

One thing I’ve come to realize when I design websites and implement layouts is that a big chunk of my enjoyment in the entire process stems from the challenge of actually implementing some seemingly tricky design. There have been times when the end result of a layout may be rather simple-looking, but I end up prouder of it than the usual because of what I did to implement said layout.

One recent example is the new skin I made for It’s a Soul Thing: the Taylor Hicks fanlisting. At first glance, it’s nothing very exciting or innovative, but what made the implementation interesting for me was the the following criteria/features of the layout that I wanted:

• background image is uneven — it’s different for either side of the header image, but:
• the layout has to be liquid and compatible for all screen resolutions equal to or greater than 800×600,
• the layout mustn’t use tables to lay out the design of the site,
• the menu must be text-based, no image maps, and
• the site must be cross-browser compatible.

With all those in mind, I bring to you a mini article/tutorial of sorts on what I did to implement the layout.

Important note: I may talk in detail about how I implemented the layout here, but that doesn’t mean that anyone can use my layout for their own websites. Feel free to learn from my method, but don’t steal.

All images (or almost all) are thumbnails — click on them to enlarge.

Read the rest of this entry »