Responsive websites are designed to look and function well across multiple device sizes and orientations — from iPhones to Blackberry’s, tablets to desktop computers. They have become a popular alternative to designing dedicated websites or apps for specific devices.
We are all aware that more and more people are browsing the web using their smartphones and iPads. The problem is, your new, beautifully designed and carefully laid out site might not look too great on a tablet-sized screen and will appear tiny on a phone — requiring a visitor to constantly resize and zoom in to see your content.
One solution is to design companion websites or apps for specific device sizes – one site for standard desktop computers, one for tablets and one for phones. The problem with this approach is not only can it become expensive but due to the growing number of different device sizes it quickly becomes impractical.
This is where responsive design comes in. A responsive website design and layout will dynamically adjust to the screen size it is being viewed on. This website is responsive. If you are viewing it on a desktop computer, try resizing the browser to see the effect. The content columns and embedded images will resize along with the width of the browser window. So, with a little extra work and foresight during design and development, one website is all you need to give your visitors a great browsing experience no matter what type of device they are using.
Now, responsive design is not the perfect solution for every situation. A major hurdle when designing for multiple devices is page load speed. Web pages that take 2-3 seconds to load on a wi-fi connected desktop may take 10-20 seconds to open on a 3G smartphone. The use of page caching and media queries to call smaller images may be enough to shorten the load time to an acceptable range, but if not, device specific designs and apps will need to be used instead.
Are you interested in creating a responsive website or converting your existing website into a responsive design? Contact us and let us know.
Update: I’ve added a new page for testing responsive design layouts. Click here to see how your current website looks across multiple devices.