Pros and Cons of Background Video in Website

This is important to think of videos as backgrounds, not stories. Don’t try to explain what you do, simply set the stage. Limit the length of background videos to 15 or maximum 20 seconds at most, and then loop the video to start over. Make Professional videos, which look simple have a positive effect on your brand. Do not have sound auto-play. If you really want music or ambient noise (which is not recommend), allow users to turn it on themselves. Don’t over complicate. If you add video to your website, keep the rest simple. Video can be distracting, so confusing users further with non-intuitive navigation and other design elements can be overwhelming.

Pros:

1. Video is engaging. We are naturally drawn to moving images. They pull us into the website and, hopefully, encourage us to explore more. 
2. Videos can help convey your brand. In a split second, a video can set a mood or evoke a feeling, which is harder to do with a static image or via text. 
3. Boosts SEO- If your video is cross-posted on several sharing platforms; it can boost the SEO value of your website. The more views your video takes in, the more it helps increase your rankings on search engines, especially if your visitors find your video good enough to continue sharing it.

Cons: 

1. If your homepage doesn’t load quickly, visitors may get frustrated and go elsewhere. A well programmed website should load a video quickly and not make visitors wait while a “loading” wheel churns. However, if a user has a slow connection, they may find your video homepage slower to load.
2. Video backgrounds are inherently auto-playing — they play without the user clicking anything. But many mobile platforms (including iOS) and legacy browsers do not support auto-playing video. Thus, a backup option is required, such as a static image. 
3. Videos can be distracting. It’s important to think of these as backgrounds, not documentaries. Lengthy or highly detailed videos will compound load speed issues.

Browser Detection with Jquery

In this post, find JavaScript/jQuery code to detect various type and version of web browser. Below jQuery code gives you an idea about $.browser property.

For Chrome and Safari

if ($.browser.safari) {
    // code goes here
}
 
Select Safari 3
if ($.browser.safari && (navigator.appVersion.indexOf('3.') != -1)) {
    // code goes here
}
 
Select Safari 4
if ($.browser.safari && (navigator.appVersion.indexOf('4.') != -1)) {
   // code goes here
}
 
Select Chrome 1
if ($.browser.safari && (navigator.appVersion.indexOf('1.') != -1)) {
    // code goes here
}
 
Select Chrome 3
if ($.browser.safari && (navigator.appVersion.indexOf('3.') != -1)) {
    // code goes here
}

Select Chrome 13
if ($.browser.safari && (navigator.appVersion.indexOf('13.') != -1)) {
    // code goes here
}

Select Chrome 16
if ($.browser.safari && (navigator.appVersion.indexOf('16.') != -1)) {
   // code goes here
} 

For Firefox 

if ($.browser.mozilla) {

    // code goes here
}
 
Select Firefox 1.5.x to 2.x
if ($.browser.mozilla && $.browser.version.substr(0, 3) == '1.8') {
    // code goes here
}
 
Select Firefox under 3.x
if ($.browser.mozilla && $.browser.version < '1.9') {
    // code goes here
}
 
Select Firefox 3.0.x and above
if ($.browser.mozilla && $.browser.version.substr(0, 3) == '1.9') {
   // code goes here
}
 
Select just Firefox 2.0.x
if ($.browser.mozilla && $.browser.version == '1.8.1') {
   // code goes here
}
 
Select just Firefox 3.0.x
if ($.browser.mozilla && $.browser.version == '1.9') {
   // code goes here.
}
 
Select just Firefox 3.5.x
if ($.browser.mozilla && $.browser.version == '1.9.1') {
    // code goes here
}
 
Select just Firefox 3.6.x
if ($.browser.mozilla && $.browser.version == '1.9.2') {
    // code goes here
}
 
Select just Firefox 7.x
if ($.browser.mozilla && $.browser.version.substr(0, 1) == '7') {
    // code goes here
}
 
Select just Firefox 14.x
if ($.browser.mozilla && $.browser.version.substr(0, 2) == '14') {
    // code goes here
}  

For Opera

if ($.browser.opera) {
    // code goes here.
}
 
Select Opera 9.5 and above
if ($.browser.opera && $.browser.version >= '9.5') {
   // code goes here
}
 
Select just Opera 9.5
if ($.browser.opera && $.browser.version == '9.5') {
    // code goes here
}
 
Select just Opera 10
if ($.browser.opera && $.browser.version == '9.8') {
    // code goes here
}

For Internet Explorer (IE sucks)

if ($.browser.msie) {
    // code goes here
}
 
Select Internet Explorer above 6
if ($.browser.msie && $.browser.version > 6) {
    // code goes here
}
 
Select Internet Explorer 7 and below
if ($.browser.msie && $.browser.version <= 7) {
   // code goes here
}
 
Select just Internet Explorer 6
if ($.browser.msie && $.browser.version == '6.0') {
    // code goes here
}
 
Select just Internet Explorer 7
if ($.browser.msie && $.browser.version == '7.0') {
    // code goes here.
}
 
Select just Internet Explorer 8
if ($.browser.msie && $.browser.version == '8.0') {
    // code goes here
}
 
Select just Internet Explorer 9
if ($.browser.msie && $.browser.version == '9.0') {
    // code goes here.
}

Note: release of jQuery 1.9 $.browser feature was removed. But to support legacy code, they have released jQuery Migrate plugin to detect deprecated and removed features, or to restore old features for those sticky situations where you need old code to run with new jQuery. 

Placeholder attribute for IE Hack

HTML5 introduced the "placeholder" attribute on input elements, which allows to display a greyed-out default text. But Sadly the Internet Explorer, including IE 9 does not support it. I got a solution. Just try this.


if(navigator.appVersion.match(/MSIE [\d.]+/)){

    var placeholder = $('input[type=text]').attr('placeholder');
    var placeholderText = placeholder;

    $('input[type=text]').val(placeholderText);
    $('input[type=text]').blur(function(){
        $(this).val() == '' ? $(this).val(placeholderText) : false;
    });

    $('input[type=text]').focus(function(){
        $(this).val() == placeholderText ? $(this).val('') : false;
    });
}

Specifying a Webpage Icon for Web Clip.

The apple-touch-icon.png is a file used for a web page icon on the Apple iPhone, iPod Touch, and iPad. When someone bookmarks your web page or adds your web page to their home screen this icon is used. If this file is not found these Apple products will use the screen shot of the web page, which often looks like no more than a white square.

This file should be saved as a .png, have dimensions of  76 x 76 Or,  120 x 120 Or, 152 x152
To specify multiple icons for different device resolutions. For example, support both iPhone and iPad devices. Add a sizes attribute to each link element as follows:

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png"> 

for more detail on Apple site.

Color Combination Tools

Below we’ve compiled a list containing 20 Color Combination Tools for Designers. You can use this list to chose the tool that better fits your needs or that you’re most comfortable using.

Kuler

The web-hosted application for generating color themes that can inspire any project. No matter what you’re creating, with Kuler you can experiment quickly with color variations and browse thousands of themes from the Kuler community.

Color Scheme Designer

Color Scheme Designer has been around for some time and was recently re-written and designed. It currently has great color space conversions, a preview pane, enhanced scheme creation, and a permanent URL of the schemes you create. It’s almost as if it were a hosting site for color schemes.

Contrast-A: Find Accessible Color Combinations

This application allows you to experiment with various color combinations, review your colors accessibility, and create color palettes.

Infohound Color Schemer

Infohound Color Schemer helps you find and test color schemes for whatever the reason may be. Features included allow you to configure the saturation and brightness, set the value for hue, and have your colors automatically matched for you.

Check My Color

This tool lets you check the foreground and background of color combinations and gives you the option to determine whether the color variation is suitable for individuals with vision impairments.

Toucan Color Palettes

Toucan allows you to choose up to 20 colors per palette using color association rules or an uploaded image, collaborate with other users, and import images from Flickr, Picasa, and Facebook.

Hex Color Scheme Generator

The Hex Color Scheme Generator is a great tool to use if you want to create a beautiful and logical color scheme. It acts as an “advisor” for colors. You simply tell it which colors you’d like to use, and the app will generate the best results that match.

Pictaculous

Pictaculous lets you upload your image and analyze its colors. This is ideal for the designer who creates several graphics at a time and would like to distinguish the looks without having to manually choose the best combining colors every time.

Color Combinations and Color Schemes

This website gives you the option to generate limitless color combinations and schemes. If you already know at least one of the colors you plan on using, this site will take care of the rest. This is good for testing out colors in your code when you’re not sure what they are. I personally use this app on a regular basis.

Daily Colorscheme

Daily Color Scheme serves its users a new color scheme every single day of the year. This can help you discover new color combinations that you hadn’t thought of before, also a great source for color inspiration.

Color Palette Software

This is an advanced color palette tool that lets you create beautiful color schemes and custom themes. To begin working with colors you’ll have a scratch pad at your disposal. Before you begin using this app, make sure you try the scratch pad, it’s a feature that allows you to store all of the colors you’re working with for later use. You’ll also have a photo tool to extract colors, and an advanced color picker as well as a color theory wheel to give you the right type of inspiration.

ColorExplorer

ColorExplorer takes working with digital colors to the next level. You can get right down to work with a colorful toolbox that lets you quickly and easily create, manage, and explore several color palettes.

Kolur

Kolur is a simple yet, effective color application that lets you browse color palettes. The color combinations and schemes displayed within their gallery go further than the standard 3 color “rule”, it’s unique and leaves you open with several possibilities per combination.

Color Hunter

Color Hunter allows you to upload your images and view the different colors that it contains. You can also browse through their current color schemes.

Gray Bit

GrayBit is an online testing tool created to convert an entire web-page into the grey-scale so that you’re able to visually recognize certain contrasts between different elements in your layout.

ColorZilla

ColorZilla was designed for Firefox, it gives you an advanced eyedropper, a helpful color picker, a useful palette viewer and other tools all within the reach of your browser.

ColourMod

ColourMod was originally released as a web-based DHTML Dynamic Colour Picker. With the advancement and popularity of the Mac interface, ColourMod can now be found in your Dock once you’ve downloaded it. You’ll be able to examine colors on your desktop, websites, graphics, applications, and more!

Color Grab

ColourGrab lets you type in the URL of any image online and this application will tell which are the most useful and best used colors for that specific image. You can link to your project images that are hosted online and veiw which are the best and most used colors within the images. Great for custom logo design.

ColorMunki

ColorMunki is an all-in-one color app that gives you complete color control of your color creation tools. You’re able to find, choose, and compare several different colors.

Color Wheel Color Calculator

The Sessions educational Color Calculator is an interactive color wheel that allows any designer to select RGB, or CMYK colors for the creation of useful colors schemes. Sessions also claims to have the fastest color tool on the web.

Test it out and lets us know what you liked and disliked about this app and any of the others as well!

Fixed header/footer issue on iOS device

When you scroll the page and dismiss the keyboard while the page still scrolls, the header does not return to its fixed position. If you tap a link or button, the header shows up somewhere in the (vertical) middle of the screen and only returns to its fixed position after manually scrolling.

Solution:

if( /iPhone|iPod|iPad/i.test(navigator.userAgent) ) {
    $(document).on('focus', 'input, textarea', function()
    {
       $('header').css("position", 'absolute');
       $('footer').css("position", 'absolute');
      
    });
   
    $(document).on('blur', 'input, textarea', function()
    {
         $('header').css("position", 'fixed');
         $('footer').css("position", 'fixed');
       
    });
}

The above "unfixes" the header/footer while an input field is focused.

CSS3 Media Query for IE7 and IE8

Normally IE5 to IE8 do not support CSS3 Media Query. But at least IE8 should support for CSS3 Media Query and that is very important for cross-browser responsive web design. Here I will tell you how you can solve the CSS3 Media Query issues for IE. This tutorial will helps you to create a dynamic resolution dependent layout with web standards in mind.

Today I got a great jQuery plugin Link name css3-mediaqueries. It is very easy to use.

How to use?

Download jQuery plugin form Here and include downloaded script just before </body> like

<script src="js/css3-mediaqueries.js"></script>
Or you can use following way to include the script.

<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]--> 

Then write the media query in style sheet and check it in IE. It will work nicely with IE8, IE7 Even more older version IE6 or IE5

Notes:

It doesn’t work on @import’ed stylesheets Write media query with following way

@media screen and (min-width: 980px) {
/* CSS Document */
}

Typography Tools

Typetester

The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.

CSS Type Set

 

Font Tester is a free online font comparison tool. It allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them. It is very useful for web developers who are looking for just the right font/style/color to use in their pages.

Font Tester

 

Font Tester is a free online font comparison tool. dIt allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them. It is very useful for web developers who are looking for just the right font/style/color to use in their pages.

CSS Code generator for text

 

A very simple and useful tool for generating CSS styles.

Serif Font Identification Guide

 

Serif Font Identification Guide is a very clever and useful visual font identification tool.

Identifont

 

Identifont has become the largest independent directory of digital fonts on the Internet. It provides a range of features to help you locate fonts or find information about fonts:

CSS-Typoset Matrix

 

Matrix to calculate the font size and line spacing in em and px

Referance :  smashingapps

CSS Hack Target to Safari & Chrome

Problem Statement:

It is inevitable that there will be situations where you need a CSS rule to target a specific browser. This hack targets Safari and Chrome (webkit browsers) and works with Safari 5.1.2 and Chrome 17.0.963.56 version.

Dependencies:

A webkit browser (Safari or Chrome)



/**
* This hack targets the Webkit browser engine 
* which includes Safari and Chrome.  
*/

 @media screen and (-webkit-min-device-pixel-ratio:0) {

/** Code goes here..... **/
 div.foo { width: 100px; height: 100px; border: 1px solid red; } 

}

Different viewport meta for iphone and ipad

I found two simple solutions to set different viewport meta for different devices with jQuery. This work for iPad, iPhone or any other device to for that matter.

The first solution for changing the viewport per device. This method uses the width of the device to change the meta data.

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, 

user-scalable=no" /> 

<script>

if ($(window).width() < 600) { 

     $('meta[name=viewport]').attr('content','initial-scale=0.54,

     maximum-scale=0.54, user-scalable=no'); 

}

</script>

The second method is to use the “User agent” tag, to check what kind of device it is. This method of Changing the viewport is not as precis due to different resolutions on the iPad or iPhone based on the model.

<!-- in head -->  <meta id="viewport" name='viewport'> 

<script>      

function(doc) {

var viewport = document.getElementById('viewport'); 

if ( navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) {

   doc.getElementById("viewport").setAttribute("content", "initial-scale=0.3");          

 } 

else if ( navigator.userAgent.match(/iPad/i) ) {

   doc.getElementById("viewport").setAttribute("content", "initial-scale=0.7");          

 }      

}(document)); 

</script>

Flexible Grid Tools For Responsive Websites

Here, we are presenting 44 flexible grid tools that will help you in creating responsive websites. Here is the full collection after the jump. Enjoy!

Gridpak
Responsive Web Design tool for creating grids by Erskine Design.

The Grid
It’s a 12-column flexible grid that can scale out to an arbitrary size (defined by the max-width of the row) that’s also easily nested, so you can build out complicated layouts without creating a lot of custom elements.

Golden Grid System
A grid system for responsive web design. Includes folding columns, elastic gutters, a zoomable baseline grid, and a delightful grid overlay script.

Susy
The web is a responsive place, from your lithe & lively development process to your end-user’s super-tablet-multi-magic-lap-phone. You need grids that are powerful yet custom, reliable yet responsive.

Columnal CSS Grid System
The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. Columnal is an elastic grid, while some code inspiration (and the idea for subcolumns) are taken from 960.gs

Semantic Grid System
Set column and gutter widths, choose the number of columns, and switch between pixels and percentages. All without any .grid_x classes in your markup. Oh, and did we mention it’s responsive?

Responsive Calculator
Just a simple calculator to help turn your PSD pixel perfection into the start of your responsive website.

Adapt
Adapt.js is a lightweight (842 bytes minified) JavaScript file that determines which CSS file to load before the browser renders a page. If the browser tilts or resizes, Adapt.js simply checks its width, and serves only the CSS that is needed, when it is needed.

Gridless
Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

Simple Grid
Responsive. Infinite nesting. One class per element. Simple.

Base Framework
A super simple, responsive framework designed to work for mobile devices, tablets, netbooks and desktop computers.

Bourbon Neat
A lightweight semantic grid framework for Sass and Bourbon.

Kube CSS Framework
Minimalistic and sufficient for everything, adaptive and responsive. Revolutionary flexible grid and beautiful typography. Absolute freedom with no imposed styling.

One% CSS Grid
One% CSS Grid is a 12 column fluid CSS grid system. It’s been designed as a base for building responsive web layouts easily, quickly and with minimum effort. You don’t have to take care of resizing and rearanging your layout for each platform separatelly. One% CSS Grid will do all this for you.

RWD Grid
rwdgrid is just another Grid system based on popular 960grid , which is responsive and ranges from mobile, tablet, laptops and wide screen displays. Naming convention of this grid system is similar to 960 grid system, where underscore is replaced by hyphen (increases readabilty).rwdgrid is having different Grid system made for 1200px+ Displays, 960px+ Displays, 720px+ Displays and Mobile screens.

Responsify
Responsify is a browser based tool, which allows you to create your own responsive template. Think of it as a foundation for you to build upon. You can customise the grid to suit your content, rather than trying to make the content fit the grid.

Simple Grid
Simple Grid was created for developers who need a barebones grid. Simple Grid works well with 1140px layouts but easily adapts to any size of layout. With fluid columns, Simple Grid is responsive down to mobile.

Toast CSS Framework
Toast is a CSS framework made as simple as it can be, but no simpler. A plain-English responsive grid makes simple layouts a breeze, and with box-sizing you can add padding and borders to the grid, without breaking a single thing.

Ivory
IVORY can easily adapt to any size screen from phones to TVs. It offers 4 different width layouts 1200px, 1140px, 1024px & 960px. You can define your own width also.

Responsive Aeo
Convention over configuration, just twelve columns,less code to learn means less bugs to solve.

Gumby
Gumby 2 is built with the power of Sass. Sass is a powerful CSS preprocessor which allows us to develop Gumby itself with much more speed — and gives you new tools to quickly customize and build on top of the Gumby Framework.

Skeleton
Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

1080 GS
The 1080 Grid System expands upon Nathan Smith’s 960 Grid System by simply adding an additional 120 pixels while utilizing the same margins. Thus, anyone who has ever used the 960 Grid System to design can easily do so with the 1080 Grid System.

960 GS
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

The Grid System
The ultimate resource in grid systems.

978 GS
978 is a grid layout system that uses 12 columns at 54px, with 30px gutters. This comes out to a total of 978px, which uses up most of the space on a 1024×768 monitor.

Grid System Generator
The grid system generator will create custom grid systems in valid css / xhtml for rapid prototyping, development and production environments.

Responsive Grid System
The Responsive Grid System isn’t a framework. It’s not a boilerplate either. It’s a quick, easy & flexible way to create a responsive web site.

Mueller Grid System
MUELLER is a modular grid system for responsive/adaptive and non–responsive layouts, based on Compass. You have full control over column width, gutter width, baseline grid and media–queries.

Variable Grid System
The variable grid system is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System.

34 Responsive Grid System
34Grid is a Responsive Grid System based on “equally distributed columns” layout basis. In contrast to other great grid systems (@see bottom of page), 34Grid provides equally distributed columns for each row. (and also column complements for inequal distributions)

ZEN GRIDS
A responsive grid system built with the power of Sass.

LessFramework 4
Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

Fluid Grids
A CSS Framework for Rapid Interactive Prototyping.

Flurid
A cross-browser CSS grid framework that doesn’t hide pixels in margins!

Gridset
Designing grids with Gridset is as easy as dragging guides in Photoshop or Fireworks. Gridset provides whatever you need: PNGs, a comprehensive cheat sheet and CSS.

Tiny Fluid Grid
The happy & awesome way to build fluid grid based websites.

Style Tiles
Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.

Responsivepx
Responsivepx – find that tricky breakpoint.

Multi-Device Layout Patterns
Through fluid grids and media query adjustments, responsive design enables Web page layouts to adapt to a variety of screen sizes.

Responsive Web Design Sketch Sheets

Responsive Design Test Bookmarklet

Screenqueri

Proportional Grids

referance : smashingapps