Yogesh Chauhan's Blog

How to make a web page look good on any device?

in HTML on June 16, 2019

Well, before that question let me ask you this. Have you ever heard of the phrase, "You should make a Responsive Website for your customers" or you might have heard a salesman saying that "You can fill out all the forms on computer or on your mobile. It works the same way". We all have heard about Responsive Website a lot since past few years and companies are becoming more and more aware of comsumer's mobile devices. So they want to provide the same type of experience to their mobile consumers as well. And that's why they make their websites responsive. But what is this responsive websites actually?

Responsive websites are the type of websites which changes the size; height and width; of the contents inside it so that no matter what device the user uses, he/she is going to have the same experience of using the website. The placing of the elements like textbox, menu etc might be a slight different but the overall experience is quite appealing to the user across all the formats.

REMEMBER: User should get the same type of experience of your website no matter from which device he/she uses to access your website. Period.

So what to do for responsive look and feel?

Add the following meta element in all the web pages of your website.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

What that line does is it sets the viewport of webpages. That means on different devices, that meta will tell the browser how to control the dimensions of webpage as well as scaling.

What about images?

Use the width property and set it to 100% to scale the image nicely and make it look nice to any browser.

<img src="image.jpg" style="width:100%;" />

 

Now, we need to do a lot more work in order to make the page responsive but this is the starting point.


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
Content Blocks in SCSS (Sass)SCSSLIMIT and OFFSET in PostgresPostgresIs Software Really Eating The World? I don’t think soMiscellaneousWhat happens when we add Numbers and Strings in JavaScript?JavaScriptHow to create a simple slider with CSS and jQuery?CSSIs monitoring an employee’s work on a computer a desirable or undesirable activity?Miscellaneous