All posts tagged ‘responsive design’

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.

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.

File Under: Responsive Design

Embracing the Flexibility of the Web With ‘Responsive Enhancement’

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.

File Under: Responsive Design

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

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.

File Under: Responsive Design

Give the Web a Responsive-Design Facelift With ‘Responsive Retrofitting’

Show your favorite sites how the small screen is done. (testing responsive sites with Adobe Shadow). Photo: Adobe

Responsive Retrofitting is a fun little project that allows anyone to create a responsive design for any website.

All you need to do is head over to GitHub and install the bookmarklet in a WebKit browser. Now visit one of the supported sites, like Apple.com. Resize your browser window to be very narrow and click the bookmarklet. The result is what Apple.com might look like were the company to create a responsive website (Update: the Apple CSS retrofit is the work of developer Phillip Zastrow, who has more details about the process over on his blog).

Responsive Retrofitting was created by developer Ben Callahan, who cautions that it is “very much in alpha form.” (As such it, regrettably, only supports WebKit browsers for now.) The bookmarklet is an experiment in responsive retrofitting, writes Callahan, adding “it’s a positive response to more negative (but still much needed) critiques of the mobile web like Brad Frost’s WTF Mobile Web.”

Alpha or no, you can contribute your responsive redesigns for your favorite, non-responsive sites — head on over to the Github repo for more info on how to add your own designs.