Responsive Design Fundamentals

Responsive Design Fundamentals

Even today, browsing the Web on a smartphone can feel like a second-class experience. Visiting a site designed only for desktop, you have to double-tap just to make the text legible, or pinch and zoom to figure out the context of the page. Finally, in frustration, you email the link to yourself to check out when you’re on your laptop – if you actually remember.

Or worse yet, you visit a site that reroutes you to m.sitename or, an odd white void with blue links – a far cry from the complete, robust site. It’s a disjointed “mobile-only” experience with scaled-back content, delivered by a third-party vendor. It simply doesn’t feel or work like you’d expect.

Fortunately, these frustrations have ushered in an approach most web and digital product builders know as “responsive design.” On a responsive site, each page is a fluid grid that can adapt intelligently to a range of devices. Based on the detected screen dimensions, the page rearranges and resizes images, text, and other elements to present a tailored design. Responsive sites aren’t a panacea for bad design – far from it. They require a deeper understanding of what your users are looking to do on their devices and ensuring that designers and developers work together to make that experience the best it can possibly be. Keeping a few key principles in mind will set you up for success:

Design Early

Responsive design is an equal mix of development and experience design, optimizing the way the pieces of a website are delivered to the browser while also giving the user an optimized experience that makes sense to mobile users. While it’s certainly possible to retrofit an existing desktop experience to be responsive, it’s typically easier and more effective to approach the site with a responsive mindset from the start. In other words, a responsive-oriented redesign is often the best course. But first, examine whether your site has enough mobile users to justify a redesign. A quick look through Google Analytics or Omniture data will show you how users are browsing your sites, and looking back over the last 12-18 months will give you a sense of the trend. Chances are, you’ll see significant mobile growth. The PNConnect team routinely sees 30-40 percent growth in mobile use on client sites.

Focus on Tasks

Simply chopping your desktop site into smaller pieces and making headlines larger isn’t the answer to mobile design. Desktops, tablets, and smartphones will share the same HTML, but that doesn’t mean the changes in experience can only be superficial. Look to site metrics and user testing to understand what tasks your users perform on the phone as opposed to sitting at their desk or on their couch with their tablets. Put yourself in their shoes and make sure the design caters to the right tasks for each device.

Let Go

Optimizing the experience for mobile users can bring the added benefit of streamlining the desktop experience. Take advantage of the opportunity to evaluate your desktop site design and optimize everywhere you can. You’ll likely find there are elements from past redesigns that just don’t work properly in this new approach or simply don’t serve users’ needs. Let them go.