Welcome, is this your first visit to The Hopkinson Report? START HERE Weclome Arrow

responsive design examples in action
Learn what responsive web design is and see 10 cool examples in action on TheHopkinsonReport.com.

– Download podcast: Via iTunes | Save to computer (Right click, Save As)
– Play it below:

I love design.

I like talking about design, I like hanging out with designers, and I secretly wish I was a designer in real life.

So when a design trend comes along that seems both cool and relative to my audience, I’m all over it, and that trend is called responsive design.

Because I’m neither a designer nor a programmer, I’m not going to delve too deeply into the technical side of things. For most people, you’ll want to hire a designer to do the heavy lifting. So this week we’re going to get right to it in simple Q & A format, then on to the examples:

What is responsive design?

To quote Wikipedia, responsive web design is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).

What does responsive web design look like?

Magic. No seriously. British writer Arthur C. Clarke once said “Any sufficiently advanced technology is indistinguishable from magic.”

Listen, I’m not saying the design is truly magical. But you have to admit it’s pretty cool the first time you see it. Which is why I put together the video examples.

Why is responsive web design needed?

The reason adaptable web design is needed is due to the explosion of mobile devices around the world. According to Mary Meeker’s presentation on the state of the internet, 2013 will see the installed base of smartphones + tablets exceed the installed base of computers.

This means people are coming to your website from multiple devices. Social media website Mashable.com has called 2013 the year of responsive design, and states that their site is accessed by more than 2,500 different devices each month.

Should companies adapt responsive design?

It depends. Certainly if you’re a large business with lots of traffic, you need to adapt to the needs of your audience. It’s especially important for content-driven companies. However, the right solution might be an app or a separate mobile-optimized site.

If you’re a small business and you receive a large percentage of traffic via mobile, it’s something you need to consider as well.

Should personal bloggers adapt responsive design?

1) If all you need is a static web-presence (say, if you’re job searching), then an easy solution would be to create a page using a site such as about.me. I created a tutorial on GetYourNameToday.com (affiliate) to walk people through the process. While not exactly like some of the other example I show you, they do a pretty good job of adapting to different devices, so it’s built right in.

2) If you’re starting a new blog or web presence, then it makes sense to begin with a design in mind that is built for the future. If I were a job seeker just setting up a page, I’d use a pre-designed theme from Themeforest.net (affiliate), which gives you a great design and modern layout that can be viewed on any device.

I’m thinking of building one as a demo test, and found four cool examples I might choose from:
Example 1 (below) | example 2 | example 3 | example 4


Best of all, if you know a little HTML and can do the coding yourself, these themes only cost between $7 and $9.

If you’re building out more of a website, you can purchase Themeforest responsive WordPress themes for between $25 and $60.

3) If you already have an existing blog (or 3 or 4 like I do), the decision gets a bit harder. I can speak from personal experience that I’d love to be able to press a button and have my blogs be optimized for mobile, but I’m concerned about the time, effort, and money it would take to retrofit my blog to a new theme.

Once again, knowing your code is helpful, otherwise it’s something you’ll want to talk to your graphic designer about and get a quote.

Is responsive design for everyone? What are the limitations?

Ditching-Responsive-DesignOf course responsive design is not the be all, end all for all websites, and you should always look at all angles before jumping on the latest trend. A company called GoCardless.com wrote a great article called “Why we ditched responsive design.”

They cite the following issues for their particular business:
– It wasn’t right for their audience
– It was slower to implement
– It constrained their designs

More importantly, they went on to discuss what they did instead.

Forbes has also written about “The Trouble With Using ‘Responsive Design’

What are some cool sites that are using responsive design?

hellofisherIn the demo I show examples from:

[Shoutout/Also see: I came across the Cacao Tour, Hello Fisher, and Illy Issimo examples in this Econsultancy post when doing previous responsive design research. Thx!]

Also, check out this really cool page Matt Kersley has put together to test your designs.
Responsive Web Design Testing Tool


What happens next? Is responsive design the future?

There seems to be one thing we’re sure of, and that is that mobile devices are clearly becoming the norm. We sleep next to our smartphones. I’ve watched 18 month old babies pick up an iPad and instantly start engaging with it. Computers aren’t going away, but they are evolving.

The current responsive design solutions are about as set in stone as the latest design trends were in 1999 or 2006. They will always continue to evolve. Stay tuned and watch the action unfold.

Sponsor Message: Freshbooks Fresh Take of the Week: Being responsive

Today’s topic is responsive web design, which allows your website to be viewed anywhere on any device. It’s the same principle that Freshbooks takes. They have a website, an iPad app, and iPhone app, letting you be in touch with your accounting system no matter where you are.

Switch to cloud accounting and join over 5 million people using FreshBooks to make billing painless at Freshbooks.com.

Comments Closed

Comments are closed.