What is W3C One Web Approach

The major part of the W3C One Web Approach is, “One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using.” Accordingly, a web design can be classified basically into two types, which are listed below.

 Responsive Web Design

Today, every person desires a mobile version of his website as well. For example, one design for the iPhone, another for the iPad, another for the Blackberry, kindle, and so on. It’s not a single piece of technology, but rather a set of techniques and ideas that form a whole. Responsive web design proposes that our website should respond to the visitor’s environment and behaviour according to the platform, screen size, and orientation.

To see it in action, open this article on a desktop browser and slowly make the browser thinner and wider. You should see the layout magically adjust itself to more comfortably fit the new width of the browser, even if you make the page as skinny as the resolution of a mobile phone. Here are some screenshots of what the Think Vitamin design looks like at various screen resolutions:

Responsive Web View

IPAD View

ipad view

Mobile View   mobile view

In the above screenshots, you can see that the layout is fluid. It adjusts itself according to the width of the browser window and does not generate a horizontal scrollbar.

A key advantage of this approach is that designers can use a single template for all devices and just use CSS to determine how content is rendered on different screen sizes. Plus, those designers can still work in HTML and CSS, technologies they’re already familiar with. Furthermore, there is an increasing number of responsive-friendly, open-source toolkits, such as Bootstrap or Foundation, that aid in the process of building responsive sites.

What are media queries.

Media Queries are the essence of the responsive web design and change style based on user device width. These are powerful tool in the web design and improves attractiveness of the web page. Here is, how to declare these.

 <link rel='stylesheet' media='screen and (min-width: 700px) and (max-width: 1000px)' href='css/normal.css' />   

Media Queries can be used in a css file as follows.

  @media screen and (max-width:700px){
      body {
          width: 85%;
          font-size:70%;
      }
      
      ---- other css -----}   

The above mentioned media query starts with the @media rule and then a media type is specified. The feature, “max-width:700px;” tells the browser that the css query contained in the curly braces should be executed only when the maximum width is 700px.

The number of different screen sizes and resolutions is increasing every day, and creating a different version of a website that targets each individual device is not a possible way. This is the problem that responsive web design resolves.

Adaptive Web Design.

We can implement the server-side adaptive mechanism in a variety of ways, including through server-side plugins and custom user agent detection. The term “adaptive web design” was first used by Aaron Gustafson. This method takes into account many components of progressive enhancement (PE), which defines design methods that indeed focus on the user rather than the browser. Adaptive website scripts first detect a user’s device before loading a webpage and then deliver the better version of that site for the target device, which could be a desktop, tablet, smartphone, web-enabled TV, and so forth.

Adaptive layouts have basically two types: client-side adaptive and server-side adaptive. Client side involves javascript to detect the user’s device, which server side checks through server-side languages like php, python, etc.

The links below will take you to some of the best and most tested device detection scripts.

http://mobiforge.com/design-development/tablet-and-mobile-device-detection-php
https://code.google.com/p/php-mobile-detect/
http://mobiledetect.net/

Related Articles

Add a Comment

Your email address will not be published. Required fields are marked *

ABOUT CODINGACE

My name is Nohman Habib and I am a web developer with over 10 years of experience, programming in Joomla, Wordpress, WHMCS, vTiger and Hybrid Apps. My plan to start codingace.com is to share my experience and expertise with others. Here my basic area of focus is to post tutorials primarily on Joomla development, HTML5, CSS3 and PHP.

Nohman Habib

CEO: codingace.com

Request a Quote









PHP Code Snippets Powered By : XYZScripts.com