With smartphones in everyone’s hands, it is quite impossible now to avoid making a website mobile-friendly. Over 50% of people use mobile devices to search for information and data. Having a responsive website design is a best practice that everyone who designs a website should consider in today’s world.
Using responsive design, a site or application adapts to the device or environment it is being viewed on. When it comes to building websites, it’s a combination of several CSS and HTML features and strategies.
In this blog, let us take a look at how you can make a mobile-friendly website responsive design in Cascading Style Sheets or CSS.
How to make a mobile-friendly website in CSS?
When it comes to web design, CSS stands for “Cascading Style Sheets.” Written in a markup language or a coding language such as HTML, it is a language called a style sheet that is used to describe the display of a document or a page. An HTML element’s appearance on a screen, paper, or other media can be determined using CSS.
Let us understand how to make a mobile-friendly website in CSS by dividing the website design into layout, media query, image responsiveness, and typography.
Before you begin, create a new project and also download a few images so that you can start from scratch. Let us get started with the layout.
Layout
If you have a domain name, you will want to assign it to your store. This can be done by going to the “Domains” tab and clicking on the “Add Domain” button.
You will then enter your domain name and click on the green checkmark. Your shop’s URL will now be: example.com
If you don’t have a domain name, don’t worry! You can use a free subdomain from WooCommerce.com.
To do this, go to the “Domains” tab and click on the “Add Domain” button. Then, type in your desired subdomain (for example, myshop.woocommerce.com) and click on the green checkmark.
Your shop’s URL will now be: myshop.woocommerce.com
<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scal able=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
The fr unit is what enables the distribution of available space across grid tracks in the CSS Grid Layout specification. To generate a grid container that has three tracks that are each 1 fr in size, follow the code in the image below.
Media Query
What are media queries? In order to create a website that is responsive, media queries are an essential component.
Media queries give you the ability to build various layouts based on the size of the viewport that you are working with. They can also be used to determine other aspects of the environment in which your website is operating.
Once the layout is set, you can proceed to the step of adding media queries. The media queries will highly depend on the layout that you make. So the code will also be unique to your layout.
Adjust the layout by setting points according to the size proportions and orientation. It is also a good idea to make your page suitable for different screen sizes by adding multiple queries within a stylesheet. When a media query is inserted, and the layout is altered, it is called a breakpoint.
Here, as we are discussing making the website mobile-responsive, you can use the mobile-first approach. Try out single-column layouts that can be a good fit for mobile screens.
Images
You will be using a lot of images for your website. You must make sure that the media you use, be it images, videos, etc., are responsive as well.
One way to make sure that your image is not bigger than the parent container is by using the code given below:
In addition to providing several sizes, you may also supply “hints” or metadata that defines the screen size and resolution the image that is most appropriate for. The browser will then select the image that is most suitable for each device, guaranteeing that the user will download an image of a size that is suitable for the device that they are using.
Typography
Typography is an important part of website design. The font sizes were defined earlier using pixels, but a responsive website needs a responsive font. For this, ‘rems’ are used.
Rems are relative to the HTML element and are also user-friendly. You can start off with making responsive fonts by resetting the HTML font size.
html { font-size:100%; }
Wrapping Up
The rise in popularity of online channels has necessitated a shift for businesses to utilize digital platforms in recent years. In today’s world, websites serve as a one-stop-shop for consumers to learn about and purchase their products, voice their opinions, and get support if needed.
In such a scenario, it is important that you make a responsive web design that can help your audience view your website on all kinds of screens. This blog was all about making a mobile-friendly website responsive design in CSS. I hope this helped you in getting started with making responsive websites.
Author: Danish Wadhwa
Danish Wadhwa is an Entrepreneur and Growth Hacker with more than ten years of expertise in Data Driven Marketing. He is a high energy individual fueled by his passion for helping businesses grow Digitally. Danish is a Fountainhead and CEO HubSpot Marketing Agency webdew and He took everything he learned in his career to help Businesses learn from his Growth Marketing Blog at webdew.com/Blog.
0 Comments