November 16, 2008 say something

Web trend alert: Single Serving Sites

When Obama Wins

When Obama Wins scours and displays tweets containing the phrase 'when Obama wins'

I’m fascinated by the single-purpose websites that have been cropping up for the past year. I’m not much of an internet historian to track down exactly when the first of its kind came out, but they officially entered meme status when Jason Kottke wrote about it back in February.

In the era of 140-character microblogging and 10-inch subnotebook computing, brevity is king. But these straight-to-the-point sites aren’t exactly the iPhone-friendly versions of our increasingly bloated, self-centered homepages and bookmarks. (That’s a different phenomenon altogether and worth discussing in a separate article.)

They’re in a different group themselves, in a peanut gallery of sorts, poking fun at the rest of the all-too serious internet population. Stop worrying whether websites need to look exactly the same in every browser, you should use tables for layout (give up?), Diet Coke will kills us, graphic design is art, Barack Obama is Muslim or muslin or President, or it’s Tuesday, April Fool’s, Christmas, or a leap year yet.

The color of the Empire State Building on November 11. On November 12 it was Purple, Purple, White. As of writing it's White, White, White.

The color of the Empire State Building on November 11. On November 11 it was Purple, Purple, White. As of writing it's White, White, White.

Of course some of these one-trick ponies are web apps and mashups that do exactly one thing really well, whether it’s helping you look forward to the day when Obama wins, decide if you should bring an umbrella today, bitch and moan about our dear Adobe, or figure out whether Twitter, Gmail, the Apple Store, or some other site is down or it’s just you.

Not to mention spell definitely and other words correctly, insert angled quotes », «, ›, ‹, discover your IP address, and play a instant rimshot.

Visit A List Of Sites for more of the madness! Or go through them randomly ala StumbleUpon.

October 29, 2008 3 replies

Really? Everything I Know About CSS Is Wrong?

Everything You Know About CSS Is Wrong! book

All the hoopla over Everything You Know About CSS Is Wrong!, a book by Rachel Andrew and Kevin Yank (see also the Digital Web article) is making me feel uneasy.

We’re not wrong; the title is wrong

I detest the title of the book. No, I don’t think “everything” I know about CSS is wrong. I “know” about the display:table technique for months now (thanks to Sitepoint, again).

Neither do I think it’s a good idea to go around belittling people by telling them they are wrong, whether in printed book or online article format. It’s harsh and misleading.

We’ve got issues

As for the CSS Tables technique presented in the book, these are some of the issues plaguing it:

  1. tag soup
  2. lack of source order control
  3. the question of semantics and presentation vs. content: is making <div>s behave like tables/table cells any different from using tables as layouts?
  4. IE6 and IE7 incompatibility (no surprise there!)

And not too long after the uproar, the authors have addressed the above problems:

Andrew Tetlaw responds to #1 and #3:

No one is negatively affected by the overuse of structural div tags. The same can’t be said for the use of HTML tables for layout.

And here’s an interesting quip which points out the very valid woe of web developers, who have had to adjust to all these changes in coding conventions because of our “flakiness”:

Congratulations on years of punishing web devs for using common sense. Finally the circle turns, but somehow you think that you were ‘right all along.

Matthew Pennell of Digital Web has this to say about those who question semantics and standards:

I must say that I’m surprised that an audience of (presumably) conscientious, standards-aware developers are almost all declaring that they will not use new features of CSS when they are available and supported. Are you all so short-sighted that you cannot see any application for the techniques discussed here beyond wholesale replacement of site layouts?

And Rachel has written this regarding #4:

Some commentators have suggested that we shouldn’t have put a book out about a technique that can’t be used immediately, that will require workarounds to still provide support for older versions of Internet Explorer. I disagree. Something I point back to in the book is how the web community began to use CSS for layout even though support in Netscape 4 was limited and buggy. If those of us who were building CSS layouts right in those early days had said, “nah, it doesn’t work in Netscape, can’t do it”, then our recent history would look very different.

Are we hesitant about change and innovation?

In a sense, browser usage does “cripple” our ability to look towards a future of web design innovation (and bliss) when IE6 is finally disappears. But are things right now are exactly the same as when Netscape Navigator 4 was the stumbling block?

More importantly, will the CSS Tables technique actually push our level of innovation by a significant degree? The past few months of new websites tell me innovation is not too hard to come by still.

And what about next-generation HTML5, which will have new structural tags like <header>, <section>, <article>, <footer>? Can one not feel guilty using all those <div>s in the midst of these elegant new tags? Perhaps that’s another debate for another day—in 2022.

October 22, 2008 one reply

What’s your Internet like? (Hint for dealing with clients)

Ben Terret's Internet List (photo by Tina Roth Eisenberg of swissmiss)

Ben Terrett of Noisy Decent Graphics has written a list of things that describe what “his Internet” is like. From an encounter with a technologically-challenged executive comes an inspiring exercise to get everyone on the same page first.

…I thought it might be a nice idea to get everyone to describe ‘their internet’ at the first meeting of any new client. Like they do at school when the new kids arrive mid term. Get everyone up to the same level. That way, everyone would know the ‘level’ of everyone else and there would be no clangers later on.

The list is not only informative, it’s also prescriptive (in a sort of passive-agressive way!). It addresses the little things clients don’t really take into consideration when they describe what they want for their websites. But the thing is, you’re the expert, so grab the opportunity to teach what thoughtful and usable design is. Some of my personal favorites from the list:

  • Not using Flash for anything other than videos
  • Giving simplicty and clarity top priority
  • Not reinventing the wheel

You may not agree with everything on Ben’s list, but the idea is not just to yell at your client for “not getting it”, but to explain why you’re doing “it” that way. It strengthens the relationship you have with your client, and ensures clear communication pathways in between.

October 8, 2008 one reply

Ten years of creating a better web: Google and A List Apart

Despite the the dot-com bubble bursting at the turn of the new millennium, the Web has become more intelligent, successful, and profitable in the past ten years. We have a ton of people to thank for that, but let’s focus on two groups that are celebrating their 10th anniversaries this 2008.

Google

Google 10th Birthday Logo

Google is one of the first web companies that reinvented the web as we know it. It essentially paved the way for what we call the Web 2.0 era because it was the better search engine that would leave Yahoo!, MSN, Altavista, Lycos, Ask, and the rest behind.

True to its name, Google just keeps on getting bigger. It took on e-mail (Gmail), advertising (AdSense and AdWords), office suites (Docs, Spreadsheets, Sites), multimedia (YouTube, Picasa), navigation (Earth, Sky, Moon, Maps, Street View), and even web browsing (Chrome). And even if the thought of Google looking into what we’re looking at and what we’re talking about is really scary, life with the help of the big G is just easier.

A List Apart

A List Apart Logo

In the same vein, A List Apart has been the definitive resource “for people who make websites”. What started out as a mailing list evolved into a treasure trove of elegant web design articles that cultivated the love for the craft like no other. Design, standards, accessibility, optimization, business—this magazine covers it all.

It’s written the pages of web design history as well, from banishing <table>-based layouts to inventing CSS techniques (Sliding Doors of CSS, Holy Grail, Suckerfish Dropdowns, Sprites, Faux Columns, Mountaintop Corners) we never could have come up with. Websites today are efficient, meaningful, and beautiful because of ALA.

September 19, 2008 5 replies

More niche design inspiration galleries popping up (do we really need them?)

I’ve written about emerging gallery-style websites like image bookmarking and information design. Here’s yet another trend: niche web design inspiration galleries. Here are examples of those classifications:

Most of these sites aren’t really new, except that enterprising webmasters are coming up with new categories more often—seemingly every week!

Do we really need new sites for all these categories? I would say yes. Despite the presence of categories and tags, custom search engines powered by Google, gallery aggregators like Most Inspired, you can never have an excessive supply of inspiration.

Plus, visual search using mere keywords is still ineffective. Usually because there isn’t enough care given into describing images. You can never really tell how many tags you can add to properly describe the look and feel of a website.

In fact, since websites are basically interfaces and not just 2-dimensional designs slapped onscreen, showcases and galleries should also focus on their interactive elements. That’s probably where pattern galleries like Pattern Tap comes in.

August 27, 2008 52 replies

Campaigns to kill the web browser that just won’t die: Internet Explorer 6

Graphics from the anti Internet Explorer campaigns

Today, August 27th, marks the day Internet Explorer 6 (IE6) first came out. It’s a seven year-old browser. This little factoid is part of a battle cry by M. David Auayan to stop developing websites for IE6 by March 2009. Enter the IE Death March.

Internet Explorer 6 will be SEVEN years old on August 27th. It came out a few weeks before the Twin Towers fell. It came out before the Nintendo GameCube. It came out before the first iPod.

It’s time to put a deadline on dropping IE6, and I say that time is now, and the deadline should be soon… say like, March 2009. That’s roughly a little more than 6 months. Feel free to join me. If your company is dropping support for IE6, let me know and I’ll gladly post it up.

There have been tons of initiatives to finally ditch one of the most loathed software on the planet. You may have noticed some of these around the Internet:

So many parties are restless about the state of web browsing, and rather than wait for Microsoft to get its act together, they take it upon themselves to do something about it. It doesn’t really stop with the viral websites. Every few months or so you’ll find a blog post that details how the author has had it with IE (IE6 usually) and that he has resolved to drop support for the browser completely.

One must ask: are any of them making a significant difference in the market share of IE? Or IE6, specifically?

According to statistics from several prominent web counters, Internet Explorer is still the dominant browser at around 76%. Although it’s slowly going down by a few percent every few months, that’s still a high number. Even on sites that advocate web standards like W3Schools show that around half of the site visitors are on IE, a quarter on IE6.

The biggest agent of change was probably Google, since it actually paid people to download Firefox. But now that’s gone, will the ball keep rolling? Is it time to look at other, more drastic strategies the way Mozilla did recently?

It seems we’re all feeling a little desperate these days. After all, it’s been seven years.

August 19, 2008 say something

Pearls of wisdom from An Event Apart San Francisco 2008

For those who couldn’t attend the An Event Apart conference at San Francisco, held last August 18-19, head over to Jeremy Keith’s journal for an excellent retelling of what went down.

Words are enough to give one the impression that the talks were brilliant. Let me quote some passages based on the blog posts at Adactio:

Understanding Web Design by Jeffrey Zeldman:

You should not be designing just to make other designers jealous. It happens a lot in design but it happens in development too (I’m looking at you, Ajax). Good design is invisible. It’s about the character of the content, not the character of the designer. Let’s get away from showing off get to empathetic web design. It means user-centred design but by abandoning that label we can side-step the religious wars between UCD and agile.

The Lessons of CSS Frameworks by Eric Meyer:

If you’re going to use a framework, it should be yours; one that you’ve created. You can look at existing frameworks for ideas and hack at it. But the professionals in this room are not well served by picking up a framework and using it as-is.

Storytelling by Design Jason Santa Maria:

Design for the web has chiefly been driven forward by technology rather than message. Maybe it’s time to go back and start asking what are the stories we are trying to tell. The form of design should be driven by the story.

Web Application Hierarchy by Luke W.:

We make sense of the world in terms of relationships. We don’t know when we smell because we’re used to the smell, but other people notice because our smell stands out. It’s much the same with sight. We can associate or disassociate things using contrast, distance and size. We can use contrast in visual weight to guide the eye and create a flow.

Shepherding Passionate Users by Heather Champ:

When the universe gives you lemons, make lemonade. When there was unannounced downtime on Flickr, they turned it into a colouring contest: print out these circles, colour them in and the winner will get a prize. Over 2000 submissions were uploaded. The level of creativity was startling. Every one participated ended up getting an extra three months on their account.

The Framework Age by Liz Danzico:

User-centred design and participatory design are great ways of involving the users in the design process but that’s still different to actual use. It’s time for a new way of working: designing for improvisation (but remember that no one single process will ever be successful).

Implementing Design: Bulletproof A-Z by Dan Cederholm:

Rounded corners are usually a pain in the ass. But you can do them today with namespaced webkit- and moz- border-radius declarations. … What about other browsers? Well, they don’t get rounded corners but so what? Rounded corners just degrade gracefully to rectangles.

This roundup actually covers only day one, so be sure to subscribe to Adactio for the next round of talks for day two.

August 15, 2008 2 replies

Web Standards Project will draft a web design curriculum framework

Just on the heels of the launching of the Opera Web Standards Curriculum, the Web Standards Project (WaSP) Education Task Force announces that it will create a curriculum framework for educational institutions and aspiring web professionals.

This will include recommendations on course dependencies, learning competencies, readings, tools, and other resources that will help bring web standards to the classrooms. It’s called a framework, rather than a rigid curriculum itself, to keep it an ever-growing reference for teaching of web standards.

Why is it called a framework? Given the velocity at which Web technology unravels, we recognize that required skill sets can change rapidly, and that the best way to keep this material useful is for the education community to enrich it with their expertise and experiences. In this way, the WaSP Curriculum Framework will be a “living curriculum” that we hope would be a knowledge base of required skills.

The results of the 2007 curriculum survey give us a good idea of what classroom-based web standards education looks like. Below is a graph that shows what the survey respondents believe are the necessary topics taught in such classes.

WaSP Curriculum Survey Results Chart 3

WaSP Curriculum Survey Results Chart 3

I’m glad that things are picking up speed particularly in this area. As I have mentioned in my post about Opera WSC, it’s important that aspiring web professionals learn these concepts from the very beginning. And to do this, educational institutions must make sure they are teaching standards-based web design and not, say, tables-based HTML. (Gasp!)

August 7, 2008 3 replies

Cymbolism and color sensitivity

Devlounge has posted an interview with Mubashar Iqbal, creator of the increasingly popular color-oriented website Cymbolism. It’s an initiative to gather data on how people associate words with color.

Cymbolism

If you’ll spend a fair amount of time at Cymbolism, you’ll find out that despite all preconceived notions tied to the different colors of the rainbow, people still think differently. For example, red is the dominant color associated with the word “powerful”, but only by a little more than 50%. The word “bold” shows a similar trend, with the color black in second place.

Now when you take a look at “new”, there are at least four major colors showing relative popularity: red, green, yellow, and white.

Cymbolism (past votes)

Based on the results, if you’re going to design one of those typical Web 2.0 badges that say “NEW!”, which color are you going to go with? It’s harder to choose now, isn’t it? I’m not implying that the site is useless in helping you decide colors. In fact, it teaches a very important lesson in color sensitivity. As the latest article in Cymbolism’s blog points out:

It can be a poor choice to assume that you know what another culture means by a specific color, so asking questions is a good idea. You can also do some research if you’re planning a trip to another country so you know a bit about their culture before you leave. You can avoid offending people that way, get a better understanding of culture and how color affects us, and have a more enjoyable trip.

Because the web is like one big country anybody can visit, web designers should be aware of yet another factor that affects the experience of their virtual audiences. And another issue you’ll have to deal with as a web designer, as opposed to a print designer.

What are other color-related factors can affect how a website is perceived? Aside from the psychological, how about the physical? Here are some questions you might want to answer before rolling out that website for public consumption:

  • What does the website look like from the eyes of someone who is colorblind? Note: there are different types of color blindness.
  • What does the website look like from an uncalibrated monitor? A monitor that is different from your own? (e.g. LCD, CRT, plasma, projection) A monitor running a different operating system?
  • What does the website look like in low light? In bright light? In low contrast? In grayscale? In black and white (i.e., does the design of the website rely on color alone)?
July 16, 2008 2 replies

Google indexes Flash: beta product, still not good for SEO

Google logo render - mark knol

A few weeks ago Google announced that it can now extract and index textual content from Adobe Flash files. We all know that creating websites in pure Flash is a big no-no if you care about being found through search engines. So is there nothing left that’s stopping web designers from switching from plain old HTML and CSS to rich interactive Flash? I have yet to find somebody who agrees with a resounding “yes!”

Rand Fishkin, CEO of SEOmoz, believes that this new development isn’t compelling enough to start building sites with Flash.

Flash content is fundamentally different from HTML on webpage URLs and being able to parse links in the Flash code and text snippets does not make Flash search-engine friendly. I think it’s great that Google’s digging deeper into Flash, but I don’t believe web developers should be any less wary than they’ve been in the past about Flash-based websites or Flash-embedded content.

If anything, I commend Google for continuing to convince web designers and search engine marketers alike to embrace web standards by pushing for the best practices in coding websites. Of course it’s the most logical thing both parties: search spiders need to parse content properly so that they can index it, and a well-formed webpage makes this possible; webmasters need not wade through nested tables and unnecessary tag soup when there’s a better way. And Google should, since it’s way more influential than Opera or any other web company out there.

However, Google’s efforts to read Flash still seem to be in the premature stages. Typical Google, they always release their products in beta without being wary of the consequences.

By consequences I mean clients who are now running around telling their web designers to create animated intros and the extravagant interfaces for their websites. I can’t really shoot down this little achievement by Google—except that it’s getting scarily smarter everyday and should try to have more features than issues when they launch a product.

More importantly, I can only continue to condemn those who misuse Flash without any regard for accessibility, much less usability, whatsoever.