f you’re thinking about coding your next web site in HTML5 and are overwhelmed by all the resources out there, please allow me to point you to the only site you need to get started: Dive Into HTML5 by Mark Pilgrim.

The site is laid out in a book format of eleven chapters. So far seven chapters are available. If you want to dive right into the semantics, I suggest start with Chapter Three. If you’re like me who’s interested in the back-story of things, Chapter One is a must read. The chapters are long, but very easy to read. They also contain great links to other resources. For example, Remy Sharp’s HTML5 enabling script for Internet Explorer and Modernizr, a Javascript detection library. These chapters are from a book soon to be published, titled HTML5: Up and Running.

“I’m not even going to talk about the crazy shit that Internet Explorer 8 does to switch between its four — four! — different rendering modes. Here’s a flowchart. Kill it. Kill it with fire.”

I probably could just end this post here, but I feel inclined to address something I feel the web design/development online publishing communities are lacking these days. There are many good technical sites out there, however not many are engaging to read. I remember back in college, I had several very knowledgeable professors, but they were horrible teachers. Good professors are those who make you interested in the subject. They make a world of difference. While reading Mark’s writing on HTML5, I felt like I was sitting in a class room in front of a quirky professor. His style is conversational but concise, the content is comprehensive but well paced. He’s profane enough to be human but not overly done as to be crass. Go read a few chapters and you will know what I mean.

Another engaging factor is the site design. The retro clip art style and typography match his writing style perfectly. The reading experience is the best I’ve had on a web site in a long time. I love the design so much, I themed this post after it.

When we create web content, the user experience depends on many factors, not only limited to the graphical element alone. Engaging and informative copy, low visual noise, high readability, and appropriate graphics are the key elements of good online presentation.

Made for Humans

Apple’s commercials are effective. In the iPad Ad, the shots are always focused on how YOU would use the iPad. In every shot, you get a clear picture of the user interface and how it operates. On a more subtle note, the commercial shows someone using an iPad on a comfortable couch in an airy living room, just like where you’d be using an iPad. It feels intimate and natural.

More importantly, the effectiveness is not only because it highlights the product, but also serve as a tutorial video. By watching the fingers in the commercial performing swipe, pinch zoom, double tap, the viewers build a familiarity with the iPad even before they ever touch one. I remember the first time I used an iPhone. It felt as if I’d owned one for a while, no instructions needed.

The formula is rather simple:

• The background setting provides an airy and soothing feeling. The soundtrack is uplifting but not overwhelming. These two factors establish a good mood.
• Maximum clarity on the product and its UI. Show many examples.
• Focus on how the product is operated, from a user’s point of view.
• Narrated in human language, not technical jargon.

Not Made for Humans

In comparison, most of Apple’s competitors don’t get it when it comes to marketing. I have seen the their commercials and they are forgettable. They simply focus on the wrong things.

Palm Pre watch

In this beautifully choreographed commercial, we see the phone for less than 15 seconds out of the full minute.

Motorola Droid watch

My parents won’t get these geeky insider jabs. Wasting the whole promo ad on acknowledging the dominance of your competitor is a waste of air time. I still don’t know anything about the Droid.

HTC My Touch 3G watch

This one shows some screens, but very briefly. I can’t help to wonder who the star is here. The celebrities or the phone?

Windows Phone 7 Series watch

I think this is a strong contender. However it still lacks the human element. A self-animated device feels very conceptual to me. Ironically, I’m a big fan of Microsoft’s 2019 concept video, which feels a lot more real.

Actually these commercials are not forgettable. I remember the dancers in the open field, the edgy tag lines, and the guy who looks like Fred Durst just fine. One problem: I don’t remember the product. There are so many distractions it’s hard to focus on what they’re trying to advertise. I also don’t feel attached to their products. This is why I love Apple Ads. Regardless of whether or not I buy their products, I feel I’m already familiar with them. The presentation is simple, human, and effective.

Speaking of the Oscars

When asked why Na’vi women have breasts, since the race isn’t mammal and therefore shouldn’t possess mammaries, James Cameron gave the answer:

Because this is a movie for human people.

If you’ve got a model where revenue is tied only to web page views, switching to full-content RSS feeds will hurt, at least in the short term. The problem, I say, isn’t with full-content RSS feeds, but rather with a business model that hinges solely on web page views. The precious commodity that we, as publishers, have to offer advertisers is the attention of our readers. Web page views are a terribly inaccurate, if not outright misleading, metric for attention. Subscribers to a full-content RSS feed are among the readers paying the most attention, but generate among the least web page views.

A reader asking for a full-content RSS feed is a reader who wants to pay more attention to what you publish. There have to be ways to thrive financially from that.

I never had to worry about revenue because I don’t have Ads on this site. I don’t ever plan to have Ads because it’s a personal site. I want to focus on the last sentence I quoted. I get very annoyed with blogs that don’t have full-content RSS. They force me to jump out of my RSS reader. This is especially annoying if I’m reading on iPhone with bad signal.

When I designed this blog, I had readability and the overall reading experience in mind. This isn’t just for when people are reading on the site, but also when reading through RSS. Offer people the full feed, because they’re the ones who care.

These days, it seems like just about every start-up founder has a blog, and 99 percent of these bloggers are doing it wrong. The problem? They make the blog about themselves, filling it with posts announcing new hires, touting new products, and sharing pictures from the company picnic. That’s lovely, darling — I’m sure your mom cares. Too bad nobody else does. Most company blogs have almost no readers, no traffic, and no impact on sales. Over time, the updates become few and far between (especially if responsibility for the blog is shared among several staff members), and the whole thing ceases to become an important source of leads or traffic.

[...]

So, what’s the formula for a blog that actually generates leads, sales, and business success? I didn’t even understand it myself until last year at the Business of Software conference, when one of the speakers, a well-known game developer and author named Kathy Sierra, blew me away with an incredibly simple idea that explains why my blog successfully promoted my company while so many other blogging founders foundered.

To really work, Sierra observed, an entrepreneur’s blog has to be about something bigger than his or her company and his or her product. This sounds simple, but it isn’t. It takes real discipline to not talk about yourself and your company. Blogging as a medium seems so personal, and often it is. But when you’re using a blog to promote a business, that blog can’t be about you, Sierra said. It has to be about your readers, who will, it’s hoped, become your customers. It has to be about making them awesome.

This really makes sense. I don’t read too many company blogs for the reason Joel stated. I just simply I do not have enough interest. I read only for two reasons: to be entertained or informed.

The few company blogs I do read, match exactly what Kathy described: they blog about something bigger than themselves. See Panic and Mint.

The dead horse in this case is the never ending debate of whether a web designer should code or not. To clarify, “code” in this context refers to converting a graphical mock-up to HTML/CSS mark-up, not programming. Recently this debate came up again. Many designers wrote, and tweeted their opinions. It started with a tweet from Elliot Jay Stocks:

Honestly, I’m shocked that in 2010 I’m still coming across ‘web designers’ who can’t code their own designs. No excuse.

Mike Kus wrote a supporting entry listing five reasons why web designers should code. Elliot later posted in detail to further explain his thoughts on the matter. I share the same views as them, so I won’t regurgitate what they already wrote. I recommend you go read their blogs and the comments they received. Here’s the gist: being able to code your own design makes you a well rounded web designer and you have more control over the final product’s look and feel. You’d also make it easier for the programmers.

I’d like to add some of my own points.

A Little History

I think the problem is because of the murkiness of the title “web designer.” If it was so clearly defined, then we probably wouldn’t be debating about who should do what today. When the web first took off in the mid 90s, there were basically two types of people putting content on the web. Old school Perl/C programmers and print/media designers. Both claimed expertise in their own field, with a “specialty” in web design. I’ve seen web sites with very ugly layout, colors, typography and clip arts done by programmers, and one giant GIF flyer styled pages done by designers. I remember the debate back then was who was the real “web designer.”

The web design industry today is so much more specialized. We have information architecture, user experience, marketing/social media/branding, front-end development, graphical design, SEO etc. Who is the “web designer” really? I feel if I get into it, I’d just be arguing semantics. So instead treating the matter as tasked based, let’s take a step back and look at the whole picture of a web product cycle from a front-end’s POV.

The Big Picture

“Design” is about problem solving AND providing a good user experience. It means function and form together. This is why I think a web designer’s role is to be able to conceptualize AND implement. Just doing graphical mock-ups is only half of the job. That’s why they’re called a “mock-ups,” not the real thing.

What about designers in other fields? Do industrial designers need to craft their own chairs? Do architects need to construct their own buildings? This type of analogies come up a lot during the debate. No, they don’t have to because the nature of their fields is different from ours. The analogies simply don’t apply, despite how sound they are.

Complacency

It’s easy.

That’s right: writing HTML and CSS is so easy, that there’s actually no excuse not to learn how.

- Elliot Jay Stocks

This is the main point I want to stress: IT REALLY IS EASY. Some designers say that they have a good set up going: they do the graphics, their partners do the HTML/CSS. But what’s stopping them from learning new things? Personally, I haven’t met a single person(regardless of their profession) who is good at what they do if they’re complacent. To me, refusing to learn shows an aptitude problem.

Web design/development is a very fast paced field since it’s technology based. The best web designers I know are those who keep their skills sharp and are constantly learning new things. The graphical design aspect is more timeless since it’s based on long established principles. But the technology side is constantly changing. This is why, to me, being a web designer is exciting.

You Are Dispensable

Let’s talk about practical stuff. Different web design shops big or small may operate differently, however they have one thing in common: Budget. If you cannot code the design, then they’ll hire an additional person do that job. It costs the company extra money. Once you’re done with your graphical part, when you’re idling with downtime since you can’t do anything else, you’re wasting company’s money. If there’s cash flow problem, you’d be the first to let go. If you freelance on your own, you’d increase your income by not splitting the pay with another coder. The more skills you have, the more valuable you are.

Gray Area

Despite my strong belief that web designers should code, there are exceptions. If you have moved onto a new role, say a creative director then I don’t think it’s necessary for you to keep up with every single new HTML spec that comes out. By then, you hopefully will have able web designers working under you(who can code).

In Closing

This isn’t the type of article I like to write. I definitely don’t want to come off as a snob. It’s not an “I know how to do it so should you” type of thing. As I pointed out, writing HTML/CSS is EASY. There’s just absolutely no reason for not knowing it. It is an integral part of our job. Of course, I can only speak from my personal experience. If you think there’s a case where a designer absolutely needs no knowledge of basic coding, please let me hear it.

What’s New

• Homepage now serves as an intro to the site, as well as lists past articles.
• Article area width increased from 600px to 800px. This is because I want to post photos and images in bigger format without using thumbnails+lightbox, or smaller unflattering sizes. I’m a big fan of Boston Big Picture. A wider area also gives me more options for content layout.
• Removed the fixed position footer navigation bar. I still think it’s a good navigation method, but I see this type of footer being used a lot these days, mostly for social media reasons. I also removed the prev/next links as well. Judging from my web stats, they were hardly being used. Fixed position also doesn’t play well with iPhone’s view-port.
• Comment section is hidden by default. I want less clutter upfront.

Inspirations

How and what I write, has a lot to do with what I read. Content wise, I’m a fan of Coding Horror and Daring Fireball. I like great link blogs such as Kottke and Waxy links. Going forward, I see myself posting a mix of long and short posts. I no longer have enough free time to write lengthy posts full time.

Design wise, I’m influenced by Artasiapacific Magazine(print version) and Hirshhorn Modern Art Museum.

Minimalism?

“Simplicity is about subtracting the obvious and adding the meaningful.”

— John Maeda

Undoubtedly, people would describe the new design as minimalistic. I probably would too, for lack of a better word. I’ve always been a fan of such designs, I also feel it reflects my personality. However, to me, minimalism describes a thinking process, rather than an end look. I didn’t have a design visualized when I started brain storming, but rather I tried to identify the elements that were absolutely needed. The goal of the design is to have readers concentrate on the writings without distraction. The graphical elements are there to serve the hierarchy of importance of the content. To me, designers’ personal sites should reflect their unique tastes.

Typography

The typography treatment in the old design was terrible. When I put up the site in 2008, I didn’t pay too much attention to proper formatting. This time, I tried to fine tune some details.

The hardest, and also the most time consuming part in the redesign process was finding the right font for the site/article header, and the right method of implementing it. I feel choosing a font for personal use is an intimate experience. I have many favorite type faces to use when I create web projects. However when it comes to my own site, I feel the font choice should definitely give people an idea of who I am. I’m not a serif type of guy, even though I love serif fonts, especially the slab kind. I’m definitely not Baskerville Italic despite what this old guy says.

I’ve narrowed my font choices to Digital Sans, Orbitron, Geogrotesque (suggested by Sander), and Helvetica Neue.

For the time being, I’m using Helvetica Neue(Helvetica, Arial for fallback). I’m not entirely happy with the current web font replacement methods out there. Most likely I’ll end up using @font-face, however due to various hinting support, many fonts still look horrible on Windows OS. I feel even though tremendous effort has been made to improve typography on the web, we’re still so far away.

Code

I wrote the new theme in HTML5 and some CSS3. I plan to experiment with new HTML5 elements in the future posts. (e.g. <canvas>,<video>,<audio> etc) I also wrote the new HTML layout in a way that allows me to customize individual posts further than just changing the background image/color. This particular entry uses the default look, without customization.

There are still some minor CSS formatting issues with Internet Explorer 7 & 8. Although I don’t support IE6, I still try to make the site somewhat consistent, but it doesn’t need to be pixel perfect. I also need to go back and tweak some of the older posts since they were customized for the old theme.

Finally…

Thank you for reading. And also thanks go to my online friends who provided me with valuable feedback during the redesign process. Overall I’m happy with the design. I feel it’d allow me to write posts of different natures: long and short, text heavy and photo showcase.

I’d love to hear what you think of the redesign. Feel free to drop me a note in the comment section.

Lately I’ve watched a few episodes of their latest favorite show, iCarly. It’s a show about a teenage girl and her friends doing a web show. I’m not going to get into it too much, you can read all about it on Wiki. Carly and her friends’ laptops are Macbooks. Instead of the Apple logo, it’s a pear. This is done for obvious commercial reasons. What I find interesting is that the very first time I ever saw the scene where their laptops appeared I immediately knew it was a Mac and I was pretty far away from the TV too. It wasn’t the casing or the color of the laptop, it was the lit up pear that gave it away. I’ve seen fake Apple like product replacement in other shows too.

This begs the question: what is a brand without its logo?

When most people think of branding, they think of the logo right away. In fact, many branding related articles floating around these days are simply logo tutorials. Although visual identity is important, but it’s not everything. A brand is not just what it looks like, but also how it feels. The feeling part involves years of consistently good customer service and quality products. That association of quality people develop with the brand is ultimately what defines the brand.

When people recognize your brand from a tiny altered logo from far away, then you know you have a good brand. Not because of the logo, but because of the association people want to make with your product.

Update: Found this article just now, nice read. Interview: The Man Who Named the iMac and Wrote Think Different

Hey there, it’s been a while. Time goes by fast when you’re working on stuff. For the past couple months, I’ve been working on a side web project. ClearType☆Press was launched a month ago. It is a web design and development site.

Yes, the world really needs another web design blog site. :)

Well, the focus of ClearType☆Press is on improving government web sites. As I mentioned in the past, I feel most government web sites out there are far behind current industry standard in terms of code standard, design, usability and use of social media. This is true for governments all over the world.

Government sites need so much improvement. Recently I am more compelled to do my part to contribute. If a company’s web site isn’t up to standard, then users complain, or stop using that company’s service. Bad website equates to bad branding, and it affects consumers’ perception of the company. That’s why within the private sector, company sites are usually up to date. What about the government sites? Government serves its people. The websites are part of that service. In the past, most government sites simply were set up as a data dump. There’s been very little thoughts on design, usability and branding. The underlying code is also badly written.

Of course it’s easy to be a critic. ClearType☆Press is my attempt to help. What’s different about government web design from designing for other type of sites? Design and coding wise, there’s none. However, there are many constraints that are unique to the government sites. Accessibility for one. Government sites are required by law to be accessible. Unfortunately, most are not. When it comes to social media, a government agency can’t just sign up an account. Government sites are not allowed to use tracking cookies, therefore they have to jump through some legal hoops to use social media sites.

The topics I plan to cover on the site will include design, development, accessibility, usability, social media and event coverage. Luckily, I’m not doing it alone. My colleague and friend David Lantner and I started the project together. He’s one of the best front-end developers I’ve worked with. He is also a lot more knowledgeable about accessibility and new HTML5/CSS3 than I am.

You can help too! Please visit ClearType☆Press and leave some comments on the articles posted so far. Also, if you’re interested in writing an article for the site please let us know. It can be about any government, not just the U.S. Our governments have the resource to create much better web sites, we can help.

Briefly about the site design process. Function wise, I wanted the site to be easy to read and simple to navigate. After all, it’s a blog site. Visually, I wanted a clean look, with the influence of traditional print elements. I also wanted it to reflect a government related theme, but not screaming “USA! USA!” I think the subtle use of blue/red stars as accent ornament/colors help. As always, I’m a firm believer in content is the king. Most of the design elements on the site are simple typography, layout and white-spacing. To offset the traditional look, I created some consistently themed graphics to go with each article. I like the combination of gray, red and blue. They fit the branding of the site well, IMO. There are still many little things I’m tweaking on the site.

Lastly, I’d like to thank many designer friends whom I met online. During the design process of the new site, they provided me with invaluable feedback. Thank you so very much Aja, Alex, Sander, Dmitry, Nathan, Soh, and Janko.

Please let me know your thoughts on the site content and design. You can subscribe to the ClearType☆Press RSS or follow Twitter. Also, please help me to spread the word too, I do believe it’s for a good cause. I’m a terrible terrible marketer :)

Around this time last year, I was shopping for my first DSLR camera. During my research, I received numerous good advices from helpful folks in the online photography communities. Among their advices, the best one I got was “If you wait for another month to buy that latest and greatest camera, you’d wasted another month of not taking photos.”

It’s been a year since I bought my Nikon D90. What an awesome camera it is. However, lately I find myself taking more photos with the 2 megapixel camera on my iPhone 3G. Technical spec wise, 3G camera is no comparison against the Nikon. But there’s something I love about the photos I take with the iPhone. It’s always with me, and it documents my daily life.

Last week I read photographer Chase Jarvis’s blog post promoting his new iPhone App, “The Best Camera.” Chase’s photography blog has been my favorite read, ever since I discovered his tips for taking great iPhone photos. If you’re into photography, I highly recommend his blog. Chase doesn’t talk too much about the techniques, but rather the essence of photography, and the photography profession.

In his promotion video for the iPhone app, one quote really struck a cord with me.

“The best camera is the One That’s with You. Images aren’t about dynamic ranges and megapixels. They’re about stories and moments.”

~ Chase Jarvis

I cannot agree more.

As much as I love my Nikon for its superb quality, I can’t carry it with me all the time. I can’t capture the unplanned details happening in my life. I mostly use my Nikon for photo journals I put a lot of fore-thought into. However, I always have my iPhone with me.

I’d be the first to admit, the iPhone camera isn’t the greatest. I remember how disappointed I was with it when I first bought it. But the more photos I take with it, the more aware I am about its limits and how to maximize it. Also because of its limits, I’m forced to approach the subjects in a different manner from my Nikon. I can’t do long exposure, field of depth etc; most of the time I’m at the mercy of poor lighting. So I focus on the subject matter instead. I challenge myself to make inert objects interesting, to make ordinary things extraordinary, to make moving forces hold still. Most importantly, to make photos to invoke an emotional response. After all, isn’t this what good photography is all about?

Too often, we find ourselves obsessing over the tools and techniques rather than essence of what we’re trying to do. Cameras don’t take photos, Photoshop doesn’t produce great graphic design, programming languages don’t produce great software, fancy clothes don’t make the personality.

Mobile photography is this generation’s Polaroid. It’s accessible, candid, intimate, instant gratification and timeless.

Here are some iPhone photos I’ve taken of things I see daily.

p.s. Mostly during my commute to work.

p.p.s. photos are post-processed with Camerabag and Toycamera apps.

My faithful Sony TV/Alarm clock went off to ABC morning news. As usual, I laid in bed for ten minutes before I truly woke up. I didn’t get too much sleep the night before. I went to bed at 5am, working on a web site that was due. also I spent a lot of time with my then Fiancée talking about our Vegas wedding, which was in eleven days. We talked about my new job that I was starting once we got back from our honeymoon, and our first born that was on the way. It was an exciting and scary time for me. I was about to become a new husband and father.

Back to the tiny 1.5″ TV screen on my nightstand, I saw the one of the Towers on fire, with people running frantically. I thought it was a trailer for a movie of some sort. I remember thinking how realistic the CG looked. Then the second tower got hit. It didn’t take me long to realize what was happening, even though it was so surreal.

America lost her innocence that day.

I’d like to share this video with you. It’s Blue Man Group tribute to 911. The papers flying around in the backdrop are the ones that were found near Ground Zero in the aftermath.

Where were you, and what were you doing that morning?