3 Steps To Make Your Website
Responsive
Nowadays, it essential to make your website responsive, because if the website is responsive it’s looked good and easily engage the Visitors on your Website. Responsive website easily adapt to the screen of the user.
We have easy and super cool techniques to make your website responsive so let’s start.
The Layout
The first think to look at first is layout to make your website responsive.
Firstly choose non-responsive layout then first thing to do is copy and paste these lines with the tag in your html page.
It will set the View ratio on all screens at 1X1 aspect ratio. Then add a media queries. Media queries allow your website to look good in all kind of displays, from smart phones to big screens, this is called responsive web design.
Copy and paste this code on your .CSS file and let’s see how it gives responsive layout according to your website.
In the above code we used some tools which are described as follows
# Primary – the main content area.
#secondary – the Sidebar.
You can see we defined two sizes
In First maximum width of 1060px and optimized for tablet landscape display, Where the #primary occupies 67% of its parent container. #secondary contains a 30% with a 3% left margin.
Second is for tablet portrait and small size like smart phones. #primary has 100% width and secondary also have a 100% width which will be displayed below #primary. These tools are created by Matt Karsly. You can check the result on your mobile device.
Medias
Media as another important part of our website which includes video and images.
copy and paste this code in your .CSS file. This code ensures that the images will never be bigger than their parent container. It works for most of responsive websites and it is super easy.
Here the second way to give you more control on your images and display of images according to the client’s screen size.
In the above code data_ is used to store image URLs.
Replace the default image by one of the specified replacement images if the min-device –width condition is matched. These techniques are developed by Nicolas Gallagher.
Videos- Here we focused on elastic video technique by Nick La. this technique makes your video responsive.
Html Code
The CSS Code
Typography
Last but not the least, it is definitely important step to make our website responsive but it’s often neglected by the developers.
Font size should be related to its parent container width in your site. So, it easily adapts to the screen of the client and makes it easily readable.
You can define responsive front size as follows
In the above code, CSS 3 includes new unit names rems. It works almost like an em unit but relative to the html element, which make it easier to use them.
ems is also relative to the html but don’t forget to reset the html font-size.
