YogeshChauhan . com

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.

amazon

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 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

The Difference Between the echo and print Commands in PHPPHPHow to add Read More Read Less Button using JavaScript?JavaScriptCan We Use For Loop to Loop Through Associative Arrays in PHP?PHPHow to add transparent text on top of an image using CSS?CSSKilling A Project Part 4: What Would Be Your Top 3 Priorities For Planning The Cancellation?MiscHow to display modal from bottom to top using CSS and JavaScript?CSS