Online Training for Asp.net MVC Web Designing Development, MS SQL, Digital Marketing

Responsive Website Design Tips

responsive website design

How to make website responsive using css

In this tutorial you will learn how to create a responsive website step by step.
What is responsive web page design?

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 !

Prerequisite for designing a responsive page
Now here we share step by step implementation guide for responsive website designing

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 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
You may also read
Group Training