Responsive web design is one of those terms that has been used liberally for years, but what does it really mean for us non technical people. Whats it responding to? How do I see if my website is responsive and what do I do about it if its not? Read on as we take a high level view of responsive web design.
What is Responsive Web Design
Basically responsive websites change their layout depending on the size of the screen they are being displayed on. The underlying code uses something called a media query to check the device screen dimensions and will display the most relevant layout. The term responsive web design has been used since 2011 and for a long while it was something that was nice to have. But no more, now it is critical that your website is responsive and Google is penalising websites that are not.
Every year more people are using mobile devices for the majority of their website viewing. If your website doesn’t work on their device when a potential customer visits your website they will leave immediately. People have no patience for websites that display incorrectly or are slow. Surprisingly there are still many websites out there that aren’t responsive, and even from some big companies.
How to Check if a Site is Responsive
Here are three ways to check if your website is responsive:
- The easiest way to check if your website is responsive is to look at it on a mobile device. Its also a good idea to look at it on devices with different screen sizes and operating systems (iOS/Android).
- If looking on a computer you can change the size of the web browser window. As you narrow the window the layout should change to accomodate the changes.
- You can open the developer tools sidebar and drag the width to change the size of the website. You can open the developer tools with the following keyboard shortcuts – Windows/Linux: Ctrl + Shift + l. Mac: Cmd + Opt + l.
Google Mobile First
Google has begun to roll out mobile first indexing. This means that sites that aren’t mobile friendly will get penalised in the search rankings. This also means that now is the time to make sure your website is responsive. A good responsive website is built from the mobile view up, that way it only loads a minimal amount of code/resources and progressively loads more as the screen size increases. This also correlates with network speed as some of us are stuck using 3G connections at times on our mobile devices.
What to do if Your Website isn’t Responsive
You followed the instructions and checked your website but the news isn’t good. Your website isn’t responsive. What to do? There are a few options.
- If you are happy with your desktop layout you can find a developer to build out your existing codebase to be responsive. Warning – this can be a big job depending on the size of your website and the underlying technology.
- The second option is to get a new website built from scratch. The designer/developer can use your existing branding, and styling if you like, and build a slick mobile first responsive website. This is big task but can sometimes cost less than trying to work old code into something it wasn’t ever meant to be.
- If you are on a budget and need something built fast you can look at using a CMS like WordPress and buying a good theme. Once setup you can import your data from you existing website. This is a good option but comes with its own set of potential issues, see WordPress custom development.
Now is the time to make sure your website is responsive and displays correctly on all devices. Google is a major source of traffic for almost all websites and you don’t want to be penalised for having an outdated website. Its easy to check if you website is responsive and I’ve outlined some options if it isn’t. Time to get cracking and bring your website up to date.