Responsive Web Design

Friday, November 27th, 2020

Responsive Web Design (or RWD) is not just a trend or optional design extra any more – it is now an industry standard. If your website is not user friendly on all devices and all screen sizes then you are missing out!

With more and more users accessing the internet from their smartphones, laptops or iPads, many of the people viewing your website will be doing so from smaller, unconventional sized screens. A responsive web page detects the screen size currently being used and automatically resizes and readjusts the elements of the page so that it can be viewed optimally. A flexible and fluid layout is required to meet and respond to the user’s specific needs and improve user experience.

What Is Responsive Web Design?

In the design world, trends beget trends, and some of the most enduring and important developments are the direct result of other new technologies becoming more and more pervasive. Responsive Website Design (or RWD) is a perfect example of this. It represents a new technique of web design that requires a different way of thinking.

In the past, website designs have been fairly static. For decades the overwhelming majority of web browsing has been done on relatively similar desktop computers, and although the standard resolution has grown, this hasn’t required any radical change to the way a web page is put together. As long as it generally fitted the minimum and maximum accepted screen sizes, the elements of the page could largely remain the same to most viewers.

The age of flexibility in mobile devices has changed all that significantly. A huge number of portable devices such as iPhones, Android smartphones, tablets, iPads, and netbooks are all standard devices to access the internet and view many pages. These devices don’t have a standard screen size or resolution, and there isn’t even a common aspect ratio.

This means that static web designs are liable to become stilted, stretched or distorted, or else require cumbersome amounts of zoom to read. Even static web pages designed specifically for mobile won’t necessarily fit every screen that views it. Responsive Web Design is the solution.

The key is that responsive web design does just that – it responds. It automatically detects the user’s screen size and then adjusts the elements on the page so that they resize and relocate to fit it better. This requires an extremely flexible and fluid construction, usually utilising a grid structure that can be reassembled easily. It also takes a creative approach to solve this new and interesting problem, and a practical approach to what information needs to be on the mobile site, and what can be removed for the sake of simplicity.

How Responsive Web Design Works

Now that we have established what Responsive Web Design is, the next question is – how does it work?

There are a number of key elements that make up effective RWD, and each are by definition extremely flexible. Each site design is different and should be considered differently, but here 3 key building blocks that form the basis of RWD.

1. Customisable Structure

This relates most directly to the “responsive” part of Responsive Web Design. A customisable layout structure is one that detects the settings of the screen that it is being viewed by, and automatically adjusts the different elements on the page to fit.

This sounds complex, but it is really just a matter of keeping the layout flexible and floating. For example, instead of working in terms of absolutes (eg, this banner is 500 pixels wide), customisable layouts work in terms of floating values (eg, this banner is 80% of the page wide). This creates a page that naturally changes with the viewer, including when the device changes from portrait to landscape.

2. Resized Images

Images are one of the most difficult elements of a page to make flexible – they are liable to become distorted easily. A simple solution is to simply display images at their maximum size, but include a small bit of code that automatically gets them to shrink down along with the browser while still maintaining their height and width ratio.

Another thing to consider – are the images really necessary for a mobile audience? Many people browsing on their phones will be using their phone service for internet, which can be slow at loading images and incur excessive data use costs.

3. Hiding Information

A large part of all good design is knowing what not to show, and this is especially true for Responsive Web Design. Rather than shrinking down your website as-is, consider what elements could be cut in order to make the usage of it more simple, direct and streamlined.

Consider who will be using your website from a mobile screen and ask what their needs are. Focused navigation and content are the keys to effective responsive design.

Do I Need A Responsive Website?

The short here is answer is a very resounding ‘Yes!’. Any good web design package will include a RWD aspect. But in case you were wondering how important optimising your website for mobile search is, according to search giant Google – which is responsible for the vast majority of all internet searches – over half of all Google searches that are occurring worldwide are now happening on mobile.

Research has shown people using a mobile to access websites are usually highly motivated towards a certain purpose (such as finding information/directions, local listings nearby and/or making a purchase) – ignoring this market is a big mistake for any business. 

Having a responsive website means that when people want to use your site on the go, everything they need is easily accessed and right at their fingertips. Providing them with a simple user interface directs them towards their goals, meaning more conversions for your business.

8 Reasons Why You Need A Mobile Device Friendly Website

blogpicIf you had a high street shop and 10 people out of a 100 had a bad experience, you’d probably do something about it pretty quick – and you shouldn’t think any differently when it comes to ensuring you have a mobile-ready site.

Therefore, making sure your site works optimally for mobile users and provides an elegant viewing experience is more critical than ever. Still need convincing? Here are 6 common reasons why you should make your site mobile friendly.

  1. Mobile Traffic Accounts For Just Over 50% Of All Global Internet Traffic. The biggest reason to consider a responsive mobile website is the simple fact that it’s now a sizeable audience that cannot be ignored. If you don’t have a website in place that caters to this growing segment of web users, then you are missing out big time.
  2. 4 In 5 Consumers Use Search Engines To Find Local Information. If you’re a business that relies on local foot traffic, you need to be reaching these people. Now that mobile devices can facilitate actions such as click-to-call.
  3. Google Displays Good Mobile Results First. If you’ve ever made a local Google search from your phone, you’ll know how easy it is to click on the businesses that have properly optimised their web presence with phone numbers and map details.
  4. Slow Page Load Speeds Lose Sales. The longer it takes for your website to load, the more likely visitors will hit the back button and search elsewhere. If you have a high bounce rate, the culprit could be a clunky site for mobile users.
  5. Roughly 50% Of Emails Are Opened On Mobile Phones. There’s no point investing into an email or newsletter marketing campaign unless you’re properly positioned to take advantage of the resulting traffic, and ensuring mobile users can load your website from their inbox is essential.
  6. 86% Of People Are Willing To Pay More For A Better Customer Experience.. It just makes sense – satisfied customers will feel good about your brand, products or services, which makes them more likely to be repeat customers or to pass on your details to a friend.

Opera Mobile Emulator For Responsive Web Design

Designing responsive websites – websites that change easily to accommodate different screen sizes or devices – can be tricky to do on a traditional computer monitor. After all, the device you’re designing for is often less than half that size, and cannot be navigated with a mouse and keyboard.

To help designers, Opera has developed a Mobile Emulator that is free to download and makes visualising and testing responsive websites much easier. The engine and user interface are identical to that of the Opera smartphone browser, but it integrates the useful keyboard shortcuts and command-line flags available to desktop programming.

When testing a site, you can view it exactly as if you were looking at it through a specific device. From Apple iPads to Samsung smart phones, it will automatically change the resolution and zoom settings so you can experiment with a range of devices. Enter the URL of the site or drag it into the window, and it will open as a separate pop up for you to test.

Trackpad users will be able to tap and zoom in the same way that you would on a smartphone, or else the same commands can be achieved with a mouse. You can also manually resize the window if you would like to check how well the website responsiveness works and how different elements on it behave. For those not worried about resizing, there is a simple button to switch between landscape and portrait.

The Emulator can also be used for more powerful experiments and debugging, and connects to Opera’s Dragonfly debugging software that allows you to check the core browser code and understand why certain things are behaving as they are. For anyone designing a responsive web site, Opera’s Mobile Emulator is worth a look.

Creating a responsive web page requires a different style of thinking to traditional web design, but it needn’t be complicated. If you’d like to discuss how a RWD site could work for you and your business, get in touch with the experts in SEO at Avatar.

Free Expert Online Marketing Tips

Sign up to Avatar's monthly newsletter...

Mark is the managing director of Avatar, a Christchurch-based web design and marketing company, that has served a wide range of clients in different industries.

Avatar Blog Homepage

Get A Quote

We'll get back to you quickly and can also offer a free marketing review call.