Three Design Trends that are Challenging the “Pixel Perfect” Straw Man
As a developer, my first blood feud was with the term “above the fold.” From the web’s infancy to pretty much around the time that the iPhone was released, developers were forced to cram ten pounds of [stuff] in a five pound bag in order to ensure that all of a site’s most important content could be accessed without scrolling. Although the term is still whispered in cobweb-infested hallways to this day, it pretty much fell out of public favor once people realized you could affect “the fold” by simply turning your space phone sideways.
As the web opened up, and standards compliance became the name of the game, developers were forced to deliver a seamless experience in some arrangement of each of the “big four” browsers (Firefox, Safari, Chrome, and **ack**Internet Explorer). Before the corpse of the fold had gone cold, developers had found a new public enemy #1: “pixel perfect.”
“Pixel perfect” represents the platonic ideal of a web design: a perfectly thought out and executed design concept that appears the exact same in all major browsers. While the general concept of pixel perfection is certainly worthwhile, the nickel-and-diming of paddings, margins, heights, font smoothing, slideshow transitions, etc. etc. can prove to be costly. At its best, “pixel perfect” can provide noble yet somewhat insurmountable goal to strive towards. At it’s worst, it forces developers to harbor a cache of arcane browser hacks and causes headaches for project management when the majority of QA is spent accommodating near-infinite combinations of devices and browsers. Despite what proud developers and project managers may tell you, legitimate, cross-browser, absolute pixel perfection has, and forever will be, an unworthy goal.
Thankfully, designers and developers are beginning to take the reins in defining what the new ideal should be in a post-pixel-perfect world. Instead of focusing narrowly on specific browsers, devices, and OS’s, designers and developers are beginning to craft beautiful and functional experiences that can’t be “pixel perfect,” because they are fully flexible. Here are the three design trends that will properly arm us for a “perfectly flexible” world:
Responsive Design
ex: starbucks.com, mailchimp.com
Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. http://alistapart.com/article/responsive-web-design/
Responsive design isn’t a “new” concept in the conventional sense of the word, but it is newly conventional. One of the major tenets of responsive design is that a truly responsive design should be optimized for as wide of a range of browsers and devices as possible, on a single code base. Notice that I said “optimized” and not “identical.” It’s becoming increasingly impossible to keep track of the full range of screen sizes (I would love it if we could go a week without a new Apple, Android, or Amazon device), and as a result, the idea of designing and developing for specific devices just isn’t sustainable.
Building responsive websites forces everyone to be smarter in the planning and initial execution phases, so that we don’t get bottlenecked in QA. Maintaining a single code base is far more ideal than supporting desktop and mobile code bases. Nuts and bolts aside, it just makes sense to develop responsively, as you can more or less “future proof” a website by anticipating the full range of displays that might come along, and delivering a flexible experience to accommodate that. Plus, isn’t it fun to drag the corner of your browser window and watch a site layout change seamlessly before your eyes? Just me? Moving on…
One Page Design
ex. getgoldee.com, sprout.is
People are reading less and less now, so you have to be really straight to the point and one page sites are the best way to have only the most important information. http://onepagelove.com/gustavs-cirulis-characters-mac-app-interview
Also called “single page” design, one page design is becoming increasingly popular with agency, portfolio, and even e-commerce websites. By minimizing navigation and flattening the structure of a site into a single page, one page design is antithetical to the concept of the “fold,” as a splash element at the top of the page can often fill the screen. This design method can incorporate any number of rogue elements such as parallax scrolling, where elements in the background scroll more slowly than the page to give a sense of depth. The most complex one page sites throw out the notion of a measured, rigid structure by moving or animating elements around on the page based on where the user has scrolled, not where they clicked.
Besides the fact that its trendy, there is a reason that more agencies and individuals are using one page design to showcase their portfolios: these are the types of sites that designers and developers want to build. A well thought out flat site hits all of the major design and development hot spots. It’s attractive, lightweight, and open. Perhaps most importantly, it tells a story through the natural act of scrolling, rather than relying on a user to click or touch their way through complex navigation.This type of design is not ideal for all sites, but if it’s the right fit, it can produce spectacular results.
Content First Design
Content is really a design problem. Yet the sites we design are often hostile to content. They don’t think about contingencies or how content creates an overall user experience…If your design doesn’t give user the content they need, they’ll find other ways to get to it. http://www.lukew.com/ff/entry.asp?1598
Of the three, Content First design has probably been around the longest, but has only become a popular concept recently. The rise and fall of RSS readers has given way to apps like Pocket and Instapaper, united under the principle that users care far more about whats on your site than how it looks, at least in terms of long term engagement. Although “content first” has a pretty clear connotation, it’s much more of a conceptual trend than an easily identifiable visual trend, and can be more difficult to sell than the “sexier” visual concepts. If you’re having trouble wrapping your mind around the general idea of “content first”, think of it this way: you want your site to be more “The Godfather,” and less “Transformers.”
Design purists will tell you that the best designs are “invisible,” meaning that they are so intuitive that they are not distracting and just make sense. Content first takes that philosophy and applies it to the content you create, and challenges you to establish that content before you apply your first brush strokes to the presentation layer. Anyone can hire a company to build them a good looking site, but in order to stand out, you need quality content. Let’s face it, adjusting a picture frame won’t do a whole lot if the picture itself sucks.
If my developer sense is correct, it will only be a few years before we can react to “pixel perfect” with the same nostalgic sighs that we now aim at “above the fold.” The rapid development and release of new devices on the market could very well level off, but it won’t matter either way, because the best of the design and development world will have moved on already. It’s probable that these trends will be referred to as passé years from now as we’re moving on to Google Glass and Minority Report style displays, but that’s the nature of the medium. The true ideal of web design is ever changing, but taking a swing at these emerging concepts now will make you stand and and thrive while your competition is still painstakingly measuring pixel-widths in IE8.
