Importance of User Experience Design (UXD)

Introduction

User experience design (UXD) is the process of enhancing user satisfaction with a product by improving the usability, accessibility, and pleasure provided in the interaction with the product. User experience design encompasses traditional human–computer interaction design, and extends it by addressing all aspects of a product or service as perceived by users.

The term User Experience was coined by Donald Norman.

The general idea of user experience is Make things easy for people.

Best Practices for Web UX Design

Understand your user

Understand what they want, what they know, and what they don’t know they want. To design a successful experience, you must research your users:

  • Interview users
  • Create user stories and scenarios
  • Map out the customer journey

See beyond the page

Nowadays, web design requires an even broader skill-set as UX techniques mature.

Related: Reimagine the user experience, create what users love, and transform your business!

Here are a few checkpoints:

  • Does the information architecture make sense?
    For example, consistency is required in labeling for top-level and secondary navigation items.
  • Does the website create an emotional response?
    The colors, visuals, and interaction design must all add up to hook the user into exploring the site deeper.
  • Is accessibility addressed correctly?
    Accessible sites have real business value: they rank better in Google, and access larger audiences.
  • Does the text and visual content go well?
    A site’s design includes all content. If the tone of the copy doesn’t match the visual style, the entire experience starts to dissolve.

Interactions remain the root of all UX

Interactions are not just about when a user clicks something on the site. The moment a user views the design, their brain processes visual interactions at the speed of thought.

Prototype early

Prototyping is the only sure way to gauge success. Usability tests at every iteration – will let you know whether you are on the right track, and what you need to change.

Device-Consistent Experiences

The only future-proof strategy is designing fluid experiences that adapt to any device.

Visual Consistency: Visual consistency ensures that site renders properly regardless of device. The same colors and graphics helps create a familiar experience wherever users log in.

Flexible Layout: When working on web designs, ensure that the layout scales appropriately. Obviously, the same site doesn’t look the same on every device. But the relative placement of menus, search functions, and key calls-to-action (like login) should match across devices. Users become accustomed to location quickly, and don’t want to relearn or switch their mental mapping.

Focus on context: Content suitable on the desktop is not always suitable for mobile. For instance, navigation can be stripped down in a mobile view to simple labels (or even shelved away in a navigation drawer), but they should certainly be fleshed out as you scale up to a tablet or desktop (e.g. horizontal or vertical menus). When you keep context in mind, you ensure that the design isn’t just consistent but also appropriate.

Responsive and Adaptive Design

Responsive Design (RWD) – Everything must be flexible: layouts, image sizes, text blocks . This flexibility, combined with smart use of CSS media queries, gives site the fluidity it needs to work on all devices.

Adaptive Design (AWD) – Design different sites for different categories of devices. Typically AWD sites have up to six variations, based on screen width: 320, 480, 760, 960, 1200, 1600

The mobile-first approach is the best strategies to create a responsive or adaptive design. Designing for the smallest screen and working your way up.

UX design checklist

Note that not all of these points apply to all products, but generally these are the ones that are most relevant.

  • Avoid more than three primary colors
  • Items on top of the visual hierarchy are the most important
  • Primary action is visually distinct from secondary actions
  • Interactive elements are not abstracted
  • Form submission is confirmed in a visually distinct manner
  • Alert messages are consistent and visually distinct
  • Navigation is consistent
  • Room for growth
  • No more than two distinct font families are used
  • Fonts used for text content are at least 12px in size
  • Reserve uppercase words for labels, headers, or acronyms
  • Different font styles or families are used to separate content from controls
  • Font size/weight differentiates between content types
  • Progress indicator for multi–step workflows
  • Foreground elements (like content and controls) are easily distinguished from the background

UI Design: Wireframe, Mockup and Prototype

There is a huge misconception about the actual meaning behind words such as wireframe, mockup, and prototype. They are considered by most as a method to show a design.

The UI design process

The UI design process goes from wireframing to mockups to prototyping, with variation in fidelity for each stage. The prototype is interactive while the wireframe and mockup are both static. Between wireframe and mockup, the wireframe is low-fidelity while mockup is high-fidelity.

UI design different stage

Wireframe

The wireframe is the visual representation of the skeletal framework of a website. Wireframes can be a freehand drawing on a piece of paper or sketches on a whiteboard. It is the fastest way to get your idea ready for brainstorming. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together. The wireframe lacks typographic style, color, or graphics since the main focus lies in functionality, behavior, and priority of content.

Wireframe rendered using Balsamiq

Tools:
Balsamiq
– List of free wireframing applications

Additional Resources:
– Wireframe Showcase
Dribbble

Mockup

Mockup provides high-fidelity, static, design representation. They are visually more appealing, has colors, fonts, text, images, logos etc., giving it final product look-and-feel. Mockups are useful to get early buy-in from a stakeholder. They are a good feedback-gatherer.

Mockup created based on wireframe

Tools:
– Adobe Photoshop/Illustrator
Sketch

Additional Resources:
250 best Photoshop resources
Freebiesbug
Dribbble
Photoshop Etiquette

Prototype

A prototype is a simulation of the final interaction between the user and the interface. It helps users to understand how the functionalities in an application will work. Prototypes help provide proof of concept, more importantly, expose any usability flaws that are not found during the wireframes and mockups stage.

Interactive Prototype

Tools:
UXPin
InVision

Additional Resources:
– ZURB Solidify
Pencil Project

Wireframe, mockup, and prototype have their own characteristics and usage scenarios in a specific stage. How they are used depends on specific requirements.

Drive engagement and enhanced customer experience with Trigent’s UX/UI capabilities. 

CSS Browser-Specific Hacks

What is this?

Browser hacks is an extensive list of browser specific CSS hacks from all over the inter-webs. CSS hacks are needed in order to solve problems caused by different browsers rendering.

How to?

Pick the hack you want. Copy it into your stylesheet. Add the style you want between the braces. Enjoy the new styles for the browser you targeted!

 Reminder!

Please keep in mind using a hack is not always the perfect solution. It can be useful to fix some weird browser specific bug, but in most cases you should fix your CSS.

 

Firefox – Any Firefox browser hack

@-moz-document url-prefix() {
 .selector { Property: Value; }
 }

Media Query Hacks

@media all and (min--moz-device-pixel-ratio:0) and (min-resolution: 1280px) {
 .selector { Property: Value; }
 }

Google Chrome and Safari CSS hack

@media screen and (-webkit-min-device-pixel-ratio:0) {
 .selector { Property: Value; }
 }

Note :- Safari and Google Chrome are mainly the same, but sometimes behave differently, especially in forms, and fonts rendering.

Media Query Hacks

@media all and(-webkit-min-device-pixel-ratio:0)and(min-resolution: 1280px){
 .selector { Property: Value; }
 }
 

Opera – Opera 10 and above

@media not all and (-webkit-min-device-pixel-ratio:0) {
 .selector { Property: Value; }
 }

Media Query Hacks

@media all and(-webkit-min-device-pixel-ratio:0)and(min-resolution: 1280px){
 .selector { Property: Value; }
 }
 

Internet Explorer / Edge IE 9 Hack

:root .selector {
 Property: Value9; color: red9;
 }

Note :-  color: red9; Hack Works on IE9

Conditional comments

<!--[if IE 9]> Internet Explorer 9 <![endif]-->
 <!--[if lte IE 9]> Internet Explorer 9 or less <![endif]-->
 <!--[if gte IE 9]> Internet Explorer 9 or greater <![endif]-->

IE 10 only

_:-ms-lang(x), .ie10 { property: value9; }

Internet Explorer 10+, Microsoft Edge Browser

_:-ms-lang(x), .selector { property: value; }

IE 10 and above

@media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) { .ie10up {property: value;}
 }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .ie10up {property: value;}
}

IE 11 (and above..) 

_:-ms-fullscreen, :root .ie11up { property:value; }

Internet Explorer 11+, Microsoft Edge Browser

/* Put this code in external stylesheet: ie11up.css */ @charset "&lt;Any Modern Browser but MSIE 10- or FF 18- &gt;"; _:-ms-lang(x), .selector { property:value; }

Microsoft Edge Browser 12+ (All) – @supports method

@supports (-ms-ime-align:auto) { .selector { property:value; } }

For more information on CSS browser-specific hacks please visit the following site:  http://browserhacks.com/

Quirks:

Browser hacks, boom boom! — Sean Bullock

Browser hacks – must have for all front-end developers — Mark Szymic

Front-end developers stop the IE drama and use this fine tool — iSands

CSS3 Selectors Module Part-3

This is the last blog in my tri-series on CSS3 Selectors Module. Please click on the link to read CSS3 Module Part – 1 and CSS3 Module Part 2.

Positional Selectors

:first-child – Selects every <p> element that is the first child of its parent

first-child Selector Example:

HTML

<p>This content is the first child of its parent (body).</p>
 <h4>Welcome to CSS3 Selectors Module</h4>
 <p>This content is not the first child of its parent.</p>
 <div class="targetAttr">
 <p>This content is the first child of its parent (div).</p>
 <p>This content is not the first child of its parent.</p>
 </div>

 CSS

.targetAttr {
 border-radius: 7px;
 border: 2px solid #f2f2f2;
 padding: 0px 10px;
 width:300px;
 margin:0px 0px;
 background:none;
 }
 p:first-child {background-color:yellow;}

 OUTPUT

:first-of-type – Selects every <p> element that is the first <p> element of its parent

first-of-type Selector Example:

HTML

<p>The first content.</p>
 <p>The second content.</p>
 <p>The third content.</p>
 <p>The fourth content.</p>
 <div class="targetAttr">
 <p>The first content.</p>
 <p>The second content.</p>
 <p>The third content.</p>
 <p>The fourth content.</p>
 </div>

 CSS

p:first-of-type {background:yellow;}

 OUTPUT

:last-child – Selects every <p> element that is the last child of its parent

 last-child Selector Example:

HTML

<p>This content is the first child of its parent.</p>
 <h1>Welcome to CSS3 Selectors Module</h1>
 <p>This content is not the last child of its parent.</p>
 <div class="targetAttr">
 <p>This content is not the last child of its parent.</p>
 <p>This content is the last child of its parent (div).</p>
 </div>
 <p>This content is the last child of its parent (body).</p>

 CSS

p:last-child {background:yellow;}

 OUTPUT

:last-of-type – Selects every <p> element that is the last <p> element of its parent

last-of-type Selector Example:

HTML

<p>The first content.</p>
 <p>The second content.</p>
 <div class="targetAttr">
 <p>The first content.</p>
 <p>The second content.</p>
 <p>The third content.</p>
 <p>The fourth content.</p>
 </div>
 <p>The third content.</p>
 <p>The fourth content.</p>

 CSS

p:last-of-type {background:yellow;}

 OUTPUT

:nth-child(n) – Selects every <p> element that is the second child of its parent

 a number: n is a counter and starts at 1

nth-child(n) Selector Example:

HTML

<p>The first content.</p>
 <p>The second content.</p>
 <div class="targetAttr">
 <p>The first content.</p>
 <p>The second content.</p>
 <p>The third content.</p>
 <p>The fourth content.</p>
 </div>
 <p>The third content.</p>
 <p>The fourth content.</p>

 CSS

p:last-of-type {background:yellow;}

 OUTPUT

:nth-child(n) – Selects every <p> element that is the second child of its parent

a number: n is a counter and starts at 1

nth-child(n) Selector Example:

HTML

<p>The first paragraph.</p>
 <p>The second paragraph.</p>
 <p>The third paragraph.</p>
 <p>The fourth paragraph.</p>
 <div class="targetAttr">
 <p>The first paragraph.</p>
 <p>The second paragraph.</p>
 <p>The third paragraph.</p>
 <p>The fourth paragraph.</p>
 </div>
 <h4>N is a counter and starts at 1</h4>
 <p>Selects every &lt;p&gt; element that is the second child of its parent</p>

 CSS

p:nth-child(2) {background:yellow;}

 OUTPUT

a keyword: Odd and even are keywords that can be used to match child elements whose index is odd or even (the index of the first child is 1).

Odd and Even Selector Example:

HTML

<p>The first paragraph.</p>
 <p>The second paragraph.</p>
 <p>The third paragraph.</p>
 <p>The fourth paragraph.</p>
 <p>The fifth paragraph.</p>
 <p>The sixth paragraph.</p>
 <h3>Odd and even are keywords that can be used to match child elements whose index is odd or even (the index of the first child is 1).</h3>

 CSS

p:nth-child(odd){background:yellow;}
 p:nth-child(even){background:cyan; color:white;}

 OUTPUT

a formula: Using a formula (an + b). Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.

nth-child(an+b) Selector Example:

HTML

<p>The first paragraph.</p>
 <p>The second paragraph.</p>
 <p>The third paragraph.</p>
 <p>The fourth paragraph.</p>
 <p>The fifth paragraph.</p>
 <p>The sixth paragraph.</p>
 <p>The seventh paragraph.</p>
 <p>The eight paragraph.</p>
 <p>The ninth paragraph.</p>

 CSS

p:nth-child(3n+3){background:Yellow;}

 OUTPUT

:nth-of-type(n) – Selects every <p> element that is the second <p> element of its parent

nth-of-type(2) Selector Example:

HTML

<p>The first paragraph.</p>
 <p>The second paragraph.</p>
 <p>The third paragraph.</p>
 <p>The fourth paragraph.</p>

 CSS

p:nth-of-type(2){background:Yellow;}

 OUTPUT

:only-child – Selects every <p> element that is the only child of its parent

only-child Selector Example:

HTML

<div><p>This is a first content.</p></div>
 <div><p>This is a paragraph.</p></div>
 <div><span>This is a span.</span><p>This is a paragraph.</p></div>

 CSS

p:only-child{background:Yellow;}

 OUTPUT

:only-of-type – Selects every <p> element that is the only <p> element of its parent

only-of-type Selector Example:

HTML

<div><p>This is a paragraph 1.</p></div>
 <div><p>This is a paragraph 2.</p><p>This is a paragraph 3.</p></div>
 <div>The :only-of-type selector matches every element that is the only child of its type, of its parent.</div>

 CSS

p:only-of-type{background:Yellow;}

 OUTPUT

:empty – Selects every <p> element that has no children (including text nodes) & :root – Selects the document’s root element

Empty and Root Selector Example:

HTML

<h4>The :empty selector matches every element that has no children (including text nodes).</h4>
 <p>The first paragraph.</p>
 <p>The second paragraph.</p>
 <p></p>
 <p>The fourth paragraph.</p>

 CSS

p:empty{width:100px; height:20px; background:red;}
 :root{background:light-dark;}

 OUTPUT

CSS3 Selectors Module Part-2

In continuation of my earlier blog on ‘CSS3 Selectors Module’ in this second part, I will explain the concepts of Combinators and Attribute Selectors.

Combinators

There are four different combinators in CSS3 selectors:

  • Descendant Selector(space)
  • Direct Child Selector(>)
  • Adjacent Sibling Selector(+)
  • General Sibling Selector(~)

Descendant Selector Example:

HTML
<p>The descendant selector matches all elements that are descendants of a specified element.</p>
 <p>The following example selects all <p> elements inside <div> elements.</p>
 <div>
 <p>Paragraph 1 in the Block Element.</p>
 <p>Paragraph 2 in the Block Element.</p>
 <section><p>Paragraph 3 in the Block Element.</p></section>
 <div><p>Paragraph 4 in the Block Element.</p></div>
 </div>
 <p>Paragraph 5 Not in an inside the DIV Element.</p>
 <p>Paragraph 6 Not in an inside the DIV Element.</p>
CSS
div p {background-color: Yellow;}
Output

Direct Child Selector Example:

HTML
<p>The child selector selects all elements that are the immediate children of a specified element.</p>
 <p>The following example selects all <p> elements that are immediate children of a <div> element.</p>
 <div class="classname">
 <p>Paragraph 1 in the Block Element.</p>
 <p>Paragraph 2 in the Block Element.</p>
 <section><p>Paragraph 3 in the Block Element.</p></section>
 <div><p>Paragraph 4 in the Block Element.</p></div>
 </div>
 <p>Paragraph 5. Not in an inside the div Element.</p>
 <p>Paragraph 6. Not in an inside the div Element.</p>
CSS
div.classname {border-radius:7px; background-color:#f2f2f2; padding:20px;
 width:500px;}
 div > p {background-color:Yellow;}
 Output

Adjacent Sibling Selector Example:

HTML
<p>The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.</p>
 <p>Sibling elements must have the same parent element, and "adjacent" means "immediately following".</p>
 <p>The following example selects all &lt;p&gt; elements that are placed immediately after &lt;div&gt; elements.</p>
 <div>
 <p>Content 1 in the Block Element.</p>
 <p>Content 2 in the Block Element.</p>
 </div>
 <p>Content 3. Not in a Block Element.</p>
 <p>Content 4. Not in a Block Element.</p>
 CSS
div + p {background-color:Yellow;}
 Output

General Sibling Selector Example:

HTML
<p>The general sibling selector selects all elements that are siblings of a specified element.</p>
 <p>The following example selects all <p> elements that are siblings of <div> elements</p>
 <div>
 <p>Content 1 in the Block Element.</p>
 <p>Content 2 in the Block Element.</p>
 </div>
 <p>Content 3. Not in a Block Element.</p>
 <p>Content 4. Not in a Block Element.</p>
 CSS
div ~ p {background-color:Yellow;}
 Output

Attribute Selectors

Select elements based on attributes

From elements attribute Example:

HTML
<div>
 <form action="index.html">
 <label for="fname">First Name</label>
 <input type="text" id="fname" name="firstname">
 <label for="lname">Description</label>
 <textarea name="message" rows="10" cols="50">Swachh Bharat Challenge is an initiative to share your experiences of Swachh Bharat Abhiyan and invite other people to accept the challenge and join hands in the Abhiyan. You can open up the challenge to a maximum of nine persons and similarly, each of these nine persons can also challenge nine more…this way the chain of activities would keep growing.</textarea>
 <label for="country">State</label>
 <select id="country" name="country">
 <option value="bangalore">Bangalore</option>
 <option value="delhi">Delhi</option>
 </select>
 <input type="button" value="Button">
 <input type="reset" value="Reset">
 <input type="submit" value="Submit">
 </form>
 </div>
CSS
div{border-radius:7px; background-color:#f2f2f2; padding: 20px; width:500px;}
 input[type=text], select, textarea {width:100%; padding:10px 10px; margin:8px 0;
 display:inline-block; border:1px solid #ccc; border-radius:5px;}
 input[type=button], input[type=submit], input[type=reset] {
 background-color:#4CAF50; border:none; color:white; border:none;
 padding:12px 32px; text-decoration:none; margin:4px 7px;
 cursor:pointer; border-radius:5px; width:30%;}
Output

[attribute=value] – Selects all elements with target=”_blank”

Attribute=value Example

HTML
<div class="targetAttr">
 <p>The link with target="_blank" gets a yellow background:</p>
 <a href="https://www.google.co.in/" target="_blank">Google.co.in</a>
 <a href="https://in.yahoo.com/">Yahoo.com</a>
 <a href="http://www.wikipedia.org" target="_top">Wikipedia.org</a>
 </div>
CSS
.targetAttr{border-radius:7px; border:2px solid #f2f2f2; padding:20px;
 width:600px; margin:50px 0px; background-color: #f2f2f2; font-size:20px;}
 a[target=_blank] {background-color: yellow;}
Output

[attribute~=value] – Selects all elements with a title attribute containing the word “flower”

attribute~=value Example :

HTML
<div class="targetAttr">
 <p>The [attribute~=value] selector is used to select elements with an attribute value containing a specified word.</p>
 <p>The image with the title attribute containing the word "flower" gets a yellow border.</p>
 <img src="1.jpg" title="klematis flower" width="160" height="160" alt="" />
 <img src="2.jpg" title="flowers" width="160" height="160" alt="" />
 <img src="3.jpg" title="landscape" width="160" height="160" alt="" />
 </div>
CSS
[title~=flower] {border: 5px solid yellow;}
Output

[attribute^=value] – Selects every <a> element whose href attribute value begins with “top”

attribute^=value Example:

HTML
<div class="targetAttr">
 <p>The [attribute^="value"] selector is used to select elements whose attribute value begins with a specified value.</p>
 <p>The following example selects all elements with a class attribute value that begins with "top":</p>
 <h1 class="top-header">Welcome to CSS3 Selectors</h1>
 <p class="top-text">Hi Guys</p>
 <p class="contenttop">Good afternoon</p>
 </div>
 CSS
[class^="top"] {background: yellow;}
 Output

[attribute$=value] – Selects every <a> element whose href attribute value ends with “test”

attribute$=value Example:

HTML
<div class="targetAttr">
 <p>The [attribute$="value"] selector is used to select elements whose attribute value ends with a specified value.</p>
 <p>The following example selects all elements with a class attribute value that ends with "test":</p>
 <p class="first_test">The first div element.</p>
 <p class="second">The second div element.</p>
 <p class="my-test">The third div element.</p>
 <p class="mytest">This is some text in a paragraph.</p>
 </div>
 CSS
[class$="test"]{background: yellow;}
 Output

:enabled – Selects every enabled <input> element

:disabled – Selects every disabled <input> element

Enabled and Disabled Example:

HTML
<div>
 First name: <input type="text" value="Enabled" enabled="enabled"><br>
 Last name: <input type="text" value="Disabled" disabled="disabled">
 </div>
 CSS
input[type=text]:enabled {background:Yellow;}
 input[type=text]:disabled {background: grey;}
 Output

Don’t miss the next blog in the series, `CSS3 Selectors – Module – Part 3′.

CSS3 Selectors Module Part-1

INTRODUCTION

A CSS selector is the part of a CSS rule-set that actually selects the content we want to style.

CSS Syntax :

CSS selectors are used to “find” (or select) HTML elements based on their element name, id, class, attribute, and more.

W3C Proposed Recommendation: http://www.w3.org/TR/css3-selectors/

BASIC SELECTORS:

  • H1 { } – The Element/Tag Selectors
  • P { } – The Element/Tag Selectors
  • H1,P { } – The Grouping Selectors
  • .class-name { } – The Class Selectors
  • #unique-id { } – The ID Selectors
  • * { } – The Universal Selectors

BASIC EXAMPLE:

HTML:
<h1>Heading Text</h1>
 <p>This is paragraph text.</p>
 <span class="class-name">This is CLASS Selector.</span>
 <div id="unique-id">This is ID Selector.</div>
 CSS:
h1{color:#F00}
 p{color:#00F}
 h1,p{border:1px solid red;}
 .class-name{background:red; color:white;}
 #unique-id{text-decoration:underline;}
OUTPUT:

PSEUDO-CLASS SELECTOR:

  • a:link { }
  • a:visited { }
  • a:hover { }
  • a:active { }

 PSEUDO-CLASS EXAMPLE:

HTML:
<p><b>
 <a href="https://www.google.co.in/" target="_blank">This is a link</a>
 </b></p>
 <p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
 <p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>
 CSS:
/* unvisited link */

a:link {color: red;}

/* visited link */

a:visited {color: green;}

/* mouse over link */

a:hover {color: hotpink;}

/* selected link */

a:active {color: blue;}

OUTPUT:

NEGATION PSEUDO-CLASS SELECTOR:

:not(selector) – selects every element that is not a <p> element

not(selector)

EXAMPLE:

HTML:
<h4>This is a heading</h4>
 <p>This is a paragraph.</p>
 <p>This is another paragraph.</p>
 <div>This is some text in a div element.</div>
 <a href="https://www.google.co.in/" target="_blank">Link to Google</a>
 CSS:
p{color: black;}
 :not(p){color: red;}
 OUTPUT:

PSEUDO ELEMENTS:

::first-letter – Selects the first letter of every <p> element

Note : single-colon CSS2 syntax (:first-letter) & double-colon CSS3

syntax (::first-letter)

FIRST-LETTER EXAMPLE:

HTML:
<h4>Pseudo-Elements</h4>
 <span>My name is Gourahari.</span>
 <p>I live in Bangalore.</p>
 <p>Welcome to Trigent Software.</p>
 <p>My best friend is Mickey.</p>
 <p>Note: The ::first-letter selector can only be used with block-level elements.</p>
 <p><b>Note:</b> For this selector to work in IE 5.5-8, you must specify the old, single-colon CSS2 syntax (:first-letter instead of ::first-letter).</p>
 CSS:
p::first-letter{font-size: 200%; color: purple;}
OUTPUT:

::first-line – Selects the first line of every <p> element

FIRST LINE EXAMPLE:

HTML:
<h4>Swachh Bharat Challenges</h4>
 <p>Swachh Bharat Challenge is an initiative to share your experiences of Swachh Bharat Abhiyan and invite other people to accept the challenge and join hands in the Abhiyan. You can open up the challenge to a maximum of nine persons and similarly, each of these nine persons can also challenge nine more…this way the chain of activities would keep growing.</p>
 <p>Note: The ::first-line selector can only be used with block-level elements.</p>
 CSS:
p::first-line{background-color: yellow;}
 OUTPUT:

::before – Insert something before the content of each <p> element

 BEFORE EXAMPLE:

HTML:
<p>My name is Donald</p>
 <p>I live in Bangalore</p>
 <p><b>Note:</b> For this selector to work in IE8, a DOCTYPE must be declared, and you must use the old, single-colon CSS2 syntax (:before instead of ::before).</p>
 CSS:
p::before{content: "Read this -"; background-color:Yellow; color:red;
 font-weight: bold;}
 OUTPUT:

::after – Insert something after the content of each <p> element

AFTER EXAMPLE:

HTML:
<p>My name is Donald</p>
 <p>I live in Bangalore</p>
 <p><b>Note:</b> For this selector to work in IE8, a DOCTYPE must be declared, and you must use the old, single-colon CSS2 syntax (:after instead of ::after)</p>
 CSS:
p::after{content: " - Remember this";background-color:Yellow;
 color:red; font-weight:bold;}
 OUTPUT:

Local & Session Storage in HTML5

With the help of HTML5, a website can store data up to 10MB size in the browser in `Local’ or `Session Storage’.

For dynamic websites, data will be huge and stored on the server side in Memcache or Page Caching, Sessions or Cookies. However, since Cookies & Sessions are limited and append all data into one string, it is difficult to store data in Cookies and Sessions.

Moreover, this method will delay the page load time, and some CPU process is required to process it.  Until now, websites were storing common data either in SESSIONS or COOKIES or static files coming from CDN. With the release of HTML5, we have got lots of new properties, attributes, async, local, sessions storage  and similar functionalities.

By using Local/Session Storage, we can store up to 10MB data in browser’s memory. Almost all modern browsers supports local/session storage. Difference between Local Storage and Session storage is on closing browser/tab, Session Storage will be removed whereas  Local Storage data will remain in the browser until the user physically deletes it or removes the same using removeItem option.

&lt;table&gt; &lt;caption&gt; &lt;abbr&gt;HTML5&lt;/abbr&gt; Storage support &lt;/caption&gt; &lt;thead&gt; &lt;tr&gt; &lt;th title="Internet Explorer"&gt;IE&lt;/th&gt; &lt;th title="Mozilla Firefox"&gt;Firefox&lt;/th&gt; &lt;th title="Apple Safari"&gt;Safari&lt;/th&gt; &lt;th title="Google Chrome"&gt;Chrome&lt;/th&gt; &lt;th&gt;Opera&lt;/th&gt; &lt;th&gt;iPhone&lt;/th&gt; &lt;th&gt;Android&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt;&lt;td&gt;8.0+&lt;/td&gt;&lt;td&gt;3.5+&lt;/td&gt;&lt;td&gt;4.0+&lt;/td&gt;&lt;td&gt;4.0+&lt;/td&gt;&lt;td&gt;10.5+&lt;/td&gt;&lt;td&gt;2.0+&lt;/td&gt;&lt;td&gt;2.0+ &lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;

Local Storage has three fantastic methods to set, get and delete the Local/Session Storage data from client’s browser.

How to Set data into Local Storage

To set data onto browser, HTML5 provides localStorage.setItem() Method.

<script>
 if(window.localStorage){
 try{
 window.localStorage.setItem(key, data );
 }catch(e){
 return false;
 }
 }
 </scirpt>

To explain briefly, in the above example, we are checking whether your browser supports for local storage or not. If, in case,  your browser supports, then we are setting data with the help of window.localStorage.setItem(key,data).

Here, the first parameter is key of the data and data is actual data that is to be stored in browser.

Example:

<script>
 var key = 'list-of-counties'
 var data = '[{"1":"US"},{"2":"UK"},{"3":"India"}]';
 if(window.localStorage){
 try{
 window.localStorage.setItem(key, data );
 }catch(e){
 return false;
 }
 }
 </scirpt>

In the above example, we are storing country list in browser. Country List is a  json data with is common for all page in the website. Once data is stored, we can verify whether data is set or not in the browser by looking at the browser.

For example, go to Browser’s console ( ctrl+f12 ) –> Under Resources –> Local Storage –> your site name –> look at your key.

If you found the data that means your browser is supporting Local Storage. Else try with latest version or modern browsers like chrome, firefox or IE8+

Apart from Objects, you can store any data in your local storage.

Reading/Accessing Data from Local Storage

Once data is set, now we need to read it from browser’s memory. For reading data, HTML5 Provides localStorage.getItem(key) Method. The following example shows how to retrive data from local storage.

<script>
 if(window.localStorage){
 try{
 var data = window.localStorage.getItem(key);
 return data;
 }catch(e){
 return false;
 }
 }
 </scirpt>

window.localStorage.getItem(key), key is the actual key on which we have set the data to store.

Delete or Remove Data from Local Storage

After setting and getting data from browser, if you feel that the data is useful any longer and decide to delete, then you can remove the same using localStorage.removeItem(key)

<script>
 if(window.localStorage){
 try{
 window.localStorage.removeItem(key);
 }catch(e){
 return false;
 }
 }
 </scirpt>

Detailed example of Local Storage and Session Storage

Suppose you want to set country list of data which is common throughout the website, you can make it as json data and set into local storage of your browser.

<script>

var key = ‘country-data’;
var data = ‘[{“1″:”US”},{“2″:”UK”},{“3″:”India”}]’;

setLocalStorageData(key,data);

var storedData = ”;

storedData = getLocalStorageData(key);

removeLocalStorageData(key);

function setLocalStorageData(key,data){
if(window.localStorage){
window.localStorage.setItem(key, data);
return true;
}
return false;
}

function getLocalStorageData(key){
return window.localStorage.getItem(key)
}

function removeLocalStorageData(key){
window.localStorage.removeItem(key)
}

</scirpt>

Note: Storing Data in Local/Session Storage is safe unless it’s not confidential data.

Understanding CSS3 – Part 3

In continuation of my blog CSS3 (Part 1 and Part 2), in this blog, i.e. `Understanding CSS3 (Part 3)’, I will elaborate on the theme of modules:

3D Transforms

Using with 3d transforms, we can move element to x-axis, y-axis and z-axis, The below example clearly specifies how the element will rotate.

The rotateX() Method

div {
 width: 300px;
 height: 50px;
 background-color: #abad48;
 border: 1px solid black;
 }

.myDiv1 {
-webkit-transform: rotateX(150deg); /* Safari */
transform: rotateX(150deg); /* Standard syntax */
}
<div>
This a normal div element.
</div>
<div id=”myDiv1″ class=”myDiv1″>
Using the matrix() method.
</div>

 The rotateY() Method:

The rotateY() method rotates an element around its Y-axis at a given degree:

div {
 width: 300px;
 height: 50px;
 background-color: #abad48;
 border: 1px solid black;
 }
 .myDiv1 {
 transform: rotateY(150deg);
 }
 <div>
 This a normal div element.
 </div>
 <div id="myDiv1" class="myDiv1">
 Using the matrix() method.
 </div>

 The rotateZ() Method

The rotateZ() method rotates an element around its Z-axis at a given degree:

div {
 width: 200px;
 height: 50px;
 background-color: #abad48;
 border: 1px solid black;
 margin-top:5%;
 }
 .myDiv1 {
 -webkit-transform: rotateZ(90deg); /* Safari */
 transform: rotateZ(90deg);
 }
 <div>
 This a normal div element.
 </div>
 <div id="myDiv1" class="myDiv1">
 Using the matrix() method.
 </div>

 Animations:

CSS3 animations allows animation of most HTML elements without using JavaScript or Flash! Animation is process of making shape changes and creating motions with elements.

To use CSS3 animation, you must first specify some keyframes for the animation.

Keyframes hold what styles the element will have at certain times.

@keyframes slide{
 0%{
 left:0;
 top:0;
 }
 50%{
 left:244px;
 top:100px;
 }
 100%{
 left:488px;
 top:0px;
 }
 }
 .stage{
 background:#eaeaed;
 border-radius:6px;
 height:150px;
 position:relative;
 min-width:538px;
 }
 .stage:hover .ball{
 animation: slide 2s linear;
 }
 .ball{
 background:#2db34a;
 border-radius:50%;
 height:50px;
 position:absolute;
 width:50px;
 }
 <div class=”stage”><figure class=”ball”></figure></div>

 Multiple Columns

Column Count

The column-count property specifies the number of columns an element should be divided into.

The following example will divide the text in the <div> element into 3 columns:

.newspaper {
 -webkit-column-count: 3; /* Chrome, Safari, Opera */
 -moz-column-count: 3; /* Firefox */
 column-count: 3;
 }
 <div class="newspaper">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>

 Column Rules

The column-rule-style property specifies the style of the rule between columns:

.newspaper {
 -webkit-column-count: 3; /* Chrome, Safari, Opera */
 -moz-column-count: 3; /* Firefox */
 column-count: 3;
 -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
 -moz-column-gap: 40px; /* Firefox */
 column-gap: 40px;
 -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
 -moz-column-rule-style: solid; /* Firefox */
 column-rule-style: solid;
 }
 <div class="newspaper">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</div>

 Box Sizing

The CSS3 box-sizing property allows us to include the padding and border in an element’s total width and height.

 .div1 {
 width: 300px;
 height: 40px;
 padding: 20px;
 border: 1px solid blue;
 }
 .div2 {
 width: 300px;
 height: 40px;
 padding: 20px;
 border: 1px solid red;
 box-sizing: border-box;
 }
 <div class="div1">TutorialsPoint.com</div></br>
 <div class="div2">TutorialsPoint.com</div>

 Media Query:

Instead of looking for a type of device, they look at the capability of the device.

Media queries can be used to check many things, such as:

  • width and height of the viewport
  • width and height of the device
  • orientation (is the tablet/phone in landscape or portrait mode?)
  • resolution

Using media queries are a popular technique for delivering a tailored style sheet to tablets, iPhone, and Androids.

/* Large Desktop*/
 @media(min-width: 1200px){
 .......
 }
 /* Portrait tablet to landscape and desktop */
 @media(min-width: 768px) and (max-width: 979px){
 .......
 }
 /* Landscape phone to portrait tablet */
 @media(max-width: 767px){
 .......
 }
 /* Landscape phones and down */
 @media(max-width: 480px){
 .......
 }

Understanding CSS3 – Part 2

As mentioned in my earlier blog, CSS3 is a simple mechanism for adding styles, for example, fonts, colors, spacing, etc. to web documents. It is a collaboration of CSS2 with some new specifications, which we can call as modules. Given below are a few more modules.

Shadows:

Shadow Effects

In CSS3 you can add shadow to text and elements.

Text-shadow:

CSS3 supported to add shadow effects to text.

Givenb below is an example to add shadow effects to text:

.shadow{
 height:20px;
 width:200px;
 float:left;
 }
 .h1 {
 text-shadow: 2px 2px;
 }
 .h2 {
 text-shadow: 2px 2px red;
 }
 .h3 {
 text-shadow: 2px 2px 5px red;
 }
 <h1 class="h1 shadow">Text Shadow</h1>
 <h1 class="h2 shadow">Text Shadow</h1>
 <h1 class="h3 shadow">Text Shadow</h1>

 Box Shadow

box-shadow property applies shadow to elements.

In its simplest use, specify the horizontal shadow and the vertical shadow:

 div {
 width: 300px;
 height: 30px;
 padding: 10px;
 background-color: orange;
 box-shadow: 10px 10px #444;
 color:#444;
 }
 <div>This is a div element with a box-shadow</div>

TEXT

CSS3 contains several extra features, which are added later on:

Text-overflow

The text-overflow property determines how overflowed content that is not displayed is signaled to users. The sample example of text overflow is shown as follows:

 p.text{
 white-space: nowrap;
 width: 200px;
 border: 1px solid #000000;
 overflow: hidden;
 }
 p.text1 {
 text-overflow: clip;
 }
 p.text2 {
 text-overflow: ellipsis;
 }
 b{
 color: #ad212d;
 }
 <div>
 <b>Original Text:</b>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
 <b>Text overflow:clip:</b>
 <p class="text1 text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
 <b>Text overflow:ellipsis</b>
 <p class="text2 text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
 </div>

Word Wrapping

In CSS3 word-wrap property allows long words able to be broken and wrap onto the next line.

If a word is too long to fit within an area, it expands outside:

.test {
 width: 183px;
 border: 1px solid #000000;
 word-wrap: break-word;
 }
 <p class="test"> Lorem ipsum dolor sit amet, consectetueradipiscingelit, sed diam nonummynibheuismodtinciduntutlaoreet dolore magna aliquam erat volutpat.Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

Word Breaking

The CSS3 word-break property specifies line breaking rules.

 .test{
 width: 183px;
 border: 1px solid #000000;
 }
 .test1 {
 word-break: keep-all;
 }
 .test2 {
 word-break: break-all;
 }
 <div>
 <p class="test test1"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
 <p class="test test2"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
 </div>

2D TRANSFORMATION

A transformation is an effect that lets an element change shape, size and position.

Translate()

The translate method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).

div {
 width: 300px;
 height: 75px;
 background-color: orange;
 border: 1px solid black;
 -ms-transform: translate(50px,100px); /* IE 9 */
 -webkit-transform: translate(50px,100px); /* Safari */
 transform: translate(50px,100px); /* Standard syntax */
 }
 <div>
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
 </div>

Rotate()

The rotate() method rotates an element clockwise or counter-clockwise according to a given degree:

div {
 width: 300px;
 height: 70px;
 background-color: yellow;
 border: 1px solid black;
 }
 .myDiv {
 -ms-transform: rotate(20deg); /* IE 9 */
 -webkit-transform: rotate(20deg); /* Safari */
 transform: rotate(20deg); /* Standard syntax */
 position: relative;
 top: 90px;
 left: 90px;
 }
 <div>
 This a normal div element.
 </div>
 <div class="myDiv">
 The rotate() method rotates an element clockwise or counter-clockwise. This div element is rotated clockwise 20 degrees.
 </div>

SCALE()

The scale() method increases or decreases the size of an element (according to the parameters given for the width and     height).

div {
 margin: 100px;
 width: 200px;
 height: 55px;
 background-color: orange;
 border: 1px solid black;
 -ms-transform: scale(2,3); /* IE 9 */
 -webkit-transform: scale(2,3); /* Safari */
 transform: scale(2,3); /* Standard syntax */
 }
 <div>
 This div element is two times of its original width, and three times of its original height.
 </div>

The skewX() Method

The skewX() method skews an element along the X-axis by the given angle.

div {
 width: 300px;
 height: 100px;
 background-color: orange;
 border: 1px solid black;
 }
 .myDiv{
 -ms-transform: skewX(20deg); /* IE 9 */
 -webkit-transform: skewX(20deg); /* Safari */
 transform: skewX(20deg); /* Standard syntax */
 }
 <div>
 This a normal div element.
 </div>
 <div class="mydiv">
 The rotate() method rotates an element clockwise or counter-clockwise. This div element is rotated clockwise 20 degrees.
 </div>

The skewY() Method

The skewY() method skews an element along the Y-axis by the given angle.

div {
 width: 300px;
 height: 100px;
 background-color: orange;
 border: 1px solid black;
 }
 .myDiv{
 -ms-transform: skewY(20deg); /* IE 9 */
 -webkit-transform: skewY(20deg); /* Safari */
 transform: skewY(20deg); /* Standard syntax */
 position: relative;
 top: 20px;
 }
 <div>
 This a normal div element.
 </div>
 <div class="mydiv">
 The rotate() method rotates an element clockwise or counter-clockwise. This div element is rotated clockwise 20 degrees.
 </div>

Don’t miss Part 3 of this blog series!

The Elements and Attributes You Should Avoid in HTML5

Elements you should avoid:

After the introduction of several new elements in HTML5, it is now time to talk about what you should be avoiding in HTML5.

Ever since CSS was invented, web developers have been always told to segregate design from content. Let CSS take care of the styles and HTML take care the structure and content of your page.

In HTML5, the life of the following elements have come to an end. They have no role to play because CSS has grabbed it all:

  • <basefont>
  • <big>
  • <center>
  • <font>
  • <strike>
  • <tt>
  • <u>

The following elements have nothing to do with styling but they are simply the bad guys in HTML coding because they have been blamed of “damaging” usability and accessibility:

  • <frame>
  • <frameset>
  • <noframes>

The following elements are not included in HTML5 because they have not been used often, created confusion, or their function can be handled by other elements:

  • <acronym> is gone, use <abbr> instead for abbreviations.
  • <applet> has been obsoleted in favor of object.
  • <isindex> usage can be replaced by usage of form controls.
  • <dir> has been obsoleted in favor of <ul>.
  • Finally the <noscript> element is only conforming in the HTML syntax. It is not included in the XML syntax as its usage relies on an HTML parser.

If you still insist on using these elements, you web page will not blow, and yet, the web browser will still be supporting it. However, the cost of doing this is – your page will not pass  HTML5 validation!

Attributes you should avoid:

In HTML5, none of the attributes should be used for styling purposes. The rule of the thumb is, styling should be taken care of by CSS.

What I mean by  “styling” is, attributes such as font size, color, border, and font family, etc. i.e. whatever is used for presentational purposes.

In the table below are listed the attributes that you should avoid using:

Attributes Elements
align caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead and tr.
alink, link, text and vlink body
background body
bgcolor table, tr, td, th and body
border table and object
cellpadding and cellspacing table
char and charoff col, colgroup, tbody, td, tfoot, th, thead and tr
clear br
compact dl, menu, ol and ul
frame table
frameborder iframe
height td and th
hspace and vspace img and object
marginheight and marginwidth iframe
noshade hr
nowrap td and th
rules table
scrolling iframe
size hr
type li, ol and ul

Understanding CSS3 – Part 1

CSS is a simple mechanism for adding styles, for example, fonts, colors, spacing, etc. to web documents. It is a collaboration of CSS2 with some new specifications, which we can call as modules.

Given below is a list of styles with explanations on how to add the same:

  1. Rounded Corners.
  2. Border Image.
  3. Multiple Background.
  4. Gradient
  5. Shadow
  6. Text
  7. 2D Transformation.
  8. 3D Transformation.
  9.  Animations
  10. Multiple Columns.
  11. Box Sizing.
  12. Media Query

1. ROUNDED CORNERS:

In CSS3  border-radius  property, you can give any element “rounded corners”.

CSS3 border-radius -Specify Each Corner.

The radius will be applied to all 4 corners.

All four corners are rounded equally.

One value – border-radius: 50px.

.rcorner {
 border-radius: 50px;
 background: #b53781;
 padding: 20px;
 width: 80px;
 height: 70px;
 }

<p id=”corner” class=”rcorner”> </p>

2. BORDER IMAGE:

 In CSS3 border-image property, you can set an image to be used as the border around an element.

.borderimg {
 border: 10px solid transparent;
 padding: 15px 25px;
 border-image: url(border.png);
 }

<div>
<p class=”borderimg”> Here, the middle sections of the image are repeated to create the border. </p>
</div>

3. MULTIPLE BACKGROUND:

CSS3 allows you to add multiple background images for an element, through the background-image property.

The different background images are separated by commas, and the images are stacked on top of each other, where the first image is closest to the viewer.

.multiple_bgimg {
 background-image: url(bg4.png), url(bg2.jpg);
 background-repeat: no-repeat, repeat;
 padding: 10px;
 color: #fff;
 }

<div id=”example1″>
<p> Lorem Ipsum Dolor </p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh </p>
<p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit </p>
</div>

4. GRADIENTS:

CSS3 gradients display smooth transitions between two or more specified colors.

Earlier, you had to use images for these effects. However, by using CSS3 gradients you can reduce download time and bandwidth usage. In addition, elements    with gradients look better when zoomed, because the gradient is generated by the browser.

CSS3 defines two types of gradients:

  1. Linear Gradients (goes down/up/left/right/diagonally).
  2. Radial Gradients (defined by their center)
  3. Linear Gradients:

Top to bottom

Linear gradients are used to arrange two or more colors in linear formats like top to bottom.

.grad1 {
 height: 100px;
 background: linear-gradient(pink, green);
 }

<div id=”grad1″ class=”grad1″> </div>

Left to right

Linear gradients are used to arrange two or more colors in linear formats like left to right.

.grad1 {
 height: 50px;
 background: linear-gradient(left, red, blue);
 width: 50% ;
 }

<div id=”grad1″ class=”grad1″> </div>

Diagonal

Diagonal starts at top left and right button.

.grad1 {
 height: 50px;
 background: linear-gradient(left top, red, bottom right, blue);
 width: 50%;
 }

Multi-color

The following example shows a linear gradient (from top to bottom) with multiple color:

.grad1 {
 height: 50px;
 background: (red, yellow, green);
 width: 50%;
 }

Radial Gradients

Radial gradients appears at center

.grad1 {
 height: 100px;
 width: 660px;
 background: -webkit-radial-gradient(red 5%, green 15%, pink 60%);
 background: -o-radial-gradient(red 5%, green 15%, pink 60%);
 background: -moz-radial-gradient(red 5%, green 15%, pink 60%);
 background: radial-gradient(red 5%, green 15%, pink 60%);
 width: 50%;
 }

Repeat Radial Gradients

.grad1 {
 height: 50px;
 width: 660px;
 background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%);
 background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);
 background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);
 background: repeating-radial-gradient(blue, yellow 10%, green 15%);
 }
To be continued… Don’t miss Part 2 and Part 3!

Optimizing Codes with Object Oriented Cascading Style Sheets

Object Oriented Cascading Style Sheet (OOCSS) ensures that your code is reusable, fast, maintainable, scalable and efficient.  OOCSS style sheets are easy to add and maintain and helps us to avoid duplicating our code. To achieve this, you need to add multiple classes to each element in your HTML in order to give it modular styles based on Skin, Structure, Container and Content.

Benefits of OOCSS:

  1. Faster
  2. Flexible
  3. Easy maintenance
  4. Less duplication of code
  5. Reuse of styles
  6. Improves site performance

How to start a project with OOCSS:

OOCSS is all about finding the style patterns that appear in our websites and creating multiple levels of styles through abstraction. Finding out where your content has the same margin, font, float or width will allow you to write less CSS each time by containing it in one class and thus ensuring reusability when necessary.

The two main principles of OOCSS are:

  1. Separate structure and skin.
  2. Separate container from content.

Separate Structure and Skin:

The structure of the page revolves around the elements’ size and positioning. Structure properties are generally invisible and the elements of a website have a visual aspect which is repeated in different contexts:

  1. Height
  2. Width
  3. Margin
  4. Padding
  5. Position
  6. Display
  7. Overflow etc.,

Skin properties are visual properties of already positioned elements. The Skin properties are:

  1. Color
  2. Font
  3. Shadow etc.,

This essentially means we must not mix structure/positioning properties with skin/styling properties on the same class. Thus, properties can be reused on a variety of elements, preventing property duplication in our CSS.

An example: buttons. A Classic CSS would be like this,

CSS:
.button {
display: inline-block; 
text-decoration:none;
border-radius:5px;
padding: 4px 10px; 
color: #FFF; 
text-align: center;
cursor: pointer;
background-color: #0070c0;
}

.button-primary{
display: inline-block; 
text-decoration:none;
border-radius:5px;
padding: 4px 10px; 
color: #FFF; 
text-align: center;
cursor: pointer;
background-color: #D9D9D9;
}

.button-success{
display: inline-block; 
text-decoration:none;
border-radius:5px;
padding: 4px 10px; 
color: #FFF; 
text-align: center;
cursor: pointer;
background-color: #449D44;
}
HTML:
<div> <a href=”#” class="button">Default</a> <a href=”#” class="button-primary">Primary</a> <a href=”#” class="button-success">Success</a> </div>

If you factor this CSS with OOCSS principles, you will get something more flexible:

CSS:
.button {     
display: inline-block;
text-decoration:none; 
border-radius:5px;
padding: 4px 10px; 
color: #333333; 
text-align: center;
cursor: pointer;
background-color: #D9D9D9;
}

.button-primary{
color: #FFF;
background-color: #0070c0;
}

.button-success{
color: #FFF;
background-color: #449D44;
}
HTML:
<div> <a href=#" class="button">Default</a> <a href="#" class="button button-primary">Primary</a> <a href="#" class="button button-success">Success</a> </div>

.button defines the generic properties -the “defaults” ones – for our buttons. If you override it, you come with new classes that you can combine to get the expected result.

The CSS Selectors and files SEPRATE STRUCTURE AND SKIN can be included or applied independently.

Separate Container from Content:

The Separate Container from Content requires developers to modify content using CSS class extension rather than context. The Container and Content are meant to break components’ dependency on their containers. Any object placed in another container will still look and behave the same.

CSS:
header h1{ 
font-family: calibri;
font-size: 2em; 
background-color:#F7E5E9;
color: #F44; 
} 

footer h1{ 
font-family: calibri;
font-size: 2em;
background-color:#F7E5E9;
color: #F44;
opacity: 0.7;
filter: alpha(opacity = 50); 
}
HTML:
<header> <h1> Separate Container and Content </h1> </header> <footer> <h1 class=”h1-size muted”> Footer</h1>

The elements I defined here are simply not re-usable. They directly rely on a specific container. But it is quite clear that some properties are not specific to this container.

CSS:
h1 { 
font-family: calibri; 
background-color:#F7E5E9; 
color: #F44; 
text-align:center; 
}

h1, .h1-size { 
font-size: 2em; 
} 

.muted { 
opacity: 0.7; 
background-color:#F7E5E9;             
filter: alpha(opacity= 50); 
}     

HTML:
<header> <h1> Separate Container and Content </h1> </header> <footer> <h1 class=”h1-size muted”> Footer</h1>

 UI Design and Style Guides:

To take this concept one step further, before we even receive or create a style guide we can start by designing sites in the same modular way that we want to be writing our CSS. To simplify, you are essentially writing the guide in small sections as you design it.

A style guide is great but only as long as the site design consistently reflects and adheres to it. This document can help designers and developers create consistent work that results in less code because we can all decide on common reusable styles and classes. The style guide serves as:

  • A tool for ensuring consistency across a product set
  • A way to get groups to work together
  • The repository for design guidelines and standards
  • A training aid for new members of the product team

Conclusion:

The main premise is to follow object-oriented programming paradigms in regards to code reuse. The goal of OOCSS is simple: to build optimized code that allows us to quickly and easily improve on it. Thinking “objects” is the kind of skill that will help you create re-usable objects and stop writing redundant code. It becomes easy to maintain code base and make modifications to existing UI without harming different parts of an application.

Best Practices for Responsive Web Design

As most of us already know, Responsive Web design (RWD) is an approach by which a website is rendered seamlessly when users switch from their respective desktops/ laptops to handheld devices (mobile or tablet). This is achieved by using flexible grid-based layout and media with intelligent use of CSS media queries.

Given below are some best practices to maximize the benefits of RWD:

  1. Navigation menus
    Navigation is one of the most important aspect of any website. On smaller screens, hiding the main navigation menu is a good approach.An icon, text or combination of both indicates the location of the menu.On smaller screens, the menu is displayed as a simple drop down menu, where the menu slides down and pushes the main content or is displayed as overlay covering the whole screen. If the menu items are more with multiple levels, then push menu is a good option.
  1. Large button links and clickable areas
    Large buttons improve usability. For example, in the announcement list, instead of having “Read more” link for each list item, it is better to make each announcement to block a link, so that the user can click anywhere.
  1. Font size
    The selected font should be readable and maintain the overall feel whether you scale or shrink it.The size ratio between headers and paragraph text should be well balanced.Include adequate contrast to the text, versus the background color and the color of links versus the rest of the site’s content.Also, have bigger fonts and avoid forcing the average user to zoom in.
  1. Use less images
    A recent trend has been to have gigantic screen spanning images, which increase the file size of a page. There should be a good balance between rich visuals and the overall page performance. Effects like background gradients and button hover states, can be achieved by pure Cascading Style Sheets (CSS). For mobiles, especially, this helps to load pages faster.Use fonts for your icons instead of creating images. They are scalable, have cleaner edges, load faster, and are good for retina displays. This optimization works great across devices and screens.
  1. Important information at the top in mobile
    For mobile devices, it is important to place information such as telephone numbers, contact info, ‘buy now’ call to actions etc. right on top. For example, on an e-commerce website, showing the shopping cart at the top, is a better option than placing it elsewhere on the page.
  1. Prioritize Content Differently
    When moving from larger screen displays to very small screens, different layout approaches are required. One of the approaches is to show important information in a section and hide less important portions of the section. Below is an illustration of the same content on a desktop and a mobile device.
  1. Right Reading Width
    Avoid lengthy text, because it is difficult to read. At the same time avoid very short text lengths, as this tends to break the rhythm of reading.  A common practice is to keep line lengths at about 60-75 characters as the line height also contributes to a good reading experience.
  1. Input Methods
    Desktop users use mouse/keyboard to navigate and enter information. But it is a very different experience for touch screen device users to input all information with their fingers. So make the form controls and button size bigger, and have larger clickable areas.
  1. Let content determine breakpoints
    An older approach in responsive design was to use device sizes to determine breakpoints – e.g. 320px (iPhone portrait), 480px (iPhone landscape), and so on. The problem with this approach is that the device landscape is constantly changing, and today’s breakpoint values are likely to get outdated quickly. A better approach is to adjust the breakpoints appropriately based on when the layout breaks.For example, if the navigation bar on your website has five items and this looks bad past a smaller width, then use that as a breakpoint.
  1. Test on Actual Devices for Usability Issues
    Ask some users to test the design on the actual devices for usability issues. Based on the test results make improvements or fix the issues in the design.