paint-brush
Adding Responsive Website Design To Your Web Projectsby@ngodi-albert
438 reads
438 reads

Adding Responsive Website Design To Your Web Projects

by Ngodi Albert
Ngodi Albert HackerNoon profile picture

Ngodi Albert

@ngodi-albert

December 1st, 2019
Read on Terminal Reader
Read this story in a terminal
Print this story
Read this story w/o Javascript
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

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. This article has clarified the importance of making a website look great by making it responsive. It is also common to use media queries in responsive web pages to define different styles for different browser sizes. The HTML <picture> element allows you to define. different images for. different browser window sizes.

Company Mentioned

Mention Thumbnail
Meta
featured image - Adding Responsive Website Design To Your Web Projects
Ngodi Albert HackerNoon profile picture
Ngodi Albert

Ngodi Albert

@ngodi-albert

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

image


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:

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.

image


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

image


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

image


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


Comment on this Story
L O A D I N G
. . . comments & more!

About Author

Ngodi Albert HackerNoon profile picture
Ngodi Albert@ngodi-albert

TOPICS

THIS ARTICLE WAS FEATURED IN...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
Pipfeed

Mentioned in this story

companies