Boilerplate CSS Media Queries

Media Queries are now becoming quite common practice in web design. They allow you to change the CSS of the different elements on your web page depending on the size of the screen the visitor currently can see.

Below is a media query boilerplate you can use to change the design of your depending on if the user is using an iPad,iPhone or other smart phones. This snippet even allows you to change the design if the device is landscape or portrait.

/* Smartphones (portrait and landscape) ———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ———– */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ———– */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ———– */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ———– */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ———– */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

JSON Object with integer values as key attributes

Using JSON object selection to paint the output based on descending key values.

JSON Object:

var popularObj= {
“89”:”animation”,
“71”:”apple”,
“64”:”barbara beery”,
“48”:”video”,
“39”:”cheese sticks”,
“29”:”games”,
“28”:”bbq pork sticks”,
“27”:”asian chicken tenders”,
“25”:”bake”,
“24”:”banana”
};

Problem:
The requirement was to paint only the values in descending order as they are the popular searches within the website. Whether we use for in loop or jquery each construct which does the same thing if the variable is an object, our results were varying across browsers namely Google chrome. The reason being in chrome, the key values were seen as array index instead of object key properties. The key values here were treated as indexes (integer indexes) and were painted in reverse order.

In Firefox and IE, we will get

“animation apple barbara beery video cheese sticks games bbq pork sticks asian chicken tenders bake banana”

and in chrome

“banana bake asian chicken tenders bbq pork sticks games cheese sticks video barbara beery apple animation”

Solution:
Convert the object into array, reverse it for chrome browser and then the finally load the dom object.

Note: In case the key was a text then the order of rendering is same across the browsers.

jQuery .on() and .off () Methods

New Event API

The new .on() and .off() methods provides ways of attaching and removing event handlers to the currently selected set of elements in the jQuery object. $(el).on () gives the developers an unified way of binding events for any event types, direct and delegated events. It also allows you to bind more than one events at the same time by passing an object .

Syntax:
$(elements).on(events [, selector] [, data] , handler);
$(elements).off([ events ] [, selector] [, handler]);

// An example of binding a click event in before version 1.7 and version 1.7 is illustrated below:
$(“a#vikas”).click(Handler); // Click event before jQuery 1.7
$(“a#vikas”).bind(“click”, Handler); // Binding click event before jQuery 1.7
$(“a#vikas”).on(“click”, Handler); // Click event in jQuery 1.7

// Similar example for .delegate() and .undelegate() methods is shown below:
$(‘.container’).delegate(‘a.vikas, ‘click’, Handler);
$(‘.container’).undelegate(‘a.vikas, ‘click’, Handler);

//Above code can be replaced by the following code in the version 1.7
$(‘.container’).on(‘click’, ‘a.vikas, Handler);
$(‘.container’).off(‘click’, ‘a.vikas, Handler);

Reference:
http://api.jquery.com/on
http://api.jquery.com/off

HTML5 Reset Stylesheet

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

body {
line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}

nav ul {
list-style:none;
}

blockquote, q {
quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content:”;
content:none;
}

a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}

/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}

del {
text-decoration: line-through;
}

abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}

table {
border-collapse:collapse;
border-spacing:0;
}

/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}

input, select {
vertical-align:middle;
}

Reference: http://code.google.com/p/html5resetcss/downloads/list

How to add icons using CSS Attribute Selector?

CSS Attribute Selector
CSS Attribute selectors are very powerful giving you many options to control styles of different elements e.g. you can add an icon based on the href attribute of the a tag to let the user know whether link points to an image, pdf, doc file etc.

Supported Browsers
IE7/IE8/IE9/Mozilla/Safari/Opera/Chrome.

CSS Code
a[href$=’doc’]
{
padding:5px 0 5px 30px;
background:url(doc_icon.png) no-repeat left center;
font:normal 14px arial;
line-height:32px;
}

HTML Code
<a href=”example.doc”>Doc File</a>

Essential Firefox Add-ons for Web Developers

Firefox has some cool add-ons which make the job of website designers much easier. These add-ons are definitely going to improve your work-flow and enhance your overall internet browsing experience. Don’t miss this chance to work quicker and better!

Firebug
Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
http://addons.mozilla.org/en-US/firefox/addon/1843

Web Developer
The Web Developer extension adds a menu and a toolbar with various web developer tools.
http://addons.mozilla.org/en-US/firefox/addon/60

ColorZilla
Advanced Eyedropper, Color Picker, Palette Viewer and other colorful goodies for your Firefox.
https://addons.mozilla.org/en-US/firefox/addon/271

FireShot
FireShot is an advanced screen capture add-on for Firefox. In addition to giving you the ability to capture an entire web page, FireShot also allows you to add add graphics and notes directly to your screen captures.
http://addons.mozilla.org/en-US/firefox/addon/5648

Codetech
Get the feel of Dreamweaver in a Firefox extension. Edit your documents right next to your web pages as you surf.
https://addons.mozilla.org/en-US/firefox/addon/1002

CSS Validator
Validates a page using the W3C CSS Validator.
http://addons.mozilla.org/en-US/firefox/addon/2289

HTML Validator

HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing.
https://addons.mozilla.org/en-US/firefox/addon/249

W3C Offline Page validator
Validates the source of a HTML/XHTML page via the W3C Markup Validation Service using the direct-input form.
https://addons.mozilla.org/en-US/firefox/addon/6006

Greasemonkey
Allows you to customize the way a webpage displays using small bits of JavaScript.
https://addons.mozilla.org/en-US/firefox/addon/748

GridFox
Draws a grid on top of a website. This is useful for checking designs that are supposed to follow a grid-based layout.
https://addons.mozilla.org/en-US/firefox/addon/4904

HttpFox
HttpFox monitors and analyzes all incoming and outgoing HTTP traffic between the browser and the web servers.
https://addons.mozilla.org/en-US/firefox/addon/6647

CSSViewer
A simple CSS property viewer.
http://addons.mozilla.org/en-US/firefox/addon/2104

IE NetRenderer

If you are like me and design your sites for Firefox then this is a great tool for you. IE NetRenderer will create you an image of how the website looks in IE 5.5, 6, 7 and 8 so you can get an idea of whether or not it looks right in IE.
http://addons.mozilla.org/en-US/firefox/addon/6455

Foxy SEO Tool
Foxy SEO Tool offers tools for search engine optimization (SEO), web traffic and page analysis for webmasters and web professionals.
https://addons.mozilla.org/en-US/firefox/addon/9440

Basic Tips for SEO

  1. Use Correct Doctype
  2. Use Semantic code while htmlizing your website.
  3. Use Meta Content and Meta Keywords
  4. Use unique page titles
  5. Use SEO friendly page name or URL
  6. Use Alt tags for Images
  7. Use Heading Tags (e.g. H1, H2)
  8. Use Valid HTML and CSS Code (Make your code W3C Standard)
  9. Use Div based coding and avoid using Tables
  10. Make a Detailed Sitemap
  11. Use Breadcrumb
  12. Use Footer links
  13. Use Optimized images and code to make your web site load fast
  14. Use External JavaScript and CSS files
  15. Use a meaningful and helpful 404 error page