Making the Widget Look Great on Your Site

September 23, 2011

The minimal design of the PulseMaps widget allows it to look good on almost any site, without drawing too much of your visitors’ attention.  Most sites simply use the default widget design and colors, which is OK, but spending a couple of minutes tweaking the widget settings could make a world of difference.

We took a critical look at some of the sites using PulseMaps, and ended up wading through quite a few sites.  Soon enough, we started noticing some patterns in how the best looking sites were using the widget.

So, here are things you can try to make the widget look great on your site:

Set an appropriate width

The widget areas (usually headers, footers, and sidebars) almost always have a particular width.  If the widget is much larger than this width it could, in the worst case, mess up the entire layout of your site.  At the very least, the widget will simply go over the allocated area, and that usually doesn’t look too good.  If the widget  is too small it might look odd as well.

Try a transparent background color

A transparent background is often the best choice.  It allows the map to blend in with your site’s background texture. This will greatly reduce the “glued on” feeling the widget might otherwise have.

Pick a foreground color from your theme

Spend some time picking the perfect foreground color for your widget.  White or dark gray are often good choices, but if your theme has a prominent accent color or secondary color, those might be great choices as well.

Examples

Here are examples of some of the best looking widgets we discovered.

This widget on A Blog of ICE fits in perfectly with the theme, by simply using a transparent background color:

The transparent widget works well with a textured background.

 

This widget on Love is Better is not transparent, but the colors have been chosen to perfectly match the theme.  The result looks great:

Matching colors with the theme works wonders on loveisbetter.org.

 

Our last example is earth, wind, and tires where the transparent background again allows the widget to seamlessly blend with the theme:

Transparent widget perfectly blends in with the theme.

 

Got ideas or more examples?

Does your website use the PulseMaps widget in a creative way, or do you think it fits your design particularly well?  Give us a link in the comments section!

Finally, please don’t be offended if you’ve spent a great deal of time to make the widget look great on your site, but it wasn’t mentioned above.  There are simply too many for us to look at all of them!