Responsive Design
What is Responsive Design (or Responsive Web Design)?
The short answer is that we design the web user interface to work on mobile and tablet devices (as well as desktop computers obviously) from the ground up. You will only have have a single web site/web application, hence you do not need to build and maintain a separate standalone mobile website.
Why should I care about mobile devices accessing my website?
If you look at the web analytics for your website, we can almost guarantee that there has been a strong increase in the percentage of visits from mobile devices. This is only going to increase as currently there over 1 million smart devices being sold every day. In addition, research shows that mobile/tablet users will access the web more frequently due to the increased availability of access. They have these devices with them all the time, whereas previously many people may only have had access to a computer with web access for part of their day.
What’s the catch?
This approach requires a modern web browser, and so would not necessarily work on older, non-smartphone mobile devices. It is a bit more work up front, but in our opinion, is the only option. If you opt not to implement a responsive design from the outset, you will then be making it much harder to support mobile and tablet devices in the future.
The other factor to consider, is which devices do you want to optimise for? By default, we would recommend the most popular smartphone platforms (iPhone, Android) and of course the Apple iPad. However, there are now a growing segment of smaller Android tablets, such as the Amazon Kindle Fire, which are in between a smartphone and iPad, in terms of screen size.
What if I already have a website?
It is possible to implement a new responsive design to an existing website, depending on how this was developed initially. We have undertaken this type of project.
Examples
View any of the following websites on a mobile or tablet device, or if you are viewing this on a desktop browser, just resize the browser window to see the design dynamically change.
- www.stjohn.org.nz
- www.fphcare.com
- www.markermetro.com
- labs.markerstudio.com
- www.inhousedigital.co.nz
Geeky explanation of Responsive Design
Responsive Web Design (RWD) essentially indicates that a web site is crafted to use Cascading Style Sheets 3 media queries, an extension of the @media rule, with fluid proportion-based grids (which use percentages and EMs instead of pixels), to adapt the layout to the viewing environment, and probably also use flexible images. As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning, and scrolling.
jQuery Mobile Menu for Responsive Web Sites
We have developed our own jQuery plug-in for websites using Responsive Design. Find out more.