Tyler Tate

An old, ugly problem still plagues fluid layouts: sub-pixel rounding. You’ve experienced this nasty issue when elements within your percentage-based layout unexpectedly wrap to the next line in Internet Explorer, or aren’t flush with the right-hand edge in Safari and Chrome.

The culprit? How percentages are rounded into pixel values by the browser. As John Resig documented in 2008, browsers have adopted different rounding strategies:

Webkit and Opera always round down, FireFox and Internet Explorer 8 and 9 round some numbers up, others down, and IE6 & IE7 always round up.

Below is the output of this example page in the major browsers. I’ve extended John Resig’s original demonstration by testing 4 columns, each 25% wide, within three differently sized containers: 49px, 50px, and 51px. The number shown below each container is the theoretical pixel width of one of the columns (e.g. 50px * .25 = 12.5).

You’ll notice that in Webkit and Opera, which use the rounding-down strategy, there is space leftover. FireFox, IE8, and IE9, on other hand, vary the widths of the boxes so that, in total, they occupy all of the available space. But here’s the catch: when the floating decimal is .5 or greater, our old friends IE6 and 7 stupidly round up, forcing the final column in our example to wrap to the next line since the four columns become collectively wider than their parent container. Facepalm.

This is certainly not a new problem; it’s been the source of head-to-wall bashing for over a decade. Yet it’s an important problem to understand and address in the modern era of fluid, responsive layouts. While it’s true that the problem will mostly go away when IE6 and 7 support is no longer necessary, many of us need a solution now.

The formula

Unfortunately, there’s no silver bullet.

The only way to prevent layouts from breaking in IE6/7 is to fractionally reduce the percentages so that they add up to just under 100%.

In the past this has meant fiddling down the numbers until the elements stop wrapping, an inexact and error-prone art. There is, however, an exact science to it.

The objective is simply to get IE to round numbers down, not up. In the example above, we want 12.5px, 12.75px, or even 12.99px, to be rounded down to 12px, just like it would be in WebKit. The solution is straightforward in principle: just subtract half a pixel. 12.99px would then become 12.49px, and—since the floating decimal is less than .5—IE would round down to the nearest integer.

But the tricky bit is getting from pixels back to percentages. What percentage do we need to subtract in order to produce a half-pixel reduction in the computed pixel value? The answer: it depends on the pixel width of the parent container. Here’s the formula:

O.5 / containerWidth = correctionLevel

ContainerWidth is the pixel width of the container, while correctionLevel represents the percentage that needs to be subtracted in order for IE to round down to the nearest pixel. Thus for our 50px container above, the correctionLevel is 0.5 / 50 = 0.01, or 1%. That means instead of the four columns each being 25%, they would need to be 24% (25 - 1). With that correction applied, the columns would each be computed as 12px rather than 12.5px, and our layout will display correctly, as shown below.

But the whole point of using percentages, I hear you saying, is to be pixel-independent. If I have to specify the container’s pixel width, doesn’t that defeat the purpose of using percentages in the first place? It’s painfully inconvenient, to be sure, but the very fact that you’re reading this is evidence enough that we must work around this problem somehow.

Here are two strategies for applying this correction formula.

Do-it-yourself calculations

You can quickly apply the above formula to your existing fluid layouts to fix the sub-pixel rounding issue in IE6 and 7 without adversely affecting other browsers. First, lets assume you have constructed a percentage-based layout that has a set minimum width of 720px. Using this number as our baseline containerWidth, our formula tells us that the correctionLevel is .0694%. Whenever a percentage is used as the value of a width, padding, border, or margin declaration, we’ll use the star hack to add IE6/7-specific declarations which subtract .0694% from the original value. Here’s a simplistic example:

section#sidebar {
  width: 25%;
  *width: 24.93%;
}

CSS frameworks

If you’re using a CSS framework such as LESS.js or SaSS, you can rely on their mathematic operations to save you from having to crunching all the numbers by hand. The LESS/SaSS code below would be compiled to the same output as in the example above.

section#sidebar {
  width: 25%;
  *width: 25%-0.0694%;
}

Updated January 11, 2012. The newly-released version 1.2 of The Semantic Grid System—which uses the power of CSS frameworks to elegantly power fixed, fluid, and responsive layouts—incorporates the above formula. It allows you to specify the minimum width of your layout, from which it then derives the correction level.

@min-width: 960;
@correction: 0.5 / @min-width * 100 * 1%;

It then subtracts the correction level from the IE-specific width and margin declarations of each column in the layout:

width: @computedWidth;
margin: 0 @computedMargin;

*width: @computedWidth-@correction;
*margin: 0 @computedMargin-@correction;

The last word

So there you have it: a predictable formula for correcting the sub-pixel rounding problem in Internet Explorer 6 and 7. It’s just one more reason we can all rejoice when IE6 and 7 go the way of the grave.

Mobile information needs can be assed by two criteria: scope and type. Scope describes the sophistication of the information need, the degree of higher-level thinking it involves, and the time commitment required to satisfy it. The lookup, learn, and investigate elements of scope are derived from Gary Marchionini’s work on exploratory search, while the casual component has been more recently advocated by Max Wilson and others.

Read the rest on TwigKit Blog.

A few Saturdays ago, I was walking around Greenwich in southeast London when I decided to peruse the local bookshop. Drawn to a display titled “Utopias and Dystopias,” I noticed the book A Brave New World sitting beside George Orwell’s 1984, which I had read and remembered enjoying. Curious about the association between the two, I picked up A Brave New World and glanced over the back cover. I then pulled out my phone and searched Google to see what others were saying about the book and noted that it is often considered one of the top-100 novels of all time. My mind was settled: I wanted to read this book. But rather than walking, book in hand, to the checkout counter, I instead used my phone to navigate to Amazon’s Kindle Store, where I typed in the name of the book and used their 1-click ordering to purchase the book. Leaving the bookshop empty handed, I caught the next bus home. On the way home, I pulled out my tablet device and started reading page 1 of A Brave New World.

Read the rest on UX Matters.

The book is a very practical guide on how to exploit query logs to improve your company’s search experience. Lou outlines a collection of simple but potent techniques for analyzing search logs, spotting insightful patterns, and putting those insights to use.

Read the rest on TwigKit Blog.

The invention of the printing press transformed the physical object that is the book from an artefact of human transcription to that of mass production. By 1500, just 40 years after Gutenberg’s invention, an estimated 150 to 200 million copies had rolled off the press; a century later, the by then pervasive technology led to the rise of a new medium: the newspaper. This was the era of information as physical object.

More recently, mass adoption of the world wide web and the plethora of Internet-connected devices has led to digital information augmenting and, to a certain degree, displacing the physical. News was consumed online rather than on paper, new mediums of self expression arose from the blog to the social networks, and a new pair of shoes could be acquired without ever stepping foot in a store.

We are now on the cusp of yet another technological sea change. The pendulum which swung from physical to digital is swinging back to the real world, but this time, information is formless, contextual, and ubiquitous. In their book Pervasive Information Architecture, Andrea Resmini and Luca Rosati describe this brave new world of ubiquitous computing:

“Information is going everywhere. It is bleeding out of the Internet and out of personal computers, and it is being embedded into the real world. Mobile devices, networked resources, and real-time information systems are making our interactions with information constant and ubiquitous. Information is becoming pervasive.”

The future lies in cross-channel experiences. Interactions in which the technology fades to the background and the personal, physical, and social context of the present mediate the devices and methods with which we interact with information.

You know the Hemingway line, “Write all the story, take out all the good lines, and see if it still works”? Well, I’m posting these simple thoughts here because I just deleted them from a longer piece, but still wanted them to see the light of day.

CSS grid frameworks can make your life easier, but they’re not without their faults. Fortunately for us, modern techniques offer a new approach to constructing page layouts. But before getting to the solution, we must first understand the three seemingly insurmountable flaws currently affecting CSS grids.

Read the rest on Smashing Magazine.

Yesterday was the deadline to submit a redesign of Wikipedia’s search page to the search design contest organized by Greplin. While the contest isn’t officially endorsed by Wikipedia, we found the challenge too much fun to turn down.

Read the rest on TwigKit Blog.

Think of the last time you ordered a book, booked a flight, or bought a car. How did you choose which book to read, where to go for vacation, or which car was best for you? You may have searched online, read reviews, or asked others for advice to help you make an informed decision. In a word, you learned. Learning is a complex process with distinct stages, each with corresponding tasks and emotions. Understanding how users learn can help us design experiences that support the user throughout the entire process. To design better learning experiences online, start by learning a thing or two about learning itself.

Read the rest on A List Apart.

You and I are different. It’s obvious, but has a profound impact on fulfilling the needs of disparate users. Not only do you and I have different accents, hairstyles, and musical tastes, but even our cognitive processes — the very building blocks of being human — are substantially different. I recently wrote about individual differences in expertise and cognitive style, but there is a third dimension: learning style. Understanding how people learn is fundamental to delivering desirable content, a prerequisite of any good user experience.

Read the rest on Johnny Holland.

There is a huge need for a standard corpus of high-quality, free-to-use demo data. When building search applications, for instance, getting your hands on actual data can be near impossible, forcing you to design for unrealistic situations and compromising the end result. Well-rounded demo data would help ensure you’re working towards the right target.

Read the rest on TwigKit Blog.

We pour over analytics, conduct ethnographic studies, and interview users in order to understand the demographics, goals, and tasks of the people using our product. We create personas, write scenarios, and list use cases. And so we should; understanding who our users are and what they want to achieve is foundational to our job as designers.

But how deep does our understanding of users actually go? Sure, we know their socio-economic bracket, what industry they work in, and the top few tasks they want to achieve on our website. But are there deeper, more innately personal characteristics at work? Can we figure out what really makes them tick?

For over a century, psychologists have been trying to account for the range of individual differences people exhibit when interacting with new information. At the heart of their research lie cognitive styles—the stable attitudes, preferences, and habitual strategies that determine how an individual processes information. Understanding cognitive styles will help us design better experiences for users.

Read the rest on UX Magazine.

Would you rather take a photo using your phone, a point-and-shoot camera, or a digital SLR? How you answer this question is probably a good indicator of your photographic expertise. If you snap casual shots, your phone or a point-and-shoot camera will probably suffice. If you’re a professional photographer, on the other hand, you probably prefer using an SLR that gives you control over the focus, aperture, and exposure. Expertise significantly impacts how we seek information online. Just as novice and expert photographers prefer different tools, so novices and experts behave differently when searching for information. Understanding these differences will help us design better search interfaces for both groups of users.

Read the rest on Boxes & Arrows.

Why do you code? It’s probably not just for a pay check (lets face it, there are plenty of boring jobs out there that pay the bills). Maybe you code because you like working with the latest technology, or perhaps you take pleasure in crafting concise, elegant solutions to tough problems. Did I hear you say, “I code to deliver value to users”? Hmm, didn’t think so. But you’re not alone: designers have their own set of motivations devoid of the user, from seeking the praise of others to creating a work of art. It’s imperative that both designers and developers fight against our natural inclinations and treat the user as king. Whatever you’re working on, whether it’s an API for a payment gateway or a new request handler for Solr, you’re building it for the people who will use it. Want to become a better developer? Then start designing the user experience.

Read the rest on TwigKit Blog.

Why do you code? It’s probably not just for a pay check (lets face it, there are plenty of boring jobs out there that pay the bills). Maybe you code because you like working with the latest technology, or perhaps you take pleasure in crafting concise, elegant solutions to tough problems. Did I hear you say, “I code to deliver value to users”? Hmm, didn’t think so. But you’re not alone: designers have their own set of motivations devoid of the user, from seeking the praise of others to creating a work of art. It’s imperative that both designers and developers fight against our natural inclinations and treat the user as king. Whatever you’re working on, whether it’s an API for a payment gateway or a new request handler for Solr, you’re building it for the people who will use it. Want to become a better developer? Then start designing the user experience.

Read the rest on TwigKit Blog.

When was the last time that you were “in the zone”? Do you remember being so absorbed in an activity that you forgot about the outside world, time seemed to fade away, and you felt invigorated? Maybe you’re an avid tennis player and remember a rigorous game when you seemed on fire. Or perhaps you’re a musician and recall feeling as if the notes were flowing through your fingertips. Psychologist Mihaly Csikszentmihalyi calls this state of optimal experience flow. In his research, he found that musicians, composers, athletes, and even chess players all used the same words to explain their enjoyment. Csikszentmihalyi identified 8 elements that contribute to a flow experience.

Read the rest on TwigKit Blog.

This past week I discovered a new recipe search engine called Foodily. Both the interaction and the visual design are superb, and Foodily makes use of several novel patterns that I thought would be worth pointing out.

Read the rest on TwigKit Blog.

In 1899 the largest automobile producer in world, Benz & Cie, made a grand total of 572 cars. Few could afford such hand-built luxuries. But in 1908 Henry Ford began to mass-produce the Model T using an assembly line. By distilling the complex process of constructing an automobile into a distinct set of repeatable tasks, Ford reduced the time required to assemble a car down to just 93 minutes. By the 1920s, 10,000 cars were being produced every day, each with a price tag of just $290. Software, too, thrives on the transformation of abstract ideas into concrete, reusable components.

Read the rest on UX Magazine.

It’s been an exciting week for the Nutshell team. We’ve been in New York City officially launching the company in front of about 500 of our peers at the Future of Web Design conference. On Monday, Andy Fowler (our lead developer) and I went on stage at the end of the conference to make the big announcement. We shared some of the key tenets of our development strategy including cross-platform design, building the API first, and prototyping on paper.

Read the rest on Nutshell Blog.

We’ve all been frustrated by a gadget, from trying to install a printer to spending hours setting up a new mobile phone. Page one of Simple and Usable points out that: “The Technology that is supposed to make our lives easier often feels like it’s on the march against us.” What then is the antidote to confusing products, software, and web sites? The answer is — as one might guess from the title of the book — simplicity. Simple and Usable is both an extremely approachable and an incredibly practical guide to simplicity. Author Giles Colborne compelling shares four fundamental strategies for accomplishing simplicity: remove, organize, hide, and displace.

Read the rest on Amazon.com.

Lucid Imagination recently invited me to present a webinar on designing user interfaces for search. At the end of the webinar, a number of participants sent in several really good questions. Here are 10 of them, accompanied by my answers.

Read the rest on Lucid Imagination.

What does building a brand new CRM for medium-sized businesses look like? Way before pushing our first pixel, we listened to people recount their frustrations with CRMs on the market today. We had long discussions about how we wanted to both empower sales people to do their job more efficiently, and enable the business to control and codify the sales process. We spent long sessions in front of the whiteboard, and days sketching out and talking through these ideas. Now in the final stages of development (eying a launch later this year), we thought it as good a time as any to show you a few of those early sketches.

Read the rest on Nutshell Blog.

The implications of Information Foraging Theory on designing user-centred websites have not gone unnoticed. Jakob Nielsen and Jared Spool, among others, have put forth considered recommendations on how to enhance information scent on the web. Most of their guidelines, however, tend to assume that the designer has direct control over the explicit words used in the interface. While this is certainly the case for browse-based websites dependent on site-wide navigation and hyperlinks, it breaks down for search interfaces where both content and navigation are completely dynamic.

Read the rest on Johnny Holland.

People swear by their design process. Rachel Glaves insists on sketching by hand, Dan Brown urges extensive wireframing, and Ryan Singer goes straight to HTML. Conferences are filled with heated debates as advocates of each staunchly defend their favoured technique. With all of these different methods to choose from, should you be sketching, wireframing, mocking-up, or prototyping? The answer is simply: Yes, you should.

Read the rest on UX Booth.

This morning I got out of bed, ate my cereal, took my shower. Everything was proceeding pretty predictably. But then I did a Google search — usually a pretty mundane task — but this morning, Google looked very different than it did yesterday.

Read the rest on TwigKit Blog.

We’ve been putting together a small slide deck explaining what’s wrong with customer relationship management (CRM) as we know it, and how Nutshell is getting it right. Fortunately for us, there’s a whole lot of room for improvement.

Read the rest on Nutshell Blog.

The event consisted of 12 different speakers each presenting for exactly 20 minutes, with about 10 minutes of Q&A after each. I particularly enjoyed the presentations from the major search engines: Yahoo, Google, Bing, and Wolfram Alpha. A topic that seemed to arise in each of those talks was how query reformulation data can provide a feedback loop to make search better. But without further ado, here are my summaries of each talk.

Read the rest on TwigKit Blog.

You used to be expected to type for yourself. But today people have come to expect a reasonable amount of help at even this task. Our phones now help us form correctly-spelled words, our browsers fill in long addresses after we’ve typed only a few characters, and search engines recommend searching for “Humphrey Bogart” after we’ve typed just “boga.” But not all as-you-type search suggests are created equal. Careful observation seems to reveal three different approaches: completion, suggestion, and instant results. These approaches range in cognitive burden on the one hand, and utility on the other. We’ll look at several examples of each and consider when they should be used.

Read the rest on TwigKit Blog.

Clean. Easy to use. User-friendly. Intuitive. This mantra is proclaimed by many but often gets lost in translation. The culprit: complexity. How one deals with complexity can make or break an application. A complex interface can disorient the user in a mild case and completely alienate them in an extreme case. But if you take measures first to reduce actual complexity and then to minimise perceived complexity, the user will be rewarded with a gratifying experience.

Read the rest on Smashing Magazine.

Other CSS frameworks try to do everything—grid system, style reset, basic typography, form styles. But complex systems are, well, complex. Looking for a simple, lightweight approach that doesn’t require a PhD? Meet The 1KB CSS Grid.

Read the rest on Usability Post.

Other CSS frameworks try to do everything—grid system, style reset, basic typography, form styles. But complex systems are, well, complex. Looking for a simple, lightweight approach that doesn’t require a PhD? Meet The 1KB CSS Grid.

Read the rest on Web Design Ledger.