Responsive design for mobile devices

We design and build web applications with responsive interfaces for mobile devices.

The design and technical implementation of modern web applications to reflect the changing patterns of internet usage, especially the massive growth of access from mobile devices. We build web applications using a technique known as "Responsive Design". The main feature of this approach is that the website code detects the width of the window the page is being displayed in, and adjusts its layout accordingly.

“ The web as we currently know it (and therefore build it) has primarily been accessed from the desktop. Current trends indicate this is about to change. The ITU predicts that in the next 18–24 months, mobile devices will overtake PCs as the most popular way to access the web. If these predictions come true, very soon the web - and its users - will be mostly mobile. ”

Stephanie Rieger, A List Apart

For instance, if a page is being read on a smartphone with a narrow screen, a responsive design may reduce the size of the header and move the navigation into a smaller drop-down menu. There are a number of well-known websites that change the way they display content based on the screen size of the mobile device being used (e.g. the BBC, Amazon and The Guardian).

Responsive design for mobile devices

A responsive design may shuffle content around to make the most of different mobile device screen sizes

Responsive design also implies a certain editorial approach:

  • The copy should be well-written and make sense when read aloud (for screen readers used by the visually-impaired).
  • Each page should have a clear information hierarchy – it must be obvious what is the most important piece of information and that should be prioritised on mobile devices.

Implementing web applications in this way mean they work well across a great range of mobile devices without having to create separate versions of the same thing for multiple browsers (IE, Safari, Firefox, etc.), hardware (PC, tablet, smartphone, etc.) or operating systems (Apple, Android, etc.)

Responsive design - desktop layout
Responsive design - mobile layout

We have used a responsive design approach for this website - check it out on diferent devies for an example of how it can be done.


If you would like to discuss responsive design for mobile devices with us, please do not hesitate to get in touch.

 Contact us

© 2017 Associative Trails Ltd. 4m@