- What is W3C One Web Approach | Blog

Blog Section

What is W3C One Web Approach

on .

 The major part of 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." . According to this, 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.i.e, one design for iphone, another for ipad, another for blackberry, kindle etc. 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 visitors environment and behaviour according to the plateform, 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:

IPAD View


Mobile View  

   In the above screenshots, you can see that 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. Additionally, there’s a growing number of responsive-friendly, open-source toolkits like Bootstrap or Foundation which help simplify 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 have the server-side adaptive mechanism in a variety of ways, 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 browser. Adaptive websites scripts first detect a user’s device before loading a webpage and then deliver the better version of that site for the target device either it could be 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 user device which server side checks this through server side languages like php, python etc.

Below are the links to some best and proven 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/

 

Plz share this on

Submit to DeliciousSubmit to DiggSubmit to FacebookSubmit to Google PlusSubmit to StumbleuponSubmit to TechnoratiSubmit to TwitterSubmit to LinkedIn

Related Articles

Services Pricing

Services Pricing

Request a Free Quote

Email an Enquiry