Archive for the ‘Visual Design’ Category

Drink in the Responsive Grid With ‘Bourbon Neat’

CSS grid frameworks are awesome. They simplify development, eliminating a ton of math and letting you focus on what makes your site your site rather than the underlying structure.

Sadly, it’s nearly impossible to create a reusable, responsive grid that doesn’t litter your HTML with grid-specific class names. Even if the non-semantic class names don’t bother you, there’s no getting around the fact that it’s a pain to update and maintain that code.

The solution is to step back from the CSS and turn to a CSS pre-processor like SASS.

That’s what Bourbon Neat does to create one of the easiest to use SASS-based fluid grid systems we’ve come across. The clever name comes from the fact that Neat relies on the Bourbon SASS library and extends it to create a fluid, em-based grid framework.

The project was created by the developers at Thoughtbot.com. Here’s what the docs have to say:

Why another grid framework?

Because we are not happy with other frameworks. We built Neat with the aim of promoting clean and semantic markup; it relies entirely on SASS mixins and does not pollute your HTML with presentation classes and extra wrapping divs.

Using SASS 3.2 block mixins, Neat makes it extremely easy to build responsive layouts… Using the breakpoint() mixin, you can change the number of columns in the grid for each media query and even store these values in project-wide variables to DRY up your code.

To give it a try, just install Neat and its dependencies and check out the guide to using Neat over on GitHub. Be sure to look over the example page to get an idea of what you can do with Neat and how it works. If you’re a Rails developer there’s a Neat gem you can install.

The power of Bourbon Neat lies in some new features in SASS 3.2, namely block mixins, which allow you to use the @mixin syntax to “name” media queries. To see how Bourbon is using that feature, check out the source code on GitHub.

WordPress Embraces Responsive Design With New ‘Twenty Twelve’ Theme

Meet Twenty Twelve, the latest default WordPress theme. Image: Screenshot/Webmonkey.

The default WordPress theme is quite possibly the most widely used design on the web; the minute you sign up for or install WordPress you have a website that uses the default theme. Every year WordPress unveils a new look that will grace every “just another WordPress site.”

This year’s theme, Twenty Twelve, is the first to embrace responsive design, adapting its layout to fit any screen. The WordPress admin pages are already responsive, and the last few default WordPress themes have accommodated small screens, even using some responsive design tools like CSS @media, but this is the first default theme to fully embrace responsive design and fluidly adapt to any screen.

Twenty Twelve marks something of a departure for the default theme. Gone are the banners and featured images atop posts. Instead Twenty Twelve sticks with a largely black-and-white look that puts the emphasis on typography and a new typeface, Open Sans.

If you’d like to use Twenty Twelve on your WordPress.com site, just head to the dashboard and select Themes, (under Appearance). If you’re hosting your own WordPress install, you’ll soon have access via the Extend theme directory. And of course the new theme will be bundled with WordPress 3.5 due later this year.

This year’s theme was designed by former NFL player Drew Strojny, though as with all things WordPress there was plenty of help from the WordPress community. The WordPress blog has more details about Twenty Twelve and there’s a live demo you can check out as well.

How Do You Use Responsive Images?

That's a lot of screens, are your images ready? (testing using Adobe Shadow). Photo: Adobe.

No one wants to waste bandwidth sending large images over limited mobile pipes, but everyone wants their images to look good on the multitude of screens connecting to today’s web. Finding the balance between the myriad factors — screen resolution, screen size, bandwidth, layout and design — is a tricky process.

We’ve looked at a number of techniques for handling images in responsive designs, but one thing that we haven’t covered is where to put the actual breakpoints.

You’re probably familiar with breakpoints in responsive design, they’re the screen widths in your media queries. For responsive images the idea is the same; a “breakpoint” is the screen size at which you swap in and out different size images.

At first glance it might seem logical to use the same breakpoints for your images that you’re using in your CSS media queries, but as Cloud Four’s Jason Grigsby writes, that’s not always the ideal solution. Grigsby tackles the potentially tangled question of breakpoints in a new post, So How do You Pick Responsive Images Breakpoints?

To simplify what can be a very complex question, Grigsby ignores some scenarios, including the so-called “art direction” use case where images are optimized (cropped differently, for example) for different screens. Instead Grigsby focuses on the question of how to best select “different image files with different resolutions of the same image based on the screen size.”

The simplest solution is to just make your image and responsive design breakpoints the same, but that’s rarely going to be ideal for your site’s visitors. Here’s what Grigsby has to say about using the same breakpoints for both image and media queries:

If we were talking about the art direction use case, then it is likely that the breakpoints would be the same because changes in the layout might also indicate an edit to the image.

But in the case where we’re simply changing files to provide different resolutions and a faster download, the image breakpoints should be determined based on when the browser is downloading an unnecessarily large file.

The main problem is, what constitutes an “unnecessarily large file”? But even if you answer that, as Grigsby writes, you still haven’t answered every question:

How do you determine what is an unnecessarily large file? Is that 1 byte? 10k? 20k?

And if you can answer that question, how do you determine the resolutions at which those file size jumps are going to occur? Depending on the content of an image and the compression algorithm used, images are likely to have different resolutions at which they experience significant changes in file size.

In the end Grigsby doesn’t yet have an answer to the question of how to handle responsive image breakpoints. And neither do I. There just isn’t an easy answer that will work for every project. My thinking, and what I’ve done on my own site, runs pretty much along the same lines of Eric Portis’s comment on Grigsby’s post. If you’ve got ideas, head over to Cloud Four and let them know how you’re doing it.

File Under: Visual Design

Source Sans Pro: Adobe’s First Open Source Type Family

Image: Adobe

Adobe has released a new open source font family by the name of Source Sans Pro.

You can check out and download the various font weights and styles in both OTF and TTF formats from Adobe. There’s a PDF glyph sample available as well. Both Adobe Typekit and Google Web Fonts are serving up hosted copies, if you’d like an easy way to use Source Sans Pro on your website.

Source Sans Pro makes a nice headline font on the web, with a nod to classic News Gothic headline fonts of the early 20th century.

Adobe typeface designer Paul D. Hunt created Source Sans Pro. “I was drawn to the forms of the American Type Founders’ gothics designed by Morris Fuller Benton…. I have always been impressed by the forms of his News Gothic and Franklin Gothic,” writes Hunt on the Adobe Type Blog. The goal behind Source Sans Pro was to create a font that’s “both legible in short UI labels, as well as being comfortable to read in longer passages of text on screen and in print.”

Adobe’s plan is to use the new font in its open source applications, and indeed Source Sans Pro is already part of the WebKit-based code editor, Brackets. An earlier incarnation was used in the Strobe Media Playback framework. (in Strobe, Source Sans Pro is known as Playback Sans).

In addition to the font itself, Adobe is releasing the underlying source materials so that anyone who’d like to can modify Source Sans Pro to suit their whims. Source Sans Pro is available under the OSI-approved SIL Open Font License.

File Under: JavaScript, Visual Design

Prism: Beautiful Code-Highlighting for the Web

Deliciously meta: the Prism source code, highlighted with Prism. Image: Screenshot/Webmonkey

Prism is a slick new JavaScript library that adds a very attractive syntax highlighter to any website with a mere 1.5KB (minified & gzipped) of extra bandwidth.

PrismJS started life as the highlighter for Dabblet (which we looked at previously), but popular demand convinced developer Lea Verou to extract the library and release it as a standalone project.

Even if you’re happy with Pygments or another popular syntax highlighter, Prism is worth a look if only because its default syntax highlighting color schemes are beautiful.

Other things we like include the ability to add new color schemes and languages, as well as a plugin system for extending Prism. For the launch Verou has made three plugins available — line highlighting, a “Show Invisibles” tool and an autolinker to make URLs and emails in source code clickable. We also like the fact that Prism doesn’t force you to use any Prism-specific markup; just use <code> tags, along with the recommended way to define a code language in HTML 5 — by adding a language-xxxx class — and Prism does the rest.

As with anything cool on the web there is one catch to be aware of — namely Internet Explorer 8 and below, which Prism doesn’t support. It shouldn’t cause any problems for older versions of IE, but those users won’t see the pretty code highlighting.

For a full list of features — and a few limitations to be aware of — head over to the new Prism page.