Latest Trends in Web Design 2011-12

In this post, we are going to discuss all those changes, upcoming trends, new design elements and new design approaches which were identified, discovered and observed over the last few months. So let’s dig into the post covering the current trends of web design as 2011 turns to 2012.

1. Simple Color Schemes

Simplicity is yet another recent design trend that has captured the respect and imagination of users. Instead of using black and white or shades of grey designers are experimenting with primary colors like green, yellow or red intelligently to create a web design which is something simple and truly remarkable, but limited their palette to two or three colors and are playing with shades of each color to create really inspiring color combination to communicate a message.
Some of the best examples of great web design inspired with color schemes formed by using different shades of primary colors like green and red.
WideView

Motionoto

2. Mobile Device Compatibility

 

With the increasing popularity of tablet technology and smart phones, web designers must adapt to new standards. With different screen resolutions its difficult to accommodate the whole site in small mobile screen. Instead of having to create a separate, lackluster site, CSS3 allows web designers to accommodate mobile technology into the website design. One of the most important advances is that you can design a whole site and allow your coding to conform to the user’s viewing medium.
A mobile website should retain the design elements of the original, just in a smaller, touch-screen-friendly format. Today, more people will be buying smartphones than personal computers. That means that websites should look just as good on a tiny screen as on high-definition larger monitors.
Google

G-Shock

Dolce & Gabbana

4. Parallax scrolling

In 2012 creating a sense of dimension and depth will become more common and web designers are more focused to create a sense of depth in website design and this is the most effective web design trend for 2012. This emerging trend brings parallax scrolling into the picture. The Parallax effect or parallax scrolling in web design is the technique that features layered images that move around the website in different speeds/perspectives creating a nice and interesting 3D illusion. It can be done with the help of simple CSS tricks, jQuery plugins, HTML5, JavaScript and even Flash
Egopop Creative Studio

Head2Heart

Webdesign Karlsruhe

5.Touch screen-friendly website designs

In modern time, technology has been becoming more tactile which resulted in a huge shift from usability to tangible. With smart phones, tablets, and even some desktops using touch screens, designers need to accommodate fingertip navigation. Links that change color, or underline when a mouse is hovered over them will not have the same effect on a touch screen.  As per this trend, horizontal scrolling websites are considered more appropriate for touch screens.
Interexpresso

6. Responsive Web Design

Responsive web design is a different approach of web design using this technology one can create a flexible website layout that dynamically fits into the screen of every device at any resolution, from desktop to laptop and from browser supported smart phones to any kind of mobile devices. This technique enables web developers to create one version of the website that fits in all devices rather then creating different version of the same website for different devices.
Simon Collison

Sparkbox

Think Vitamin

7. Typography

Stylized typography is an age-old feature, and today designers are using it to give their designs a different look. In past years, typography has been overlooked because customizing typography used to be a complicated method. Now web designers can integrate custom fonts into websites with tools such as WhatTheFont, CSS Typeset and Typetester which has helped designers be more creative. Mixing bold and scrolling letters and using extra-large font sizes to grab viewers’ attention is becoming mainstream. Think bold, fun, and unique.
Forefathers

Carsonified

8. Big Images & Photo Backgrounds

Big images aren’t new; wider screen sizes offer a bigger window with which to display them. More sites will be using that space for great big images in 2012. Images with high resolution covering the entire site. Large photos are an instant way to grab the audience attention.
Cpeople

Miraclestudios

Nespresso

 9.Textured Backgrounds

The use of textured backgrounds is another hot trend to follow. The visual experience of the audience increases exponentially if the background is aesthetically pleasing and precise. The points to focus on are simplicity of design and the illusion of textures to create depth and dimension on the page.
Cake Sweet Cake

Alpine Meadows

Organic Supermarket

10. Single Page Design

The ever-expanding competition to keep users on a website is becoming more challenging. Visitors scan web pages to locate the information they want, but with each click required to delve deeper into the website, the interest level drop. This phenomenon has led to a growing desire to build single-page websites. Interaction is key, and more user friendly websites will start to crop up.
Ryanscherf

Imagemechanics

11. Social Media Sharing

The integration of social media will continue to spread like wildfire throughout the web in the future. This practice has allowed businesses to gain greater exposure and access to users than ever before. Online businesses, big and small, will focus squarely on this.

12.CSS3 + HTML 5

One of the most unexpected trends observed over the last few months was the more use of  CSS3 and HTML5. Most of web designers are jumping from Flash to HTML5. HTML5 introduced to share the burden placed on Flash but HTML5 cannot substitute Flash when it comes to create the extraordinary design elements. HTML5 now works on Firefox 3.5 and higher, Chrome, Safari, Opera and Internet Explorer 8. This programming language is all about giving developers more flexibility, connecting data / drawings / videos / audio, and delivering designs faster.
Not all browsers have adopted CSS3 as a whole yet, but they are slowly starting to come around. Some of the new features of CSS3 include rounded corners, mega drop-down menus, animated buttons, multiple backgrounds, box shadow, text shadow, transparent images and lot more… Animations with CSS3 are made easy, subtle and lightweight.
Below are some examples:
jetcooper

sundaybestdesigns

chirp.twitter

 

Read more...

Latest Trends in Web Design

I thought it was time to bring you some of the latest on interactive design. There’s a lot going on when it comes to Social Media; brands are attempting to finalize strategies and maximize Return on Investments to acquire a strong position on emerging social networks such as Pinterest.
 While technology develops and new devices are brought to the user, creative freedom doesn’t necessarily expand, and the design job doesn’t consequently get easier, but clever solutions are at our fingertips. This article aims to explain and exemplify two of the major trends that can fuel creative discussions with your digital teams.

RESPONSIVE DESIGN
Responsive Design is a powerful trend that suits our users’ environment and context. We have all been bombarded with the ‘CLOUD’, which serves the user who desires data in the form of APPS and documents across multiple devices without the information being stored on each device individually.
In order to make APPS, websites, and documents easy to read, navigate and use across the variety of devices that people use today, design needs a specific approach so that layouts are tailored to the characteristics of each gadget, such as screen sizes and controls (i.e. click or touch).
Responsive design, a few examples:
http://2012.ampersandconf.com
http://www.designmadeingermany.de/magazin/5/





PARALLAX SCROLLING
Parallax scrolling is a technique wherein background images move slower or in different directions than the overlaying foreground elements. The feeling of depth that is generated from this behavior can at times be stunning, and at times annoying. We have seen the world’s biggest brands experiment with this trend. A few examples for you to discover:
http://www.manufacturedessai.it/it/

http://www.ok-studios.de/home/
http://www.nike.com/jumpman23/aj2012/
http://artofflightmovie.com/
http://www.beetle.com/

 Resize your browser screen to see how the layout changes when the window gets smaller.

Read more...

Password strength verification using jQuery

Password strength verification with jQuery

The jQuery Password Strength Meter is a great free plugin that provides realtime client side evaluation of your password, providing visual indication regarding the strength of the password. This article covers setting up, configuring and customization of the plugin.

Many sites that require login credentials enforce a security setting often referred to as password complexity requirements. These requirements ensure that user passwords are sufficiently strong and cannot be easily broken.

What constitutes a strong password? Well, that depends on who you ask. However, traditional factors that contribute to a password’s strength include it’s length, complexity, and unpredictability. To ensure password strength, many sites require user passwords to be alphanumeric in addition to being a certain length.

In this tutorial, we’ll construct a form that gives the user live feedback as to whether their password has sufficiently met the complexity requirements we will establish.

Before we begin, let’s get take a sneak peak at what our final product will look like (click for a demo):

Please note: The purpose of this tutorial is to show how a simple script can be written using javascript and jQuery to enforce password complexity requirements. You’ll be able to add additional requirements to the script if needed; however, note that form validation (server- and client-side), form submission, and other topics are not covered in this example.

Step 1: Starter HTML

First we want to get our basic HTML starter code. We’ll use the following:

<!DOCTYPE html>
<html>
<head>
 <title>Password Verification</title>
</head>
<body>
 <div id="container">
  <-- Form HTML Here -->
 </div>
</body>
</html>

Step 2: Form HTML

Now let’s add the markup that will be used for our form. We will wrap our form elements in list items for better structure and organization.

<h1>Password Verification</h1>
<form>
 <ul>
  <li>
   <label for="username">Username:</label>
   <span><input id="username" name="username" type="text" /></span>
  </li>
  <li>
   <label for="pswd">Password:</label>
   <span><input id="pswd" type="password" name="pswd" /></span>
  </li>
  <li>
   <button type="submit">Register</button>
  </li>
 </ul>
</form>

Here’s an explanation of the code we used:

• span elements – these will be used for visual styling of our input elements (as you’ll see later on in the CSS)
• type="password" – this is an HTML5 attribute for form elements. In supported browsers, the characters in this field will be replaced by black dots thus hiding the actual password on-screen.

Here’s what we’ve got so far:

Step 3: Password information box HTML

Now let’s add the HTML that will inform the user which complexity requirements are being met. This box will be hidden by default and only appear when the “password” field is in focus.

<div id="pswd_info">
 <h4>Password must meet the following requirements:</h4>
 <ul>
  <li id="letter" class="invalid">At least <strong>one letter</strong></li>
  <li id="capital" class="invalid">At least <strong>one capital letter</strong></li>
  <li id="number" class="invalid">At least <strong>one number</strong></li>
  <li id="length" class="invalid">Be at least <strong>8 characters</strong></li>
 </ul>
</div>

Each list item is given a specific ID attribute. These IDs will be used to target each complexity requirement and show the user if the requirement has been met or not. Also, each element will be styled as “valid” if the user’s password has met the requirement or invalid if they haven’t met it (if the input field is blank, none of the requirements have been met; hence the default class of “invalid”).

Here’s what we have so far:

Step 4: Create background style

We are going to give our page elements some basic styling. Here’s an overview of what we’ll do in our CSS:

• Add a background color – I used #EDF1F4
• Add a background image with texture (created in Photoshop)
• Setup our font stack – We’ll use a nice sans-serif font stack
• Remove/modify some browser defaults

body {
 background:#edf1f4 url(bg.jpg);
 font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif;
 font-size:16px;
 color:#444;
}
ul, li {
 margin:0;
 padding:0;
 list-style-type:none;
}

Step 5: Create background style

Now we will style our main container and center it in the page. We’ll also applying some styles to our H1 tag.

#container {
 width:400px;
 padding:0px;
 background:#fefefe;
 margin:0 auto;
 border:1px solid #c4cddb;
 border-top-color:#d3dbde;
 border-bottom-color:#bfc9dc;
 box-shadow:0 1px 1px #ccc;
 border-radius:5px;
 position:relative;
}
h1 {
 margin:0;
 padding:10px 0;
 font-size:24px;
 text-align:center;
 background:#eff4f7;
 border-bottom:1px solid #dde0e7;
 box-shadow:0 -1px 0 #fff inset;
 border-radius:5px 5px 0 0; /* otherwise we get some uncut corners with container div */
 text-shadow:1px 1px 0 #fff;
}

It’s important to note that we have to give our H1 tag a border radius on its top two corners. If we don’t, the H1′s background color will overlap the rounded corners of it’s parent element (#container) and it will look like this:

Adding border-radius to the H1 element assures our top corners will remain rounded. Here’s what we have so far:

Step 6: CSS styles for the form

Now let’s style our various form elements starting with the list elements inside the form:

form ul li {
 margin:10px 20px;

}
form ul li:last-child {
 text-align:center;
 margin:20px 0 25px 0;

We used the :last-child selector to select the last item in the list (button) and give it some extra spacing. (Note this selector is not supported in some legacy browsers). Next, let’s style our input elements:

input {
 padding:10px 10px;
 border:1px solid #d5d9da;
 border-radius:5px;
 box-shadow: 0 0 5px #e8e9eb inset;
 width:328px; /* 400 (#container) - 40 (li margins) -  10 (span paddings) - 20 (input paddings) - 2 (input borders) */
 font-size:1em;
 outline:0; /* remove webkit focus styles */
}
input:focus {
 border:1px solid #b9d4e9;
 border-top-color:#b6d5ea;
 border-bottom-color:#b8d4ea;
 box-shadow:0 0 5px #b9d4e9;

Notice that we calculated our input element’s width by taking the #container width (400px) and subtracting the margins, paddings, and borders applied to the input’s parent elements. We also used the outline property to remove the default WebKit focus styles. Lastly let’s apply some styles to our other form elements:

label {
 color:#555;
}
#container span {
 background:#f6f6f6;
 padding:3px 5px;
 display:block;
 border-radius:5px;
 margin-top:5px;
}

Now we have something that looks like this:

Step 7: Button Styles

Now we are going to style our button element. We’ll use some CSS3 styles so users with newer browsers get a better experience. If you’re looking for a great resource when creating background gradients in CSS3, check out Ultimate CSS Gradient Generator.

button {
 background: #57a9eb; /* Old browsers */
 background: -moz-linear-gradient(top, #57a9eb 0%, #3a76c4 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#57a9eb), color-stop(100%,#3a76c4)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* IE10+ */
 background: linear-gradient(top, #57a9eb 0%,#3a76c4 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57a9eb', endColorstr='#3a76c4',GradientType=0 ); /* IE6-9 */
 border:1px solid #326fa9;
 border-top-color:#3e80b1;
 border-bottom-color:#1e549d;
 color:#fff;
 text-shadow:0 1px 0 #1e3c5e;
 font-size:.875em;
 padding:8px 15px;
 width:150px;
 border-radius:20px;
 box-shadow:0 1px 0 #bbb, 0 1px 0 #9cccf3 inset;
}
button:active {
 background: #3a76c4; /* Old browsers */
 background: -moz-linear-gradient(top, #3a76c4 0%, #57a9eb 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a76c4), color-stop(100%,#57a9eb)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* IE10+ */
 background: linear-gradient(top, #3a76c4 0%,#57a9eb 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a76c4', endColorstr='#57a9eb',GradientType=0 ); /* IE6-9 */
 box-shadow:none;
 text-shadow:0 -1px 0 #1e3c5e;
}

Step 8: Password Information Box

Now we are going to style the box that informs users if they are meeting the password requirements. First, we will style the containing element (#pswd_info).

#pswd_info {
 position:absolute;
 bottom:-75px;
 bottom: -115px\9; /* IE Specific */
 right:55px;
 width:250px;
 padding:15px;
 background:#fefefe;
 font-size:.875em;
 border-radius:5px;
 box-shadow:0 1px 3px #ccc;
 border:1px solid #ddd;
}

Now let’s add some style to the H4 element:

#pswd_info h4 {
 margin:0 0 10px 0;
 padding:0;
 font-weight:normal;
}

Lastly, we are going to use the CSS ::before selector to add an “up-pointing triangle”. This is a geometric character which can be inserted using it’s corresponding UNICODE entity. Normally in HTML you would use the character’s HTML entity (▲). However, because we are adding it in CSS, we must use the UNICODE value (25B2) preceded by a backslash.

#pswd_info::before {
 content: "\25B2";
 position:absolute;
 top:-12px;
 left:45%;
 font-size:14px;
 line-height:14px;
 color:#ddd;
 text-shadow:none;
 display:block;
}

Now we have this:

Step 9: Valid and invalid states

Let’s add some styles to our requirements. If the requirement has been met, we’ll give it a class of “valid”. If it hasn’t been met, it will get a class of “invalid” (default class). 

.invalid {
 background:url(../images/invalid.png) no-repeat 0 50%;
 padding-left:22px;
 line-height:24px;
 color:#ec3f41;
}
.valid {
 background:url(../images/valid.png) no-repeat 0 50%;
 padding-left:22px;
 line-height:24px;
 color:#3a7d34;
}

Because we haven’t included the JavaScript functionality that will dynamically change the “valid” and “invalid” classes, all requirements will appear as invalid (we’ll change this later). Here’s what we have so far:

Hide the Box

Now that we have everything styled exactly how we want it, we’re going to hide the password information box. We’ll toggle it’s visibility to the user using JavaScript. So let’s add the following rule:

#pswd_info {
 display:none;
}

Step 10: Grasping the scope

Here is what we want to accomplish with our script:

• When the password field is selected (:focus), show it
• Every time the user types a new character in the password field, check and see if that character fulfills one of the following password complexity rules:
  • At least one letter
  • At least one capital letter
  • At least one number
  • At least eight characters in length
• If it does, mark that rule as “valid”
• If it doesn’t, mark that rule as “invalid”
• When the password field is not selected (‘:blur’), hide it

Step 11: Getting jQuery setup

First, we need to add jQuery to our page. We’ll use the hosted version. We also want to link to our “script.js” file, which is where we will write the code needed for our password verification test. So, add the following to your <head> tag:

<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="script.js"></script>

In our “script.js” file, we’ll start with some basic jQuery starter code for our script:

$(document).ready(function() {

 //code here

});

Step 12: Setting up the event triggers

Essentially we have three events we will be listening for:

1. “Keyup” on the password input field
   (triggers whenever the user pushes a key on the keyboard)
2. “Focus” on the password input field
   (triggers whenever the password field is selected by the user)
3. “Blur” on the password input field
   (triggers whenever the password field is unselected)

As you can see, all the events we are listening for are on the password input field. In this example, we will select all input fields where the type is equal to password. jQuery also allows us to “chain” these events together, rather than typing out each one. So, for example, rather than typing this:

$('input[type=password]').keyup(function() {
 // keyup event code here
});
$('input[type=password]').focus(function() {
 // focus code here
});
$('input[type=password]').blur(function() {
 // blur code here
});

We can chain all the events together and type the following:

$('input[type=password]').keyup(function() {
 // keyup code here
}).focus(function() {
 // focus code here
}).blur(function() {
 // blur code here
});

So, with that knowledge, let’s create our code that will show or hide our password information box depending on whether the password input field is selected by the user or not:

$('input[type=password]').keyup(function() {
 // keyup code here
}).focus(function() {
 $('#pswd_info').show();
}).blur(function() {
 $('#pswd_info').hide();
});

You will now notice that by clicking in the password input field, the password information box will be visible. Likewise, by clicking outside the password input field, the password information box will be hidden.

Step 13: Checking the complexity rules

All we need to do now is have the script check the value in the password field every time a new character is entered (using the ‘keyup’ event). So, inside the $('input[type=password]').keyup function we’ll add the following code:

// set password variable
var pswd = $(this).val();

This sets up a variable named ‘pswd’ that stores the current password field value every time there is a keyup event. We will use this value in checking each of our complexity rules.

Validating the length

Now, inside the same keyup function, let’s add the following:

//validate the length
if ( pswd.length < 8 ) {
 $('#length').removeClass('valid').addClass('invalid');
} else {
 $('#length').removeClass('invalid').addClass('valid');
}

This checks to see if the length of the current password value is smaller than 8 characters. If it is, it’s get an ‘invalid’ class. If it’s bigger than 8 characters, it gets a ‘valid’ class.

Validating with regular expressions

As you saw above, we simply have an if/else statement that tests to see if the complexity requirement has been met. If the complexity requirement is met, we give it’s ID in the password box a class of “valid”. If it is not met, it gets a class of “invalid”.

The rest of our requirements will require we use regular expressions to test the complexity rules. So, let’s add the following:

//validate letter
if ( pswd.match(/[A-z]/) ) {
 $('#letter').removeClass('invalid').addClass('valid');
} else {
 $('#letter').removeClass('valid').addClass('invalid');
}

//validate capital letter
if ( pswd.match(/[A-Z]/) ) {
 $('#capital').removeClass('invalid').addClass('valid');
} else {
 $('#capital').removeClass('valid').addClass('invalid');
}

//validate number
if ( pswd.match(/\d/) ) {
 $('#number').removeClass('invalid').addClass('valid');
} else {
 $('#number').removeClass('valid').addClass('invalid');
}

Here is an explanation of the three if/else statements we used:

[A-z]

This expressions checks to make sure at least one letter of A through Z (uppercase) or a through z (lowercase) has been entered

[A-Z]

This expressions checks to make sure at least one uppercase letter has been entered

\d

This will check for any digits 0 through 9

Step 14: Test it out

That’s all there is to it! You can add more to this if you want. You could add more complexity rules, you could add a submission method, or you could add whatever else you deem necessary.

Read more...

8 amazing jQuery slidshow and images

This is The Collection of Amazing jQuery slideshow.

This is The Collection of diffrent web design site.....

Coin Slider

Coin Slider is a jQuery slider with unique transition effects.  It’s also compatible with iOS and Android.

Galleria

Galleria’s purpose is to make it easier for anyone to create professional-looking image galleries for the web and mobile devices.  You can also build your own theme using Galleria’s API.

Nivo Slider

The Nivo Slider includes 16 unique transition effects and tons of settings you can tweak to meet your needs. The markup is all clean and valid, and the packed version is only 15kb. The Slider also includes support for HTML captions, keyboard navigation, and linking images, and comes with three themes.

Sliding Image Gallery

The Sliding Image Gallery plugin was inspired by the iTunes album viewer. There are a few variations available, and full instructions for implementation are provided.

ShineTime

ShineTime is a jQuery and CSS3 gallery with animated shine effects on both the thumbnails and photo captions. It uses thumbnails for navigation.

Micro Image Gallery

The Micro Image Gallery is a tiny image gallery plugin, designed for use when space is limited. There are three sizes available, 102 pixels, 162 pixels, and 222 pixels, and galleries can default to show thumbnails or a single image when loaded.

prettyPhoto

prettyPhoto is a lightbox clone, with support for images, video, Flash, iframes, and ajax. It can be used for single images or galleries, and galleries can have mixed content.

Spacegallery

Spacegallery has a 3D interface that loads new images when you click on the existing one. It has a configurable border, animation duration, perspective height, and more.

Read more...