What is Responsive Web Design?
All popWeb sites are responsive. But what does that mean, and how does it affect you, your business and the visitors to your website? Simply put, a responsive website is one that automatically adjusts to the screen size that it’s being viewed on. All the content is rearranged in various ways to fit onto the small screen, allowing your clients and customers to quickly and easily find what they need.
Why should my website be Responsive?
If your website was not responsive, then the full site would be visible on your phone screen and all the text would be too small to read. This forces the user to pinch-zoom into the area they are interested in. Not exactly user-friendly, and a whole lot of extra work for your potential client.
How many people are visiting websites on a mobile device nowadays?
South Africa has an estimated 23 million smartphone users – more than a third of the total population. On average, 50% of website visitors are on a mobile device. For this reason, it’s important for us to ensure that both mobile and desktop users have the best user experience possible. Depending on the type of content you are providing, that percentage may vary. For example, gaming, academic research and job-seeking is mostly viewed on desktop. However, social media, gambling and adult content are mostly viewed on mobile devices.
What does Responsive Design look like?
THE MENU:
The first, and most noticeable change is in the navigation menu at the top of the page. On mobile devices the menu is represented by 3 short horizontal lines below each other, commonly referred to as a “Hamburger”. By clicking on the “Hamburger” the navigation menu appears.
CONTENT:
Content within sections is stacked vertically, so if you had 3 promo boxes on the desktop version, the mobile version would show the boxes one below the other. Website sections are divided into 1 – 5 columns, and each column will be stacked in the order that they appear horizontally.
MINIMISING DATA COSTS:
Data and bandwidth costs, particularly in South Africa, are high, so the responsive design ensures that the minimum amount of data is used to display the website.
- Image files are created so that they load quickly with the smallest possible file size.
- We avoid forcing the user to download big PDF files in mobile versions of a website.
- Videos are reduced as much as possible, to minimise data usage. YouTube automatically detects the size of your screen and displays a smaller file that uses less data.
CONTACT ADVANTAGES:
Phone numbers can be set to be clickable, which opens your mobile phone app and loads the number, ready for the user to dial. Email addresses are also often clickable to your default email app, like Gmail, etc.
When you web developer hands over your completed website, make sure to check it on your tablet or mobile phone. Put yourself in the mind of a potential customer and ask the following questions:
- Can I find what I am looking for?
- Is this website easy to navigate?
- Are the images displaying correctly?
- How long does each page take to load?
The downside of Responsive Design is that websites tend to look “samey”. This is due to the sectional nature of the design. To make your website stand out, use the big hero image at the top of each page as a space to showcase your unique style and selling points. Separate your sections with a graphical element that stands out and encourage a client or potential customer to want to know more.