Get it All

Amid all the tragedy of the Japanese tsunami situation, we got a chance to inject a bit of normalcy into our day and go to the mall. While there, I had a chance to check out a Motorola Xoom at the Verizon store. Of course as any good developer would, I immediately began running through a battery of my own websites and projects to see how they compared on the native browser.

The result was somewhat shockingly disappointing: not only did Xoom’s browser appear not to want to render the web font packages I had installed on one of my sites, but in fact did not degrade properly either. The font packages are Font Squirrel packages and work decently with every other browser I’ve encountered. But on the Xoom, serifed fonts which had the base “serif” as their last choice of fonts in the family ended up rendering in a sans-serif text.

Is that because the browser is choking on the web font and just giving up? Is that because there is no default serifed font (how is that even possible?)? I do not know and only got a few moments of playing before the inevitable cheery sales person investigated my interest and harshed my groove. So I didn’t get a chance to find out. But boy, would I like to!

I think that there is a natural and inevitable tension in web design between the designer’s desire to control how information looks and the constraints of browser vagaries and inconsistencies. Those of us who have been designers for a while already know the story: browsers built with flexibility and error-correction in mind created a web world where even playing by the rules doesn’t always mean getting what you want from your design out of all browsers. The solution in many quarters of the Internet – and this little website, no less so – has been to fix the borders of the website and eliminate the elasticity of HTML as a possible threat to consistency. Recently, however, I’ve begun to think differently on the issue of elastic web design and thought I’d post a little some of my ruminations on the subject.

It is an irony that, as the Internet and computers have grown up and evolved together, web design seems to have grown apart from its parent technologies. “In the Beginning…” as the phrase goes, web pages were nothing more than a digital expression of standard print text. Browsers were meant to “browse” documents like those out of an online library that were largely text-only works and HTML was designed to be fluid in its rendering. Pages were expected to be able to flow across the screen…. all 640×480 pixels of it.

Computers have gained in complexity since then. Internet web pages have gained enormously. Most experts credit each with pushing the other: computers would not be what they are today without the Internet and the Internet could not exist in its current state without computers and Internet connections that could support it. As the web has become more and more of a visual, graphical medium, it has become more and more commonplace to see sites designed with fixed widths. Some of the biggest names on the Internet, from Twitter to Yahoo to FaceBook, all use fixed width pages to deliver their content to their customers.

But the reality of the fixed-width page is that it is now directly at odds with the current state of technology in computers, and has been at odds with it for some time. Whereas in the past, monitors all used the exact same proportional dimensions, today monitors can be quite different from system to system. I’m currently writing this post on a computer with a 20″ widescreen monitor, 1600×900 resolution. My wife’s computer behind me is a standard-size monitor running at 1024×768, the resolution generally most common on the Internet and the one most commonly designed for. Should a web page really demand a single proportion? A single resolution?  Does that thinking really make sense given the huge variation of screen sizes and resolutions currently available? Why would an Internet that has always pushed the bounds of what my computer does leave me hanging with all that wasted graphical space? When I view FaceBook, I get the impression that I wasted a third of my money on extra screen I’m not using.

And so while this specific blog does not currently match my new thinking, the home page of this website definitely reflects what I consider to be the next new reality in web design: that designers aught not to be responsible for robbing their viewers of the monitor space they paid so much money for. I think it’s time to open up the margins of our web pages and find new ways to express our creativity that conform to the new world. Creating bigger pages with wider margins is not adequate; the real answer is to build for fluidity.

My home page is built around the idea of the two major graphical elements of the page seeming to flow from outside the margins of the screen. The white curvy thing with the blue border and the grey box both extend beyond the page. But if you prefer a border to your site – they’re nice for adding a bit of null-element color to make the content pop – then the choice is to use a percentage width or else a block main element with both left and right margins (margin: 5px 20px; for example). There are many more solutions available for the ingenious web designer.

Fixed widths and backgrounds are not going away. But I think that if you consider it, you will come to the conclusion that the courteous use of the space given to you by your audience makes good usability sense and good viewer relationship sense.

Those of you who, like myself, are loyal FireFox users have by now probably fallen in love with the Awesome Bar. Despite it’s childish name the Awesome Bar really does transform the way a browser, it’s history and it’s favourite site list work for the user by making all of these things available to you in the URL bar when you start typing.

As you type in the Awesome Bar, the browser searches your history and favourites to find things you’ve used or bookmarked in the past that match. This allows you to, rather than either searching your favourites or typing whole URLs in the address bar, simply type in “wordpress function” and get the WordPress Function Reference page as the first choice, assuming you’ve been to that page, bookmarked it, and haven’t been to a bunch of other pages with similar names. Further, the Awesome Bar seems to also take into account your history of selecting it’s search results into account. I have a couple of different ways of accessing my webmail, for example, but FireFox has learned which method is my preferred method.

So, yeah. I’m a big fan of this new way of doing things. And Google’s Chrome seems to add the same functionality. But there’s a down side of which I informed Mozilla through their feedback system, for what it’s worth: the Awesome Bar has the potential to be a Christmas Spoiler Bar if they don’t make some serious improvements in the next month or so.

Imagine buying your wife a nice piece of jewelry from your favourite online store only to have her sit down to the computer later that same day and – in searching for something totally unrelated – come across an Awesome Bar result that says “thank you for your order, other people who bought ‘priceless jewelry’ also bought. . .” Not awesome. Not awesome in the slightest. In fact, it would suck.

What do you do in this case? It’s important enough that you might be tempted to dump your browser history. But wait! Isn’t that defeating the purpose of the Awesome Bar, at least a little? Of course it is. And particularly for those of us who do a fair amount of research online, the Awesome Bar is like a running dynamic notes list we can refer back to, and losing that functionality for a few months over Christmas holiday is really throwing the baby out with the bath water. But what else is there?

A better solution would be if FireFox provided a couple options:

  • Disabling History tracking for this session: Give the user the option of turning off any history tracking for a given window. They could do what they need to and close the window, effectively eliminating all “history leaks.”
  • Delete Entry: In the Awesome Bar search results, at the right of each result should be the option to delete it if you want. After all, it’s your browser and your Awesome Bar, I could see this being very useful for lots of reasons, not the least being pages you browsed without meaning to or those that didn’t add any value to your search.
  • Block Site: Finally, give us the option to specify – maybe right in the Awesome Bar search results, next to delete, along with a button somewhere – either that we don’t want a given site tracked or that we want all history entries from the site that FF already has deleted.

I think that the inclusion of these simple features would vastly improve the Awesome Bar for all of us who are slowly becoming addicted to it’s usefulness. I say “simple,” because I have no idea what it would take to make these things happen, of course.

This is really a cool development in web applications.

Mozilla Labs Blog » Blog Archive » Prism

Unlike Adobe AIR and Microsoft Silverlight, we’re not building a proprietary platform to replace the web. We think the web is a powerful and open platform for this sort of innovation, so our goal is to identify and facilitate the development of enhancements that bring the advantages of desktop apps to the web platform.

Technorati Tags: , ,