What Is Responsive Web Design?
Have you heard about responsive web design but not sure what it is? Or perhaps you’re just interested in how you can make your website look great across all devices. In this article we look at what and how responsive design works and why it’s important to have it.
Why Responsive Design Is Important
How many devices do you use that can browse the internet? A work computer, laptop, tablet and your phone? Some might have many more, but what’s important is that what you’re trying to look at gives you a great experience whichever device you are on. This is where responsive design comes in.
It’s estimated that almost 60% of all internet browsing is now completed on mobile devices, that’s a huge portion of your potential traffic, so it’s important that your website looks good for those devices too. If anything these should be given priority and the movement towards mobile first design has been gaining traction as more and more people are using their phones to browse.
There’s SEO benefit too. Over the last year or so Google has been moving to mobile first indexing, this means that they look at your website as it would look on a mobile to determine your rankings and it can be much harder to rank if your website doesn’t work well on mobiles.
Separate Mobile Site Vs Responsive
Separate mobile sites are being used less and less, however they occasionally get a mention so it’s worth a mention to say why you should be looking at a responsive site instead of a separate mobile site.
If you go back a few years you might have found that you’d get redirected to a “m.” website if you tried to visit a website from a browser. They were popular at the time due to technical limitations of responsive design, but they no longer exist and the drawbacks of separate mobile sites mean that they are no longer recommended. Common drawbacks include:
- Only two versions of the website and may not look good in between mobile and desktop. A responsive site would adapt to any size.
- Two versions of the website means that you may encounter duplicate content issues if not setup correctly.
- It’s argued that sub-domains, which a “m.” website is, would be seen as separate so you’d have to make sure SEO work is completed across both sites.
How Responsive Design Works
Responsive design all comes down to CSS. CSS stands for Cascading Style Sheet and essentially tells web browsers how the content of a web page should be displayed. With CSS3 media queries were added which has allowed for responsive websites to be created. These allow you to specify certain attributes such as the height and width of a screen and make adjustments to only those sizes.
Key Widths To Consider
It’s hard to know all the different screen sizes out there and no doubt there will be someone with a screen size that you haven’t thought about. There are however some key sizes which are bound to come up from time to time. These are media queries to target these different devices and any styling changes should be done within these.
iPhone X/6/7/8
@media (max-width:375) {
}
iPhone 5
@media (max-width:320) {
}
iPad
@media (max-width:768) {
}
iPad Pro
@media (max-width:1024) {
}
How To Emulate Different Widths
If using Google Chrome different devices can be emulated by using developer tools. Developer tools can be opened by pressing F12 whilst on a browser. Once in developer tools you can “toggle device toolbar” which allows you to change the size of the viewport to different devices or to whatever you want. In responsive mode the width can even be dragged across to see how the website adjusts at different sizes. This can be a great way to quickly spot any issues.
Using Frameworks For Easier Responsive Websites
At Pinnacle we use the Bootstrap framework in order to quickly build responsive websites. Bootstrap uses a column framework which allows you to say how many columns you want to display depending on the screen size. When used with additional media queries to get rid of any other issues it’s a fantastic way to quickly and effectively create responsive websites.