Member Sign In
Not a member?

A Wired.com user account lets you create, edit and comment on Webmonkey articles. You will also be able to contribute to the Wired How-To Wiki and comment on news stories at Wired.com.


It's fast and free.

Webmonkey is a property of Wired Digital.
processing...
Join Webmonkey
Please send me occasional e-mail updates about new features and special offers from Wired/Webmonkey.
Yes No
Please send occasional e-mail offers from Wired/Webmonkey affiliated web sites and publications, and carefully selected companies.
Yes No
I understand and agree that registration on or use of this site constitutes agreement to Webmonkey's User Agreement and Privacy Policy.
Webmonkey is a property of Wired Digital.
processing...

Retrieve Sign In

Please enter your e-mail address or username below. Your username and password will be sent to the e-mail address you provided us.

or
Webmonkey is a property of Wired Digital.
processing...

Welcome to Webmonkey

A private profile page has been created for you.
As a member of Webmonkey, you can now:
  • edit articles
  • add to the code library
  • design and write a tutorial
  • comment on any Webmonkey article
Close
Webmonkey is a property of Wired Digital.

Sign In Information Sent

An e-mail has been sent to the e-mail address registered in this account.
If you cannot find it in your in-box, please check your bulk or junk folders.
Sign In
Webmonkey is a property of Wired Digital.

Share Your Mundane Details

By Adam DuVander November 21st, 2008 Categories: Software & Tools, Visual Design

Pie chart of ingesting liquid

The web has all sorts of data, but it’s sorely missing yours. If you request an account from Daytum, you can change that.

The site lets its users collect data about themselves and share it via beautiful charts. Track your coffee consumption, how often you exercise, or anything else that matters to you.

One of the site’s creators, Nicholas Felton creates a personal annual report each year that shows his year in data. Through gorgeous visualizations, Felton shows off the mundane. And now you can, too.

Felton gave a talk about the history of Daytum at the Future of Web Design. His slides are embedded below:

Using the site is super easy. You can drop in, add some data, and drop out. There’s also a Twitter submission system, for adding your data on the go.

The site is so simple, yet has a number of options for users. There’s lots of room for improvement, such as an API to allow some automated inclusion of data. Overall, this is a fun, easy-to-use site that’s worth checking out.

See also:


Tags: data, datavis
Post Comment | Comments | Permalink

Create Image-less Graphs And Charts

By Adam DuVander November 20th, 2008 Categories: Visual Design

Example CSS charts

Adding beautiful charts to your site does not have to require a hefty server-side process or a third party service. With CSS and a little ingenuity, you can have the lightweight, easy to create visualizations of your data.

The design mavens over at Six Revisions have put together eight examples of CSS charts and graphs. Each one uses little to no images to create snappy bar and column chart. There’s even a scatter plot example and some standards-supporting, accessible sparklines.

Google’s Chart API is an alternative to rolling your own. Passing your data is almost as easy because it goes in an image URL. While you don’t have to pay for the bandwidth of the chart, the API still comes with some strings attached and Google can pull the plug whenever it wants. If you’re looking for 3-D or pie charts, the sort of stuff that can’t be done with CSS, that may still be your best bet.

See also:


Tags: charts, CSS, graphs
Post Comment | Comments | Permalink

Google Spices Up Your Inbox With New Gmail Themes

By Scott Gilbertson November 20th, 2008 Categories: Software & Tools, Visual Design

gmail themesGmail has always been notable for its very all-business approach to e-mail, but with the service well established in the mainstream, Google has decided to add some more fun-oriented features. The latest is a series of themes that let you transform Gmail’s appearance to suit your whims — because nothing “spices up your inbox” like canned, swappable themes.

We’ve been hearing rumors of Gmail themes for some time, but now it’s official. Of course, like most new features in Gmail, themes are rolling out slowly, so if you haven’t seen them in your account yet, be patient.

If your account has been blessed, click the settings link at the top left corner of the screen and then look for the new “Themes” tab.

Most of the new themes are simple color schemes as you can see in the screenshot above, but there are some image-based themes as well — one that turns your inbox into a retro notepad, some nature themes that change scenery over time, weather themes that reflect what’s happening outside, and a couple character themes like “ninja.”

Of course Gmail was already themeable using browser add-ons like Greasemonkey and Stylish, but the new themes are much more pixel-prefect and will work no matter what browser or PC you use to access your account.

The only thing that seems to be missing is a way for designers to create and upload their own custom themes, but we suspect something along those lines will arrive before too long.

See Also:


Post Comment | Comments | Permalink

Make Gorgeous Headlines With Only CSS

By Adam DuVander November 12th, 2008 Categories: Visual Design, Web Basics

Example CSS headline from CoudalYes, you can use JavaScript to embed fonts. You can also use sIFR, which is Flash. But how about using a little creativity and good ol’ CSS?

Ross Johnson has some beautiful examples of CSS headlines and more, including code.

If you aren’t naturally a type nerd, you may be surprised that the Coudal Partners headline font is bolded, condensed, but otherwise normal Times New Roman. As the examples show, there are tons of ways to change how a font looks while sticking to the standard set of cross-platform faces.

See also:


Tags: CSS, font
Post Comment | Comments | Permalink

Image Types Duke Out Over Quality And File Size

By Adam DuVander November 12th, 2008 Categories: Visual Design, Web Basics

PNG vs JPGThe age-old image type debate is going on over at Reddit. What used to be mostly JPG versus GIF now puts JPG up against PNG.

Yahoo’s Stoyan Stefanov recently had a series on image optimization. His breakdown on page weight was particularly fascinating. Google’s home page is 75% image, weight-wise, because there’s very little to it besides the logo and search box.

Stefanov also posted a good run-down on file types, which is less snarky than the opinionated-but-useful Reddit thread. But for quick fun, see the image type comic that the Reddit folks are discussing.

While I love PNG for its clarity, I often end up choosing JPG for screenshots on Webmonkey because of size. PNG is often 10x the JPG version, with little loss in quality.

But aren’t we all on broadband now? According to a recent study, no. Just over half of Americans have home broadband connections. However, another study shows that 90% of active users have fast connections.

That said, Mobile use is expected to increase, and its speeds are not nearly up with broadband. Plus, if you’re serving bigger images from your own server, you have to pay for that bandwidth, which can add up with significant traffic. All this means image optimization is still relevant, even when many do have access to fast connections.

See also:


Tags: gif, images, jpeg, jpg, png
Post Comment | Comments | Permalink

Dashboard Shows Our Open Data Future

By Adam DuVander November 11th, 2008 Categories: Platforms & APIs, Visual Design

Sprint data dashboard

Sprint’s beautiful dashboard is full of widgets showing a glimpse into what’s going on in the world. Among the things it tracks: sticky notes being produced, organ transplant operations, and temperature around the world.

There’s an info pane for each, explaining where the data comes from. Most appear to be based on estimates (nobody is counting each coffee cup as it’s being produced), but what if it really was all live?

If the future of the web is open APIs, this will be possible. What if we all had a dashboard like this, connecting us to the data that matters to us?

[via Daring Fireball]

See also:


Tags: dashboard, data
Post Comment | Comments | Permalink

Someday You Will Not Hate the CSS3 Advanced Layout

By Adam DuVander November 10th, 2008 Categories: Visual Design

At first glance you’re going to hate the “advanced layout” that is currently a W3C working draft. Maybe it’s the similarity to table-based layouts, of which we all still have nightmares. Mainly, you’ll likely cringe just because it’s such a foreign way to write CSS. I think you’ll eventually come around.

Example of advanced layout CSSConsider this common layout: a header covers the top of the page, followed by a left sidebar, content area, and a right sidebar. The proposed CSS declaration for this example is display: “aaaaaa” “bccccdd”. Note that this has not been declared a standard, nor is it supported by any browser yet. It’s just a proposal.

Creator of jQuery John Resig likes it, and he’s always one to jump at simplified syntax. The funny thing about this advanced layout, which you probably still hate, is that it’s actually simpler than the floats and clears that have to happen to create similar layouts with CSS today.

Newspaper front page with advanced layout CSS

As much help as CSS frameworks have become, they can add extra weight, with markup that provides CSS hooks, but does not make sense semantically. In the case of the so-called advanced layout, once you have described the grid with the sequence of letters, you can simply refer to the positions in CSS:

#header {
position: a;
}
#sidebar {
position: b;
}

...

The outcome is HTML that doesn’t need to be unneccessarily nested. CSS without confusing calls to grid-based rules.

What do you say? Do you like it yet?

See also:


Tags: CSS, future
Post Comment | Comments | Permalink

BlueTrip: CSS Framework Combines the Best of Several Worlds

By Scott Gilbertson November 10th, 2008 Categories: Visual Design, Web Basics

bluetripLove them or hate them, there’s no denying that CSS frameworks are here to stay. Frameworks make rapidly sketching out a website design much easier by handling lots of boilerplate tasks for you — positioning elements, setting typography defaults and more.

A relative newcomer that’s quickly earned a place our media servers is BlueTrip, which combines the best elements of two other frameworks Blueprint and Tripoli and combines them to create a new one (hence the name).

BlueTrip is the brainchild of a designer/blogger by the name of Mike who runs Capsize Designs. Although you can grab a copy from his site, BlueTrip recently moved to a more permanent home at bluetrip.org, which is alredy up and running in limited form.

While BlueTrip is a nice framework in its own right, one of the things we really like about it is that it exemplifies the best way to use CSS frameworks — take the elements that prove helpful and ditch the rest.

In this case BlueTrip takes the grid layout tools of BluePrint and the typography tools of Tripoli and ignores the rest.

Of course critics point out that frameworks often add semantically unnecessary class names and encourage otherwise useless wrapper divs and more. Worse, frameworks can be bulky and hurt your page load times.

Still, at least for the prototyping stage, we find frameworks to be an invaluable tool in the web designer’s toolbox. And BlueTrip is a great example of how good designers use frameworks.

For a more in depth look at the CSS framework debate and some links to other frameworks be sure to check out our previous coverage.

See Also:


Post Comment | Comments | Permalink

Take Two: Mozilla Designer Revamps ‘Pie Menu’ Concept

By Scott Gilbertson November 10th, 2008 Categories: Software & Tools, Visual Design

Pie menuOur recent post about contextual pie menus as an alternative to simple lists drew some strong responses from readers — both here and at the source. Now Mozilla designer Jono DiCarlo is back with another, slightly tweaked version that builds on the original, but incorporates some changes based on user feedback.

This time the menu isn’t strictly a pie, it’s a pie of squares, which solves a couple of common user complaints — text layout is easier to read and sub-menu items become much easier to navigate.

DiCarlo has a new mockup available for testing, which you can find on his demo page (note that you’ll need Firefox 3, or another browser that supports the HTML5 canvas element, for the demo to work correctly).

Perhaps the biggest advantage of the square version of the pie menu is that mousing over a square can invoke a sub-menu that cascades down (or out, depending on the parent square’s location in the pie). However, at least on some level, the sub-menu is essentially a list, which puts things back where they started — navigating a list of items.

After playing around with this latest incarnation, I do think it’s better, but I’m still not sure the concept is a huge improvement over the traditional list. There are some places where the improvement is obvious. For instance, with a menu to navigate backwards or forwards through your browser history, it makes sense to have back on the left and forward on the right rather than both in a list. But there are plenty of cases where the “improvement” offered by the pie menu is more subjective.

As Webmonkey reader joeBoy pointed out the comments of the previous post, hardware has evolved to deal with the list menu — the scroll wheel eliminates much of the hassle involved in getting to the bottom of a list — and those tools are lost with a pie menu.

At the same time, the pie menu might gain some appeal with what’s becoming an increasingly common hardware feature — gesture-support (think the iPhone or new MacBooks). Using gestures makes the pie menu feel a bit more natural and offers alternative ways of selecting items. For example, imagine if, once invoked, a simple twist of the fingers rotated the menu giving quick and easy access to each item.

Still, call me old-fashioned if you like, but I think I’ll stick with a simple list for now.

Be sure to let us know what you think of DiCarlo’s new demo and what, if anything, still bothers you about the pie menu.

See Also:


Post Comment | Comments | Permalink

Get Inspired by These Social Network Avatars

By Adam DuVander November 6th, 2008 Categories: Visual Design, Web Basics

How many times have you joined a new social site and not immediately uploaded a picture to represent you? Probably more than you can count. So you know the feeling of making your way around sites while looking like every new user, with a default avatar.

If you’re planning on creating a site that lets users upload a photo, check our collection of default avatars to give you inspiration… or maybe tell you what not to do.

Who’s that shadowy figure?

Shadow style avatars

A popular choice for default avatars is to include the outline of a person without many details. In some cases, the head is completely round. Not the sort of attribute I would want to have. Maybe they’re encouraging users to change?

Avatars above from: Clipmarks, Diigo, Facebook, MySpace, StumbleUpon, and YouTube

Did a child draw that?

Simple face avatars

Another common choice, the dotted eyes and lined mouth, really tells users there’s not much use remaining anonymous. But I’m a pretty big fan of the one on the right.

Avatars above from: Flickr, Pownce, Twitter, and Webmonkey.

Give the user a choice

Unthirsty avatars

How cool is this? Happy hour site Unthirsty lets new users choose from among eight inebriated characters, as well as the option to upload your own image. It’s a low barrier to looking a little different than most everyone else. If many users aren’t going to upload a pic anyway, why make them suffer?

Frighten the user into uploading a pic

Mike Tyson avatarOf course, maybe you want them to suffer? Social betting side BetArcade chooses this particularly heinous picture of Mike Tyson as its default avatar. As embarrassing as it is to be seen as a newb, it’s even worse when you’re clicking around looking like Mike Tyson.

What are your favorite avatars?

We probably missed your favorite site’s default avatar. Is it good? Is it terrible? Tell us all about it in the comments.

See also:


Tags: avatar, social
Post Comment | Comments | Permalink