Responsive Web Design

Responsive Web Design
Responsive web design [RWD] impose the techniques for

designing a website so that it possess the ability to change
it’s layout dynamically depending on the device/viewport on
which the website is being viewed.
Categorized devices are : mobile phone, tablet, laptop,

desktop computer, smart TV.
Based on dimensions, the device can be classified as extra

small device, small device, medium device and large device.
Requirement for RWD
 Latest Browsers
 IDE for designing RWD pages in websites preferably
Visual Studio 2012
 HTML5 semantic tags
 In-built styles using CSS3
 Client side scripting using Java Script
 References of Bootstrap 3.3.6
 JQuery UI responsive library for animation and events
 Single page application using Angular JS
What is HTML5?
HTML5 is new edition of hyper text markup

language (incorporated by W3C in 2011)
that can be used for structuring and
presenting the content on the web page.
What is CSS3?
CSS3 is the latest edition of the cascading style

sheets that support the features like rounded
corners, shadows, gradients, transitions, new
layouts like multi-columns, grids etc.
What are Ajax and JQuery?
AJAX supports loading of the data in the background of

the server and displays it on the webpage, without
refreshing the page.
JQuery is a cross-platform Javascript library designed to

simplify the client-side scripting of HTML.
What is Angular JS?
AngularJS is a client side java script framework,

as introduced by Google, that provide necessary
support needed for the development of
featured enriched single page applications.
What’s new in HTML5?
1. The DOCTYPE declaration for HTML5 is required:
<!DOCTYPE html>
2. The character encoding (charset) declaration is simple:
<meta charset="UTF-8">
[previous version of HTML4.01 used it as : ]

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8”>
What’s new in HTML5?
<article> – defines an article, a user comment or a post.
<aside> – incorporates content aside from the page content.
<header>, <footer> – define header and footer section.
<nav> – define section for navigation links.
<section> – define a section in our document.
<audio>, <video> – mark sound or video content
<embed> – defines a container for interactive content (plug-

in) or external application.
<canvas> – allow drawing graphics via Javascript

Semantic elements in HTML5
<a> <blockquote> <datalist> <form> <img> <nav>
<abbr> <body> <details> <h1> … <input> <ol>

<h6 >
<area> <button> <div> <header> <li> <optgroup>
<article> <caption> <embed> <head> <link> <option>

<audio> <col> <figure> <html> <map> <output>
<base> <colgroup> <footer> <iframe> <meta> <p>

<script> <section> <select> <source> <style> <table>
<tbody> <textarea> <thead> <tfoot> <th> <td>
<title> <ul> <video> <summary> <nav> <figcaption>
Viewport
What is the 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.
Setting the viewport

<meta name="viewport" content="width=device-width,
initial-scale=1.0">
A <meta> viewport element gives the browser instructions on how

to control the page's dimensions and scaling. The width=device-
width part sets the width of the page to follow the screen-width of
the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the
page is first loaded by the browser.
Html5 Forms
There are the new input types in HTML5 which we can use as form elements.
color Gives the end user a native color picker to choose a color.
date Offers a datepicker.
email A field for entering e-mail address(es).
month Choose a full month.
number Picking a number.
range Offers a slider to set to a certain value/position.
phone Choosing a telephone number.
time Input a certain time.
url Entering a URL.
week Picking a specific week.
HTML5 New Attributes
autocomplete autofocus formaction formmethod
formnovalidate formtarget list placeholder
pattern readonly required novalidate

<input type="text" autocomplete="off">
<input type="text" autofocus>
<input type="submit" formaction="http://google.co.in"

value=“Google">
<input type="text" pattern="[A-Z]*">
<input type="submit" formmethod="POST" value="Send">
<input type="submit" formnovalidate value="">
<input type="submit" formtarget="_blank" value="Post">

HTML5 Rich Media
Html5 Canvas
The canvas element provides the context for creating dynamic drawing
and images that can be designed with the support of java script.
<canvas id="my-first-canvas" width="360" height="240">
</canvas>
<canvas id="my-first-canvas" width="360" height="240">

<p>No canvas support? Have an old-fashioned image instead:</p>
<img src="puppy.jpg" alt="a cute puppy">
</canvas>
FIG 3.01: Users without

canvas support will see the
image of a cute puppy.
First of all, we’ll need to reference the canvas element and its context.
var canvas = document.getElementById('my-first-canvas');

var context = canvas.getContext('2d');
Now we can start drawing on the two-dimensional surface of the canvas element
using the API.
Drawing with code

We can specify the stroke color as “red”:
context.strokeStyle = '#990000';
If we want to draw a rectangle that’s 100 by 50 pixels in size, positioned 20 pixels
from the left and 30 pixels from the top of the canvas element, we’d write this
context.strokeRect(20,30,100,50);
Html5 Audio
Embedding an audio file in an HTML5 document is simple:
<audio autoplay=“autoplay” loop=“loop”>
<source src=“mysong.mp3" type="audio/mpeg">
</audio>
Giving users control over the playback of an audio file is a sensible idea that is
easily accomplished using the boolean attribute controls:
<audio src=“mysong.mp3" controls=“controls”></audio>
The presence of the controls attribute prompts the browser to provide native
controls for playing and pausing the audio, as well as adjusting the volume
FIG 3.05: Use controls to display play, pause, and volume controls for your audio.
Html5 Video
The Html5 video element works like the audio element. It has the optional
autoplay, loop, and preload attributes. We can specify the location of the
video file by either using the src attribute on the video element or by using
source elements nested within the opening and closing <video>tags.
<video src="movie.mp4" controls=“controls” width="360" height="240">

</video>
We can choose a representative image for the video and tell the browser to
display it using the poster attribute .
<video src="movie.mp4" controls width=“360” height="240"

poster="placeholder.jpg">
</video>
HTML5 hands on examples
What is CSS ?
By using CSS, we can set the style for background

color, margin, border, font, position etc.
A style is a rule that describes how to format a

specific part of an HTML document.
A style sheet is a template including a set of styles.

Defining and applying a style
A style rule, is composed of two parts:
a> The selector, which locates the elements in the HTML document,
b> The declaration block, which contains the instructions.

Multiple declarations are separated with a semicolon.
Example:
body {
background-color: white; color: gray;
}
Creating an inline style
All elements have a global attribute called style that can be

used to provide an inline style.
Example:
<body style=“background-color: white; color: gray;”>

Creating an embedded style
We can use the <style> element to create an embedded style sheet within our
HTML document.
<!DOCTYPE html>
<html>
<head>
<title>5555555</title>
<style>
body { background-color: white; color: gray; }
</style>
</head>
<body>
</body>
</html>
Creating an external style sheet
<!DOCTYPE html>
<html>
<head>
<title>ABCD</title>
<link rel='stylesheet' type='text/css' href='Content/default.css' />
</head>
<body> </body>
</html>
The <link> element contains the rel attribute, which specifies the relationship
between the current HTML document and the external file as a style sheet.
The href attribute specifies the relative location of the external CSS file “default.css”.
body { background-color: white; color: gray; }
Element and id selector
Creating an element type selector
An element type selector is based on the name of the tag.

button { background-color: white; color: gray; }
Creating an id selector
An id selector is based on the id of the element. To set the style on an element,

we can assign an id to the button and then specify the id as the selector, prefixed
with the hash (#) symbol.
#btnSave { background-color: white; color: gray; }

Class selector
A class selector is a style with a class name of our choice, prefixed with
the period (.) symbol. This is also called a named style.
The class name can be assigned to any element through the class attribute.
.myStyle { background-color: white; color: gray; }
Using the universal selector

If we want to apply a style to every element, we can use the asterisk (*) symbol. The
following example applies the style to every element in the HTML document.
*{
background-color: white; color: gray;
}
Descendant and Child Selector
Using descendant selector we can change the style of elements only if the elements are
descendants of another element. For example, we might want to remove the underline
from hyperlinks if they are descendant element of a list item.
li a { text-decoration: none; }
Using child selector we can change the style of elements, if the elements are direct children
of another element. For example, we might want to remove the underline from hyperlinks if
they are children of a list item.
li > a { text-decoration: none; }

pseudo-class and pseudo-element selectors
CSS pseudo-classes are used to add special effects to some selectors.

We can use pseudo classes anywhere at the end of the selector chain to set the
style of the element when the identified state is true.
• The syntax of pseudo-classes:
selector : pseudo-class { property : value; }

• CSS classes can also be used with pseudo-classes:
selector.class : pseudo-class { property : value; }

List of pseudo-class selectors
link visited hover
nth-child(formula) focus nth-last-child
first-of-type last-of-type lang
active only-of-type
Pseudo elements are abstractions of the document tree that provide

access to information that is not directly available in the DOM tree.
The syntax of pseudo-elements:

selector::pseudo-element { property : value; }
CSS classes can also be used with pseudo-elements:
selector.class::pseudo-element { property : value; }
We can use pseudo elements only at the end of the selector chain to set the
style of the pseudo element. The following is a list of pseudo elements.
::first-line Selects the first line
::first-letter Selects the first letter
::before Inserts textual content before the element content
::after Inserts textual content after element content

Grouping selectors
We can group selectors when we will be applying the same style by separating
each selector with a comma.
button, p { background-color: white; color: gray; }

Working with CSS colors
With CSS, colors can be specified by color names, RGB color values, and RGBA color
values. We can also set the transparency or opacity.
The RGB value is a six character field that represents a two-character hexadecimal
value for the amount of red, then green, and then blue, and is prefixed with the
pound (#) symbol.
■black #000000 ■white #ffffff

■red #ff0000 ■green #008000
■lime #00ff00 ■blue #0000ff
■yellow #ffff00 ■gray #808080
body { background-color: #ffff00; }

rgb function
The rgb function accepts the three R, G, and B parameters, either as an integer or
as a percentage. If the integer value is above or below the valid 0–255 range, the
value is automatically interpreted as the minimum or maximum value.
The following are examples of the rgb function.
h1 { background-color: rgb(255,0,0); }
h1 { background-color: rgb(-100,500,0); } /*interpreted as 0,255,0 */
h1 { background-color: rgb(20%,150%,0%); } /*interpreted as 20%,100%,0% */
rgba function
The rgba function is similar to the rgb function except it has an alpha parameter,
which represents the amount of transparency to use. The alpha parameter value
must be between 0.0 and 1.0, where 0.0 is invisible and 1.0 is fully opaque.
The following are examples of using the rgba function.
h1 {
background-color: rgba(255,0,0,0.5);
}
h1 {
background-color: rgba(0,255,0,1);
}
h1 {
background-color: rgba(20%,50%,0%, 0.2);
}
p{
border-bottom: 10px;
border-right: 5px;
border-left: 1px;
border-top: 0px;
padding: 1px 2px 3px 4px ;
margin: 15px;
background-color: yellow;
border-style: solid;
border-color: green;
}
Positioning elements
Using the relative position
The element can be offset from where it normally appears in the HTML
flow.
#div2 {
background-color: cyan;
position: relative;
top: 15px; left: 30px;
}
With the top set to 15 pixels, div2 and its contents will be pushed down 15
pixels from its normal location. The left setting of 30 pixels will push
div2 and its contents to the right by 30 pixels.
Using the absolute position
The element is removed from the HTML flow and positioned within the first non-
static element. If all parent elements are static (the default), then the element is
positioned within the browser window.
#div2 { background-color: cyan; position: absolute; top: 15px; left: 30px; }
With the top set to 15 pixels, div2 and its contents will be pushed down 15 pixels,
not from its normal location, but from the top of the browser window. The left
setting of 30 will push div2 and its contents to the right by 30 pixels, also not
from its normal location, but from the left side of the browser window.
jQuery is a simplified java script library
consisting of in-built functions that allows us
to develop a client side programming using
“write less and use more features”.
The jQuery support the following action:
 HTML/DOM manipulation
 CSS manipulation
 HTML event methods
 Effects and animations
 AJAX
Adding to our web pages
We can:
• Download the jQuery library from

jQuery.com
• Include jQuery from a CDN, like Google

Referencing
The jQuery library is a single JavaScript file, and we

reference it with the HTML <script> tag.
<head>
<script src="jquery-1.11.1.min.js"></script>
</head>
Content Delivery Network
If we don't want to download and host jQuery, we can include it from a CDN
(Content Delivery Network).
• Google CDN:
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
</head>
Microsoft CDN:
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js">
</script>
</head>
Syntax
Basic syntax is: $(selector).action()
– A $ sign to define/access jQuery

– A (selector) to "query (or find)" HTML elements
– A jQuery action() to be performed on the element(s)
Examples:
– $(this).hide() - hides the current element.

– $("p").hide() - hides all <p> elements.
– $(".test").hide() - hides all elements with class="test".
– $("#test").hide() - hides the element with id="test".
$(document).ready(function(){ }) event
All jQuery methods must be placed inside a document

ready event:
• $(document).ready(function(){
// jQuery methods go here...
});
The element Selector
The jQuery element selector selects

elements based on the element name.
We can select all <p> elements on a page like this:

$("p")
Example
When a user clicks on a button, all <p> elements will be hidden:
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
The #id Selector
The jQuery #id selector uses the id attribute of an HTML tag to find the
specific element. An id should be unique within a page, so we should use
the #id selector when we want to find a single, unique element.
$("#test")
Example
When a user clicks on a button, the element with id="test" will be hidden:
$("#test").hide();
});
});
The .class selector
The jQuery class selector finds elements with a specific class.

To find elements with a specific class, write a period character,
followed by the name of the class:
$(".test")
Example
When a user clicks on a button, the elements with class="test"
will be hidden:
$(".test").hide();
});
});
More examples of selectors
Syntax Description
$("*") Selects all elements

$(this) Selects the current HTML element
$("p.intro") Selects all <p> elements with class="intro“
$("p:first") Selects the first <p> element
$("ul li:first") Selects the first <li> element of the first <ul>
$("ul li:first-child") Selects the first <li> element of every <ul>
$("[href]") Selects all elements with an href attribute
$("a[target='_blank']") Selects all <a> elements with a target attribute
value equal to "_blank"
$("tr:even") Selects all even <tr> elements
$("tr:odd") Selects all odd <tr> elements
Event
To assign a click event to all paragraphs on a page, we can do this:

$("p").click();
The next step is to define what should happen when the event fires.
We must pass a function to the event:
$("p").click(function(){
// action goes here!!
});
hover()
The hover() method takes two functions and is a combination of the mouseenter()
and mouseleave() methods. The first function is executed when the mouse enters the
HTML element, and the second function is executed when the mouse leaves the
HTML element:
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
focus()
The focus() method attaches an event handler function to an HTML form
field. The function is executed when the form field gets focus:
• $("input").focus(function(){
$(this).css("background-color","#cccccc");
});
blur()
The blur() method attaches an event handler function to an HTML form
field. The function is executed when the form field loses focus:
• $("input").blur(function(){
$(this).css("background-color","#ffffff");
});
Effects - Hide and Show
With jQuery, we can hide and show HTML elements with the hide()
and show() methods:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
• The optional speed parameter values: "slow", "fast", or milliseconds.

• The optional callback parameter is a function to be executed after the
hide() or show() method completes
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){ $("p").show(); });
Effects - Toggle
With jQuery, we can toggle between the hide() and show()

methods with the toggle() method. Shown elements are
hidden and hidden elements are
shown:
$("p").toggle();
});
Syntax:
$(selector).toggle(speed,callback);
Effects - Fading
With jQuery we can fade elements in and out of visibility.
jQuery has the following four fade methods:
– fadeIn()
– fadeOut()
– fadeToggle()
– fadeTo()
jQuery fadeIn() method
The jQuery fadeIn() method is used to fade in a hidden element.

Syntax:
$(selector).fadeIn(speed,callback);
jQuery fadeOut() method
The jQuery fadeOut() method is used to fade out a visible element.

Syntax:
$(selector).fadeOut(speed,callback);
jQuery fadeToggle() Method
The jQuery fadeToggle() method toggles between the fadeIn() and

fadeOut() methods. If the elements are faded out, fadeToggle() will fade
them in. If the elements are faded in, fadeToggle() will fade them out.
Syntax:
$(selector).fadeToggle(speed,callback);
jQuery fadeTo() Method

The jQuery fadeTo() method allows fading to a given opacity (value
between 0 and 1).
Syntax:
$(selector).fadeTo(speed,opacity,callback);
The required opacity parameter in the fadeTo() method specifies fading

to a given opacity (value between 0 and 1).
Effects - fading
jQuery Sliding Methods
With jQuery we can create a sliding effect on elements.

jQuery has the following slide methods:
slideDown()
slideUp()
slideToggle()
Callback Functions
A callback function is executed after the current effect is finished.

Typical syntax: $(selector).hide(speed,callback);
Example with Callback
• $("button").click(function(){
$("p").hide("slow", function(){
alert("The paragraph is now hidden");
});
});
Chaining
jQuery Method Chaining
With jQuery we can use the technique called chaining, that

allows us to run multiple jQuery commands, one after the
other, on the same element(s).
Example
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
OR
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
Get Content and Attributes
jQuery DOM Manipulation
jQuery comes with a bunch of DOM related methods that make it easy
to access and manipulate elements and attributes.
Get Content - text(), html(), and val()

Three useful, jQuery methods for DOM manipulation are:
text() - Sets or returns the text content of selected elements
html() - Sets or returns the content of selected elements (including
HTML markup)
val() - Sets or returns the value of form fields
The following example demonstrates how to get
content with the jQuery text() and html() methods:
Example
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
alert("HTML: " + $("#test").html());
});
The following example demonstrates how to get the value of an input field
with the jQuery val() method:
Example
alert("Value: " + $("#test").val());
});
Get Attributes - attr()

The jQuery attr() method is used to get attribute values.
Example
alert($("#w3s").attr("href"));
});
Set Content and Attributes
Set Content - text(), html(), and val()
text() - Sets or returns the text content of selected elements

html() - Sets or returns the content of selected elements (including HTML
markup)
val() - Sets or returns the value of form fields
$("#test1").text("Hello world!");
});
$("#test2").html("<b>Hello world!</b>");
});
$("#test3").val("Dolly Duck");
});
Set Attributes - attr()
The jQuery attr() method is also used to set/change attribute values.

The following example demonstrates how to change (set) the value of the href
attribute in a link:
Example
$("#w3s").attr("href","http://www.jquery.com/jquery");
});
The following example demonstrates how to set both the href and title attributes at
the same time:
Example
$("#w3s").attr({
"href" : "http://www.jQuery.com/jquery",
"title" : "jQuery Tutorial"
});
});
- Get and Set CSS Classes
jQuery has several methods for CSS manipulation.
addClass() - Adds one or more classes to the selected elements

removeClass() - Removes one or more classes from the selected elements
toggleClass() - Toggles between adding/removing classes from the selected elements
css() - Sets or returns the style attribute
jQuery addClass() Method:

$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
We can also specify multiple classes within the addClass() method:

$("#div1").addClass("important blue");
});
- css() method
jQuery css() Method
The css() method sets or returns one or more style properties for the selected
elements.
Example
$("p").css("background-color");
Set a CSS Property
To set a specified CSS property, use the following syntax:
css("propertyname","value");
Example
$("p").css("background-color","yellow");
Set Multiple CSS Properties
To set multiple CSS properties, use the following syntax:
css({"propertyname":"value","propertyname":"value",...});
Example
$("p").css({"background-color":"yellow","font-size":"200%"});
- AJAX load() Method
The jQuery load() method is a powerful AJAX method.

The load() method loads data from a server and puts the returned data
into the selected element.
Syntax:
• $(selector).load(URL, data, callback);
• The required URL parameter specifies the URL we wish to load.
• The optional data parameter specifies a set of query string
key/value pairs to send along with the request.
• The optional callback parameter is the name of a function to be
executed after the load() method is completed.
jQuery $.get() Method
The $.get() method requests data from the server with an HTTP GET request.
Syntax:
• $.get(URL,callback);
The required URL parameter specifies the URL we wish to request.

The optional callback parameter is the name of a function to be executed if the
request succeeds.
Example
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
What is Angular JS?
Angular JS Module and Controller
Use of ng-repeat in Angular JS

Responsive Web Design

Uploaded by

Copyright:

Available Formats

Responsive Web Design

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Responsive Web Design

Uploaded by

Copyright:

Available Formats

Responsive Web Design

Responsive web design [RWD] impose the techniques for

Categorized devices are : mobile phone, tablet, laptop,

Based on dimensions, the device can be classified as extra

HTML5 is new edition of hyper text markup

CSS3 is the latest edition of the cascading style

AJAX supports loading of the data in the background of

JQuery is a cross-platform Javascript library designed to

AngularJS is a client side java script framework,

1. The DOCTYPE declaration for HTML5 is required:

2. The character encoding (charset) declaration is simple:

[previous version of HTML4.01 used it as : ]

<article> – defines an article, a user comment or a post.

<aside> – incorporates content aside from the page content.

<header>, <footer> – define header and footer section.

<nav> – define section for navigation links.

<section> – define a section in our document.

<audio>, <video> – mark sound or video content

<embed> – defines a container for interactive content (plug-

<canvas> – allow drawing graphics via Javascript

<abbr> <body> <details> <h1> … <input> <ol>

<article> <caption> <embed> <head> <link> <option>

<base> <colgroup> <footer> <iframe> <meta> <p>

Setting the viewport

A <meta> viewport element gives the browser instructions on how

autocomplete autofocus formaction formmethod

formnovalidate formtarget list placeholder

pattern readonly required novalidate

<input type="text" autofocus>

<input type="submit" formaction="http://google.co.in"

<input type="text" pattern="[A-Z]*">

<input type="submit" formmethod="POST" value="Send">

<input type="submit" formnovalidate value="">

<input type="submit" formtarget="_blank" value="Post">

<canvas id="my-first-canvas" width="360" height="240">

FIG 3.01: Users without

var canvas = document.getElementById('my-first-canvas');

Drawing with code

<audio src=“mysong.mp3" controls=“controls”></audio>

<video src="movie.mp4" controls=“controls” width="360" height="240">

<video src="movie.mp4" controls width=“360” height="240"

By using CSS, we can set the style for background

A style is a rule that describes how to format a

A style sheet is a template including a set of styles.

A style rule, is composed of two parts:

b> The declaration block, which contains the instructions.

All elements have a global attribute called style that can be

<body style=“background-color: white; color: gray;”>

Creating an element type selector

An element type selector is based on the name of the tag.

An id selector is based on the id of the element. To set the style on an element,

#btnSave { background-color: white; color: gray; }

.myStyle { background-color: white; color: gray; }

Using the universal selector

li > a { text-decoration: none; }

CSS pseudo-classes are used to add special effects to some selectors.

• The syntax of pseudo-classes:

selector : pseudo-class { property : value; }

selector.class : pseudo-class { property : value; }