Free Web Development Online Tutorials, Learn to Code
Learn responsive web page designing, Create responsive web page for your website

Responsive web page designing tutorial

Do you want to design more effective web page ? then this responsive web designing tutorial for you.

Responsive web designing tutorial

How to make website responsive

In this tutorial you will learn how to design a responsive website step by step.

What is responsive web page designing?

These days it is very difficult to find someone who doesn’t have a mobile device, or multiple, connected to the Internet and the trends of mobile Internet usage will surpass that of laptop or desktop Internet usage within the year, because people keep browsing while traveling, having lunch and even before going to sleep.

So keeping that in mind an obvious question comes in mind how to create a website that will be compatible with different type of mobiles and tablets apart from desktop / laptop .

Responsive website is something that easily can be browsed in different device , different re resolution and different browser, it opens up smoothly, it can help you to gain good user experiences thus improve business.

So now you have understood why making responsive website is important !

Responsive web page basics

Now here I share step by step implementation guide for responsive website designing, learn how to make website responsive

Viewport meta tag
Viewport meta tag with name “Viewport” , look at code below, so whenever you create a new webpage make sure you have added the following tag in every page

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link href="Content/etg_style.css" rel="stylesheet" />
</head>
<body>
</body>
</html>

Responsive layout

Responsive Layout Container
When building a flexible responsive website / webpage, or making existing site responsive, the first thing to look at is the layout.
Create a container that will automatically shrink and expand based on device-screen width, this would be the main container, so all content on page will come inside this container

<body>
<div class="wrapper-container">
</div>
</body>

As you can see in above code for container div tag we have set a class class="wrapper-container"
Now we create the wrapper-container class in our Css file

.wrapper-container
{
    width:96%;
    margin:0 auto;
}

We want the container to take 96% of the screen and should stay in middle, so in both side we have some space

Content for Mouse versus Touch
When designing web content for mobile devices, you need to think what would be the challenges when people scroll your content on mobile screen with finger instead of desktop with mouse.

On desktop computers, the user normally has a mouse to navigate content and select items. On a mobile device / smart phone / tablet, the user mostly is using fingers while browsing the screen. What may seem easy to select with a mouse on desktop screen, may be hard to select with a finger on a tiny spot on a mobile screen.

So as a web designer you must consider the “touch screen” instead of using a mouse, make content appear accordingly.

Responsive Image
When adding any image in your web page make sure you add width tag with a percent value, so ideally you should have a container for image or a group of images

<img src="foldername/imgname.png" alt="responsive webpage image" title="responsive website image" style="width:100%;">
Make webpage responsive for media
       
/* Tablet Landscape */
@media screen and (max-width: 1060px) {
    #primary { width:67%; }
    #secondary { width:30%; margin-left:3%;}  
}
/* Tabled Portrait */
@media screen and (max-width: 768px) {
    #primary { width:100%; }
    #secondary { width:100%; margin:0; border:none; }
}

Make asynchronous call
Make the page async is possible, if there are multiple user control or partial views which is fetching data from database, try to make each one of them asynchronous, that will create good rendering experience for end user.
You also can call different view for different device like mobile, desktop

Don't use Table tag, only Div, Span
Some designer friend said that “table tag is the enemy of responsive web design” , many stop using that tag any more, you should too, table tag is not good for rendering also.
So use div or span or p tag , which has elasticity and good for rendering

Avoid in-line CSS or JavaScript
In-line CSS or JavaScript has nothing to do with responsive design directly , but keeping css class details and javascript code in external file will help to reduce the page size, thus improve the reusability of class and methods, also helps rendering faster, creating better user experience

Responsive layout bootstrap

You can use any CSS class library like Bootstrap, Bootstrap CSS library provide all ready to use CSS class that you need for any responsive webpage designing, it provide a CSS class that divide any web page into 12 columns concept, and there are class for any set of columns like “col-md-4” means four column, s o you can adjust your page look and feel by using page columns and rows as per your design, it follows all responsive layout best practices, you can check how to use bootstrap css

Comment
Name
Email
Website
Subscribe
You may also read
How to Check Website Traffic and Optimize Website
How to Check Website Traffic
Check if webpage is mobile friendly
Mobile friendly website check
AI and Machine Learning
AI and Machine Learning