Digital Reflow
Work with us

If you're not moving forward don't bother moving at all

By Duncan Hewitt on December 08, 2014

Think of the word responsive. What does it mean? It is all about reacting positively and quickly to someone or something within the environment. Building a website for desktop computers had become second nature to designers. 

Resolutions and screen sizes were generally the same which meant a fairly simple task when it came to adding the furniture. Que smartphones and tablets to ruin the party. The question was could designers react and respond to their new surroundings. The answer, Responsive Web Design (RWD). Consider for a moment the rate at which mobile internet is growing. Never has it been more vital to ready your website for the assorted array of devices and screen sizes. 

The world of web design needed a hero and albeit it a slightly less catchy name than Thor, Wolverine or Captain America, that hero is RWD. Businesses’ demands are palpably growing when it comes to their online presence. They want their website to parallel their business values and their brand whilst remaining on the front line of the World Wide Web. What businesses need to understand is that RWD isn’t just about keeping up with emerging trends and looking pretty. It is more about attempting to solve usability problems that have arisen due to the different devices available on the market used to access the internet. Now we’ve put the world to rights over RWD and what businesses want, it’s time for some tips on utilising this gift. Consideration number one. If it isn’t essential, get rid of it! Sounds simple but the challenge is deciding on how crucial the content is you are creating. Once this decision has been made, the next step is acceptance. Acceptance that some content was just not made for mobile. It just simply will not work there. 

Moving swiftly on to images. Forget videos for now. Images are a whole different story. Who can guess the biggest culprits when it comes to layouts breaking out of the box model? Text? No. Social media? No. The clever Trevors amongst you would have probably guessed it. Images. The solution? You can make your images flexible to a certain degree. All with a simple design. It is easily achieved through using adaptive sizing and re-sizing. This article could now take a very unusual turn. The next couple of points wouldn’t look out of place in the list of sexual euphemisms. It’s all about touch and performance. What would you say is the main feature of a smartphone? Well, we don’t have time for you to answer. We can tell you, it is the touchscreen. The troublesome touchscreen interface creates an entirely different scenario from mouse-and-keyboard setups. Mobile screens are all touch-enabled and bar old sausage fingers in the corner, average size digits are used to handle them. The key to it is making the buttons big enough to press but small enough to remain subtle. 

According to Apple: the comfortable minimum size of tappable user interface elements is 44x44 pixels. Keep your buttons big and bold but tappable and readable at all costs! Onto performance now. This is the spiciest topic in RWD. 

It is purely because if not done correctly RWD can perform extremely poorly with the load up time driven to the max. Programs such as GZIP can be used to compress your page resources and thus allowing an easier transmission across networks. This will incidentally lower the number of bytes sent per page/element and will ultimately make your content easier to browse and access from devices with varying bandwidth. We know the need to load up the page with beautiful, full-width images and videos but just bear performance in mind. Responsive web design is a complex issue but anything worth having is. It is imperative to make your product or business available to a wider consumer base. Think about how many potential customers you are alienating should your functionality be so one dimensional. It’s like putting an age restriction on alcohol... oh wait.