March 22, 2018

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:

IPAD 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/

About The Author

Nohman Habib

I basically work in the CMS, like Joomla and WordPress and in framework like Laravel and have keen interest in developing mobile apps by utilizing hybrid technology. I also have experience working in AWS technology. In terms of CMS, I give Joomla the most value because I found it so much user freindly and my clients feel so much easy to manage their project in it.

What is W3C One Web Approach