Going Responsive

Have you ever reduced your browser size for a particular reason and had to painstakingly scroll over to see the cut off portions of the website?  Or have you ever tried pulling up one of your favorite websites on your phone, but it was this tiny page that you had to pinch and zoom way in and try to click on the buttons?

That was the norm before a new web approach recently took over and changed the way we think, plan and create websites.  Now, check out this side-by-side comparison of another site shown at different browser sizes.

That is what we call Responsive Design.

Never heard of responsive web design?  Don’t worry, you’re not alone.  In the most vanilla terms, responsive web design is when a website adapts the layout to the device size that you’re using with one fluid motion.  No longer do designers have to design multiple different layouts (desktop, tablet, and mobile) for the same website.  In the past when designers made those different layouts, they had to pick certain dimensions that they wanted each layout to have and basically hope for the best when it came to looking good on other device sizes.  The problem with that approach today is that there are literally hundreds of different device sizes on the market now.  Think about how many companies are producing desktops, laptops, tablets and mobile devices.  Hoping that the one size you picked is going to work for all those other options is no longer feasible.

One of my favorite blogs, Smashing Magazine, defines responsive design as “the approach that suggests design and development should respond to the user’s behavior and environment based on screen size, platform, and orientation.”  This approach uses flexible images and grids based on relative units like percentages rather than absolute pixels or points. Media queries are also used as breakpoints with different CSS style rules based on the characteristics of the device being used.

In essence, as a user switches devices, the website should be smart enough to respond to the switch by displaying the correct resolution for the new device.  This may be getting too technical, but if you can start to understand the main concepts of it, then you can understand why it’s so essential in today’s business environment.

So why is responsive design so important to businesses?  Responsive web design is now more essential than ever with more and more users assessing the Internet via their tablet and mobile devices.  Below are four statistics that Spyderweb provides us:

• 21% of website traffic to leading ecommerce websites is now coming from tablets and smartphones.

• 28% of Americans access the Internet more often on their smartphones than their desktop computer.

• 67% of shoppers are more likely to buy from a mobile-friendly site.

• 91% of U.S. residents have a mobile device within reach 24/7.

If you’re wondering if your business really needs to spend the money to go responsive, think about your target audience and their media usage and needs.  Also, reflect back on how much you personally use your mobile device to shop online or surf the web.  If you have Google Analytics set up, another thing you can do is check out how your current non-responsive site’s stats look for page visits on desktop, tablet and mobile.

Adobe recently came out with brand new software to help designers and developers ease the process of creating responsive designs.  This software, Adobe Edge Reflow, is available with their Creative Cloud service, but it is still in ‘Preview’ mode as they are still asking for feedback from users trying out the software.  You can create layouts from scratch, or they have a Photoshop plugin where you can literally import an entire PSD into a Reflow project.  It also helps solve the fonts issue by supplying two font plugins: Edge Web Fonts and Typekit.

Just a couple weeks ago, they released a newer version and made HUGE improvements in my opinion!  Now users can change the states of objects and text with hover and active effects, as well as link objects to either other pages within the project or an URL.  Another big benefit of Edge Reflow is that it allows the designer to preview the design in both live browsers and mobile devices to see the responsiveness in action.  Adobe also developed a free app, Edge Inspect, which allows users to preview the reflow project on their mobile device by simply entering in the computer’s IP address where the project is being developed.  Pretty cool, huh?

I’m still taking time to thoroughly learn this new software myself, but I definitely encourage all designers too start familiarizing themselves as well.  If you’re not a designer, now you can at least know what people are talking about when you hear responsive design.  I bet you start to notice it more when you’re surfing around so try checking out some of your favorite sites to see if they’ve made the switch to responsive yet.  All you have to do is slide your bottom right browser corner to the left to reduce the size of your window.  You’ll be surprised how you’ll start to notice responsive design without even looking for it!