Adding Responsive Website Design To Your Web Projects

Introduction

We all agree to the fact that a good looking product will attract buyers, hence will require lesser effort to market the product, unlike a bad looking product.

Likewise, a good looking website project will win the recruiter’s attention before he goes deep into what the project does or how good the code is written. Good design comes with a good application of CSS colors, fonts, animations, responsive web design application and much more. My focus in this article is in the role responsive web design plays in making your website attractive.

Definition

What is responsive web design(website responsiveness)?

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones).

Responsiveness allows you to maintain your desired layout and behavior across different screen sizes and avoid loss of control over your website look and feel on different screen sizes.

Applying responsive web design:

• Web frameworks like bootstrap, w3.css and pre-built CSS templates visit https://www.w3schools.com/bootstrap/bootstrap_ver.asp, https://www.w3schools.com/w3css/default.asp for detailed tutorials
• CUSTOM CSS

Setting The Viewport

When making responsive web pages, add the following <meta> element in all your web pages:

Example

<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.

Responsive Images

Responsive images are images that scale nicely to fit any browser size.

Using the width Property

If the CSS width property is set to 100%, the image will be responsive and scale up and down:

Example

<img src=”img_girl.jpg” style=”width:100%;”>

Notice that in the example above, the image can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead.

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:

Show Different Images Depending on Browser Width

The HTML <picture> element allows you to define different images for different browser window sizes.

Example

<picture>
 <source srcset=”img_smallflower.jpg” media=”(max-width: 600px)”>
 <source srcset=”img_flowers.jpg” media=”(max-width: 1500px)”>
 <source srcset=”flowers.jpg”>
 <img src=”img_smallflower.jpg” alt=”Flowers”>
</picture>

Responsive Text Size

The text size can be set with a “vw” unit, which means the “viewport width”.

That way the text size will follow the size of the browser window:

Resize the browser window to see how the text size scales.

Example

<h1 style=”font-size:10vw”>Hello World</h1>

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.

Step 1: You define the style/behavior of the browser for specific browser/window size

Step 2: You set the behavior of the browser when different from the specified style of your media query

Conclusion

This article has clarified the importance of making a website look great by making it responsive.

Looking good on a laptop screen and all scrambled on a desktop or mobile phone is total failure.

I then rounded-up with a brief tutorial with reference to some core techniques in applying responsive web design.

References:

https://www.w3schools.com/html/html_responsive.asp