Visit this link »

Visit this link »

TinyPNG will make your web page load faster. I used it few times and was pleased with results.

Visit this link »

In this Build talk, famous designer Jason Santa Maria teaches us to look at typefaces with a discerning eye, different approaches to typographic planning, how typography impacts the act of reading, and how to choose and combine appropriate typefaces from an aesthetic and technical point of view. A must-see video for all web designers.

Also don’t forget to check other videos from Build talk on Vimeo.

Visit this link »

Visit this link »

Source » Demo »

Let’s start with the markup.

To keep semantic code our menu is organized as a simple unordered list:

Our list items will only be displaying images (with CSS sprite method) but we do not want to... Read more→]]>

In this short tutorial we are going to build a nice and eye-catching animated navigation menu with the help of jQuery. We will need hoverIntent and BackgroundPosition jQuery plugins, as well as sprite image for our menu items.

Source » Demo »

Let’s start with the markup.

The Markup

To keep semantic code our menu is organized as a simple unordered list:

<ul>
  <li id="articles"><a href="#"><span>Articles</span></a></li>
  <li id="events"><a href="#"><span>Events</span></a></li>
  <li id="shop"><a href="#"><span>Shop</span></a></li>
  <li id="about"><a href="#"><span>About</span></a></li>
  <li id="contact"><a href="#"><span>Contact</span></a></li>
</ul>

Our list items will only be displaying images (with CSS sprite method) but we do not want to leave them blank because of search engines. So we add a span inside the anchor tag of each list item. We will hide those spans form the user’s view in our stylesheet. We also assign an id to each list item for later use in CSS and jQuery.

The CSS

We will use CSS sprite method for our menu items.

We load a single background image for all of our menu items and then give individual ones their own coordinates. The id that we assigned to each list item earlier allows us to target each item individually.

ul { list-style: none; margin: 0 auto; }
ul li a { display: block; height: 42px; background: url(../images/nav.png) 0 0 no-repeat; }
#articles a { background-position: 0 0; }
#events a { background-position: 0 -42px; }
#shop a { background-position:0 -84px; }
#about a { background-position:0 -126px; }
#contact a { background-position:0 -168px; }

Finally, let’s add some jQuery magic.

The jQuery

First, we include the latest version of jQuery library and necessary plugins in our html document:

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.hoverIntent.minified.js"></script> 
<script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>

hoverIntent jQuery plugin attempts to determine the user’s intent. It was derived and works like jQuery’s built-in hover. However, instead of immediately calling the onMouseOver function, it waits until the user’s mouse slows down enough before making the call. Thus it delays or prevents the accidental firing of animations.

The other jQuery plugin, BackgroundPosition, adds the ability to do background-position animations since animating multi-value properties like background-position is not supported in jQuery by default.

Next when the document is loaded we call hoverIntent method on our menu items. As with jQuery built-in hover, we need to define two functions. First will execute when the mouse pointer enters the element and the second when the mouse pointer leaves the element.

When the mouse pointer enters menu item we animate the horizontal position of its background image to the left. We repeat animation for several times to create a nice bouncing effect. When the mouse pointer leaves menu item we return its background image to the original position and again we repeat animation for several times to achieve a bouncing effect.

$(document).ready(function(){
  $('li').hoverIntent(
    function(){
      navitem = $(this);
      if (navitem.attr('id')==='articles'){ypos1=0;}
      else if (navitem.attr('id')==='events'){ypos1=-42;}
      else if (navitem.attr('id')==='shop'){ypos1=-84;}
      else if (navitem.attr('id')==='about'){ypos1=-126;}
      else {ypos1=-168;}
      navitem.children('a').stop().animate(
      {backgroundPosition:'-150px '+ypos1+'px'}, 220, 
      function(){
        navitem.children('a').animate( 
        {backgroundPosition:'-137px '+ypos1+'px'}, 64, 
        function(){
          navitem.children('a').animate( 
          {backgroundPosition:'-140px '+ypos1+'px'}, 32);
        });
      });
    }, 
    function(){
      navitem2 = $(this);
      if (navitem2.attr('id')==='articles'){ypos2=0;}
      else if (navitem2.attr('id')==='events'){ypos2=-42;}
      else if (navitem2.attr('id')==='shop'){ypos2=-84;}
      else if (navitem2.attr('id')==='about'){ypos2=-126;}
      else {ypos2=-168;}
      navitem2.children('a').stop().animate( 
      {backgroundPosition:'6px '+ypos2+'px'}, 220, 
      function(){
        navitem2.children('a').animate( 
        {backgroundPosition:'-3px '+ypos2+'px'}, 64, 
        function(){
          navitem2.children('a').animate( 
          {backgroundPosition:'0 '+ypos2+'px'}, 32);
        });
      });
    }
  );
});

By this point our animated navigation menu is finished. Feel free to modify it according to your needs and use it to spice up your own websites. :)

Follow us on Twitter, or subscribe to MazeofMinds RSS Feed for more tutorials and posts.

Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.

Response JS is a lightweight jQuery plugin that gives web designers tools for building performance-optimized, mobile-first responsive websites. It provides semantic ways to dynamically swap code blocks based on breakpoints and serve images (or other media)... Read more→]]> In this post you will find useful frameworks and plugins which will help you to build responsive websites faster.

jQuery Plugins

Blueberry

Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.

Response JS

Response JS is a lightweight jQuery plugin that gives web designers tools for building performance-optimized, mobile-first responsive websites. It provides semantic ways to dynamically swap code blocks based on breakpoints and serve images (or other media) progressively via HTML5 data attributes. Its object methods give developers hooks for triggering responsive actions and booleans for testing responsive properties.

Fittext.js

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

FitVids.js

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

Templates & Frameworks

320 and Up

‘320 and Up’ starts with a tiny screen stylesheet that contains only reset, colour and typography styles. Media Queries then load assets and layout styles progressively and only as they’re needed. Think of this as responsible responsive design. ‘320 and Up’ is a device agnostic, one web boilerplate.

Amazium

Responsive framework based on 960 grid system.

Foundation

An easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.

Inuit.css

Inuit.css framework is built to work on smaller screens (such as tablets) and tiny screens (such as phones) straight out of the box with minimal effort.

The Constellation WordPress Theme

The Constellation theme is the perfect starting point for any WordPress project. It gives you the flexibility to provide bespoke styles for different devices, totally up-to-date HTML5 code which is fantastic for SEO, a flexible grid system on top of all the other goodness bundled in to the HTML5 boiler plate.

Reverie

Reverie Framework is an extremely versatile HTML5 WordPress framework based on ZURB’s Foundation, a powerful tool for building prototypes on any kind of devices.

Skeleton

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

Gridless

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

Simple Grid

SG is prepared for 4 distinct ranges of screen size: screens 720px, screens 720px, screens than 985px, and screens than 1235px. This means that people visiting your site will receive a layout that’s tuned to the size of their browser window.

The 1140 grid

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.
Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.

The Goldilocks Approach

CSS and HTML boilerplate Goldilocks Approach uses a combination of Ems, Max-Width, Media Queries and Pattern Translations to consider just three states that allow your designs to be resolution independent.

Gridpak – The Responsive Grid Generator

Gridpak is the starting point for your responsive projects, improving your workflow and saving time. Create your responsive grid system once using the simple interface and let Gridpak do the heavy lifting by generating PNGs, CSS and JavaScript.

BluCSS

BluCSS is a CSS framework designed with ease of use and simplicity in mind. It is specifically made so that when you’re working on your next project, you don’t have to worry about the essentials. With BluCSS, you can be up and running in less than a minute. One feature that stands out in this framework is responsive image functionality. Just apply any “blu_” class to an image, same as any other element, and the image will automatically be resized according to the browser width.

“The grand essentials of happiness are: something to do, something to love, and something to hope for.”

See you in 2012!