Mobile-Friendly (Responsive) Web Design

New! Free instant mobile health check for your website – Click Here

Why mobile-friendly?

More and more of your clients will be using mobile devices, like smartphones and tablets, to browse your website. Some experts say that the proportion of people using mobile devices to browse the Internet will exceed 50% next year.

As you’ve probably found out yourself, there is nothing worse than browsing a site on a small screen when the text is too small to read or you have to keep scrolling backwards and forwards. So to make sure your clients can see your website, whatever device they are using, it must be mobile-friendly.

What is Responsive Design?

There are several ways to adapt sites to mobile devices and Responsive Design is probably the easiest method to use. Put simply, Responsive Design just means that your site responds automatically to the screen size of the user device.

Responsive Design in Action

Here’s a clip from the ATG | Chartwell speaker gallery. On a desktop display, speaker thumbnails are arranged in a 5x grid:

5x grid

Go a little smaller, like a tablet held landscape, and the grid automatically re-sizes to 4x:

cw_speakers_4


On a portrait tablet, we drop to 2x:

cw_speakers_2


And, finally, on a smartphone the display drops to a single column:

Single column grid

 

Of course, everything else on the page, like text and menus, re-arranges as well. You can try it on the live site – go to ATG | Chartwell on your desktop browser and gradually reduce the browser size by pulling in from the right hand edge.

Magic! That’s responsive design.