Is It Bigger Than A Breadbox?

May 18, 2010 Appirio

Dan Arrigan

Just as web designers started rejoicing in the increased standard-resolutions, wider monitors and the wonderful flexibility that comes with greater available screen real-estate, along come Google Sidebar Gadgets – devices with phenomenal cosmic power, but an itty-bitty living space.

Google Calendar and Gmail Sidebar Gadgets provide an incredible access point into your Google App. Whether they are simply extending existing functionality with additional visualizations, augmenting the Apps with custom controls, or even integrating the App with additional applications – Google or otherwise – Gadgets have certainly proven themselves Enterprise ready.

As demand for powerful Gadgets rises, a new model for web design need to be embraced.

At its core, a Gadget is simply a web page; a really tiny web page. The expectations for a Gadget is to increase the value of the App; make using the app easier, make integrating with other apps smoother, generally make life better. That can be a tall order for such a small device.

The width of the sidebar is less than 170 pixels. The height of the Gadget, though technically flexible, is also limited by practicality. If you’re building sidebar Gadgets, remember that your Gadget is likely one of many. In addition to planning for limited width, keep in mind a limited height that will not overly monopolize the sidebar, pushing other Gadgets out of sight. Otherwise, at the least, your Gadget runs the risk of always being toggled closed (which might be acceptable). At the worst your Gadget starts off with a negative user-reaction which might kill its chances to show its greatness; only Gadget that are evidently useful will remain in the prime real-estate of the Sidebar.

Also note that currently you have no control currently where the Gadget sits in order in the sidebar. If the Gadget is huge it heightens the likelihood that functionality will be scrolled below useful, displayed content. And though the vertical area of a Sidebar is conceptually limitless, out-of-sight is out-of-mind (which is a short step to being out-of-the-Sidebar).

So you want to keep your Gadget’s height fairly limited, and your width is already fairly limited. With such constraints, how are you suppose to build anything useful?

Well, another way to think about designing for Sidebar Gadgets is to design for a cell phone’s screen.

That’s right. Take your Google Android and hold it up to your monitor. Remarkable how similar in sizes the Sidebar is to the screen size. Take guidance from the height of the cell phone screen. Some incredibly powerful apps have been built for cell phones. The trick? Reusing real-estate. Instead of the vertical scrolling you’d have with Twitter’s “more” button, try pagination. Swapping out content for more content is the trick with Gadgets.

Google Sidebar Gadgets can contain as much as Inspector Gadget’s hat. But, like the hat, they need to be well organized and hidden away until they are needed.

Do you like using light-boxes for popups? Who doesn’t? Well, try that in a Gadget and you’ll have an incredibly amusing miniature box within the Gadget’s frame. The Gadget is contained in an iframe on a different domain. Unless Google has opened up access, you’re not doing much to the parent frame.

So what do you do if you really need to display large amounts of data? Links that open up new windows? Full page redirects?

Those are options. But if you’re really in a position where you need to display within the App significantly more details than can be contained within the Gadget’s Sidebar space, you always have the Canvas View option. Toggling
this View within the Gadget will take over the visible space designated for the Canvas. In Calendars this the entire width of the page (with just a little border around the Canvas). In Gmail, the Canvas view is the area that would normally display your emails.

Google Sidebar Gadgets might be limited in width and height, but they have limitless depth.

Previous Article
Give Us a Tip, Win a Book

In honor of Google I/O this week, our Google Center of Excellence (COE) team got together to lay out a few ...

Next Article
Google App Engine – Don't write in isolation
Google App Engine – Don't write in isolation

Mauricio Desiderio With Google I/O kicking off in San Francisco this week, Appirio will be sharing tips we’...