Archive for the ‘Visual Design’ Category

Make Sure Your Site Looks Good on the New Retina MacBook Pro

Apple's MacBook Pro with Retina display in a glass case at the Worldwide Developers Conference. Photo: Jon Philips/Wired


The high-resolution web isn’t just for iPads anymore.

Apple is bringing high-resolution screens to the laptop world with the debut of the new MacBook Pro. With over 5 million pixels on the screen, Apple’s rebirthed workhorse, announced Monday at WWDC, offers double the screen resolution of most laptops.

That’s awesome news for anyone upgrading to a new laptop, but like the high-resolution iPads before it, the arrival of the Retina-equipped MacBook Pro is sure to cause some new dilemmas for web developers who’d like to offer a better experience for high-resolution screens.

These screens aren’t going to break the web; pixels are doubled, so Retina’d visitors will see the same layout in the same physical dimensions as non-high-res visitors. But the increased pixel density means you can serve up sharper, better-looking graphics. And there is a small downside — ordinary graphics, particularly icons and logos, can look fuzzy on high-resolution screens.

There are a couple of solutions to this problem. You can use icon-fonts instead of image sprites. Most fonts will scale and render crisply on both high-res and traditional screens. Another tactic is to switch your icons and logos to SVG files. After all, SVG stands for Scalable Vector Graphics, which is pretty much exactly what the doctor ordered for high-res screens. The main problem with the SVG format is that not every web browser supports it. Most modern browsers do — the pain points are Internet Explorer 8 and below, and Android 2.3 and below. How much that affects your site will depend on your audience. Check your visitor stats and choose accordingly.

Icon fonts and SVG offer future-friendly solutions, but if you just want a quick fix to make your site’s logo look sharp on high-res screens there’s a third way: using media queries to swap in bigger images. To make this work, just create a version of your logo that’s twice as big and use a media query to target high-res screens.

Suppose you have your logo in a tag with the class “logo” and the actual size you want the image to appear at is 100px by 100px. Start by creating a copy of your logo that’s 200px by 200px.

Next, here’s what you’d add to your stylesheet to target high-res displays:

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
    .logo {
        background: url(/path/to/my/highreslogo.png) no-repeat;
        background-size: 100px 100px;
        /* rest of your styles... */
    }
}

The key to this code is the background-size rule, which tells the browser to scale the image down. The other thing to note is that all browsers currently require a prefix in the media query, and Opera requires the ratio be expressed as a fraction. The one caveat to this approach is that the high-res MacBook will apparently offer some options for how its plethora of pixels are used. You may want to experiment with different min-device-pixel-ratio options to see which works best in the various display settings.

So, there are three ways to handle graphics served out of your stylesheet, but what about good old inline images served up with an <img> tag? Well, that’s more complicated, and in fact there is no ideal solution yet. The WHATWG and the W3C are working on standardizing a solution, but all we have right now are some (often clever and useful) hacks, each with its own pluses and minuses.

For a primer on serving up different images based on screen size, see our earlier write-up on responsive images. It’s also worth reading up on Adaptive Images.

If you’re worried about legacy sites suddenly looking very bad, fear not. They won’t look any worse than they do on the most recent iPad. The sky isn’t falling, it’s just getting bigger. Sure, your images might be a little less than crystal-clear on Retina displays — particularly logos and icons, while photos will generally look fine — but layouts and structure will continue to render as they always have.

Cure the High-Res Blurs With SVG and Icon Fonts

The high-res future is coming fast. Photo: Ariel Zambelich/Wired.com

The rise of high-resolution displays means that web developers need resolution-independent graphics. The good-old PNG icons we’ve been relying on just aren’t going to cut it for much longer.

It’s true that a slightly blurry icon or logo on the iPad probably isn’t going to ruin a site by driving visitors away in droves, but it is a problem, and one that will only become more obvious as higher-resolution screens proliferate.

At the moment there are essentially two ways to swap out your PNG icons for something a bit crisper: icon-fonts or SVG graphics. Naturally, neither is perfect — the last time something worked perfectly on the web Tim Berners-Lee and friends were the web’s only users — so it’s worth looking into the advantages and drawbacks of each.

That’s exactly what UIX designer Simon Uray recently did, breaking down the good and the bad of both icon fonts and SVG images. Give Uray’s post a read for the finer details on both, but here’s the short story: icon fonts are probably your best bet at the moment, though you’ll have to live with the fact that some icons are a tiny bit blurry on traditional displays.

Since at the moment the vast majority of screens on the web are not high resolution, adopting icon fonts over the PNGs you’re using now might be a case of premature optimization.

As Uray writes, “sorry, if you’re looking for a silver bullet, I’m afraid it doesn’t exist.” To that we might add “yet.” But SVG support in browsers (one of the chief problems with SVG is that it isn’t as widely supported as icon fonts) continues to improve. There’s also always the option to use them all. “Maybe best,” writes Uray, “is to use PNG served in many different sizes for your high fidelity, multi-color logo and other graphics… SVG icons for your navigation that stays the same size, but also look sharp on Retina displays [and] Responsive inline SVG for bars and charts and an icon font for all your different button sizes.” The best of all worlds.

For more on icon fonts, be sure to check out Chris Coyers interactive write up on how to use icon fonts.

File Under: UI/UX, Visual Design

The Eephus League Magazine: Pitch-Perfect Web Design

The Eephus League Magazine: showing publishing pros how it's done.

Baseball season is already well under way, but it’s never too late for another site about America’s favorite pastime — especially when it’s as awesome as the beautiful Eephus League Magazine.

Even if you have no idea what the name means — and fear not, even some baseball fans aren’t familiar with the Eephus pitch since it isn’t throw much (though current Red Sox reliever Vicente Padilla has something like an Eephus pitch) — the site is well worth a visit for its gorgeous layout and design.

The Eephus League Magazine is written and produced by web designer Bethany Heck, but if the interface and navigation looks slightly familiar it’s probably because the underlying code is the work of Ian Coyle, creator of Nike’s Better World site, which we featured last year.

Since then Coyle has also released Edits Quarterly, an online magazine of photography and short films. Edits is what inspired Heck to put together The Eephus League Magazine. And it’s not hard to see why, with Edits Coyle managed to create something even the so-called pros of the magazine publishing world can’t seem to make — a digital magazine that doesn’t suck.

What makes Edits — and its offspring like Eephus — remarkable is that it manages to feel like reading a print magazine even though you’re really just scrolling down a webpage. For example, there are what you might call “pages” in Coyle’s design, but they aren’t simple skeuomorphs like you’ll find in e-readers. Instead the “pages” just serve to move you through the content and keep articles separate even as they are all together on one page. Scrolling remains vertical; there’s no awkward “page flipping” actions. The Eephus League Magazine uses Coyle’s JavaScript, so moving through it feels just like browsing Edits, but Heck has made a few adjustments to fit Eephus‘s own layout and images.

In the end the experience of both magazines is different enough to catch your eye, but not so much so that it overwhelms the content. But don’t take our word for it, head over to Eephus and be sure to check out Edits Quarterly as well.

File Under: Visual Design, Web Apps

Flickr: When It Comes to Photos, Bigger Is Better

Size matters: Flickr's lightbox view now offers much larger images.

Yahoo is once again lavishing some attention on Flickr. Flickr has already launched a new photo uploader and a new photo editor in recent weeks, and now the site is making your images look even better with new, higher-resolution photo displays.

It’s been nearly two years since Flickr last redesigned its photo pages to display larger images. Since then screen resolutions have only improved, and when it comes to viewing photos you don’t have to be a pro photographer to know that bigger is better.

To make your uploaded images look better — especially when you’re browsing in fullscreen mode — Flickr is introducing two new photo sizes, 2048 and 1600 pixels.

Right now you’ll only see the new larger images when you enter Flickr’s “lightbox” view with its darker, photo-friendly interface (just click an image to enter lightbox view). At the moment the regular photo pages remain unchanged. However, the Flickr blog reports that the larger images will soon be available through Flickr’s API and “a few other places over the next couple of weeks.” While the new image sizes are probably too large for the default photo pages, we wouldn’t be surprised to see Flickr refresh the photo page layout with larger images in the near future.

The larger of the two new photo sizes also seems like a future-friendly choice since it works well with very high-res screens like what you’ll find on Apple’s latest iPad. Although Flickr does not appear to be doing so just yet, serving the larger images to the iPad would make for sharper photos on the iPad’s high-resolution screen. [Update: The Flickr team tells Webmonkey that it "just enabled hi-res photo sharing to the new iPad this morning."]

Naturally, to take advantage of the new larger image sizes Flickr is now creating, you’ll need to be uploading photos at least that large. But given that most phone cameras produce images in that pixel range these days, there’s a good chance you already are.

Flickr Pro members can control how large their images are displayed; just head to the new image size settings page. By default Flickr sets this to “best display size,” though if you want to stop people from downloading high-res copies of your images you can limit the display size to 1024 pixels. The new image size setting doesn’t affect who can download your original files, just those created by Flickr. But since the sizes Flickr creates are larger than what most original images would have been back when Flickr first launched, the new setting makes sense.

One thing to note with the new image sizes: they only apply to photos uploaded since Mar. 1, 2012; older images won’t be resized. The other thing to know is that if you upload something with a long edge of less than 2048 pixels, Flickr won’t upsize it so there’s no need to worry about small images being pixelated.

The new image sizes may not win over fans of filter-happy, low-res image sharing websites, but for Flickr aficionados it offers a compelling reason to stick around.

File Under: Visual Design, Web Basics

Google Embraces Responsive Design, Recommends You Do the Same

Responsive Book: Google's Chromebook site as seen by a phone (left) and a tablet.

If you’ve been waiting for responsive design to go mainstream, wait no more. While The Boston Globe‘s responsive redesign made a big splash in the developer community, The Globe has nothing on the latest web giant to throw its weight behind responsive design — Google.

That’s right, Google is now suggesting developers use responsive design tools like media queries to handle the variety of screens now accessing the web.

The Google Webmaster blog has posted a new article, Responsive Design – Harnessing the Power of Media Queries, that walks beginners through the basics of creating a responsive website.

It’s not the most thorough tutorial we’ve seen, nor is it the best — Google conflates breakpoints with device width, something we’d recommend against — but nitpicking aside, Google’s official blessing will no doubt help move responsive design to the front burner in many people’s minds.

It’s worth noting that while a tutorial is nice, Google isn’t necessarily making the leap to responsive websites for its own properties. Indeed, sites like Gmail or Reader are excellent arguments for maintaining separate mobile designs. If your “site” is actually a web app as complex as Gmail then we suggest doing what Google does — hiring a fleet of developers to build an maintain separate websites for different size screens.

Chances are, though, that your site isn’t that complex and doesn’t have the developer teams that Google can afford. Even Google uses responsive design when it makes sense. To go along with the new tutorial, Google offers up that the new Chromebook website is responsive, which shows off the company’s responsive design chops.