Responsive Design Is Much More Than The Size Of Your Screen

UI Design | 28th July 2015

At first sight, it may seem tempting to reduce the question of responsive design to a simple matter of size screen: after all, before smartphones became ubiquitous and consumers started switching to mobile, design approaches insisted more on adaption than responsiveness. There is still the pervading notion that responsive design can be all summed up as the (in)ability to deal with different screen sizes. Here at Hi INTERACTIVE we take our responsive design very seriously.

Dimensions of Responsive Design: Context Matters

For design professionals who are not responsive-oriented, it can be relatively easy to lose track of an essential factor in the development process: context. Before you can start making choices in terms of language or even strategy, you need to get as much information and awareness as possible regarding context.

Awareness of contextual factors is important throughout the development process. To develop a product that is appropriate and usable for its intended users, the contexts in which that product will be used should be considered from the very early stages of product specification and design.

Cathy Thomas and Nigel Beuan in "Usability Context Analysis: A Practical Guide"

Would you ever dream of building a product without knowing the what’s, the why’s and the how’s about your users? These days, it is not just about the message, it is mostly about managing to get it across. So, going even one step further, we can frame responsive design into a theory of contextually aware web design; this theory postulates that by knowing what a user does, it is possible to change a design in order to meet the users’ immediate needs, as well as using all available user data to go around unnecessary UI. It is possible to use JavaScript to access available data points within a user’s environment and adjust the design accordingly (see more on the topic here). What are then the cardinal points we need to watch out for?

  • User: Who is he? What are their challenges? What are their needs? what can we get about a user’s context that may guide us in creating a better experience?
  • Task: What is a user trying to accomplish? Who is involved in the task?
  • Environment: Where is the user? When is he trying to access your website or mobile app? What is their environment like? How does this environment impact their ability to accomplish the task?
  • Technology: Which device is the user using to pay your website a visit? What are the technical limitations? How does the user interact with these technologies?

Responsive Design made simple

Afraid of getting lost on the process of creating a responsive website? Then check out this article, where you will get to actually see the main differences between adaptive and responsive, and how each choice can have such an wide impact in a user’s experience. Here are the main bullet points on it:

  • Relative Units vs Static Units: screen sizes shrink more and more, so content starts to take up more vertical space and anything below will be pushed down.
  • With Breakpoints vs Without Breakpoints: with breakpoints, even if your website is styled with three columns, you’ll be able to display the same content on mobile in just one column.
  • Nested vs Not Nested: nesting elements allow you to group onscreen elements and adapting to shrinking or expanding screens.
  • Max Width vs No Max Width: while content spanning the whole width of your mobile device may look great, the reverse doesn’t necessarily work.
  • Desktop First vs Mobile First: Technically there isn't much of a difference if a project is started from a smaller screen to a bigger screen (mobile first) or vice versa (desktop first). Yet it adds extra limitations and helps you make decisions if you start with mobile first.
  • Vectors vs Images: A vector image can adapt better to different resolutions.

How we do it: responsive design at Hi INTERACTIVE

Needless to say, we believe in responsive design as a valuable and upcoming tool to deliver those results our clients are looking for. We favor the view that beautiful design, in and of itself, may not get you as far as you’d like: there needs to be a functional side in place in every project and injecting some responsive design in your website and/or app is the way to go.

Go responsive design today: talk to us and learn how to keep your users pleased with your website and mobile experience.