Mozilla Labs, already releasing innovations that hint at the Web in the coming years, has launched the Concept Series. This is an initiative that pushes for the “development of the online experience” where everyone can contribute.
We’re hoping to lower the barrier to participation by providing a forum for surfacing, sharing, and collaborating on new ideas and concepts. Our goal is to bring even more people to the table and provoke thought, facilitate discussion, and inspire future design directions for Firefox, the Mozilla project, and the Web as a whole.
Concepts may take the form of Ideas, Mockups or Prototypes.
The Concept Series starts strong with several concept videos from Adaptive Path, Wei Zhou, and Aza Raskin.
Aurora Concept Video by Adaptive Path
Lifestream - Redesign history and bookmarking by Wei Zhou
Firefox Mobile Concept Video by Aza Raskin
Of the three, Aurora is clearly the most ambitious as it demonstrates with 4 videos how future web browsing will be completely intuitive and pervasive. Websites can share information with one another so that a user can extract relevant information. The Web will continue to act as information provider regardless of location or the real-world objects and situations he is dealing with.
Multitouch technology is also gaining traction as the ideal way to interface with the Web. Specially assigned gestures will become especially convenient on small mobile devices. Mimicking a 3-dimensional space is another popular concept which also addresses space constraints. And of course, aside from advances in software, hardware will also play a major role in the interactions onscreen.
What’s your idea for the future of the Internet? Contribute to the Mozilla Labs Concept Series and have your say. Remember, the best way to be prepared for the future is to make it ourselves!
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.
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.
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)?
By “normal people” I mean those who are mere computer users, not literates nor enthusiasts nor experts. Cabel shares a striking example: in Japan, advertisers instruct potential buyers to enter specific keywords into search engines instead of their company URLs.
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:
- the Google homepage (whether it’s plain vanilla, a Firefox-Google hybrid, or iGoogle)
- the Google search engine add-on (a common feature in all modern browsers)
- the Google Toolbar
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?
Will Harris shares some insight on working with designers. We often read about tips for designers by designers, but not tips for clients by clients. Still, both parties should read it (and print out the PDF, too!).
Designers (and professionals in related fields) will get great gems of advice that will make them go “oh, thank goodness he said that!” because it’s so common for clients to just sit there and say “I don’t like that” without giving any real reason behind their preference. A design project (again, this can apply to other fields) is the responsibility of both the designer and the client. They have to work together.
But let me digress a little bit. One thing that struck me while reading the article was Will’s first suggestion:
Choose your designer carefully. Look at their previous work. The best designers don’t have a “signature look.” Their sites look as different as their clients do. Awards don’t necessarily mean the design worked for the client. If you’re not sure about a design, go to sites they designed and ask their clients.
Do you agree that designers with more diverse-looking projects are better than those who maintain a signature look? On the one hand, it immediately leads a client into thinking that the designer has a wider skill set and can more easily meet their requirements especially if they’re fickle.
On the other hand, clients opt for designers with a consistent style exactly because they want to emulate that look on their own projects.
I think that in general, professionals start out not knowing exactly what they want to do, and try everything out first. As they grow older they start to specialize. As time passes, you’re supposed to be more sure of yourself and should be able to hold a distinguishable reputation among your peers. This can be said not only about the styles you create, but the skills you specialize in, the clientele you work with, and so on. I wouldn’t say this is the only way to go, but it seems to be the trend.
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.
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).
And unlike other browser vendors out there, Opera shows it cares about web standards not by saying but by doing.
Tom Martin from Advertising Age has an excellent piece of advice for all the professionals out there:
Stop being hired by clients and start hiring them. Stop waiting to receive an RFP or mailing hundreds of clients four to six times a year to stay “top of mind.” Instead, pick the folks you really want to work with, regardless of how big they are or what agency they currently work with.
The author is a little more concrete in the next paragraph, but if you want a second opinion, try this on for size: The Secret to Landing Clients Nearly 100% of the Time.
This is just another facet of what seems to be terribly wrong with business, which shapes our cynicism and despair over what we are getting paid to do. I hope that for you, it started out as a job you would have loved to do for free.
I think adopting this mentality of hiring clients instead of getting hired has a something to do with fulfilling your goal of being your own boss. That phrase is said a lot when it comes to freelancing, but applies to the rest of the industry as well. Even larger companies start somewhere. Somewhere small, in which they often compromise their true worth just so they can earn something. Something that really isn’t enough.
Whether you work alone or in a group, whether you’re a big name in the business or just starting out, stick to your guns. If that client does not understand why they have to spend the right amount of money for their venture with you, make sure that before you drop them you’ve done all you can to explain the numbers.
But if this request for proposal hoopla is hurting your operating costs and, more importantly, preventing you from doing your actual job, ask yourself: are they worth it? Have they earned what it takes to be part of your portfolio? You’d want to be proud of every single project you’ve done, wouldn’t you?
You can never run out of things to talk about when it comes to cascading style sheets or CSS, but lately there have been developments that are more than worth your while. CSS3 is slowly but surely becoming mainstream thanks to several browser updates, while the gurus continue to think up smart ways to code those stylesheets.
Update: Ajaxian blogs that WebKit will support CSS variables. Amazing news that has come out just in time with this blog post. I’ve listed it below as well.
Tools and Frameworks
I’m not going to mention every imaginable CSS framework and piece of software out there, but these are worth looking at.
Stylizer: Skybound Software comes out with perhaps one of the most interesting (read: intuitive) CSS editors to date. It helps that it has a free version with a 14-day trial for its Ultimate counterpart.
YAML: Smashing Magazine shows how it is possible to create a flexible layout using Dirk Jesse’s HTML/CSS framework called YAML. The YAML Builder is an excellent plus.
CSS Cacheer: Shaun Inman releases a mini-application for CSS caching.
Best Practices
Here are some great nuggets of advice that will help guide you when writing your own CSS.
Font Stacks: The Unit Interactive blog lists various scenarios in which you should order your CSS font stacks. A PDF file is available for download, too.
Fun With Floating in the Grid: Devlounge recommends several practical CSS classes and layout techniques to achieve hassle-free floats and grids.
Performance Testing: jpsykes reports how the different browsers fare using different CSS selectors and attributes.
Faux Absolute Positioning: A List Apart comes up with a new layout technique that does away with hacks.
Nesting Specifics: DZone goes into the nuances of CSS selector specificity.
CSS3 and Beyond
If you’re still hesitant to use CSS3, you might change your mind now that some of the most popular browsers are slowly incorporating support for it.
Firefox 3: Killian Valkhof and David Baron write about support for several CSS3 features in the latest version of Mozilla Firefox. These include ligatures, kerning, font-size-adjust, inline-block/inline-table, and even text-shadow—coming in Firefox 3.1. The complete list is on Mozilla’s official page.
Opera 9.5: The Opera Developer Community discusses the CSS3 features its own browser supports, namely, @media, text-shadow, opacity, HSL values, overflow-x/overflow-y, :firstof-type, :nthchild, -o-background-size. Not to mention HTML 5 elements and SVG. Don’t forget to check out Opera’s debugging tool, Dragonfly.
Safari 3 has been out for a while now, but it’s Internet Explorer that we’re really waiting for. Unfortunately, IE8 will continue to lag behind.
Qualified Selectors: Shaun Inman proposes a different breed of CSS selectors.
CSS Variables: David Hyatt announces that WebKit now supports CSS variables as documented here.
There are so many wrong things about the branding of MobileMe, Apple’s latest product announcement, that it’s distracting me from seeing how good it could be.
From .Mac to MobileMe
First, the name. MobileMe is a new spin on .Mac, but its new name shows clear focus—mobile. Okay, fair enough, but it’s like no effort was put into coming up with the name. Apple is supposed to be hipper than that. MobileMe has this bad dot-com naming vibe surrounding it. You know, all those names filled with pronouns (I, me, my, you, your, we, our) that stroke the ego.
Then again, Apple is the poster child for that naming strategy. But they could have gone the tried-and-tested “iRoute”. From iMac to iTunes to iPhone, why stop prepending i’s now?
Me vs. ME
Here’s something more disturbing. Why does the MobileMe logo look so strikingly similar to that of Windows ME?
Whether or not this is a coincidence, Apple should be criticized for allowing itself to be associated with an operating system people considered crappy. It’s the last thing you want to do when building your brand.
For those who want to defend Apple by saying “but the handwritten me of MobileMe does not look like the one on Windows ME, it looks better”, I’m not hearing you. They still look too much alike.
Microsoft is too much of Apple’s competition to have this similarity. If Apple drew inspiration from, say, Starbucks, Disney, or Nike, we probably wouldn’t mind—except that you’d think Apple had enough creativity to do more groundbreaking design to take a cue from someone else. Since when does this company listen to anyone else? If Apple is doing this on purpose, then it’s an even lower blow.
Any designer worth his salt would not want to be mistaken for plagiarizing something, much less something not worth copying in the first place.
Attention to detail, lost
No matter how you look at it, the choices made with MobileMe’s branding just aren’t right. They’re sloppy at best. Apple is known to pay painstaking attention to detail, but I can’t see it with MobileMe.
Update (June 14, 2008): Victor says his project, vi.sualize.us, has been around longer than the sites I’ve mentioned here. So, again, this is another image bookmarking site worth checking out.
I smell a web trend. In the last few weeks I’ve discovered two new image bookmarking sites in addition to the insanely famous but still exclusive FFFFOUND!—We heart it and typeish.
To those who are asking “but why?”, normal bookmarking services aren’t visual in nature. Whether it’s social bookmarking like del.icio.us, or social voting like Digg, or serendipitous discovery like StumbleUpon, users decide if a website is worth visiting by looking at its name, description, tags, and popularity.
Granted, those sites are getting smarter by taking snapshots of what the sites look like, or by isolating thumbnails for if it’s an image or video being bookmarked. But it’s nice to have a dedicated tool that satiates your hunger for all things eye candy. The question is, are these image bookmarking sites effective?
more
