Responsive Web Design (RWD)
Making Websites Work On All Devices & Browsers
What is Responsive Web Design?
Mobile Responsive Web Design (RWD) is a modern approach to web design that ensures all website pages display correctly on various screen sizes of various devices.
For example, on your desktop screen, your content might be divided into multiple columns because the screen is wide enough to accommodate that design. If you divide your content into multiple columns on a mobile device, it will be hard for users to read and interact with. The user experience will be awful and detrimental to your business. Since more than 50% of web traffic is from mobile devices, it is imperative that your website be mobile responsive.
Responsive web design will not force fit the multiple columns seen on a desktop into a mobile device. It will adapt. For example, the text and image below are divided into 2 columns on a desktop. On a mobile phone, with responsive design, the 2 columns are stacked into one column.
For example, on your desktop screen, your content might be divided into multiple columns because the screen is wide enough to accommodate that design. If you divide your content into multiple columns on a mobile device, it will be hard for users to read and interact with. The user experience will be awful and detrimental to your business. Since more than 50% of web traffic is from mobile devices, it is imperative that your website be mobile responsive.
Responsive web design will not force fit the multiple columns seen on a desktop into a mobile device. It will adapt. For example, the text and image below are divided into 2 columns on a desktop. On a mobile phone, with responsive design, the 2 columns are stacked into one column.
How Does Responsive Web Design Work?
How does responsive web design adapt to the various screen sizes? It does so by means of CSS code which controls the layout of the web page. It will render the same web page content differently based on screen size. We make use of Flexbox which is a CSS module designed to lay out the various elements(text, icon, button, image,etc) more efficiently. This website applies the rendering of the content at the following breakpoints:
Above 1280 px
Below 1280 px
Below 992 px
Below 768 px
Below 480 px
"Simplicity is the ultimate sophistication"
- Leonardo Da Vinci
- Leonardo Da Vinci
Responsive Design
Responsive Images
Handling images responsively is tricky. If not handled well, the images that appear well and good on desktop would appear skewed or truncated on tablet or mobile phone. As we are WordPress designers, we create websites using WordPress. In WordPress, there is a srcset attribute that enables web designers to display images responsively with the correctly matched sized image. The result is that the image you see on a desktop would still appear as a complete image on a tablet or mobile phone. Srcset attribute enables WordPress to pick the appropriately sized version of the image for the various screen sizes. The default srcset supports thumbnail, medium and full size. We have a code snippet that adds support for 480px(pixel), 640px, 720px, 960px, and 1168px. The important thing to note is that you see a complete image without any missing part or skewing.
Take a look at the image of the jumping woman above. When viewed on a desktop, this image is in the 2nd column on the right. The original size of the image is 700 x 900 px. This size is larger than the screen size of most tablets or mobile phones. If we did not practise Responsive Web Design and make use of the WordPress srcset attribute, WordPress would use this 700 x 900 image for all screen sizes of all devices including mobile phones - and try to squeeze the text and image together in 1 column instead of stacking the text and image in 1 column on a mobile device. The end result is that system performance will take a hit and the image may be skewed or truncated on smaller screen sizes. With Responsive Web Design, the text and the correctly sized version of this image are each stacked in a single column on a mobile phone. The end result is better performance, and image integrity - you see the complete image without any truncation or skewing.
Take a look at the image of the jumping woman above. When viewed on a desktop, this image is in the 2nd column on the right. The original size of the image is 700 x 900 px. This size is larger than the screen size of most tablets or mobile phones. If we did not practise Responsive Web Design and make use of the WordPress srcset attribute, WordPress would use this 700 x 900 image for all screen sizes of all devices including mobile phones - and try to squeeze the text and image together in 1 column instead of stacking the text and image in 1 column on a mobile device. The end result is that system performance will take a hit and the image may be skewed or truncated on smaller screen sizes. With Responsive Web Design, the text and the correctly sized version of this image are each stacked in a single column on a mobile phone. The end result is better performance, and image integrity - you see the complete image without any truncation or skewing.
Quick & Dirty Responsive Web Design
It requires effort and skill to create a fully responsive website which will adapt to the various screen sizes of the various devices - desktop, tablet and mobile phones. Therefore some designers take the easy way out by creating 2 versions - one for the desktop and another one for mobile devices. So you would have a mydomain.com for the desktop and another other one m.mydomain.com for mobile devices. In the early days of accessing internet on mobile devices, m.facebook.com which has since been neglected is an example of this method.
This "m" method of creating 2 versions - one for the desktop and one for mobile devices is inefficient and a waste of resources. Why maintain 2 websites when you could do it with 1? Not only is the "m" method inefficient, but it is also damaging to your SEO score. Google will see these 2 websites as independent websites and will pit them against each other for ranking. As these 2 sites will have the same content, there is a high risk that Google will consider this "duplicate" content as spam.
Avoid this "m" method to tackling mobile responsiveness.
This "m" method of creating 2 versions - one for the desktop and one for mobile devices is inefficient and a waste of resources. Why maintain 2 websites when you could do it with 1? Not only is the "m" method inefficient, but it is also damaging to your SEO score. Google will see these 2 websites as independent websites and will pit them against each other for ranking. As these 2 sites will have the same content, there is a high risk that Google will consider this "duplicate" content as spam.
Avoid this "m" method to tackling mobile responsiveness.
RWD Performance
Responsive web design(RWD) takes a toll on loading speed. The bounce rate for a 2 seconds page load is 9%. It increases to 38% when the page takes 5 seconds to load. Small business owners cannot afford to lose so many potential customers. There are many ways to speed up the web page load time like optimising images, caching, using system fonts, etc. Our web design services customise your website for mobile responsiveness and warp speed. Yes, you can have your cake and eat it too.