Friday 26 April 2013
Facebook StumbleUpon Twitter Google+ Pin It

Fridaygram: Transparency Report, billions of bugs, calming doodle

Author PhotoBy Scott Knaster, Google Developers Blog Editor

The Google Transparency Report is designed to point out government censorship, requests to Google for data, and other details about our information services. The newest report, just out this week, shows that government requests for content removal have reached a new high level, with more than 2200 requests received in the second half of last year.

Government removal requests are probably the best known part of the Transparency Report, but there’s plenty of other fascinating and useful data. For example, you can see information about removal requests for specific URLs from copyright owners, or read about the legal process that takes place when a government organization or court requests information about a user. You can learn a lot by spending some time with the Transparency Report.

If you’re on the U. S. East Coast this spring and summer, you won’t need a report to tell you that massive numbers of cicadas are emerging from their underground homes to breed, fill the skies, annoy countless humans, last a few weeks, then die (and annoy even more humans who have to clean them up). This year’s bunch are Magicicada septendecim, or periodical cicadas with a 17-year life cycle. So we can look forward to a similar event in 2030.

Finally, if you haven’t already played with the Earth Day Doodle from last Monday, consider taking a few minutes this weekend to enjoy it. You might find yourself mesmerized by the tranquil scene (cicadas not included).


Fridaygram is mostly about fun and informative stuff that’s not related to development, but we seriously want to congratulate Googlers Peter Norvig and Arun Majumdar on their election to the American Academy of Arts and Sciences. Arun runs Google’s energy strategy as vice president of energy, and Peter is our director of research, although he’s also known for his whimsical take on presentations and technology.

Thursday 25 April 2013
Facebook StumbleUpon Twitter Google+ Pin It

Speed up your sites with PageSpeed for Nginx

Author Photo
By Jeff Kaufman, Software Engineer, Make the Web Faster Team

When we released mod_pagespeed in 2010, we gave webmasters a way to speed up their sites without needing to become web performance optimization experts. As an Apache module, however, it was unavailable to sites running Nginx, the popular high performing open source web server that powers many large web sites. Today that changes: we're releasing PageSpeed Beta for Nginx, aka ngx_pagespeed.

Running as a module inside Nginx, ngx_pagespeed rewrites your webpages to make them faster for your users. This includes compressing images, minifying CSS and JavaScript, extending cache lifetimes, and many other web performance best practices. All of mod_pagespeed's optimization filters are now available to Nginx users.

ngx_pagespeed logo
After three months of alpha testing on hundreds of sites, ngx_pagespeed has proven its ability to serve production traffic. It's ready for beta, and it's ready for you to start using it on your site.

MaxCDN, a content delivery network provider, recently published a blog post on their experience testing ngx_pagespeed: “With PageSpeed enabled, we shaved 1.57 seconds from our average page load, dropped our bounce rate by 1%, and our exit percentage by 2.5%. In sum, we squeezed out extra performance with nothing but a few extra lines in our nginx config files... We are continuing to test the module with the PageSpeed team, and our goal is to make it available across our CDN and to all of our customers – stay tuned!”

ZippyKid, a popular WordPress hosting provider, is also one of the early beta testers of ngx_pagespeed: “PageSpeed for ZippyKid is the world’s first WordPress optimization service powered by ngx_pagespeed, designed to automatically apply web performance best practices to deliver fast WordPress sites. Our benchmarks indicate that PageSpeed for ZippyKid will deliver up to a 75% reduction in page sizes and a 50% improvement in page rendering speeds.”

Development of ngx_pagespeed is open source, with contributions by developers from Google, Taobao, We-Amp, and many other individual volunteers. Thanks everyone for helping us reach the Beta milestone!

To start using ngx_pagespeed, follow the installation instructions on GitHub.


Jeff Kaufman works on PageSpeed, an open-source server module that helps make the web faster, and is interested in experiment measurement. He also plays for contra dances, organizes other dances, and blogs about dancing, giving, and tech.

Posted by Scott Knaster, Editor

Wednesday 24 April 2013
Facebook StumbleUpon Twitter Google+ Pin It

Learn the Dart language and libraries with these 11 short videos

Author PhotoBy Seth Ladd, Developer Advocate

Sometimes, you only have 5 minutes. Luckily, with the Dart Tips series of short video tutorials, that's all you need to start learning the new Dart language and libraries. In these videos, I show off code samples and examples across the various language features of Dart.

For example, here's a quick demo of the various types of constructors in Dart:



You can check out all the videos, or jump to the topic that most interests you:
  1. A simple Dart script
  2. Runtime modes
  3. Variables
  4. Strings, numbers, booleans, oh my!
  5. Collections in Dart
  6. Functions are fun, Pt 1
  7. Functions are fun, Pt 2
  8. Control flow statements
  9. Exceptions
  10. Classes: setters & getters
  11. Classes: Constructors
We hope you enjoy these videos about Dart. If you have questions or comments about the videos, or Dart, please join us on the Dart mailing list and on Google+. As we say on Dart Tips, stay sharp!


Seth Ladd is a Developer Advocate on Dart. He's a web engineer, book author, a conference organizer, and loves a game of badminton.

Posted by Scott Knaster, Editor

Monday 22 April 2013
Facebook StumbleUpon Twitter Google+ Pin It

A new kind of summer job: open source coding with Google Summer of Code

By Stephanie Taylor, Open Source team

Cross-posted from the Official Google Blog

If you’re a university student with CS chops looking to earn real-world experience this summer, consider writing code for a cool open source project with the Google Summer of Code program.


Over the past eight years more than 6,000 students have “graduated” from this global program, working with almost 400 different open source projects. Students who are accepted into the program will put the skills they have learned in university to good use by working on an actual software project over the summer. Students are paired with mentors to help address technical questions and concerns throughout the course of the project. With the knowledge and hands-on experience students gain during the summer they strengthen their future employment opportunities in fields related to their academic pursuits. Best of all, more source code is created and released for the use and benefit of all.

Interested students can submit proposals on the website starting now through Friday, May 3 at 12:00pm PDT. Get started by reviewing the ideas pages of the 177 open source projects in this year’s program, and decide which projects you’re interested in. Because Google Summer of Code has a limited number of spots for students, writing a great project proposal is essential to being selected to the program. Be sure to check out the Student Manual for advice.

For ongoing information throughout the application period and beyond, see the Google Open Source blog, join our Summer of Code mailing lists or join us on Internet relay chat at #gsoc on Freenode.

Good luck to all the open source coders out there, and remember to submit your proposals early—you only have until May 3 to apply!


Written by Stephanie Taylor, Open Source team

Posted by Scott Knaster, Editor

Thursday 18 April 2013
Facebook StumbleUpon Twitter Google+ Pin It

PageSpeed Service makes mobile sites faster

Author Photo
By Ram Ramani, Engineering Manager

PageSpeed Service (PSS) is an online service to speed up the rendering of your web pages by rewriting and serving them through Google. While PSS’s optimization techniques benefit most platforms and browsers, today I’d like to focus on some of the PSS rewriters that are especially effective on mobile web pages. PageSpeed Service optimizes the web pages in such a way that users can start viewing and interacting with your pages as soon as possible.



Prioritize Critical CSS: To avoid page reflows, modern browsers do not render pages until the CSS is downloaded and parsed. These CSS files are often tens of KBs because they include all the styles needed for the entire site. These blocking requests are especially bad on mobile devices, where network round trip times are high. The Prioritize Critical CSS rewriter speeds up rendering by identifying the minimal CSS required to render that page and including it in the HTML file. This not only saves an extra round trip to download additional files but also reduces the CPU consumed by the browser. Finally, a reference to the original CSS file is included at the end of the page to lazy-load the non-critical CSS.

Defer JavaScript: The HTML specification requires the browser to stop, download, and execute each synchronous JavaScript file before proceeding to build and render the page - this requirement can significantly slow down rendering. PSS circumvents this behavior by rewriting the HTML to defer execution of all JavaScript until after the page is first rendered. This benefits pages that are mostly rendered via HTML markup rather than JavaScript.

Optimize Images: Mobile screens are almost always smaller than their desktop counterparts. Large, high quality images translate to excessive bytes on the wire, slowing down page loads. PSS can resize images on the server to fit required dimensions and re-compress them to the optimal format, without perceptible visual loss. For very large images above the fold, PSS can also inline a low quality preview image for initial rendering. Once the rest of the page content loads, it is replaced by the original image, creating a seamless experience. Furthermore, images below the fold can be lazy-loaded, which prevents them from competing with the rest of the page load.

PageSpeed Service includes several rewriters that speed up the rendering of web pages. Using PageSpeed Service, the mobile pages of TopNewsToday and Net1News are now 61% faster and 68% faster respectively. Alex Tsvetanov of TopNews Today says, “With Google PageSpeed Service, we increased our unique visitors and total pageviews by 100%, while reducing our bounce rate by 30%”. Massimo Romanello, CEO of Net1News says, "Thanks to Google PageSpeed Service, we have been able to reach 200,000 unique daily visitors with the same existing infrastructure and have made our site one of the quickest in the news sector".

PageSpeed takes just a few minutes to set up and requires no code changes on your site. Check out how much PageSpeed can speed up your site. I encourage you to try out these features by signing up for PageSpeed Service and letting us know what you think at page-speed-service-discuss@googlegroups.com.


Ram Ramani is an Engineering Manager on the Make the Web Faster Team in Mountain View. He is a believer in "Faster is better".

Posted by Scott Knaster, Editor

Friday 12 April 2013
Facebook StumbleUpon Twitter Google+ Pin It

Fridaygram: fiber marches on, your brain on music, Earth from orbit

Author Photo
By Scott Knaster, Google Developers Blog Editor

Just about two years ago, we said that Kansas City would be the first place to get very high speed Internet access from the Google Fiber project. This week we announced that Austin, Texas will be the next location for Google Fiber. Like Kansas City, customers in Austin will be able to get gigabit Internet and Google Fiber TV service. Many schools, hospitals, and other public buildings in Austin will get gigabit Internet at no charge.



If you live in Austin or Kansas City, and you want to find out more, take a look at the Google Fiber website. Or maybe you’ll want to plan to move to one of those cities.

Speaking of moving, the next time you’re moved by music, you might be interested to know what’s going on in your brain. Recent research shows that when people like a new song, the nucleus accumbens becomes active, while other parts of the brain work on pattern-matching and emotional connections. The more complex the activity among these various brain regions, the more the brain's owner likes a song, according to the research. Scientists are hoping to use this work to learn more about how we process all kinds of sounds, not just cool new tunes.

Finally, take some time this weekend to watch this amazing NASA video of Earth from orbit. It’s part of NASA’s Earth month, which includes a bunch of other images of our favorite planet that are also fun to look at. It’s sure to light up your brain.


With all its interplanetary travel, it’s nice of NASA to have a month just for us earthlings. And here on the blog, we’re happy to have Fridaygrams, which allow us to depart temporarily from developer world and just feature some random, nerdy, science-y stuff instead.

Tuesday 9 April 2013
Facebook StumbleUpon Twitter Google+ Pin It

Auto Load and Refresh Div every 10 Seconds with jQuery



Have you seen this Twitter Search and Facebook shows most recent tweets/posts count from the database every 10 seconds on top of the page. I had developed like this with jQuery and Ajax. It's simple just 5 lines of code


Example 1

Index.html
Contains javascript and HTML code. Take a look at load("record_cound.php")
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js
"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load_tweets').load('record_count.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds

<body>
<div id="load_tweets"> </div>
</body>

</script>
-->

record_count.php
Just printing "9lessons | programming" every 10 seconds
<?php
echo "9lessons | Programming blog..............";
?>

Example 2

index.php
Contains PHP code you have to pass the search box value twitter.com/search?q="some thing" to $search_word in facebook pass the user id or user session value.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js
"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load_tweets').load('record_count.php?q=<?php echo $search_word; ?>').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds

<body>
<div id="load_tweets"> </div>
</body>

</script>

record_count.php
Counting tweets/posts from the database.
<?php
$search_word=$_GET['q'];
$sql = mysql_query("Select id form Messages where message
LIKE '%$search_word%'");
$record_count=mysql_num_rows($sql);
//Display count.........
echo $record_count;
?>


-By Parthiv Patel
Parthiv Patel
Bhaishri Info Solution
Sr. PHP Developer
Limdi Chowk, AT PO. Nar, Di. Anand
Nar, Gujarat
388150
India
pparthiv2412@gmail.com
7383343029
DOB: 12/24/1986

Monday 8 April 2013
Facebook StumbleUpon Twitter Google+ Pin It

File Upload Progress Bar with Jquery and PHP

In this post I had developed few lines of code using PHP APC library, it is very simple getting the server file upload process every few second and increasing the bar color using jquery css property. 

To run this script you have to install PHP apc library extension or for PHP 5.4 not required, just follow the steps to enable the extension. For web page design we implemented with bootstrap CSS library for any information check my previous post Bootstrap Tutorial

Windows APC Installation
Follow this link Click Here
In php.ini include apc.rfc1867 = on

Linuk APC Installation
Follow this Link Click Here
In php.ini include apc.rfc1867 = on
php.ini located in /etc/php.ini

get_progress.php
Contains PHP code it identifies file upload status from server process.
<?php
session_start();
error_reporting(0);
/*
// For PHP 5.4 users
$progress_key = ini_get("session.upload_progress.prefix")."uploadImage"; // uploadImage is a Form name
$current = $_SESSION[$progress_key]["bytes_processed"];
$total = $_SESSION[$progress_key]["content_length"];
echo $current < $total ? ceil($current / $total * 100) : 100;
*/
// For PHP 5.2+ php_apc.dll or php_apc.so holder
if(isset($_GET['progress_key']) and !empty($_GET['progress_key'])){
$status = apc_fetch('upload_'.$_GET['progress_key']);
    echo $status['current']/$status['total']*100;
exit;
}
?>

index.php
General form file upload with PHP. You have to include validation rules, please check my previous post for help.
<?php
$uiq = uniqid();
$image_folder = "uploads/";
$uploaded = false;

if(isset($_POST['upload_image'])){
if($_FILES['userImage']['error'] == 0 ){
$up = move_uploaded_file($_FILES['userImage']['tmp_name'], $image_folder.$_FILES['userImage']['name']);
if($up){
$uploaded = true;
}
}
}
?>
<form name="uploadImage" id="uploadImage" enctype="multipart/form-data" action="index.php?progress=<?php echo($uiq)?>" method="post" class="well">
<label>Upload File</label>
<input type="file" name="userImage" id="userImage" />
<span class="badge badge-info" style="display:none;">0%</span>
<input type="submit" class="btn btn-success" name="upload_image" id="upload_image" value="UPLOAD FILE" />
<div class="progress" style="display:none;"><div class="bar" style="width:0%;"></div></div>
</form>

JavaScript File
Contains simple javascript implemented with Jquery properties getting server file process every few seconds.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="application/javascript">
$(document).ready(function(){
var randIDS = '<?php echo $uiq?>';
// Add Hidden Field
var hidden = $("<input>");
hidden.attr({
name:"APC_UPLOAD_PROGRESS",
id:"progress_key",
type:"hidden",
value:randIDS
});
$("#uploadImage").prepend(hidden);
$("#uploadImage").submit(function(e){

var p = $(this);
p.attr('target','tmpForm');

// creating iframe
if($("#tmpForm").length == 0){
var frame = $("<iframe>");
frame.attr({
name:'tmpForm',
id:'tmpForm',
action:'about:blank',
border:0
}).css('display','none');
p.after(frame);
}
// Start file upload
$.get("get_progress.php", {progress_key:randIDS, rand:Math.random()},
function(data){
var uploaded = parseInt(data);
if(uploaded == 100){
$(".progress, .badge").hide();
clearInterval(loadLoader);
}
else if(uploaded < 100)
{
$(".progress, .badge").show();
$(".badge").text(uploaded+"%");
var cWidth = $(".bar").css('width', uploaded+"%");
}
if(uploaded < 100)
var loader = setInterval(loadLoader,2000);
});

var loadLoader = function(){
$.get("get_progress.php", {progress_key:randIDS, rand:Math.random()}, function(data)
{
var uploaded = parseInt(data);
if(uploaded == 100){
$(".progress, .badge").hide();
parent.location.href="index.php?success";
}
else if(uploaded < 100)
{
$(".progress, .badge").show();
$(".badge").text(uploaded+"%");
var cWidth = $(".bar").css('width', uploaded+"%");
}
});
}
});});
</script>

-By Parthiv Patel
Parthiv Patel
Bhaishri Info Solution
Sr. PHP Developer
Limdi Chowk, AT PO. Nar, Di. Anand
Nar, Gujarat
388150
India
pparthiv2412@gmail.com
7383343029
DOB: 12/24/1986

Multiple File Drag and Drop Upload using HTML5 and Jquery

Are you looking for Drag and Drop multiple file upload using HTML5. Just take a look at this post, I had implemented this system with using jquery and PHP that uploads multiple files into server. This script helps you to enrich your web applications upload system. It works with all modern browsers try live demo and drop files.

Multiple File Drag and Drop Upload this will work in modern browsers like Crome, Firefox and Safari, File uploads happening through ajax

for this I implemented with Form Data and File Reader javascript API.

Requirements

- Jquery (tested with 1.7+)
- HTML 5

How to use

Just include Jquery library and multiupload.js files available in download script.

Javascript Code

All config parameters are required. If you want to allow other files formats, add in valid files variable.
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/multiupload.js"></script>
<script type="text/javascript">
var config = {
// Valid file formats
support : "image/jpg,image/png,image/bmp,image/jpeg,image/gif",
form: "demoFiler", // Form ID
dragArea: "dragAndDropFiles", // Upload Area ID
uploadUrl: "upload.php" // Server side file url
}
//Initiate file uploader.
$(document).ready(function()
{
initMultiUploader(config);
});
</script>

upload.php

Simple PHP code uploading files from client mechanic to server location uploads folder.
if($_SERVER['REQUEST_METHOD'] == "POST")
{
if(move_uploaded_file($_FILES['file']['tmp_name'], "uploads/".$_FILES['file']['name']))
{
echo($_POST['index']); // to validate
}
exit;
}

HTML5 Code

HTML5 drag and drop form.
<div id="dragAndDropFiles" class="uploadArea">
<h1>Drop Images Here</h1>
</div>
<form name="demoFiler" id="demoFiler" enctype="multipart/form-data">
<input type="file" name="multiUpload" id="multiUpload" multiple />
<input type="submit" name="submitHandler" id="submitHandler" value="Upload" />
</form>
<div class="progressBar">
<div class="status"></div>
</div>

-By Parthiv Patel
Parthiv Patel
Bhaishri Info Solution
Sr. PHP Developer
Limdi Chowk, AT PO. Nar, Di. Anand
Nar, Gujarat
388150
India
pparthiv2412@gmail.com
7383343029
DOB: 12/24/1986

Simple Drop Down Menu with Jquery and CSS

This post is very basic level Jquery and CSS implementation. I want to explain how to design simple drop down menu  with CSS, HTML and Jquery. This system helps you to minimise the menus list. Just take a quick look at this post very few lines of code, use it and enrich your web projects. 



HTML Code
Simple HTML code
<div class="dropdown">
<a class="account" >My Account</a>

<div class="submenu">
<ul class="root">
<li ><a href="#Dashboard" >Dashboard</a></li>
<li ><a href="#Profile" >Profile</a></li>
<li ><a href="#settings">Settings</a></li>
<li ><a href="#feedback">Send Feedback</a></li>
</ul>
</div>

</div>

JavaScript
Contains javascipt code. $(".account").click(function(){}- account is the class name of the My Account anchor tag. Using $(this).attr('id') calling id value of the anchor tag and based on condition showing .submenu div box and the same time $(this).attr('id', '1') adding id value too.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
"></script>;
<script type="text/javascript" >
$(document).ready(function()
{

$(".account").click(function()
{
var X=$(this).attr('id');
if(X==1)
{
$(".submenu").hide();
$(this).attr('id', '0');
}
else
{
$(".submenu").show();
$(this).attr('id', '1');
}

});

//Mouse click on sub menu
$(".submenu").mouseup(function()
{
return false
});

//Mouse click on my account link
$(".account").mouseup(function()
{
return false
});


//Document Click
$(document).mouseup(function()
{
$(".submenu").hide();
$(".account").attr('id', '');
});
});
</script>
Document click on document $(document).mouseup(function() hiding the .submenu

CSS Code
.dropdown
{
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 17px;
text-align:left;
}
.submenu
{
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.dropdown li a
{
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
}

.dropdown li a:hover
{
background:#155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account 
{
font-size: 11px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(icons/arrow.png) 116px 17px no-repeat;
cursor:pointer;
}
.root
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}
-By Parthiv Patel
Parthiv Patel
Bhaishri Info Solution
Sr. PHP Developer
Limdi Chowk, AT PO. Nar, Di. Anand
Nar, Gujarat
388150
India
pparthiv2412@gmail.com
7383343029
DOB: 12/24/1986

Jquery Photo Zoom Plugin

Introducing a new jQuery PhotoZoom plugin, it helps you to view bigger images on mouse over component, this is very useful for media related web applications. You can customize the PhotoZoom container based on your web page design. Very easy to implement just include the plugin using script tag and give required selector.

The Basic Setup
Include the jQuery and PhotoZoom plugin libraries into your document using script tag.
<script src="jquery.js"></script>
<script  src="photoZoom.min.js"> </script>
<script>
$(document).ready(function()
{
$('body').photoZoom();
});
</script>
//HTML Code
<body>
<img src='one.jpg'/>
<img src='two.jpg'/>
......
......
</body>

You can customize container design by modifying CSS elements.
$("body").photoZoom(
{
zoomStyle : {
"border":"1px solid #ccc",
"background-color":"#fff",
"box-shadow":"0 0 5px #888"
}
});

Here you can reuse onMouseOver and onMouseOut events.
$("body").photoZoom(
{
onMouseOver : function(currentImage){
// do something
},
onMouseOut : function(currentImage){
// do something
}
});
-By Parthiv Patel
Parthiv Patel
Bhaishri Info Solution
Sr. PHP Developer
Limdi Chowk, AT PO. Nar, Di. Anand
Nar, Gujarat
388150
India
pparthiv2412@gmail.com
7383343029
DOB: 12/24/1986

Responsive Web Design using CSS3

Smartphone revolution brings new features to the web development, it is time to change your website design into a responsive design instead of maintaining a separate mobile version . Responsive design will automatically adjust itself based on the screen size of the media devices. This post explain you how to use CSS 3 @media property and working with Internet Explorer using Modernizr.

Step 1
Web layout divided into three horizontal parts are Hearder, Main and Footer. Here Header div divided into  two horizontal parts such as Logo and Nav and the same way Main div divided into Article and Sidebar.

HTML Code
<div id="header">
1 Header

<div id="logo">logo</div>
<div id="nav">links</div>
</div>

<div id="main">
2 Main

<div id="article">article</div>
<div id="sidebar">sidebar</div>
</div>

<div id="footer">
3 Footer
</div>

Wireframe

CSS
*{margin:0px;padding:0px}
#header
{
padding:20px;
overflow:auto;
}
#main
{
padding:10px;
}
#footer
{
padding:20px;
clear:both
}
#article,#sidebar
{
min-height:250px;margin-bottom:20px;overflow:auto
}

Step 2
Now working with an unorder list <ul> tag.
<div id="nav">
<ul>
<li>link</li>
<li>link</li>
<li>link</li>
....
....
</ul>
</div>


CSS
ul
{
list-style:none;
width:100%
}
li
{
padding:4px;
margin-bottom:5px;
background-color:#ffffcc;
text-align:center;
color:#00000
}

Step 3 - @media 768px
Working with screen media resolution minimum width at 768px

Wireframe @media 768px

CSS @media 768px
@media only screen and (min-width: 768px){

#article
{
float:left;
width:68%;
}
#sidebar
{
float:right;
width:30%;
}
#logo
{
float:left;
width:10%;
}
#nav
{
float:right;
width:80%;
}

}

Step 4 - @media 1140px
Working with screen media resolution minimum width at 1140px

Wireframe @media 1140px

CSS @media 1140px
@media only screen and (min-width: 1140px) {

#main
{
padding:20px 40px 20px 40px;
}

}

Step 5 - @media 480px
Working with Nav bar list media resolution minimum width at 480px. This is applicable for screen media resolution higher than 480px.

@media only screen and (min-width: 480px){

ul
{
float:left;
}
li
{
float:left;
width:16%;
padding:4px;
margin-right:8px
}

}

Modernizr
Modernizr is a JavaScript library that detects the availability of native implementations for next-generation Web Technologies. These technologies are new features that stem from the ongoing HTML5 and CSS3 specifications.
Responsive Web Design using CSS3

HTML Code
For implementing lower version browser like Internet Explorer 7 and 8, you just include modernizr.min.js after style sheet inside header tag. download link.
<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7">
<![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8">
<![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<title>Responsive Design with CSS</title>
//Meta tag for devices
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css"> //Style Sheet
<script src="modernizr.min.js"></script>
</head>
<body>

<div id="header">

<div id="logo">Logo</div>
<div id="nav">

<ul>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>

</div>

</div>

<div id="main">
<div id="article">Content Here</div>
<div id="sidebar">sidebar</div>
</div>

<div id="footer">
Footer
</div>

<body>
</html>

Now this code works fine with Internet Explorer lower version.

Note: Modernizer doesn't support inline CSS.

style.css
Final CSS

*{margin:0px;padding:0px}
#header
{
padding:20px;
overflow:auto;
}
#main
{
padding:10px;
}
#footer
{
padding:20px;
clear:both
}
#article,#sidebar
{
min-height:250px;margin-bottom:20px;overflow:auto
}

ul
{
list-style:none;
width:100%
}
li
{
padding:4px;
margin-bottom:5px;
background-color:#ffffcc;
text-align:center;
color:#00000
}

@media only screen and (min-width: 480px){

ul
{
float:left;
}
li
{
float:left;
width:16%;
padding:4px;
margin-right:8px
}

}

@media only screen and (min-width: 768px){

#article
{
float:left;
width:68%;
}
#sidebar
{
float:right;
width:30%;
}
#logo
{
float:left;
width:10%;
}
#nav
{
float:right;
width:80%;
}

}

@media only screen and (min-width: 1140px) {

#main
{
padding:20px 40px 20px 40px;
}

}

Note: Modernizer doesn't support inline CSS.


-By Parthiv Patel
Parthiv Patel
Bhaishri Info Solution
Sr. PHP Developer
Limdi Chowk, AT PO. Nar, Di. Anand
Nar, Gujarat
388150
India
pparthiv2412@gmail.com
7383343029
DOB: 12/24/1986