Responsive Web Design Series

Responsive Web Design Series (Part 2) – The Implementation

Responsive Web Design (Part 2) – Implementation

Between early 2013 and the present day, we've released over 20 fully responsive sites and performed several responsive conversions for some of our clients who wanted to modernise their existing site.  Enhancing sites to perform well on devices is crucial for web marketing in 2014 as more and more people are surfing the web via smartphone at Starbucks on their coffee break.

So, what makes a good responsive site?  Let’s break it down –

Your run-of-the-mill site structure would be similar to what’s pictured below – banner with logo and navigation, a large image or perhaps a content slider below that, some further navigation and your body text/content.  This content is strategically placed to improve readability and accessibility on large screens. Thus, we have the smartphone dilemma: how do we structure the same information in a manner which is concise, petite and elegant, whilst still being informative and readable?

This is where responsive design and development come into play. Using our whimsical ways, we detect the size of your screen and structure the content accordingly.  This usually starts with collapsing any navigation so that it can be viewed only when the user deems it necessary and pulling the rest of the content up higher.  In the good fight, some information just don’t make it. In this case, it’s things which tend to be more for aesthetic appeal, such as a large tagline below the banner.  This is pictured below, or you can resize your browser and watch as the structure of this site changes.

So that’s it?  The content moves around?  Big deal… is that all there is to responsive design? Yes. Responsive development?  No!  With mobile browsers, we understand that you’re not going to be connected to the NBN and are likely to want to conserve your limited amount of data and battery life so that you can surf the web all day.  To accommodate things like slow internet speed and low data-allowance, we’ve implemented responsive performance enhancement.

Responsive performance enhancement is a term I’ve coined to describe how we make sites load quickly on mobile devices whilst still displaying the same content as a desktop.  This is achieved by removing things that chew up data and processing power such as loading smaller images and disabling certain transitions/animations which are triggered when hovering your mouse cursor over an item (a somewhat non-existent feature when on smartphones).   We do this selectively, as we still understand that good user experience is a key factor in creating good value from your site at any screen size. 

Due to the ever-changing nature of web design and development, as well as the constant evolution of technology, this article will probably be outdated before it’s even published. That's why we’re constantly updating our techniques and methods so that we can bring you a robust and modern design without sacrificing performance or user experience.