All posts tagged ‘design’

Tips, Tricks and Best Practices for Responsive Design

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:

File Under: Visual Design

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

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:

File Under: Visual Design

Find Design Inspiration in Pattern Tap’s Minutiae

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:

File Under: Multimedia, Web Apps

New Flickr Is Bigger, Wider and Uncut

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.

Continue Reading “New Flickr Is Bigger, Wider and Uncut” »

File Under: Glossary

CLUT file

In computer graphics, a color look-up table, or CLUT, is the set of available colors for a given application.

For example, a 24-bit system can display 16 million unique colors, but a given program would use only 256 of them at a time if the display is in 256-color mode. The CLUT in this case would consist of the 16 million colors, but the program’s palette would contain only the 256-color subset. To avoid dithering (i.e., varying the pattern of dots in an image) on 8-bit machines, you should only use colors from a predesignated CLUT.