The short answer: A responsive website changes its layout to fit any screen, from a small phone to a large desktop monitor, using one website at one address. You need one in 2016 because most people in Bangladesh now go online through mobile internet, because Google gives mobile-friendly pages a boost in mobile search results, and because one responsive site is cheaper and easier to look after than separate ones.
Picture a customer who sees your Facebook post or your advertisement, taps the link on a phone and lands on your website. The page opens, but it is the full desktop layout shrunk into a tiny screen. The text is too small to read. The menu is impossible to tap. To read anything, the customer has to pinch, zoom and drag the page sideways.
Most people do not do that. They press the back button, and they probably do not come back.
This article explains what a responsive website is, why it matters for a business in Bangladesh this year, and how to check whether your own site is ready. You do not need to know any code to follow it.
What Is a Responsive Website?
A responsive website is built so that the same pages rearrange themselves to suit the screen that opens them. On a wide monitor you might see three columns. On a tablet the same content might sit in two. On a phone it becomes a single column with big buttons and a menu you can tap with your thumb.
It works with three ideas that web designers have used for a few years now:
- A flexible layout. Widths are set in percentages instead of fixed pixels, so the page can stretch and shrink.
- Flexible images. Pictures scale down with the screen instead of spilling outside it.
- CSS media queries. These are rules that say, "when the screen is narrower than this, change the layout like that."
There is one more small but important piece. A line in the page called the viewport tag (<meta name="viewport" content="width=device-width, initial-scale=1">) tells a phone to show the page at its real width, instead of pretending to be a large desktop screen. Without it, even a well-designed layout can look tiny on a phone.
The big point is that there is only one website. Your content, your address (for example, yourcompany.com) and your updates are all in one place.
Why Does Your Business Need One in 2016?
1. Your customers are on mobile
In Bangladesh, most people reach the internet through their mobile phones. BTRC, the telecom regulator, counted more than 50 million mobile internet subscriptions at the end of 2015, and fewer than 3 million broadband connections. That is roughly nineteen mobile internet subscriptions for every broadband connection.
3G has been available since October 2013, and Android smartphones, including those from local brands, keep getting cheaper. A mobile internet subscription is not always a smartphone, and some people have more than one SIM, so these numbers are not the same as the number of people. But the direction is very clear: for many of your customers, your website is a phone website.
2. People arrive from Facebook, and Facebook is a phone habit
Every time you post a link on your Facebook page, share it in a group or run an advertisement, many of the people who tap it will be holding a phone. If your website is awkward on a phone, you are paying for attention and then losing it on the second page.
3. Google now rewards mobile-friendly pages
In May 2015, Google said that more searches now happen on mobile devices than on computers in ten countries, including the United States and Japan. Bangladesh was not named, but the trend is the same everywhere phones are becoming the main screen.
Google also acted on it. On 21 April 2015 it began boosting mobile-friendly pages in mobile search results. The change applies to searches made on a phone, and it is judged page by page. A page that is hard to use on a phone can sit lower than a competitor's page that works well.
4. One website is easier to look after than two
Some businesses build a separate "m." website just for phones. That means two sites to update, two sets of content that can drift apart and two addresses to keep working. Google has listed responsive design as its recommended configuration for smartphone websites, partly because everything lives at one address, which makes your content easier for Google to find.
5. A website that is easy to use wins more enquiries
On a phone, the most valuable actions are very simple: call you, send a WhatsApp or email message, find your address, or ask for a quote. A responsive website puts those actions where a thumb can reach them. A site that needs a mouse and a big screen quietly sends those customers away.
6. It will still work on the next screen
Phones now come in many sizes, from small ones to the large "phablets", and tablets and wide monitors are common too. A responsive layout adapts to all of them. A fixed layout needs fixing again every time screens change.
Responsive Website, Separate Mobile Site or Mobile App?
| Option | What it is | Good for | Watch out for |
|---|---|---|---|
| Responsive website | One website that adapts to every screen | Almost every business website | Needs to be designed for small screens from the start |
| Separate mobile site | A second, simpler website, often at an "m." address | Very large websites with special needs | Double the work, and content can fall out of step |
| Mobile app | A program that people download from the app store | Games, tools people use every day, services with logins | Costly to build, and nobody finds it unless they already know to look |
For most small and medium businesses, a responsive website is the right first step. An app can come later, if your customers really need one.
How to Check Whether Your Website Is Responsive
You can find out in about ten minutes.
- Open it on a real phone. Use mobile data, not only Wi-Fi. Can you read the text without zooming? Can you tap the menu and the buttons easily? Do you have to scroll sideways?
- Resize the window on a computer. Open your site in Chrome or Firefox and drag the edge of the browser window to make it narrower. A responsive layout will rearrange itself as it shrinks. A fixed one will just get a horizontal scroll bar.
- Use Google's Mobile-Friendly Test. Type your address into the tool and Google will tell you whether it considers the page mobile-friendly, and why not if it fails.
- Check Google Search Console. This is the free tool that used to be called Webmaster Tools. Its Mobile Usability report lists the pages on your site that have problems on phones.
The signs of a site that is not ready are easy to spot: text you have to zoom into, links crowded so close together that you tap the wrong one, content wider than the screen, and menus that only open when you hover with a mouse.
What a Good Responsive Website Needs
- The viewport tag is in place, so phones show the page at the right size
- The layout adapts to phone, tablet and desktop widths
- Body text is large enough to read without zooming (around 16 pixels is a good start)
- Buttons and links are big enough for a thumb (about 44 pixels), with space between them
- Images scale to the screen and are compressed so they load quickly on 3G
- Your phone number is a tap-to-call link, and your WhatsApp or email link is easy to find
- Forms are short and easy to complete on a phone
- Nothing depends on Flash, because most phones do not run it
- Pop-ups do not cover the whole phone screen
- Google can read your CSS and JavaScript files, so it can see that your pages work on mobile
Mistakes to Avoid
- Hiding important content on mobile. If something matters to your customers, it matters on a phone too.
- Heavy pages. A big slideshow of large photos can take a long time to load on a mobile connection. Keep images small and the page light.
- Menus that rely on hovering. There is no mouse on a phone.
- Putting key details inside images or PDFs. Prices, opening hours and addresses should be real text that anyone can read and tap.
- Testing only on your own phone. Check at least one small Android phone, one larger one and a tablet.
How to Get One
If your business already has a website, ask your designer or developer whether it is responsive. Some older sites can be adapted. Many need a fresh design, because a layout built around a fixed width cannot simply be stretched.
If you are starting from scratch, ask for a responsive design from the beginning. Many modern WordPress themes, including the default Twenty Sixteen theme released in December 2015, are responsive already, and frameworks such as Bootstrap are built for small screens. Whichever way you build it, test the result on real phones before you approve it.
Frequently Asked Questions
Do I need a responsive website if most of my customers are local?
Yes. Being local does not mean being on a desktop computer. Local customers are exactly the people looking for you on their phones, often while they are out and ready to visit or call.
Is a responsive website the same as a mobile app?
No. A responsive website opens in the phone's browser and anyone can reach it with a link or a search. An app must be downloaded first. Most businesses should build a responsive website before thinking about an app.
Will a responsive design make my website look worse on a desktop?
Not if it is designed properly. On a large screen the layout simply uses the extra space. A good responsive website looks right on every screen, not just on phones.
How long does it take to make a website responsive?
It depends on the size of the website and how it was built. A simple site might be redesigned in a few weeks, while a large one can take longer. Ask your developer for a clear plan and for a test on real phones before launch.
How do I know whether Google thinks my website is mobile-friendly?
Use Google's Mobile-Friendly Test for a single page, and the Mobile Usability report in Google Search Console for the whole site. Both will point out the exact problems they find.
Want Your Website Checked?
If you are not sure whether your website works well on phones, or you are planning a new one, I can help. I design and develop responsive websites for businesses, and I am happy to look at your current site and tell you honestly what needs to change. Send me a short message with your website address and what you would like to achieve.
