Recently in Web Design Category

Every now and then this happens.

A new colour scheme catches my eye. Some new-fangled idea. Sometimes original, sometimes borrowed. Sometimes frankensteined.

But somehow every time I put together a redesign, I’m hesitant to mix in graphics, as if the addition of images would somehow mar a purely (or mostly) textual design. It’s an unnecessary constraint I place upon myself, but it’s a challenge to create compelling design without any images.

There are many elements I’ve yet to bring back into the site, not to designing mention the template for individual posts. As usual, you’ll have to bear with the construction that’s going on.

Thanks for sticking around.

Really, thanks.

After more than a year of carrying my child, the Ministry of Education website is finally alive.

Quite a few people have come up to me, patted me on the back and said “thank goodness that’s over, huh.” I’m immensely relieved that it’s out because the coordination of a million moving parts wasn’t an easy task at all, but a good website is one that is never done. It grows, evolves, gets better with age.

In the 2 days that it’s been live, I’ve restructured information, tweaked font-sizes for the printer stylesheets, made some things more apparent and some things less so, all based on the feedback I’ve received from people using the site. I’m glad the site is finally free of the encumbrance of the rather immobile content-management system it was chained to.

The best part about the launch thus far has been interacting with real people who use the site. I’ve managed to turn comments, suggestions and complaints into real action on the website, and a number of these users were delighted to see their needs met almost immediately. We’ve been working on fictional personas, and it’s not the same. Now when your users are living, breathing people, the website really lives up to its intended purposes of serving its community.

I’m dog-tired, but in a happy way. It’s been a good week for web standards in Singapore. I gave a talk at Opera Software’s Web Standards Conference alongside mobile web extraordinaire Michael Smith who fascinated me to no end with what he could do with the Opera Browser.

I’m a believer.

Just a few hours ago we had the first Web Standards Group meetup. It totally rocked. The geek vibe was definitely there. Talent met ideas; I actually had to shoo people out of the auditorium at 10pm.

The question quite a number of people asked was, “so when’s the next meetup?”

I take that as a compliment - that the meetup went well.

Soon as I get my strength back. I promise.

If you’re a regular reader of this blog you’d already know that I’m an advocate of Web Standards. If you’re a web standards nut, or if you’re interested in finding more about web standards, we’re having a meet up.

One of the more awkward tasks at work is having to choose photos for web content because the default CMS template demands one. It is not always easy to depict information pictorially, especially when the visuals are confined to photography available in your media bank.

It’s nice to know the media heavyweights face the same problem.

BBC’s article on “US Iran report branded dishonest” was about how the International Atomic Agency found the US’ report on Iran’s nuclear programme inaccurate. The photo shows a bunch of middle-eastern men dressed in scrubs looking over a silver platter, with the caption “Iran insists its nuclear programme is for peaceful purposes”.

Looks more like glue sniffing to me, but who am I to say anything. There’ve been equally irrelevant photos put up on sites I’ve managed simply because a photo had to be there.

Gamespot redesigns in CSS. Very, very spiffy.

Another reason Microsoft shouldn’t own the universe: MS Word HTML crapola.

Do not, and I repeat do not, arrange your layout in MS Word, then cut and paste the finished layout into the CMS. The ratio of crap to good content MS Word produces when it comes to HTML is, as Shakespeare puts it, “two grains of wheat in two bushels of chaff”.

The words HTML should never have appeared in any menu of MS Word. Why, Bill, must you continue to torment us with bloated coding?

Wow. It’s been 2 years and 2 weeks ago when I tried preaching web standards to the business director or a large local IT solutions company, and failing so miserably it was blogworthy.

Now armed with 2 years more experience but equally naive, I rambled on about how designing in line with web standards streamlined the entire web production process. This time, the shell-shocked victims of my enthusiastic onslaught were my new colleagues.

We’re a small group, and we manage both the internet and intranet of one of the largest organisations in Singapore. We spend a lot of time trying to get content to “look right”, employing all sorts of presentation hacks. Maybe if I slot two <br>s, or &nbsps into the empty table cells. That sorta thing.

The audience makes all the difference. Web standards, till today, is still a hard sell to the businessman. They just want their site up. They don’t really care how you do it. Sure, higher pageranks and faster product development cycles are good, but hardly quantifiable in dollars. In Singapore, an online presence is thought of as little more than a namecard. It’s terribly shortsighted, but we aren’t known to be very forward-thinking a people.

Here, to this audience, web standards offered something very, very prized. Less work, more control. And here in a government organisation, consistency in presentation is paramount. Web standards offer all that. A perfect fit.

I have much to thank God for. And I know that He is telling me to be as, if not more, enthusiastic about my faith as I am about web standards, my Macs or photography. After all, all these mundane details mean nothing if we haven’t found the purpose of life itself.

One of the things I cannot stand about Tomorrow.sg is the manner in which they link to original articles. Instead of hyperlinking phrases like “Brian says” or “In Grace’s article”, the only hyperlink pointing to where you want to go is called “link”, conveniently placed at the end of where they quote the original article. Doesn’t anybody read Jakob Nielsen anymore?

Phrases like “click this” and “link” should never be used as hyperlinks, because they are so utterly lacking in meaning.

You’re at a restaurant and you need the bathroom real bad. Only in this restaurant, instead of a sign saying “Restroom” with an arrow pointing to where you need to go, there’s a sign saying “pathway” with an arrow pointing somewhere. You are expected to use your nose, smell the air, and draw contextually that the sign means to lead you to a stinking loo where you will find the relief you need.

Come on guys. Some of you are in the industry for crying out loud.

Most of us web designer folk know better than to specify obscure fonts in our CSS files. We know that a cocktail of helvetica, verdana, arial, sans-serif ought to hit home on the majority of operating systems out there.

What of Chinese fonts? What’s the standard on those?

Ok, we know that The Straits Times puts out its online articles for a week before locking them out of the public domain in order to solicit paying subscribers. That has been blogged to death.

But am I the only one who thinks the site is teh SUCK? Who the heck is in charge of this online mess? Fire the idiot. Honestly.

Let’s look at it from a design standpoint, then from a usability standpoint. Here’s a popup of a screenshot of the site (100kb, 1028 x 768 jpg), taken today.

Feel our pain. If architects had to work like web designers. Brilliantly put.

Biblegateway becomes XHTML compliant (transitional), fulfilling some lesser known commandment.

The new Bible Gateway (still in beta) goes tableless while maintaining the familiar look and feel.

I can’t believe I woke up last night thinking of Sliding Faux Columns.

I love it when the subconscious is working, but it scares me sometimes.

I’ve been thinking “redesign” for some time now. Not too long ago, I used to jump into it, working things on the fly. Now older, wiser (and tireder), I let ideas settle and take root before putting my hand on the plough.

I was at an acapella concert two days ago and learnt something about design. When you ask your audience to clap along, don’t change the tempo on them later in the song. The guys that kept clapping gave you the most support; it’s not right to let them down later.

This in mind, I know that there are some of you out there who still use my older stylesheets. I also know that you’re probably the ones who’ve been reading my rather unexciting life for quite some time now, and that it would be wrong not to cater to you just because I felt like some change was good for me.

What’s good for me may not be what’s good for you. But what’s good for you is good for me. That is, if you like it here, you’ll stay. And you staying is a good thing because I’m going to put Google textads all over the place I really hate to lose friends, however ethereal the nature of the relationship.

So I will be continuing my support of my previous stylesheets, right up from my first CSS layout, as much as I can.

If you have any good ideas or points of inspiration for a new design, drop me an email or leave a comment.

There’s a mini-storm brewing. Web Standards enthusiasts in Singapore are moving closer towards some form of collaboration. We have a party of 8 now.

Interested in CSS and XHTML? The future of web design? Join us.

For more information, see our website…

A feasible method of offering your audience more information, it loses its effectiveness quick when placed in a medium other than the Internet. When placed on a print ad, it requires for the reader to switch mediums in order to access the additional information. It becomes a much more tedious chore than just clicking on the link. Your information better be darned enticing.

It’d require me to fire up my computer if it isn’t on, open up my browser and key in your URI (or is it URL?). It’s a process I do everyday at work, so I guess I’ll wait till then.

If I remember.

Argh!!! Blink tags gone crazy on the Rover Ring Tour (in New Zealand) webpage.

Curses, Spacefan for ever introducing this link to the rest of Middle Earth!

Yes I’ve been up to my eyeballs designing what seemed like a rather simple site for my new employer. Of course, when you throw in tableless layouts and proper semantics, things start getting a little not-so-simple.

Cross-browser testing takes a huge chunk of your time when you’re going pure CSS.

“Oh it doesn’t work in IE6/PC? Let’s see if the Tantek Box Hack will work”.

“Something not where it should be? Let’s see if we can have that positioned absolutely”

What? IE2/Commodore64? Pleeease. Do us all a favour and update your browser.

Honestly, I’m almost ready to throw in the towel and quit the “Web Standards community”.

When I first saw the newly redesigned Blogger, I could have sworn I saw Douglas Bowman’s spectre. It had the same feel as Bowman’s Mozilla.org redesign. The soft brown shades. The dark blue top is patented Stopdesign blue.

The new rounded corners and generally friendlier atmosphere is a true amalgamation of Google, which acquired Blogger not all that long ago. Ev has a slightly edgier feel, sort of like alternative music. But Blogger, now with Google’s considerable muscle behind it, is nothing alternative.

I’ve written about how blogging-tools-turned-CMS like pMachine’s Expression Engine, WordPress and MovableType have a fierce head-to-head battle lined up ahead.

Blogger doesn’t yet compete on features, but is aimed at the beginner to intermediate blogger. If you remember how Google began, and the vast functionality it is offering as a search engine now, it is almost safe to assume that Blogger will work its way to the masses before adding more features to attract the small trendsetting elite.

Heck, template designs by Dan Cederholm, Todd Dominey, Dave Shea and The Zeldman made me to dig into my old paid Blogger account.

Update: Matt, being the hawkeye that he is, reminds me that Dave Shea redesigned Mozilla, not Doug Bowman. I must still be living in bizarro world where Dave is Doug and Doug is Dave.

I hate IE.

Dan Cederholm posts another quiz, this time on nested lists.

I’ve been following his “simple” quizzes since it began, and found it to be exceedingly useful, both in terms of problem solving as well as piquing the thought process on the right way of doing things and the less-right way.

His quiz hit home this time. I’m working on a site (which by the way uses his navigation bar via the Listomatic) and came to a point where hns and unordered lists collide.

In practice, h2 is a subset of h1, which would make it a list item under the h1 right?

The lines begin to blur. We have Tantek to thank for this mess. He and his “everything is a list theory (only using heading elements for typographic hierachy) has me all muddled and tied up in knots.

My situation is this: Opening hours come under stuff about the company. Not only do I want the heading “Opening Hours” hierachically placed under “About the Company”, I want the whole chunk of text that tells you exactly when we’re open to come under it as well. A paragraph tag under a heading element does not inherit its place in the hierachy right?

Someone call Tantek to sort out my life, please.

It’s probably common knowledge that I’m an an Apple advocate. Despite the fact that my programs on my Powerbook quits unexpectedly (programs don’t crash like in the PC world) and that text sometimes run on top of the user interface (kernel panic). Yeah, I support Apple because I paid a lot for one. That, and I’m afraid of the physical beatings I’ll receive from Mac users.

The smallest things annoy me though. Apple is supposed to be the pioneer in creating good user interfaces. I tried to print something in landscape mode the other day. Page setup, right?

It took me close to forever to realise that the middle icon (circled) meant landscape. In my world, the paper rotates, not the content. I don’t print landscape because I want to read English vertically like ancient Chinese texts. I print landscape because I want the paper to accomodate my content.

Show us your legendary response speed Apple. I’m guessing this will be solved only next year, when you decide to charge us another hundred or so for 10.4.

I am absolutely smitten.

I’ve toyed around with red colour combinations in my web designs and found it to be challenging, but doable. The corporate colour now is green. I’ve been searching high and low and have not found an attractive site that uses green effectively.

Oh, by the way, the corporate colour is a dark green, not a light one. So the great Hicks Design is out.

There’s also the issue of accessibility for the colour-blind, who perceive dark green as dark grey.

No better reason to switch to web standards.

Azul Interactive insists that I use IE 4 in order to surf the site.

In my last redesign of Tribolum, I noted that while content could be separated from presentation, the order of content affected the presentation. I had wanted to be able to float Tribolum’s sidebar left or right regardless (note to self: no such word as irregardless) of whether it appeared before or after the main blog content in the markup.

It is comforting to know that even Zen Gardener Dave Shea struggled with the same problem. The difference is that when Dave hollers, people answer. When I rant about web design, Faith (and most of the rest of you) run away screaming as if blood were about to ooze from your eyeballs.

Ryan Brill managed to turn this into this using a negative margin solution which I won’t even pretend to understand. It works.

Don’t know if I’ll ever use it, though. Much as I love hacks and workarounds, I’m cutting back and waiting for the browers to get their act together.

It takes two to perceive. Like I said on Dave Shea’s post on browsers and font-sizes, good eyesight is every bit as important to enjoying a good sunset as a good sunset.

I fired up Opera on my Mac to do a slightly more intensive cross-browser testing and found that Tribolum’s navigation bar didn’t look as well laid out and styleswitcher didn’t work. Puzzled I went to Eric Meyer’s site. The sidebar there didn’t line up. Half of Mezzoblue’s header was missing and his daily links had a line height of 0.5. StopDesign takes just about forever (Safari loaded it just fine). Even Zeldman’s site got messed up.

After Vanessa discovered Redemption (a fitting name for the discovery), I was hard-pressed to find another Singaporean web design codey. That is, until Karen sprung a comment on one of my posts.

Finally, a Singaporean concerned with the usage of typography.

Here’s a list of “best” client quotes from the web design industry.

Ones I’ve personally gotten:

Can we have like red text on blue? Those are the corporate colours.

Or

I don’t have anyone to write out the content of the website. Why don’t you just fill in stuff about my company, throw in a list of my clients, you know, that sorta stuff.

If you’ve worked anywhere, even just a little bit, you’d have your own collection of gems.

For you CSS-gurus out there:

I run multiple stylesheets on Tribolum. Is there anyway I can have a single line of code that will list down all my different (alternate and default) stylesheets?

Can I do an import of a CSS file that imports multiple stylesheets? Or can I use a PHP includes or SSI to pull in the lines of code?

This is so that I don’t have to go into my individual and date archives whenever I add a new stylesheet.

Update: I’ve implemented a PHP includes to pull it in from a single file.

MobileOne has been advertising a Usability Specialist position for some time now. When I first saw the ad, I was highly intrigued as it seemed to suit what I wanted to do to a T. They only accepted online applications through their website, so I put aside my carefully formatted resumé and tried things their way.

It’s a bloody long form, intruding immediately into the details of my family members. I managed to fill in the gadzillion of fields and submitted my information. That was a few months ago.

A few months later, they’re still advertising the position, and I’m still intrigued. I have no way of finding out if they received my information. There was no email autoresponder or any such attempt to create a record of my information successfully reaching them.

I’m half-inclined to apply for the job again to make sure, but the horribly formatted form still gives me nightmares. I intended to look for an email address I could send my resumé to, but none could be found on their website. Just try finding an email address, I dare you.

Ever tried their javascript drop-left menu? It’s a three-tier navigation where each button is terribly small. If you as much as flinched you’d lose the tier you wanted to get to.

I’d like to get my hands at the job, of course. But the usability hurdles placed before me turns me off. Maybe they were placed intentionally so that people who were pissed off enough to complain got the job.

Much as I’ve complained about M1’s lack of usability, it is only one of many examples I’ve seen from Singaporean websites. Another IT solutions company came up with a 200kb popup form for a common supply-chain function. That’s a fifth of a megabyte.

We have a ways to go before user-centric design is engrained in our work.

Thanks to all of you who provided feedback on the redesign. For those of you who’ve been reading Tribolum long enough, you’d know that I’d always provide more than one skin. Even on the first layout I had a “day” and “night” theme.

Like I’ve mentioned before, fire is extremely hard to design for because of its intensity. This trait has led to a particularly masculine layout (thanks Kris, for pointing that out), and the flames have not sat well with those of you who prefered a softer, gentler approach.

More than colours or themes, a main goal of my redesign was better use of typography. Zhenlin pointed out that the Times New Roman font used in the navigation were too formal. I did have the intention of making the layout slightly more formal than the previous one. This can be seen in the use of serif fonts for the headers and dates, while sans-serif fonts were preserved to maintain readability at small font-sizes.

First thing this morning I tweaked the CSS to display properly on IE6/Win. I set the main content to width:auto while floating the sidebar right. While coding to preserve semantics, one must bear in mind that the order the data is presented influences the presentation.

If the sidebar data came before the main contents, floating it right and giving it a fixed width would have allowed my main content to sit nicely on its left. But since it appears after the main content, the content area happily takes up all the width (width:auto) and pushes the sidebar to the bottom.

Unwilling to let the sidebar data take precedence over the main content (displayed in terms of importance) I had to work leftwards and fixing the two columns to percentage widths.

If you read to this point and understood all of that, we should meetup at the MT meetup sometime.

The new design is up and ready for testing. Drop a comment if you experience any problems. I’ve already seen the box model crash on IE5/Win, and heard that the sidebar on the right doesn’t display on IE6/Win.

I’ve tested it on Safari, Mozilla and IE5/Mac. The XHTML and CSS validates, but that means nothing if you can’t read it.

So fire away. Comments, criticisms, wishlists or problems.

Fire is undoubtedly one of the hardest themes to design. The last time I tried a layout that was predominantly red, I had immediate feedback from a few readers saying they had thought they stumbled upon a porn site by mistake.

Though my previous layout did use red for the top banner, I took the safe route and had loads of white to offset the colour’s intensity. It ended up looking like a big meetup sticker or the Singapore flag.

I’ve been staying up the last two nights working on Tribolum. As far as you can see, nothing much (or at least visible) has been accomplished. I went to bed at 5 this morning, spending the whole of last night coding nothing in particular.

You see, ideas don’t come easy. There will always be those who guard their methods obsessively, afraid that others will discover that it really isn’t so hard to code a webpage, to take a decent photo, or to perform an left-hand crossover across the front and around the right leg. Ok, so the last one took me more than a few hours on the basketball court. But the methods aren’t what differentiates the top-tier from the middle-tier. It’s the ability to generate ideas.

It’s pulling off the crossover in the dying seconds of the game with your team down by a single point and the coach screaming at you to “play it safe”. It’s doing the incredible when it counts.

Getting the brain to churn out great ideas is the second hardest thing in any process. The first is lifting the pinky and getting started. That’s how you take over the world.

The ideas are still vague, though I have the theme. Here’s a glimpse of what’s to come.

It’s going to be a simple layout, as always.

When you look upwards at the peak of human endeavour, you will undoubtedly find people who look down on you. It is as inevitable as Newtonian cause and effect. You look up to the people who look down on you.

Jakob Nielsen, self-proclaimed smarty-pants of usability and the web, draws constant fire for his inability to accept viewpoints not in line with his own. I’ve done my fair share of Nielsen-bashing myself.

In a more recent bout of lowbie-bashing, Sarah Bellham of Histology-world was listed on Zeldman (normally an honour) as the worst flash intro ever. CSS guru Eric Meyer adds another two cents worth of sarcasm.

Zeldman and Meyer are two of my greatest influences on web design. I have the books to prove it. I also know that they’re relatively nice people, having had a really brief glimpse of them at SXSW 2003.

The point I want to make is that we all start somewhere. As a community we all fling our ideas out in cyberspace. Our ideas are part of who we are and they continually evolve through the gentle chiselling of minds more experienced than your own.

It is the not the one who has conquered the peak who earns the most reverent respect of those who climb beneath. It belongs to the fellow climber who is but two steps ahead, drenched with the perspiration of hard toil and takes time to offer a hand and a smile for those who climb behind.

So take heart Sarah Bellham, for I’ve had my own run-ins with flash. It’s scary how similar we are.

Just realised that I can have more than a single entry in a day, but not the other way round. This would mean that entry titles ought to be rendered lower than the date field.

Guess I got it right the first time.

I’m leaving Tribolum up and running as I do a major site redesign. So if you’re visiting you’ll most likely see the process much like the redesign of a window display. There’s the undressing of the mannequins and then the redressing.

The changes to Tribolum are more than merely cosmetic. I’m trimming down the CSS (avoiding divitis and classitis, as Zeldman puts it). I’m also rearranging my Hns (h1, h2, h3s) to correct show the hierachy of important information over the not-so-important. Right now my dates are h2 while the titles of my entries are h3. It bugs me a little, so I’m diving deep.

So pardon if the aesthetics are less than pleasing. Enjoy the walk through my construction site.

I received a text message just after midnight this morning. Unwilling (and / or unable) to crawl out of bed to the table upon which my cellphone was charging, I left it unread and unanswered. I’m glad I did, or I would have had trouble sleeping. I’m sure someone in Singapore had problems with excitement of her own.

Vanessa left me a message that she had been linked to the Zeldman himself. For those of you not in the web design know, getting linked to by Zeldman is akin to having the cast of Friends give thanks to you on television after winning their Emmy. Or Brad Pitt bearing his butt on screen with your name tattooed on it. Or Kim Jong-il writing your name on his first nuclear warhead with a sharpie marker. It’s a great honour - you get the idea.

Above all things, it shows that she’s doing something right, and I’m glad for it. She’s spent quite a bit of time on the redesign and her markup is impeccable. A part of me wants to turn hulk-green with envy, but I know good work when I see it.

Congrats on the Zelddie Vanessa! Way to go to put Singapore on the map.

I’ve avoided writing about web design in Tribolum, largely because I reckoned no one would want to read it. Then I realised that no one really wanted to read stuff about my everyday life anyway. My everyday life now consists of hacking away on the keyboard, churning out a respectable demonstration of what XHTML and CSS can offer my potential client.

If you’ve been interested at all in web design, and I’m sure many of you have (you just needed to figure out how to embed those music files didn’t you?), you’d have come across the famous CSS Box Model Hack.

A box element in CSS is made up of the content area, the paddings, and the margins (we’re moving outwards here). If you specify a box to be 400px wide, with paddings of 20px and margins of 30px, browsers that interpret CSS correctly will allocate a width of 400px to the content area, 40px to the paddings (two sides) and 60px to the margins (two sides), resulting in a total width of 500px.

Browsers that interpret it wrongly (IE5 and earlier) allocate the width of 400px to the entire box, resulting in a content area of only 300px. The paddings and margins are included within the 400px you specified.

So we write code that tells well-behaved browsers 400px, and the not-so-CSS-literate browsers 500px.

For more information on how to actually do this, read Tantek’s Box Model Hack entry.

Thanks to Kottke’s post about validation and semantics, my previously already strong urge to redesign Tribolum now surges through all my veins with even greater drive. Like a large number of designers, I avoided the hierachically-correct <hn> tags and applied classes, creating my own language along the way.

While my own naming convention makes sense to me, <div> and <span> tags and their attached classes have no more meaning than made up XML tags.

Though not a great discerner of the hidden world of semantic meaning, I’m slowly picking it up and learning to code more efficiently. A great place to start is Dan Cederholm’s simplequiz.