Responsive Web Design in 5 Steps for Dummies
Updated: Aug 2, 2020
Working as a web developer, however, is a wholly different matter. Our work is marked by its impermanence, often refined or replaced within a year or two. Unreliable window widths, screen resolutions, user preferences, and our users’ installed fonts are but a few of the intangibles we negotiate when we publish our work, and over the years, we’ve become incredibly adept at doing so.
But the landscape is shifting, perhaps more quickly than we might like. Mobile browsing is expected to overtake desktop-based access within three to five years. We’re designing for mice and keyboards, for T9 keypads, for handheld game controllers, for touch interfaces. In short, we’re faced with a greater number of devices, input modes, and browsers than ever before.
what’s next? An iPad website? An N90 website? Can we really continue to commit to supporting each new user agent with its own customized experience? At some point, this starts to feel like a zero-sum game. But how can we—and our designs—adapt?
Becoming responsive is the solution that we must use as a developers when designing , in this case or websites, or any project that use the markup language will fit automatically in any device screen supported with a browser to read the markup language .
Responsive web design is "the practice of building a website suitable to work on every device and every screen size, no matter how large or small, mobile or desktop." Responsive web design is a combination of three different techniques: flexible layout, flexible images/media, and media queries.
The important point is that, even though the layout may change depending upon the width of the viewport, the HTML remains the same. The layout changes are done using CSS with media queries. In other words, the same HTML is used for mobile, tablet, and monitor sized displays.
This is the way forward. Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design. But how?
How to become a responsive designer?
1- Setting the Viewport
When making responsive web pages, add the following <meta> element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This will set the viewport of your page, which will give the browser instructions on how to control the page's dimensions and scaling.
2- Make all your images Responsive
Responsive images are images that scale nicely to fit any browser size. If the CSS width property is set to 100%, the image will be responsive and scale up and down. Using the max-width Property
If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size
3- Show Different Images Depending on Browser Width
The HTML <picture> element allows you to define different images for different browser window sizes.
4-Responsive Text Size
The text size can be set with a "vw" unit, which means the "viewport width". Example
<h1 style="font-size:10vw">Hello World</h1>
5- Media Queries
In addition to resize text and images, it is also common to use media queries in responsive web pages.
With media queries you can define completely different styles for different browser sizes.