Webmonkey » design

Tips, Tricks and Best Practices for Responsive Design

Scott Gilbertson — Thu, 09 Jun 2011 16:00:08 +0000

Unless you’ve been too busy wake boarding the Alps to notice, there’s a movement afoot amongst web designers — Responsive Design. Ethan Marcotte coined the term responsive design to describe the process of using liquid layouts and media queries to scale websites so that they fit any screen size. If you’ve never heard of responsive design before, Marcotte’s introduction is well worth a read.

In a nutshell, responsive design means using fluid grids, fluid layouts and @media queries to adapt your website to the plethora of different screen sizes on today’s (and tomorrow’s) web. Whether your visitor is on a phone, an iPad or a gargantuan desktop monitor, your website adapts.

Responsive design becomes an even more appealing tool when you start, as Luke Wroblewski says, designing for mobile first. That is, start with the small screen. Strip your site down to its essence and then build from there. Starting from the bare bones ensures a great mobile site, and it forces you to really focus on what matters to your visitors.

So how do you go about building a good responsive site? Well, that depends on the individual website, but there are some common patterns that are starting to emerge. To help you get started with responsive design, here are a few nascent best practices we’ve gleaned from a variety of sources around the web:

Use @media to scale your layout for any screen, but remember that this alone isn’t really responsive design.
Use liquid layouts that can accommodate any screen size. Don’t simply design one look for the iPhone/Android, one for tablets and one for the desktop. Keep it liquid, otherwise what happens when some new, intermediate screen size suddenly becomes popular?
Roll your own grids based on the specifics of your site’s content. Canned grid systems will rarely fit the bill. The problem with canned grids is that they don’t fit your unique content. Create layouts from the content out, rather than the canvas (or grid) in.
Start small. Start with the smallest size screen and work your way up, adding @media rules to float elements into the larger windows of tablet and desktop browsers. Start with a narrow, single-column layout to handle mobile browsers and then scale up from there rather than the other way around.
Use the Respond or CSS3 Media Queries JavaScript libraries to bootstrap @media query support into older browsers that won’t otherwise know what to do with it. Starting with the smallest screen and working your way up means it’s the desktop browsers that need to handle @media, make sure older browsers work by using polyfills like Respond.
Forget Photoshop, build your comps in the browser. It’s virtually impossible to mock up liquid layouts in Photoshop, start in the browser instead.
Scale images using img { max-width: 100%; }. For very large images, consider using something like Responsive Images to offer the very smallest screens smaller image downloads and then use JavaScript to swap in larger images for larger screen.
Embrace lazy loading. There may be items on your site, auxiliary content that’s nice to have, but not essential. Load that content using JavaScript after the primary content is done loading.
Forget about perfect. Even with these suggestions you’re still leaving out users who have old browsers with JavaScript disabled. Such users are increasingly rare and if they see the mobile layout on their desktop, guess what, it’s not the end of the world. Your site is still perfectly usable.

Keep in mind of course that responsive design is a young idea and new ideas — and new tools — pop up everyday. Think of these not as hard and fast rules, but guidelines to build on.

See Also:

Sneak a Peek at the Process Behind 37Signals’ Redesigned Site

Scott Gilbertson — Mon, 20 Dec 2010 18:37:44 +0000

If you’ve ever wanted a peek behind the scenes of a redesign, the 37Signals blog has a fascinating look at the design iterations for the company’s new website.

37Signals is best known for its Basecamp project management software and the Ruby on Rails platform, which grew out of the former.

Even if you don’t like the final design — and plenty of commenters on the blog post don’t seem to be big fans of the typography-focused redesign — the process behind it is worth looking at. Sometimes, seeing what ends up on the cutting room floor is more instructive than looking at the finished product.

The post should also make you feel a bit better if you too fail to magically draw up the right design on your first try.

See Also:

Find Design Inspiration in Pattern Tap’s Minutiae

Scott Gilbertson — Fri, 27 Aug 2010 19:32:34 +0000

The web is littered with design galleries showcasing beautiful websites, but most such galleries focus on the site as a whole — where do you turn if you just want some inspiration for a navigation menu or a really slick sign-up form?*

We stumbled across Pattern Tap, which is a design gallery of sorts. But it breaks the showcased site down into specifics, like sites with awesome navigation menus, great looking web forms or really eye-catching typography.

In some cases, the overall designs of the featured sites are great. In other cases, not so much. But that’s bound to happen with you start breaking a design down into tiny components like great-looking code snippets or often neglected aspects of web design like sites with really good copy.

Pattern Tap also emphasizes the social stuff by offering “user sets” — if you find something you love, you can easily see who posted it to the site and what else they’ve contributed.

If you’re looking for some inspiration for that weekend web project, head to Pattern Tap and narrow your search. Just remember, Pattern Tap is a site for design inspiration, not your ticket to wholesale design theft.

* Yes, such a thing exists. Like pornography, you’ll know it when you see it.

See Also:

New Flickr Is Bigger, Wider and Uncut

Scott Gilbertson — Wed, 23 Jun 2010 20:38:41 +0000

The new Flickr photo page

The grandfather of online photo-sharing sites is rolling out a revamped design. Photo pages on Flickr have been redone to feature larger images, maps, and a much cleaner, more intuitive interface.

For now, the new look is opt-in, but Flickr plans to make the new page design the default some time next month. To see the new photo page in action, log in to your Flickr account and visit any photo page. You’ll see an option to test the new look. You can also use links provided by Flickr to switch between the two experiences.

Flickr's old look: Click for larger.

It’s been a long time since Flickr did anything major to its main photo pages. Flickr started with a limited set of features and has been bolting new features onto the old design ever since. The result has been a slightly cluttered collection of buttons, tools and bits of data that can distract from the main point of the site — your photos.

The new look changes that, streamlining the navigation and tools while “embiggening” your photos (as Flickr refers to it).

The first thing you’ll notice is that the primary image is much larger. The long edge of your image is now 640 pixels across, a 30 percent increase. If that’s not big enough for you, just hover your mouse over any image and you’ll notice the icon changes to a magnifying glass. Click the image (or the new button between the Newer and Older buttons) and you’ll enter what Flickr calls the Lightbox view.

Similar to popular JavaScript slideshow tools, Flickr’s Lightbox view enlarges the image and overlays your screen with a slightly transparent black background. The nice thing about the new Lightbox view is that you can browse through photos without closing it, as well as leave comments and favorite photos.

Perhaps the single most-useful enhancement to casual viewing found in Flickr’s redesign is the addition of new keyboard shortcuts — yes, left and right arrow will now flip through photos just the way you’d expect. The keyboard navigation works in Lightbox mode as well.

The new look consolidates all the tools previously scattered around the page — adding notes, viewing EXIF data, editing images and a dozen more — into a single Actions dropdown menu. The result is a far less-cluttered page that still offers easy access to anything you’d like to do with your photos.

The new Flickr sidebar shows a map and EXIF data.

The sidebar has been similarly cleaned up and widened. The thumbnail filmstrip preview is now five images wide, allowing for faster browsing through photostreams, groups or pools.

The filmstrip has dropped in priority though, moving down below the new top billing — the who, what, where and when of your images.

Assuming you uploaded your images with EXIF tags and geodata, the top portion of the sidebar will now tell viewers where the image was taken, the camera and lens used, and the date the photo was taken.

Just below that is a very slick map that shows a country-level view of where the photo was taken. Hover your mouse over the map, and it will automatically zoom in to a city-level view. Hover the mouse over the actual map pin, and the map will zoom in again.

If you want an even more detailed look, just click the map, and it will bring up a larger map that overlays the current page and allows you to zoom and pan around the area. It would be nice if the overlay showed nearby photos as well, but it doesn’t, though there is a link that will take you to the Nearby map page.

Beneath the map you’ll find a quick overview of your image — how many times it has been viewed, the number of comments and how many people call it a favorite.

The reorganized thumbnail preview area is now context-sensitive. For example, if you land on a photo page while browsing a user’s photostream, then the photostream thumbnails are shown. If the photo is part of any sets, groups or pools, clicking on those will bring up a filmstrip of the next photo in the group. However, if you land on a photo page while browsing through a group, the group’s thumbnail filmstrip will be shown by default. It’s a subtle change, but it makes browsing images much more intuitive.

Flickr “favorites” have always been a sort of quick-comment feature, and Flickr is embracing that use even more by moving Favorites inline with comments. Comments have also been revamped, so that posting a comment no longer requires a page refresh. (That it previously did gives you some idea of just how long Flickr has been around.)

While Flickr’s redesigned photo page is a vast improvement, it’s not without a few quirks. For example, some of the links on the photo page bring up inline overlays — like Lightbox view and the map — while the rest do not. In testing the site yesterday I found myself sometimes hesitating, trying to decide if I was about the leave the photo page or if an overlay would appear. The varying behavior might make the new page a tad confusing for those not familiar with Flickr, because you never know exactly what’s going to happen when you click a link.

For those using Flickr every day, such quirks will quickly fade and there’s no doubt that the redesign is a vast improvement. Flickr also claims that page load times are faster, though we didn’t notice a huge difference while previewing the test site. Still, loading a larger photo without slowing down the page will likely be good enough for most users.

Flickr’s official blog post has more details if you’re curious.

See Also:

Layers