I started with this article about the decade that was in web design. (Note: an earlier version of this was done here.) It was not much more than a before and after look at the most popular websites out there. Of course, ten years is a long time in web design so the showcase is a satisfactory way to see how far we’ve come, but not quite enough. There was no discussion on the notable features from the different websites. We don’t redesign sites just because we want a different look, do we? We want them to improve. Answering how those sites improved over the years would be a worthy reference for all the web designers out there. This other one almost nails it, though it focuses on the business of these companies, not web design itself.
I hope the likes of Smashing Magazine or some fabulous curator of web design history would come up with an in-depth study illustrating how web design has evolved over the last ten years. Timelines like this and this could help with that, but still needs mention of developments like:
the downfall of <table> layouts in favor of semantic markup
which website or company popularized which design pattern, from the glossy, candy-colored “Web 2.0 look” to the sleeker, more dramatic “Apple look” (though something tells me Apple is responsible for both)
Here’s another approach to the timeline, and is more of a Q&A over the years, and anybody can ask and answer. It also hasn’t been updated since ‘04, as it was part of the 2005 conference, A Decade of Web Design. Jakob Nielsen also did a backtrack that same year.
I’d also like to look forward. This prediction post is quite adequate (with pictures it would be perfect). I think this passage sums up what’s happened in the past decade and what will happen in the next:
While most these technological improvements tend to make the web a more and more homogenous place, at the same time, there is a tendency to create highly curated design setups that use different designs for each article.
There will always be a dichotomy between standardization and specialization on the Web but it’s only lately that we’ve been able to do so with less crap, more elegance. And I can’t wait to see how doing those two things evolve into even more exciting things in 2010 and beyond.
Need more crystal balls and time capsules? See also:
A gallery that only cares about what your site looks like when it’s printed? Ironic, but that’s what printFancy is all about. Remember those niche design inspiration galleries? This site is obviously another example of that. But that’s not all.
Unfortunately, the fact remains that people still print webpages so they can read them in a more comfortable manner; it’s not very environment-friendly, and frankly, weird behavior to people who are in front of the computer 24/7. (Weirder than using IE6.) But it’s a web designer’s responsibility to accommodate that need. No excuses. Even if sometimes, it does feel like creating a whole other website (except if you’re a minimalist, I guess).
And when you manage to create an effective print version of a site, then printFancy is another opportunity to show it off, another incentive to excel in design. Which is not just about creating something looks pretty, but something that fills a need. In this case, the need to print sites out.
(Then maybe the gallery can have a section like this, and one wouldn’t have to hold a laptop the way Jason Santa Maria did.)
There’s little else on each page except a rectangular area found dead-center, filled with icons representing the tons of new ways we can be contacted, befriended, stalked. We have the Web 2.0 era and all the insanely creative social media icon designers to thank for this phenomenon. (Sometimes blogs and other related sites are linked to in these cards, but who has time for those anymore?) If you don’t have the chops to whip up your own, services like Card.ly come to the rescue.
But that’s just the visual side of the metaphor being brought online. Business cards are meant to be exchanged because of the information they contain, so what good would these sites be without technological mojo? We have great frameworks like vCard, hCard, and perhaps the open identity systems like OpenID and oAuth. We also have companies working in the mobile space or have devices of their own (more here).
Then there are the lifestreaming apps, like FriendFeed, Tumblr, and chi.mp, which blur the lines between keeping one’s social accounts in one place and keeping up-to-date with said person at the same time.
How does one unassuming professional looking to establish an online presence actually choose from these possibilities? Social media evangelists pretty much recommend we get on everywhere, as many as and as much as we can help it. The goal is to be ubiquitous rather than obscure.
I have to wonder when we’ll ever reach true unification. Home phone. Work phone. Fax. Mobile phone. Email address. IM handle. Static homepage. Blog. MySpace page. Facbeook profile. LinkedIn profile. Facebook Fan Page. Twitter username. Then this—all of this.
How do you identify yourself offline and online? Do you pick one, or unload a bunch of URLs, aliases, and digits on your potential new client/drinking buddy/love-of-your-life? Is this whole business card business even a suitable metaphor, or yet another idea startups can cash in on? And we’re not even bringing up identity theft here.
When setting up your website one of the most important aspects will be to choose a domain name. It’s that domain name that will stick with you for the lifetime of your site. You can change the template, change the purpose of the site, fire a designer, hire a designer, but you just cannot change that domain name (unless you scrap it and do a redirect). Finding an available domain name that you like and that is appropriate for the purpose of your site is complicated. Here are a few things to think about when choosing a domain name:
1. Match the domain name to actual name of your site
One of the easiest and best alternatives is to get a domain name that matches the actual name of your site. It’s a duh statement but so many people forget to match the site. You will increase your branding as well as make it easy for visitors to remember the name of your site. The worst thing that can happen is if people fall head over heels for your site but can not find it again simply because the domain name is not the same as the name of your site. For example if you have a bakery site, don’t call it StubbornNelly.com. No one will have a clue what your theme is. Call it, TastyPastry.com, or even Anne Cookies around the corner.com.
2. Keep it short – and Keep it Simple Stupid (KISS)
Keeping the domain name short is a challenge if you are looking for a .com domain as all three and four letter words are already taken. Yep, and all standard English words are gone too (designer.com, awesome.com). Coming up with a name that is short will be easier to remember and pass along by word of mouth. But remember, a domain name should however not be kept short just for the sake of keeping it short. Do not use acronyms as a url if they look bad as an acronym. Think of all those failed websites because people did not see different words as one word. Like don’t come up Patterns, Octogons and Other Pics and give it POOP.com. That’s a failed domain name.
Some great short named domains:
IBM.com (why call it international business machines)
digg.com (i dig you, you dig me)
Match.com (find a matching partner)
3. Use keywords
Optimizing your domain name for search engines is a big help. In using one or two of your single most important keywords you will have better chances of getting a higher rank on the search results, thus increasing traffic. This will not be easy, as most “natural” names already are taken. Combine an important keyword then with something secondary. These sites came up with great names:
GraphicDesignBlog.com
TutorialMagazine.com
Dev-Tips.com
4. Describe your site
Your domain name is an excellent way of describing what your site is all about. Say for example that you manage a site about fishing. Your domain name should in some way describe that fishing is exactly what your visitors will find on the site. Again, fishing is a major keyword of your site, so exploit it with a well picked domain name.
5. Avoid confusion
In general, domain names are not expensive. Register domains with misspellings of your original domain if you want to make sure you catch most type in domain traffic. Redirect those misspelled domains to the main website. This is a great for sites that use hard to spell words or need to protect their brand identity. Examples:
Google.com
Googel.com
Gogle.com
6. Consider alternative domain extensions
If it is impossible to find a good domain name with the prefix .com you might want to consider using an alternative domain extension. Many countries have opened up their country code top level domain for international registration. This is perhaps your chance to create the perfect domain hack. Examples:
Del.icio.us
Ma.tt
Designm.ag
Picking a domain name will take time, energy and some creativity from your side but its worth it in the end. The last tip is to checkout recently expired domain names at snapnames.com – many names will be awful or cost a fortune, but once in a while you will be able find a real gem at a reasonable fee. Good luck on finding the domain of your dreams!
Unmatched Style, which is one of the better CSS galleries out there, has posted its first video podcast discussing several notable websites featured in their showcase within 10 minutes. You can watch the episode below:
Let’s see what is happening here. The video podcast is a good solution to explaining why a certain website made it into the UMS gallery. Gene and Jay discuss what they like—and don’t like—about it as the site is being displayed, which seems more convenient than having to visit the site and then switch over to an article pointing out the nice design bits here and there.
I say seems because of course, actually visiting and interacting with the site trumps watching videos and viewing thumbnails any day.
Still, I think it’s a solid way to innovate and add value in this already saturated market of CSS galleries. This is almost the opposite of going niche, because what UMS has been doing is being more than just a trend-imitating, money-making gallery but a definitive resource. Something that isn’t just a CSS gallery anymore.
I think we need both, any, and all sources of inspiration, though. CSS galleries are usually just a collection of screencaps that become attractive depending on their content, but we need as much inspiration as we can get our hands on. Sometimes we’re looking for that specific site type; that’s where niche galleries come in. And then we need opinions from other people to help point out what we may have missed.
I’m looking forward to another ten minutes of UMS’s next video podcast, and curious as to how else one can improve the quality of these “inspirational” sites.
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 their 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.)
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.
Clearly, a sufficient amount of search engine optimization is necessary for this to work, especially for the really famous and common-name brands. But this behavior of accessing websites did not arise because these companies have told us to do so. Neither is it limited to this Asian country.
I am sure you have at least one friend or loved one who has not grasped the concept of URLs and remains highly dependent on Google for finding their way around the web. If you’ll take a closer look at their web browsers, you’ll see why it really isn’t their fault.
Google invades the browsers
Most of the weird behavior we observe from other people is because they have Google as their homepage or built into their browsers. (You can also change the word “Google” to your favorite search engine of choice.) This usually comes in three flavors:
As a result, users now have several blank input bars staring back at them—the address bar, the browser search bar, the Google Toolbar search bar, and the Google homepage search bar. Guess which one they’ll choose?
With the icons and text that draw one’s attention toward the Google search bars, the address bar fades more and more into the background. And since non-techie people are usually afraid of “breaking the computer”, they stick to a method that works well, which is to keep using Google.
Ignore or eradicate?
We can’t blame Google for trying to be the #1 product in our virtual lives; we can only be wary. But it should share the responsibility of educating users of how to use the Internet (how silly does that sound?) with the browsers. Unfortunately neither parties seem to care because: (a) Google would much rather have users search for sites than visit them through URLs directly; and (b) the browsers are earning money precisely because Google is paying them to have their search bars built-in.
Now, learning how to use the interface that lets one use the Internet is only halfway of the journey; choosing to use Google to wade through the Web is not necessarily a bad practice, as Jakob Nielsen predicted that this would become commonplace. But he also believes URLs will have to go.
In the long term, it is not appropriate to require unique words to identify every single entity in the world. That’s not how human language works.
The very nature of URLs seems to be another major stumbling block. Ordinary people don’t understand the use of a “www” and a “.com”, or that the “@” symbol is used only in e-mail addresses. They don’t know how to share websites through URLs either—unless there’s a button with explicit instructions that tell them how.
Add to that the explosion of all the domain suffixes like .me, .travel, and even .xxx. Not to mention all the malicious parties that wish to take advantage of their ignorance—stealing and spoofing personal information through misspelled URLs, search keywords, and deceptive e-mails.
The question is, if normal people aren’t using URLs anymore, what system can be built to replace them? Will it work? Or is Google doing a fine job already?
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.
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.
The Opera Web Standards Curriculum is a comprehensive online course that teaches you standards-based web design. This includes not only coding in the web’s foundational languages, HTML, CSS, Javascript, but also design theory.
One of the authors, Chris Heilmann, describes it as “probably the most thorough and up-to-date web standards curriculum on the web”. He writes:
During the whole course the main focus is on usability, accessibility and writing maintainable code. We deliberately left out browser hacks and backward facing solutions and build on the ideas of progressive enhancement and unobtrusive JavaScript.
I must also point out that WSC is part of Opera Education, an initiative that pushes for web standards awareness and enthusiasm for the internet industry, specifically in schools and universities. I think it’s important for these two parties—browser software makers and educational institutions—to work together rather than apart in developing the Web. In this regard, Molly Holzschlag believes the course is an A+:
The impressive aspect of the curriculum as it is now is that it’s comprehensive, including foundational topics such as Internet and Web history and evolution. Educators understand that history provides context for real learning. Sadly, this is an area often not available in books and online tutorials because readers typically want to dive right in and learn a given technique.
It’s difficult to find a course that focuses solely on creating things through the internet. It’s almost always integrated with either graphic design (see MTV Engine Room) or computer science. Because of this, there is no focus on employing the best practices in creating beautiful, functional websites. And it will continue to be that way—all the way into the workplace—without those two entities joining forces.
This is why I continue to admire Opera. (Mozilla does, too.) It pushes projects that are interesting and beneficial to the web community. Here’s another example: Opera Dragonfly. Firefox’s FireBug wasn’t created by Mozilla (although Safari’s Debugger is a native feature).
