Responsive Web Design for all Devices

In current days visitors are accessing web site by multiple devices, so it is necessary to support web site for multiple device with different screen resolution. Let say web site should be accessible by normal desktop, mobile devices, and tabulates. All this have different screens resolution. Web site should be available with supported to all this devices with proper readable layout format.

HTML5 and CSS 3.0 are come up with resolution of this problem, where we can create one common web site and that will be loaded in different browser (Devices) with different format.

Below are the screens which we have opened in different devices with different format

  • Screen for general  desktop

Large screen

  •  Screen for tablets
Tablates Screen

Tablates Screen

 

  • Mobile Screen
Mobile Web site screen

Mobile Web site screen

 

We have created same web site which is loading with different style based on selected device’s screen.

To achieve this solution I have used media query listeners of CSS 3.0.

Actually there is one Viewport metadata tag controls the logical dimensions and scaling of the mobile browser’s (chrome-less) window. Setting the width equal to the device-width works around the problem:


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

And also in CSS style we have added media object with all screen resolution with font and width allocation based on specified screens.

 

Below are the styles for this example.

@media screen and (max-width: 478px) &nbsp;&nbsp;&nbsp; {
h1 { font-size: 30px; padding: 1px; }
h2 { font-size: 1xpx; padding: 1px; }
body { font-size: 13px; }
}

@media screen and (max-width: 740px) &nbsp;&nbsp;&nbsp; 
{
.left-col { width: 100%; }
.sidebar { width: 100%; }
}

@media screen and (max-width: 480px) {
}

In above code set different font size and padding based for screen 480px width and more than 740px as well as set sidebar width based on screen.
Other option about responsive design is define two separate css and load css based on screen size selection.

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href=" media-queries_480.css" />

Now technology is moving ahead and users are increasing the use of mobile device to accessing internet thus mobile device are necessary to support for each webs site hence responsive design is very important and required for each new upcoming site.
Add as Comment your questions or feedbacks.

“Happy Programming”
Amit Patel

About these ads

About amitpatelit
Having more than 9 years of experience in IT industry. - Strong knowledge and experience on various technologies and tools like ASP.NET, MVC, Entity framework, Razor,VB.NET, C#, WCF,WPF, MVC, Silver light, ASP, XML ,Java Script, HTML, CSS, AJAX, COM/DCOM,MS SQL Server, Enterprise Library, MSMQ, SQL Server Reporting Service, Crystal Reports. - Achieved 7800 points (Star level) in the official Microsoft ASP.NET forum. - MCPD and MCTS in Web, Window and distributed application.

2 Responses to Responsive Web Design for all Devices

  1. T.D. MCKOY says:

    I would like to know more about cost and how to start building my Webb site

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 239 other followers

%d bloggers like this: