This post was contributed by a community member. The views expressed here are the author's own.

Local Voices

PSD To Resonsive HTML5 - Understanding User Experience for Responsive Sites

Praveena, Neighbor

Consider a typical business scenario. Business owners decide that they need a responsive site. They may have to make their existing site responsive or build a responsive site from scratch. But for some reason they want to make their sites look and work great across multiple devices. It’s a good start. They approach web design and development companies or freelance professionals to explain what they need. After a back and forth conversation for a few days, the designer and developer have a god idea of what would fit in with the client’s expectations and start creating a responsive site. Once they’re done with the development, the final responsive site again goes to the clients for approval before it goes live.

Notice anything amiss? Actual people who are going to see and use the site are pretty much left out of the equation except for lip service about the ‘target user’. In most cases, clients automatically assume that the UI designer and developer will intuitively understand user experience for responsive sites and don’t enquire too closely about usability issues.  

But once the site is live, poor user experience will manifest itself as high bounce rates, low incoming traffic and even vocal complaints from users. While UX for design can’t be learnt overnight, you can still try to create responsive sites that at least satisfy the bare minimum of good user-centric design by following a few guidelines.

Move blocks of content based on what your users are looking at

Responsive design depends on three technical elements:
  • Media queries
  • Fluid or adjustable grids
  • Flexible images
Essentially, they let you identify screen sizes and adjust content in the site accordingly. But it’s the designer who ultimately decides the position of these content blocks. For instance, the F-Layout pattern in web design which is based on eye-tracking studies is one of the most commonly used patterns for content placement.

Readability and Visibility

Multiple devices also include smaller smartphone screens, so keep your font big enough to read without any strain. And these multiple devices are portable, so people are going to whip it out in the open and try to look at something on the screen occasionally. Keep this in mind and pick a contrasting colour scheme that will help with visibility outdoors.

Take age and interests into account when you design buttons

Is your site going to be frequented by children or by adults? Children often find trouble doing actions like double tap and need larger buttons. If you’re targeting adults, are you building a site that will be used by tech savvy 20-somethings or an older crowd who only know some basic interactions on a mobile device? Will they appreciate innovative interactions or be daunted by something they haven’t encountered often? These are questions that you need to think about for understanding user experience for responsive sites. You may also need to change elements of the website like buttons or menus into something less space consuming and intuitive on a touch screen. UX in Design is a highly specialized field and this is just the tip of the iceberg. If you’re a UX designer, we’d love to hear if there’s any other major consideration you have while designing responsive sites.
We’ve removed the ability to reply as we work to make improvements. Learn more here

The views expressed in this post are the author's own. Want to post on Patch?

More from Barrington