Responsive Web Design

Responsive web design provides an optimal experience, easy reading and easy navigation with a minimum of resizing on different devices such as desktops, mobiles and tabs, Responsive web design uses only HTML and CSS , it is not a program or a JavaScript. When you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen it is called Responsive Web Design.

Web pages can be viewed using many different devices like desktops, tablets, and phones. Your web page should look good, and be easy to use, regardless of the device Web pages should not leave out information to fit smaller devices, but rather adapt its content to fit any device.

VIEWPORT

The viewport is the user's visible area of a web page, the viewport varies with the device, and will be smaller on a mobile phone than on a computer screen. Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.

When we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen.

Rules For Viewport

1. Do Not use large fixed width elements, For example, if an image is displayed at a width wider than the viewport it can cause the viewport to scroll horizontally. Remember to adjust this content to fit within the width of the viewport.

2. Do NOT let the content rely on a particular viewport width to render well, since screen dimensions and width in CSS pixels vary widely between devices, content should not rely on a particular viewport width to render well.

3. Use CSS media queries to apply different styling for small and large screens, Setting large absolute CSS widths for page elements, will cause the element to be too wide for the viewport on a smaller device. Instead, consider using relative width values, such as width: 100%. Also, be careful of using large absolute positioning values. It may cause the element to fall outside the viewport on small devices.

Example With Viewport

<!DOCTYPE html>

<html>

<head>

img { max-width:100%; height:auto; } div { background-color: #F9FFFF; width: 272px;

padding: 10px; border: 5px solid steelblue; margin: 1px; }

</style>

</head>

<body>

<h3> Tiger </h3>

<p> The tiger (Panthera tigris) is the largest cat species, reaching a total body length which made of up to 3.38 m (11.1 ft) over curves and weighing up to 388.7 kg (857 lb) in the wild. with most remaining populations occurring in small pockets isolated from each other, of which about 2,000 exist on the Indian subcontinent. </p>

</body>

</html>

when viewed in different screen size the web content will be adjusted automatically according to the size.

Example Without Viewport

<!DOCTYPE html>

<html>

<body>

<h3> Tiger </h3>

</body>

</html>

GRID VIEW

Many web pages are based on a grid-view, which means that the page is divided into columns, using a grid-view is very helpful when designing web pages. It makes it easier to place elements on the page.A responsive grid-view often has 12 columns, and has a total width of 100%, and will shrink and expand as you resize the browser window.

<!DOCTYPE html>

<html>

<head>

* { box-sizing: border-box; } .row:after { content: ""; clear: both; display: block; } [class*="col-"] { float: left; padding: 15px; } .col-1 {width: 8.33%;} .col-2 {width: 17.16%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 82.33%;} .col-11 {width: 91.55%;} .col-12 {width: 100%;} html { font-family:"Lucida Sans",sans-serif; } .header { background-color: steelblue; color: white; padding: 15px; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { padding: 8px; margin-bottom: 7px; background-color :turquoise; color: #ffffff; box-shadow: 0 1px 3px rgba (0,0,0,0.12), 0 1px 2px rgba (0,0,0,0.24); } .menu li:hover { background-color: #0099cc; }

</style>

</head>

<body>

</div>

<ul>

<li>Tiger</li>

<li>Cheetah</li>

<li>panther</li>

</ul>

</div>

<h1>Tiger</h1> <p>

The tiger (Panthera tigris) is the largest cat species, reaching a total body length which made of up to 3.38 m (11.1 ft) over curves and weighing up to 388.7 kg (857 lb) in the wild. with most remaining populations occurring in small pockets isolated from each other, of which about 2,000 exist on the Indian subcontinent.

</p>

</div>

</body>

</html>

MEDIA QUERIES

Media query is a CSS technique introduced in CSS3.It uses the @media rule to include a block of CSS properties only if a certain condition is true. We can add a breakpoint where certain parts of the design will behave differently on each side of the breakpoint.

<!DOCTYPE html>

<html>

<head>

* { box-sizing: border-box; } .row:after { content: ""; clear: both; display: block; } [class*="col-"] { float: left; padding: 15px; } html { font-family:"Lucida Sans",sans-serif; } .header { background-color: #9933cc; color: #ffffff; padding: 15px; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { padding: 8px; margin-bottom: 7px; background-color :#33b5e5; color: #ffffff; box-shadow: 0 1px 3px rgba (0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .menu li:hover { background-color: #0099cc; } .aside { background-color: #33b5e5; padding: 15px; color: #ffffff; text-align: center; font-size: 14px; box-shadow: 0 1px 3px rgba (0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .footer { background-color: #0099cc; color: #ffffff; text-align: center; font-size: 12px; padding: 15px; } /* For mobile phones: */ [class*="col-"] { width: 100%; } @media only screen and (min-width:600px) { /* For tablets: */ .col-m-1 {width: 8.33%;} .col-m-2 {width: 16.66%;} .col-m-3 {width: 25%;} .col-m-4 {width: 33.33%;} .col-m-5 {width: 41.66%;} .col-m-6 {width: 50%;} .col-m-7 {width: 58.33%;} .col-m-8 {width: 66.66%;} .col-m-9 {width: 75%;} .col-m-10 {width: 83.33%;} .col-m-11 {width: 91.66%;} .col-m-12 {width: 100%;} } @media only screen and (min-width: 768px) { /* For desktop: */ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} }

</style>

</head>

<body>

</div>

<ul>

<li>Tiger</li>

<li>Cheetah</li>

<li>Panther</li>

</ul>

</div>

<h1>Tiger</h1>

<p>The tiger (Panthera tigris) is the largest cat species, reaching a total body length which made of up to 3.38 m (11.1 ft) over curves and weighing up to 388.7 kg (857 lb) in the wild. with most remaining populations occurring in small pockets isolated from each other, of which about 2,000 exist on the Indian subcontinent.</p>

</div>

<h2>Tiger</h2>

<p>Tiger is the largest cat</p> <h2>Cheetah</h2>

<p>Cheetah is the fastest cat</p> <h2>Lion</h2>

</div>

<p>Resize the browser window to see how the content respond to the resizing.</p>

</div>

</body>

</html>

RESPONSIVE VIDEOS

In Responsive Webpage the video in the webpage will be Scaled and adjusted according to Size of the Screen

Using The Width Property If the width property is set to 100%, the video player will be responsive and scale up and down, the video player can be scaled up to be larger than its original size.

<!DOCTYPE html>

<html>

<head>

video { width: 100%; height: auto; } </style>

</head>

<body>

<video width="400" controls> <source src="mo.mp4" type="video/mp4"> <source src="mo.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video>

<p>Resize the browser window to see how the size of the video player will scale.</p>

</body>

</html>

Using The Max-Width Property

If the max-width property is set to 100%, the video player will scale down if it has to, but never scale up to be larger than its original size.

<!DOCTYPE html>

<html>

<head>

video { max-width: 100%; height: auto; } </style>

</head>

<body>

<video width="400" controls> <source src="mo.mp4" type="video/mp4"> <source src="mo.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video>

<h3>Max-Width Property</h3>

<p>The video player will scale down if it has to,but never scale up to be larger than its original size</p>

</body>

</html>

FRAMEWORKS

There are many existing CSS Frameworks that offer Responsive Design.Many are free and easy to use.

Bootstarp

Bootstrap is most popular web design framework based on HTML,CSS and Java script and it helps you to design web pages in responsive way for all devices

<! DOCTYPE html>

<html>

<head>

</style>

</head>

<body>

</div>

<h2>Tiger</h2>

<p> The tiger (Panthera tigris) is the largest cat species, reaching a total body length which made of up to3.38 m (11.1 ft) over curves and weighing up to 388.7 kg (857 lb) in the wild. with most remaining populations occurring in small pockets isolated from each other, of which about 2,000 exist on the Indian subcontinent. </p>

</div>

<h2>Lion</h2> <p>The lion (Panthera leo) is one of the five big cats in the genus Panthera and a member of the family Felidae , it is the second-largest living cat after the tiger . lions live for 10©14 years in the wild, although in captivity they can live more than 20 years.</p>

</div>

<h2>Cheetah</h2>

<p>The cheetah (Acinonyx jubatus) is a big cat in the subfamily Felinae that inhabits most of Africa and parts of Iran. It is the only extant member of the genus Acinonyx. The cheetah can run as fast as 109.4 to 120.7 km/h (68.0 to 75.0 mph),faster than any other land animal. </p>

</div>

</body>

</html>

Skeleton

Another popular framework is Skeleton, it uses only CSS to make responsive web pages.

<!DOCTYPE html>

<html>

<head>

<title>Skeleton Example</title>

</head>

<body>

<div class="one-half column">Tiger <p>The tiger (Panthera tigris) is the largest cat species, reaching a total body length which made of up to 3.38 m (11.1 ft) over curves and weighing up to 388.7 kg (857 lb) in the wild. with most remaining populations occurring in small pockets isolated from each other, of which about 2,000 exist on the Indian subcontinent. </p>

</div>

<div class="one-half column">Lion <p>The lion (Panthera leo) is one of the five big cats in the genus Panthera and a member of the family Felidae , it is the second-largest living cat after the tiger . lions live for 10©14 years in the wild, although in captivity they can live more than 20 years.</p>

</div>

</body>

</html>

To be continue NEXT POST...

Thanks for reading.

Computer Free Learning

Search This Blog

Responsive Web Design

Labels

Comments

Popular posts from this blog

What is Computer?

System Analysis and Design: A Comprehensive Overview

Algorithm Analysis ,Time and Space Complexities