Archive for the ‘Responsive Design’ Category

File Under: Responsive Design

Focus on Content, Not Screen Size With ‘Ish’

Webmonkey in “Ish” (not even remotely responsive-ish). Image: Screenshot/Webmonkey

There are, according to developer Brad Frost, some 19 viewport testing tools available for checking out your responsive web designs at various screen sizes. That did not, however, stop Frost from building his own, slightly different, responsive design viewport tester — Ish.

Frost’s Ish is different in that it doesn’t showcase specific devices; instead the size options are small-ish, medium-ish, large-ish. Even better, clicking S, M or L will not always get you the same size viewport. Click small once and you might see your design at 320px, but click it again and it might change to 216px.

The point is to not get hung up on how something looks on the latest iPad or the new Nexus, but to make sure your breakpoints are suited to your content and that your design looks good no matter what screen it’s on. Here’s Frost’s reason for building Ish:

The real reason for this tool is to educate and to facilitate a mental shift. Many clients, designers and developers get hung up on specific device widths, which is why this tool doesn’t include any such language, device chrome or anything like that. Ish helps keep everyone focused on making a design that looks and functions great at any resolution.

Using Ish is simple; just head to the demo page and click the URL button in the upper left corner. Plug in your site’s address and once it loads you can start playing with the size button in the upper right corner to test how your site responds. Be sure to try the “disco” option, which will make the viewport dance around between sizes (and if you must, you can plugin a specific screen width).

If you’d like to grab the code behind Ish for yourself, head on over to GitHub.

File Under: Responsive Design

Preview the Proposed HTML ‘Picture’ Element

The Responsive Images Community Group — a group of developers helping the W3C create a web standard for handling images across devices — has a new demo page showing off how the proposed HTML <picture> element will work.

If you’d like to see the still-very-draft <picture> proposal in action, grab a copy of the special Chromium build (OS X and Linux only) and head on over to the new Responsive Images Demo Hub.

There are five demos, showing off a variety of <picture> features. The first is the obvious use case — serving smaller images to small screens and larger images to large screens. There are more sophisticated use cases as well, like the so-called art direction use case where the crop (or even the entire image) changes according to screen size.

For example, imagine you have a large image of someone giving a speech. You served that image to any screen larger than 800px. But for smaller screens you might not want to just shrink that image down since the speaker would be too small to recognize. Instead the <picture> element can be used to serve up a separate, more tightly cropped image to smaller screens.

Other use cases include serving up a monochrome image for print and serving different images based on device orientation.

If you’d like to create your own demo, head on over to the Responsive Images Community Group’s Github page and fork the demo code.

Break Out the Scissors and Glue for Your Next Responsive Redesign

Building websites with scissors and glue. Image: Webcredible

Web developers are still figuring out the best tools and workflows for creating responsive websites, including falling back to good-old pen and paper. As we noted earlier, Zurb released a nice set of responsive sketchsheets — paper templates for sketching out responsive layouts.

That’s not the only paper trick we’ve seen lately. Alexander Baxevanis of Webcredible recently posted another idea about how paper can come in handy to mock up a responsive site. Baxevanis’ post walks through how he and his team printed out a paper model of their site to wireframe and mock up a new responsive website:

I started by printing out screenshots of some of our most important pages. Each person was given one or more of these screenshots, some empty paper, a pair of scissors and some glue. The only instructions I gave was to try and slice up and rearrange page content so that it fits in a single-column layout.

Baxevanis touts the method’s speed and flexibility since the there’s less sketching and, with each content element cut out separately, it’s easy to rearrange everything and try various combinations.

Naturally there are some limits to how well you can mockup a site using paper, though Baxevanis does offer a clever solution to one problem — fold a piece of paper showing a long list of stuff to mimic a drop-down menu. The main caveat is that this probably works best if you’re starting with an existing desktop site; those adopting a mobile-first approach would probably need to make some modifications to the process.

For more details and more images of the mockups, head on over to Webcredible’s blog.

Put Your Responsive Ideas to Paper With ‘Responsive Sketchsheets’

Put pen to paper with Zurb’s responsive sketchsheets. Image: Zurb.

Building responsive websites means using fluid layouts and flexible designs to accommodate any size screen. Part of what makes responsive design more difficult than building just a fixed, desktop-friendly website is the lack of good mockup tools. Starting your mockups in apps like Photoshop means starting with a fixed-size layout and that’s not what responsive design is really about.

Designer favorites like Photoshop or GIMP can still be useful tools, but less so at the beginning of the design process. Lately we’ve been going old school — sketching in notebooks to outline basic layouts — and then jumping right into the HTML and CSS for actual mockups.

The only problem with pen and paper is that it’s a pain to draw out viewport sizes for showing how your design will reflow. That’s why we like Zurb’s new responsive sketchsheets. The sketchsheets are just that — templates for sketching out layouts. We suggest taking a mobile first approach, for which Zurb recommends starting with the full-size mobile sheets. Also very handy are the sheets for visualizing off-canvas content on small screens.

To give them a try, head over to Zurb’s playground and download the new responsive sketchsheets (which also include some older sketchsheets not geared toward responsive design) and start sketching out your ideas.

Easily Preview Responsive Designs With ‘Responsivator’

Preview your website in Responsivator. Image: Screenshot/Webmonkey

Showing off responsive designs to clients can be tricky. Do you arrive with a bag full of devices in tow? Or open dozens of browser tabs running emulators? Resize a browser window and hope that the stuttering, @media-induced reflows don’t make clients question your sanity?

How about using just one browser tab that gives a quick preview of what a site looks like at any screen size you’d like?

That’s exactly what Responsivator does. Plug in a URL and Responsivator will load it up in a series of iframes set to whichever screen dimensions you specify. The default sizes cover common devices like the iPhone, iPad, Nexus 7 and desktop, though it’s easy to add anything you’d like to the list.

Responsivator is the work of developer John Polacek from Draftfcb, which also made the BigVideo jQuery plugin we featured previously. Responsivator builds on some similar, earlier efforts like Matt Kersley’s responsive web design testing tool and Benjamin Keen’s responsive design bookmarklet, but has some nice added features, like the ability to navigate your site within the various iframes.

Like Responsivator, but want to run your own custom instance? No problem, Responsivator is an open source project available on GitHub; just grab the code and fire up your server.