Responsive Web Design
How to make a Website Responsive?
You just need to consider one thing in order to make a Responsive Web Design (RWD). "Ability of content to fit inside any device that look good and it will be for user to interact with that".
How to make a Website Responsive? (Cont...)
- Responsive web design (RWD) is not a kind of program or framework.
- It's a combination of various concepts using which we try to make our web page look good on all devices.
- RWD can be achieved using HTML and CSS only.
How to make a Website Responsive? (Cont...)
1. First and foremost thing in order to make RWD is <meta> viewport element. It forces page to follow the screen-width of the device.
<meta name="viewport" content="width=device-width, initial-scale=1.0">How to make a Website Responsive? (Cont...)
2. Don't use large fixed width or height element. It can cause trouble.
Let's say an element having width 500px but user is viewing on a device having width smaller than 500px In such cases, use min-width or max-width.
How to make a Website Responsive? (Cont...)
3. Use HTML <picture> tag.
The HTML <picture> element allows you to define different images for different browser window sizes.
<picture>
<source media="(min-width: 650px)" srcset="/path">
<source media="(min-width: 465px)" srcset="/path">
<img src="/path">
</picture>How to make a Website Responsive? (Cont...)
4. Responsive text size.
Although you can make text responsive using media queries but you can also use "viewpoet" width as well.
h1 {
font-size: 10vw;
}How to make a Website Responsive? (Cont...)
5. Try to use Layouts.
Using Grid or Flex layout always beneficial in order to make a web page responsive. Both these layout are not hard to learn.
6. Use box-sizing: border-box.
Small thing can make big impact.
box-sizing: border-box; forces an element to adjust it's padding and border inside width and height of that element.
How to make a Website Responsive? (Cont...)
7. Media Queries are saviour.
Media query is a rule to include a block of CSS properties only if a certain condition is true. It is very useful in order to make a RWD.
@media screen and (min-width: 480px) {
.element {
width: 100px;
}
}How to make a Website Responsive? (Cont...)
8. Use "auto" in media.
Almost 99% a web page contains images or videos, and in order to make them responsive, use "auto".
If the width property is set to a percentage and the height is set to "auto", the image will be responsive.
In order to improve further, you can use max-width in image so that quality of image will be persist. After all it can also be considered as responsive
How to make a Website Responsive? (Cont...)
9. Use frameworks if possible.
Sometimes it might be a tedious task to handle responsiveness if you're wirting pure CSS.
Try to use frameworks because they can save a lot of time designing a responsive website.
How to make a Website Responsive?
By Code 100mph
How to make a Website Responsive?
- 172
