Understanding the Basics of Responsive Web Design (RWD)
Many global businesses are building websites to provide a platform for marketing and promoting their products. Only building an attractive website may not be enough since customers require a site that promotes usability and responsiveness. Responsive web design ensures that a website responds well to various devices used by customers. <!--more--> A responsive website is important because it enhances great customer experience, drives mobile traffic, and promotes high conversion rates.
This article takes you through the basics of responsive web design, including its building blocks and why it is important for your business. It also provides a brief guide on how to get started with this technique. Real-life examples of responsive websites have been provided to improve our understanding of responsive web design.
What is responsive web design (RWD)?
In the recent past, we have experienced the growth of devices that allow us to gain access to various websites. These include laptops, desktop computers, tablets, smart TVs, and smartphone devices. When building a website, developers should consider designs that correspond to the screen dimensions and usability of these devices. This is where responsive web design (RWD) comes in.
A responsive web design is an approach or practice in web development that enables a web page to be responsive to the elements of various devices (eg. layout, screen resolution, and screen width). Through RWD, a website can work on any device.
Let’s assume that you are using your mobile phone to access a certain website. If the website does not show up precisely or there is limited interaction like in the case of a desktop, then it is likely that the website was not built with RWD.
Responsive web design utilizes various elements that adjust the layout of a website to suit the orientation and screen size of a specific device (eg. fluid layouts, CSS codes, HTML5, and media queries). This enables users to interact with the website seamlessly.
The building blocks of RWD
The following are the main foundations of responsive web design.
HTML and CSS
A combination of Hypertext Markup Language (HTML) and Cascading Styles Sheet (CSS) helps in controlling and adjusting the layout of a webpage. HTML controls the content, structure, and elements of a webpage. CSS technology edits the layout and design of elements that were created using HTML.
Fluid grids
This is an important principle of responsive design that uses relative measurement units (eg. view width (vw) and view height (vh)), rather than fixed units (like pixels). 1 vw is equivalent to 1% of the viewport's width. Similarly, 1 vh is equivalent to 1% of the viewport's height. A viewport is the area within the display screen or the browser window.
Fluid grids enable the webpage to be resized to correspond with any screen size. With this component, a web page can adapt to the screen size or width of any device.
Media queries
Media queries enhance specificity in responsive web design. They enable the website to adjust based on specific screen sizes. The website first uses media queries to collect data that enables it to establish the screen size. The right CSS styles are then loaded to correspond to this screen size.
Responsive media
This principle is also called flexible media. Websites use media files such as videos, GIFs, and images. Responsive media ensures that these media files correspond to the screen size of various devices. This is done by setting the max-width property of these files to 100% to ensure that they scale nicely on the screen.
Why you need a responsive web design
The following are the main reasons why you should consider employing responsive web design when building a website:
- Great user experience: Responsive web design enhances the usability of your website, which provides a great user experience. This is because it enables them to navigate through a web page seamlessly without necessarily needing to zoom.
- Drive and increase mobile traffic: Building a responsive web increases the chances of attracting and retaining mobile customers. These customers have no reason to seek other alternatives if they can easily navigate through the website using small screens.
- Fast loading speed: The responsive media and fluid grids in responsive websites provide a faster loading speed compared to unresponsive websites.
- Conversion rates: Responsive websites can lead to an increase in conversion rates, especially if there is increased mobile traffic and high loading speed. When usability is enhanced, customers stay on the website and get attracted to various subscriptions. If the website is an e-commerce platform, customers may be attracted to buy products.
- Improved SEO rank: Website responsiveness is an important determinant of search engine optimization (SEO) ranks. Having a responsive website helps in improving the SEO rank of your business.
How to get started with RWD
If you already have an active website, you should test it to establish whether it is mobile-friendly or responsive to various devices. Visit this page to perform this test. When you get to the page, enter the URL for your website and click on ‘test URL’. The tool will then determine whether your site is responsive or not. If the website is not responsive, follow this brief guide to have an overview of how to create a responsive one.
The following is a brief overview of the steps that should be taken to build a responsive WordPress website from scratch.
Step 1: Choose a domain name
You should choose a good domain name that can enable customers to locate your responsive website. The name should represent your brand or business.
Step 2: Choose a hosting plan
There is a wide variety of hosting services for WordPress websites. Choose a hosting plan that corresponds to your financial capabilities and business needs. Click here to get a list of companies that can host your WordPress website.
Step 3: Images and content
Prepare all the images and content that will be used on your website. Doing this in advance enables you to replace the demo content in your purchased theme with your ready content.
Step 4: Select a responsive WordPress theme
You can purchase a responsive WordPress theme here. The theme should be selected based on the features, customization options, and design. An appealing design should be chosen to attract customers to the responsive website. We will use the Oshine theme to explain the setup process. The following is an image of how the Oshine WordPress theme looks like.
Step 5: Install WordPress
When you select a hosting plan, the hosting company will send a link to the email you used for registration. This link will take you to the hosting dashboard. When you fill in your credentials, you will find a section called ‘WordPress install’. Click on the WordPress icon and go through the instructions.
Another screen will pop up requiring you to fill in details such as your site’s description and desired credentials. After filling in all this information, click on ‘install’. Installing WordPress means that you can now access the WordPress dashboard using the registered credentials.
Step 6: Installing a theme
In this step, you need to install the WordPress theme that you chose in step 4. In the WordPress dashboard, follow this selection sequence: appearance-> themes-> add new.
Click on 'upload theme'. Click on 'install' to begin the installation. When this is done, click on 'activate'.
Step 7: Install plugins
When your chosen theme has been activated, you will find a link written ‘begin installing plugins’. Click on this link to begin the installation process. Click on the tab 'install plugins'.
After selecting all the plugins, click on ‘install’. Any inactive plugins can be activated by following this sequence: plugins-> all plugins-> inactive. Click on ‘activate’.
Step 8: Import demo content
You can import the demo content to get an overview of how your site will look like. Go to 'import' and choose a demo design. After selecting the contents needed, click on ‘install’.
Step 9: Customize your site
This can be done by replacing the demo content with the content you prepared in step 3. Simply go to the part that you want to change and enter your intended text. Change the settings accordingly to suit your needs.
Examples of responsive websites
Here are three examples of popular responsive websites.
1. BMW
BMW is a multinational automobile company that produces motorcycles and luxury vehicles. The website for this company consists of many background videos as well as images. The following is a screenshot of this website on a laptop.
All this content responds well to various screen sizes. The website appears as shown below on a mobile device.
You can access all the icons even with a mobile device. When using the laptop browser, the main icons appear at the top of the website. When using the mobile device, you can access these icons using a hamburger menu at the top left corner of the website.
2. YouTube
Youtube is an online platform that enables users to view, upload, rate, or share video files. If we open Youtube using a laptop, the website will appear as follows.
In this kind of view, each row consists of four columns. However, when we open this website using a mobile device, the number of columns will reduce, but the user can scroll down the page to access videos.
When using the laptop browser, important icons such as trending, subscriptions, and library appear at the left side of the website. These icons appear at the bottom of the website when you use a mobile browser.
3. Amazon
Amazon is an e-commerce giant that engages in the online sale of various products. Just like YouTube, each row in the Amazon website consists of many columns when you access it using a laptop browser.
When you open the website using a mobile device, it will appear as follows.
The 'sign in' icon is still available when you open the browser using your mobile device. This icon appears on the right side of the website when you use a laptop browser. In the mobile browser, the number of columns has reduced to suit the relatively smaller screen size. You can view various products by scrolling down.
Conclusion
This article has provided the basics of responsive web design. Responsive web design uses fluid grids, media queries, and responsive images to enable websites to be responsive to various devices (regardless of their size). If you are not sure whether your website is responsive, you can test it using a suitable testing tool.
Building a website from scratch requires choosing a domain name and selecting a suitable hosting company. It also requires installing a theme, related plugins, and preferred demo content. With all these tools, you can make adjustments to customize the new site to suit your needs.
Popular examples of responsive sites include YouTube, BMW, and Amazon. If you have an online business, building a responsive website can add value to your business by enhancing great customer experience, fast loading time, increased mobile traffic, high conversion rates, and optimized SEO rank.
Resources
Peer Review Contributions by: Saiharsha Balasubramaniam
