Archive for the ‘Responsive Design’ Category

File Under: Responsive Design, Visual Design
Oct
30
2012

Break Out the Scissors and Glue for Your Next Responsive Redesign

By

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.

Tags:
File Under: Responsive Design, Visual Design
Oct
18
2012

Put Your Responsive Ideas to Paper With ‘Responsive Sketchsheets’

By

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.

File Under: Responsive Design, Web Apps
Oct
15
2012

Easily Preview Responsive Designs With ‘Responsivator’

By

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.

File Under: Responsive Design
Oct
10
2012

Embracing the Flexibility of the Web With ‘Responsive Enhancement’

By

A handful of the many canvases your site will adorn. Photo: Ariel Zambelich/Wired.com

When most of us see the phrase responsive design we think of Ethan Marcotte’s original definition — fluid grids, flexible images and media queries. While those are the essential elements of responsive design, developer Jeremy Keith says that designing responsively also means approaching your designs with a different mindset.

There’s a video (regrettably not embeddable) of Keith’s talk on “responsive enhancement” at the recent Webdagene conference in Oslo where he argues that, to design responsively, we need to drop our “consensual hallucination” about what a website is. Much as we might like it to be, a website is not a fixed canvas. It’s not the 600px-wide canvas we used in the 1990s, nor is it the 960px-wide canvas that’s de rigueur today. A website has no width and never has.

Part of the reason responsive design sometimes feels foreign is that legacy of thinking that websites are things with widths. As Keith says “we didn’t embrace the inherent flexibility of the web, we didn’t see it as a feature, we saw it as a bug.” And so we built fixed-width sites for what was and still is an inherently flexible medium.

Keith’s talk gives a great overview of why responsive design is actually what the web has always been and how you can embrace that inherent flexibility in the web. It’s a must-watch for anyone interested in building great websites.

Tags:
File Under: Responsive Design
Sep
14
2012

‘This Is Responsive’: Everything You Ever Wanted to Know About Responsive Design

By

Image: Screenshot/Webmonkey

Sure, you’ve heard of responsive design. You probably even know the basics — fluid layouts, flexible images and media queries — but actually building responsive sites can be challenging. Not only are there the technical hurdles of defining breakpoints, managing different layouts, resizing images and so on, but just keeping up with the latest and best ideas on how to do those things is a full-time job.

That’s part of why responsive design guru Brad Frost has created This Is Responsive, a one-stop shop of continually updated responsive design patterns, resources and news. The site is the most comprehensive collection of best practices, tips and tricks for responsive design that we’ve seen — definitely bookmark it.

But the best part about This Is Responsive is that it’s on GitHub, which means everyone can contribute.

Head on over and dig through the responsive patterns for site layouts, tables, how to handle menus and navigation, forms, images and loads more. Also be sure to throw the blog’s RSS feed in your feed reader.

For some background on the project, as well as instructions on how you can contribute, check out Frost’s blog post.

Tags:
« OLDER POSTS