UX Design for Responsive Websites

Article Overview

UX Design especially for responsive websites is not as easy as it looks. To get it right you need to have a digital design agency that knows not only best practice UX design, but also the best ways to showcase these designs on all screen sizes; including tablets, iPhones and all hand helds.

What is meant by a ‘responsive’ website design?

Lets keep this simple as there is a lot of confusion surrounding Responsive Website Design. That is, it is a single website that can be viewed across all screen sizes; ipone, ipad and android phones.

Why you need UX designers?

If your website is responsive, ideally you need to give users the best experience possible. Once on your website, they need to be engaged and find their way around the site as easily and seamlessly as they can.

So a great question is:

What is the best and most cost effective way to provide a great user experience for a responsive website?

Never remove functionality

One of the largest issues for any online person is when important functionality just disappears when it is viewed on a mobile device – never remove important navigation or buttons, just cause you think it needs to be smaller to be viewed on a hand held.

A good tip is to refine functionality so it is more compatible for the mobile experience:

  • many columns of text on the page can be converted to selectable drop downs
  • ensure that the main navigation is now viewable on a basic menu button.

Basically, keep everything you have but streamline the interface – your users will be much more happier for this.

Start with the mobile first

The initial design should be the one that will viewed on mobiles and the you gradually work your way up to the largest; being the desktop. Think smallest to largest resolution size. Starting with the smallest first, means that the next design will be much easier as the screen size becomes larger and wider.

Clients will also like this as they can see what their mobile web design will look like before the ipad or desktop!

Not sure what resolution to design for?

Below are the most common sizes and your web designer should be well on top of this – if you have a site in production, this is a handy guide to keep resolution sizes optimal for viewing.

  • Mobile or Hand Held – 330 x 490
  • Tablet or iPad – 780 x 1000
  • Desktop Screen – 1000 x 600 

Design with touch in mind

All UX web layouts need touch as a primary consideration.

When designing for touch a developer must remember what is easily selectable with a finger is a lot different to what is clickable with the traditional mouse.

Some really important factors to remember in the UX design include:

  • Hovering does not exist any more, all functionality and navigation buttons are now ‘tap’ activated
  • Forget about drag and drop – this is almost impossible on a mobile device so this must be avoided.
  • Large numbers and clean text are better and easier to read – keep it this way – and avoid the over use of too many colours.


Button: We'd love to work with you
Scroll to top