'Tips' Archives

Typetester: Web Typography
Conflict Resolution
Through Visualization

Typetester
See how different web fonts render with Typetester.

When it comes to font usage on the web, sometimes developers, designers, account executives and clients speak different languages.

The Conflict

Developers describe typographic attributes in cryptic terms: “Font color=#666999.” Designers use more esoteric descriptions: “More chroma, a tad bigger.”

Clients often sound like brand police: “Just match our brand standards,” and account people adopt the role of arbiter: “Just give the client what they want, PMS 285 blue, and don’t be difficult.”

These are all valid approaches, but if a font doesn’t render properly for a large percentage of your audience and makes the end user feel like the site was designed by committee, the whole team loses.

One Picture, 1000 Words

Enter Typetester, an online resource tool that allows you to view and compare font family members (web safe and otherwise), see tracking, colors, and line spacing—even specify background colors—and view it all across multiple browsers and platforms.

Typetester is simple, useful and efficient, and helps bridge communication gaps between web project team members and stakeholders through visualization.

The Resolution

Typetester takes the guesswork—or at least the assumptions—out of web design.

Next thing you know, developers, designers and marketing people will be going out to lunch together.

Test it out for yourself here.

Share/Save/Bookmark

Killer Color from Kuler

Kuler bar
Above: a highly rated Kuler bar

Color blind? Struggling with triads? Color your world at Kuler from Adobe Labs.

If you’re in need of a working color scheme, you just found it. Kuler allows you to exchange and explore color across a spectrum of interactive formats. Peruse the most popular schemes or create your own palettes and share them with other color enthusiasts via the Kuler community.

From forums to feeds Kuler promises the most socially infused color site on the planet. And we thought The Color Schemer was a colorful inspiration.

Share/Save/Bookmark

Calculating and Converting
with Google

Cylinder
A Mind like a Steel Trap

If you don’t have a mind like a steel trap, or fifth grade math concepts are getting a little fuzzy, there’s always Google.

I needed to determine how many milliliters a particular cylinder would hold for a promotional project. Thanks to Google I was able to compute all the necessary calculations and conversions without using a calculator—or pen and paper.

The Formula

I knew the formula for determining the volume of a cylinder is:
π • r² • height = volume (where r = radius)

Had I not known the formula, I could’ve easily found it (and generator sites) by simply Googling: cylinder volume. The same is true of pi; Googling: pi generates a number accurate to 8 decimal places.

The cylinder has a radius of 1.5″ and an overall height of 10″. In this case, a basic 3.14 round off of pi sufficed. Based on the formula, I typed the following directly into the Google search field (*=multiplication; ^=exponent/power of):

3.14*1.5^2*10

Google returned with: 3.14 * (1.5^2) * 10 = 70.65

The cylinder has a volume of 70.65 cubic inches, but I need the volume in milliliters.

Converting Results

Typing directly into the Google search field, I entered:
cubic inch to milliliter

Google returned: 1 cubic inch = 16.387064 milliliter

I entered the number of cubic inches (70.65) multiplied by the conversion factor (16.387064) into the search field: 70.65*16.387064

Google responded with the answer:
70.65 * 16.387064 = 1157.74607 or about 1158 ml.

Realizing Results

Using Google as a calculator can be a time saver. For a legend of symbols and much more on using Google as a calculator, check out Google’s calculator page.

Then read our latest Great Marketing Ideas for 2007 article and calculate the ROI you’ll likely realize by reading .think.

Share/Save/Bookmark

9 Steps to Speed Up
Broadband Firefox Browsing

If you’d like to significantly decrease your broadband load time in Firefox, follow these simple instructions to change defaults originally set to accommodate dial-up users.

Step 1: Open Firefox and type about:config in the address bar where you normally type a web address.
Config

Step 2: In the filter bar below the address bar type network.
Network Filter

Step 3: Double-click on network.http.pipelining to change the setting from false to true.
Pipelining

Step 4: On the line below network.http.pipelining double-click on network.http.pipelining.maxrequests and change the number to 10.
10

Step 5: Two lines below network.http.pipelining.maxrequests double-click on network.http.proxy.pipelining to change the value from false to true.
Pipelining

Step 6: Several lines above network.http.proxy.pipelining you’ll see network.http.max-persistant-connections-per-proxy and network.http.max-persistant-connections-per-server. Double-click each line and change the value to 8.
Persistent

Step 7: Two lines up locate and double-click on network.http.max-connections and set the value to 48.
Maximum Connections

Step 8: Now right-click (control-click on a Mac) anywhere in the configurator (the area where you’ve been making the changes). Select New then Integer. When prompted, copy and paste or type the following into the field provided: nglayout.initialpaint.delay.
Integer

When prompted to add a value, enter the number 0.
Value

Step 9: Close all windows and tabs. The changes will take effect when you restart Firefox.

These changes allow Firefox to make multiple server connections and will speed up page downloads for better, more efficient use of your broadband connection.

Share/Save/Bookmark

5 Great 2007 Marketing Ideas
No.2: Test Your Website

Usability Interface

They say usability is like oxygen - you never notice it until it’s missing.

What it Is. What it Does.

In web design, usability refers to the relative ease of use of the site. Is the interface intuitive to someone unfamiliar with the company, product, or terminology? Can information be found quickly with a minimum number of clicks?

Usability testing is a qualitative method of identifying design-wise what works and what doesn’t through typical user behavior. Whether your site is live or in development, implementing strategies derived from usability test data can positively affect the success of your site, and ultimately your brand.

Who to Test

You’ll get the best results by testing subjects with and without knowledge of your company or industry, and with a range of web experience, from neophyte to tech-savvy. That’s not to say your test group needs to be huge. Usability expert Jakob Nielsen says that testing five users will uncover 85 percent of a site’s usability issues.

Mining for Data

Usability testing can take many forms. A common and successful method employs tracking mouse movement and videotaping test subjects as they complete a variety of tasks from locating the site itself when provided only the company name, to navigating through the site to find specific information.

Mind the Data

The data is then analyzed with video and mouse movements displayed split screen. It becomes easy to identify areas that are counterintuitive through mouse movement, facial expression, body language, or even verbal clues such as “I’m lost.?

If your site is particularly complex or information-rich, after the initial issues are fixed consider doing a second round of testing. Often additional areas for improvement are identified once the initial stumbling blocks are removed.

Get Results

After observing unorthodox, yet common search habits in testing, we made minor changes to one non-profit’s site that increased traffic by a factor of 100.

Usability testing also revealed the need to reposition elements within the interface. The simple move increased hit rates ten-fold to an area vital to their site’s target goals and objectives.

Everyone processes information differently, and the goal for any site is a simple, common sense interface that’s easy to use and understand. Usability testing identifies whether you have met that goal and enables you to make changes to better meet your customers’ needs—always a benefit.

For more information on how to achieve measurable results with your marketing dollars see Great 2007 Marketing Idea No. 1: Paper and Purls.

Share/Save/Bookmark

Subscribe

Subscribe to .think
just enter your email address

LatestTHOUGHTS

Brainstorm Featured

in Step Inside Design’s recently released, 2008 Best of Web Annual for the design and development of Lumina Foundation for Education’s Camino a la Universidad site.

.THINK now listed on Alltop.com

under Branding. Grouped by topic, Alltop aggregates stories from “all the top” sites across the web (that’s their story and we’re sticking to it). View our .think listing, here: branding.alltop.

RapidoStart (Mac)

Here’s a free Mac app allowing you to call up, via customized abbreviations, any text string you copy and paste frequently. Best of all the text is placed pre-formatted - returns, bullets and all. It’s become a staple here at Brainstorm. You can download your own at app4mac.

PimpMyNews

If you can get past the vapid brand identity and UI, PimpMyNews, the talking social news site, is an interesting concept. The site will read your RSS feeds to you over your mp3 player, iPhone, etc. or computer.
[via: PR-Squared]

The iPlanet

NPI’s personal cosmos transport. Like Ray Bradbury’s Dandelion Wine Happiness Machine, the iPlanet, a holiday product parody, promises a “thoroughly self-absorbed social media experience.”

Twitter Unseat Email?

Robert Scoble explores the notion in this BusinessWeek piece re: the running debate over where we’re headed with aging, albeit ubiquitous, email paradigms versus spam-free Tweets.
[via: Scobleizer]

Track the Hive’s Buzz

Aggregate the aggregators at Popurls.com—simultaneously follow the most current posts from all the top sites like Digg, Newsvine, YouTube and Flickr. Or, “find your favorite thing,” over at Buzzfeed.

Fountain

Peter Bruhn’s Swedish type foundry is preparing a new freshet of fonts to flow forth and flourish among us—according to Typographi and Bruhn himself.
[via: Sheer Brick]

Design by Metaphor

A word from A List Apart about design based on simile.

Master’s Color Palettes

Looking for a digital color scheme that will last the ages? Colour Lovers explores masters inspired color schemes.

Visualizing Volumes

Can’t see how your two soda bottles a day are impacting the environment? Chris Jordan’s images will help you visualize it. View his amazing statistical depictions at Running the Numbers, An American Self-Portrait.

Steve Jobs Unveils the Apple iRack

Regardless of your geopolitical views you’ll likely appreciate the satirical humor of this product parody sketch run amok.

Qbesq

Okay this would just be a goofy flash-based Spirograph-esque toy if it didn’t generate downloadable .svg (Scalable Vector Graphic) files—which it does. Pattern enthusiasts, meet Qbesq.

Those Funny Googlers

Here’s Google’s take on the phrase, “Across the pond.” Visit Google Maps, enter New York to London in the search field, scroll to step #24.

Tip: Reducing Firefox Memory Usage

How to reduce Firefox from a memory hog to a piglet. Caught this Firefox usage tip over on Ade Olonoh’s blog (see comments).

CSS Developments

If you’re a developer or just interested in CSS, check out this article entitled, #IEroot — Targeting IE Using Conditional Comments and Just One Stylesheet,” over on the PIE site.

The History of Branding

An iconic-rich, one-click site on how hundreds of the planet’s most noteworthy brands came to be. Updated daily.

The Hexafluoride Float

From the Bonn Physikshow—A lesson on YouTube regarding the denser than air properties of hexafluoride (likely sulphur hexafluoride) gas.

Worst Website Design, Ever?

Enter at your own risk. A proof of concept that design does matter. Havenworks.com hailed on Digg recently as perhaps, “…the most poorly designed website in the world!”

50 Essential Bookmarks

Originally published in Communication Arts November Design Annual 2006, here’s their list of 50 essential bookmarks. Conspicuously missing, sites such as Delicious, Technorati and Lifehacker.

Greetings Earthling

Sure to appeal to the megalomaniacal extraterrestrial in all of us. World, meet geoGreetings. When you care enough to send a satellite image.

A Modern Medium

An interactive glimpse into the the random and spontaneous feedback Jackson Pollock once realized in his medium—sans the clean up.

Impressive Product

Pressed toast with panache. From the, “Table Manners Collection,” Delfts Toast Pan by Minale Maeda. As seen on “ohmygooshness.”

.think Flickr

Objects of interest, engaging designs, diagrams, downloadable visuals and any other imagery we felt worth sharing.