How To Add Indian Rupee symbol in HTML on Blogs and Websites

ndian Rupee symbol has got the Unicode as U+20B9 and the character is expected to be available on some keyboards in next 2 or 3 months. But if you need to write the Indian Rupee symbol on your website thru HTML, you don’t need to use image as you can write that. Many bloggers are using Indian Rupee symbol image to write the symbol in their blog posts, but there is a way to write that in such a way that the symbol will appear as text.
There are few web resources to add that symbol in HTML and out of which, an option is to add a JavaScript in the footer area of your blog template which will convert the text “Rs.” on your site to “Indian Rupee Symbol”. Here is the script,
[code][/code]
Just paste this script in the footer area of your HTML before body close. WordPress users can paste this script in footer.php file of their theme template.



Other way is to include the below mentioned stylesheet in the HEAD section of your HTML file or template (header.php) and then you can use a pre-defined SPAN class to write Rs. text which will be converted to Indian Rupee Symbol. Here is the Stylesheet and SPAN class code.
Stylesheet:
[code][/code]
Now use the below mentioned code to type Indian Rupee symbol,
[code]Rs.[/code]
Once the popular font families will be updated to Unicode 6.0.0, then you will be able to type Indian Rupee Symbol by typing ₹ in HTML editor.

Source: http://www.clickonf5.org/9413/show-indian-rupee-symbol-html-blogs-websites/

Free WordPress 3.1 Theme: Splendio (With PSD Sources)

Today, we are glad to present a new freebie: a beautiful theme, designed by Vlad and Elena Scanteie which was developed exclusively for Smashing Magazine and its readers. As usual, the theme is free to use in both private and commercial projects. The theme is based upon the Twenty Ten WordPress theme and requires WordPress 3.0 to run.

Source:http://www.smashingmagazine.com/2011/05/30/free-wordpress-3-1-theme-splendio-with-psd-sources/

Free HTML5/CSS3 WordPress 3.1+ Theme With Responsive Layout: Yoko

In this post we are glad to present to you yet another freebie: a responsive WordPress theme Yoko which was designed by talented designers Ellen and Manuel from Elmastudio and released for the Web design community. Of course, the theme is absolutely free to use in private as well as commercial projects.
Yoko is a modern and flexible WordPress theme. With the responsive layout based on CSS3 media queries, the theme adjusts to different screen sizes. The design is optimized for big desktop screens, tablets and small smartphone screens. To make your blog more individual, you can use the new post formats (like gallery, aside or quote), choose your own logo and header image, customize the background and link color.

Download the Theme for Free!

The theme is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the theme as you wish.

• live demo
• large preview (.png, 1.5 Mb)
• download the package (2.2Mb, .zip)
• release on the developer’s site (with documentation in English and in German)
• Documentation PDF file (in English)
• Installation Video Tutorials

Features

The theme requires WordPress 3.1+ to run. It has following features:

• Cross-browser compatible (tested in Chrome, Firefox, Safari, Internet Explorer 8+)
• HTML5 (with fallback for IE < 9) and CSS3
• Responsive layout (CSS3 media queries, not supported in IE < 9, but you can use libraries like Respond.js by Scott Jehl or CSS3-Mediaqueries-js by Wouter van der Graaf to make it work in older versions of IE.)
• WordPress post formats (aside, gallery, image, video, link and quote)
• Theme options page, custom background, custom header image
• Optional sub menu
• A custom social links widget to promote your RSS-Feed, Facebook, Twitter, Flickr, Vimeo, LinkedIn or Delicious profile
• Full-width page template
• Google Web fonts in use (Droid Sans and Droid Serif)
• Threaded comments with Gravatar support
• Shortcodes for multiple columns, info boxes in three colors and highlighted text
• Currently available in English, German and French.

Screenshots

Three-Column-Layout.

Two-Column-Layout.

One-Column-Layout.
Source:
In this post we are glad to present to you yet another freebie: a responsive WordPress theme Yoko which was designed by talented designers Ellen and Manuel from Elmastudio and released for the Web design community. Of course, the theme is absolutely free to use in private as well as commercial projects.
Yoko is a modern and flexible WordPress theme. With the responsive layout based on CSS3 media queries, the theme adjusts to different screen sizes. The design is optimized for big desktop screens, tablets and small smartphone screens. To make your blog more individual, you can use the new post formats (like gallery, aside or quote), choose your own logo and header image, customize the background and link color.

Download the Theme for Free!

The theme is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the theme as you wish.

• live demo
• large preview (.png, 1.5 Mb)
• download the package (2.2Mb, .zip)
• release on the developer’s site (with documentation in English and in German)
• Documentation PDF file (in English)
• Installation Video Tutorials

Features

The theme requires WordPress 3.1+ to run. It has following features:

• Cross-browser compatible (tested in Chrome, Firefox, Safari, Internet Explorer 8+)
• HTML5 (with fallback for IE < 9) and CSS3
• Responsive layout (CSS3 media queries, not supported in IE < 9, but you can use libraries like Respond.js by Scott Jehl or CSS3-Mediaqueries-js by Wouter van der Graaf to make it work in older versions of IE.)
• WordPress post formats (aside, gallery, image, video, link and quote)
• Theme options page, custom background, custom header image
• Optional sub menu
• A custom social links widget to promote your RSS-Feed, Facebook, Twitter, Flickr, Vimeo, LinkedIn or Delicious profile
• Full-width page template
• Google Web fonts in use (Droid Sans and Droid Serif)
• Threaded comments with Gravatar support
• Shortcodes for multiple columns, info boxes in three colors and highlighted text
• Currently available in English, German and French.

Screenshots

Three-Column-Layout.

Two-Column-Layout.

One-Column-Layout.

Source: http://www.smashingmagazine.com/2011/06/07/free-html5-css3-wordpress-3-1-theme-with-responsive-layout-yoko/

Pixel Perfection When Rotating, Pasting And Nudging In Photoshop

When creating Web and app interfaces, most designers slave over every single pixel, making sure it’s got exactly the right color, texture and position. If you’re not careful, though, some common functions like moving, rotating and pasting can undo your hard work, resulting in a blurry mess. But with some small changes to your workflow, you should be able to maintain the highest-quality artwork from the start to the end of the project.
Pixel-Perfect Rotation

If you’re not careful, rotating layers in Photoshop can damage them in a very noticeable, pixel-mashing way.

When rotating layers with Free Transform (and some other tools) to exactly 90 or 270°, the quality of the outcome is determined by the layer’s size. If the layer is of an even width and even height, then you’ll be fine. If it’s of an odd width and odd height, you’ll also be okay. But if they’re of an odd width by even height or even width by odd height, then you’ll see something like the result below:

Mastering1 in Pixel Perfection When Rotating, Pasting And Nudging In Photoshop

In this case, the artwork is 20 × 9 pixels: even-by-odd dimensions. The results for bitmap layers and vector layers are different, but they both produce unusable results because the origin of rotation doesn’t fall on an exact pixel boundary.
A Fix

Because even-by-odd or odd-by-even dimensions are the problem, we need a way to ensure that the contents of the layer are odd-by-odd or even-by-even. Probably any method you can think of will solve this problem, be it adding a square bitmap mask to a layer or adding more content to the layer that you’re rotating. You could also draw a square on another layer and rotate both at once.

As long as the dimensions for the layer or layers are even-by-even or odd-by-odd, it’ll be fine.

Mastering2 in Pixel Perfection When Rotating, Pasting And Nudging In Photoshop
An Easier Fix

Rotation-origin in Pixel Perfection When Rotating, Pasting And Nudging In Photoshop

Changing the origin of rotation to the top left (or any other corner) will ensure it is on a pixel boundary, guaranteeing perfect results every time. To do this, click on a corner origin after selecting the Free Transform tool, but before rotating. This works brilliantly and is the simplest solution yet.

Bitmap and vector masks are affected by this issue as well, so please take care. But the issue affects only rotated layers, either via “Free Transform” or “Transform” under the Edit menu. Rotating the entire canvas via Image → Image Rotation has no problem.

To make things even easier, I’ve created some Photoshop Actions and Workflows that take care of everything for you.
Pixel-Perfect Vector Pasting

If you’ve drawn pixel-snapped artwork in Illustrator and pasted it into Photoshop as a shape layer, you may have noticed that the result is not quite what you expect (i.e. a perfectly sharp image), but rather a blurry mess. Here’s how to fix that.

Below is some artwork as it appears in Illustrator: perfectly formed, snapped to the pixel grid, and at the size we intend to use it in Photoshop.

Mastering3 in Pixel Perfection When Rotating, Pasting And Nudging In Photoshop

Below are the same paths pasted into Photoshop a few times. Notice how only the top-left version is sharp, while the others are half a pixel out on the x axis, y axis or both.

Paste in Pixel Perfection When Rotating, Pasting And Nudging In Photoshop
What Went Wrong?

Photoshop’s pasting behavior works in one of two ways. If you’ve made a selection, then the clipboard’s contents are pasted so that the center of the clipboard is aligned with the center of the selection. If a selection hasn’t been made, then the contents are pasted so that the center of the clipboard aligns with the center of your current view. The level you’re zoomed into and the portion of the document you’re viewing determines the result.
A Fix

Our test artwork is 32 pixels wide by 12 pixels high. Drawing a 32 × 12 marquee selection in Photoshop forces the artwork to land exactly where we want it and to be pixel-aligned. This works every single time.
An Easier Fix

The marquee doesn’t have to be the exact size of your artwork, though. In our case, a 2 × 2-pixel selection would work just as well, because the center of an even-width-and-height marquee selection and the center of even-width-and-height clipboard contents would fall exactly on a pixel boundary, which is what we want. If the artwork was an odd width and height, then a 1 × 1 selection would have been required.

Mastering5 in Pixel Perfection When Rotating, Pasting And Nudging In Photoshop

If you couldn’t be bothered noting your artwork’s dimensions, then by drawing an appropriately sized marquee, you can draw a 2 × 2-pixel selection and paste. If the image is blurry on the x axis only, make the selection 1 × 2 and paste again. If the image is blurry on the y axis only, make the selection 2 × 1 and paste again. If the image is blurry on both axes, make the selection 1 × 1 and paste again.

It may sound complex, but in practice it’s very quick; you’ll only ever have to paste twice to get sharp vector paths from Illustrator.
Smart Objects

Pasting elements as smart objects doesn’t come with the same issue (at least not in Photoshop CS5 anyway). I like to use Shape layers, though: they allow more control and editability and have better anti-aliasing.
Pixel-Perfect Vector Nudging

When nudging vector points, Photoshop exhibits some strange behavior, related to how far you’re zoomed in. At 100%, nudging with the arrow keys will move your vector point exactly 1 pixel. At 200%, nudging moves the point by half a pixel. At 300%, it moves by a third of a pixel.

The behavior seems intentional, but it’s not usually what I’m after. Most of the time, I want to nudge in whole pixel increments. Here’s how you can do that, without zooming out to 100%.

Open your document, and then create a second window by going to Window → Arrange → New Window. You can then resize the new window and place it out of the way.

Mastering6 in Pixel Perfection When Rotating, Pasting And Nudging In Photoshop
Large view

Edit in the other window as normal, zooming in as far as you’d like. You’ll now be able to press Command + ` to switch back to the window that’s zoomed to 100%, nudge using the arrow keys, and then press Command + ` to switch back again. Because the other window is zoomed to 100%, nudging will move the selected vector points exactly 1 pixel.

Mastering7 in Pixel Perfection When Rotating, Pasting And Nudging In Photoshop
Large view

Please note that holding Shift while using the arrow keys to nudge always moves by 10 pixels, no matter how far in you’re zoomed. Also, dragging points with the mouse will snap to pixels in most situations — most, but not all.

While not perfect, this technique does remove some of the frustration with editing detailed vector paths in Photoshop. Or maybe it’s just another reason why complex shapes should be drawn in Illustrator first, and then pasted as shape layers?
Take Charge Of Your Pixels

Using the correct techniques, it should be easy to place pixels exactly where you want. Remember, you’re the one in charge. Demand that they fall in line. Accept nothing less than pixel perfection.

Would you like to know more about a particular technique or Photoshop feature? Please let us know in the comments.

Design a Beautiful Website From Scratch 960 Grid system

Have you ever wanted to design a beautiful website but just didn’t know how? To be honest, a few years ago, that happened to me too. While browsing the web, I saw so many nice looking websites and wished I had the skills to create such designs. Today I can and I’m going to teach you how to do so too! Essentially, it requires a few Photoshop skills and an eye for detail. Through this tutorial, I will point out these tiny details which make a website design look beautiful. Fire up Photoshop and let’s get going!

Finished Website
Step 1 - Download the 960 Grid System Template

5 Top Web Design Trends: 2011 Annual Edition

2010 has been an incredibly verdant year for web designers. Mobile has hit the mainstream; Web typography has reached new levels of sophistication; New coding techniques have vastly improved our ability to get creative with design (without compromising stability). All in all, it’s been a year that’s moved fast, even by the standards of the web, so let’s dig in to our first annual post covering the state of web design as 2010 turns to 2011.

A Typographic Explosion

Alright, I guess you could make the claim that “typography will explode” each and every year… but 2010 has seen a few major changes to the underlying technology that actually make this claim legitimate. Primarily, the huge amount of growth of font-replacement technology over the last year and the mass adoption of “fonts as services” where third party companies host fonts (and licenses) that designers can use in live development environments. You could also say that designers are getting a lot more bold with typogrpahy as well… with more and more designs coming out lately that blur the line between print-4design and web design.

Let’s check out some examples (some using font replacement, others using other methods):

Web Design Trends : Web Typography 1

Web Design Trends : Web Typography 2

Web Design Trends : Web Typography 3

Web Design Trends : Web Typography 4

Web Design Trends : Web Typography 5

Web Design Trends : Web Typography 6

Web Design Trends : Web Typography 7

Web Design Trends : Web Typography 8

Web Design Trends : Web Typography 9

Web Design Trends : Web Typography 01

Web Design Trends : Web Typography 11

SubTrend: Print Design Inspired Sites

This was all the rage in 2009 – 2010, but the “print revolution” is alive and well on the web, and more and more sites are being designed to mimic great print designs, such as magazines, posters, fliers, and more.

Grid Intensive Layouts

Grid layouts aren’t new to 2010 (or even 1980), but web designers are starting to break away from traditional web layouts (header, content column, sidebar, footer) in favor of more unique, grid driven layouts. What started out with the 960.gs movement has quickly spread to grid systems that can actually adapt to the viewers screen resolution.

Web Design Trends : Web Design Grid Layouts 1

Web Design Trends : Web Design Grid Layouts 2

Web Design Trends : Web Design Grid Layouts 3

Web Design Trends : Web Design Grid Layouts 4

Web Design Trends : Web Design Grid Layouts 5

Web Design Trends : Web Design Grid Layouts 6

Web Design Trends : Web Design Grid Layouts 7

Massive Images

Here’s another trend that’s been happening for more than just this last year. Massive images were once taboo for web designers, but thanks to better image optimization, faster internet connections, and smarter loading methods, designers can gain a lot in some sites by pushing image sizes to the max.

More than just “big images”, we’re beginning to see more trending towards sites that use vast illustrative (and photographic) backdrops that are as a part of the actual experience as they are simply additional artwork.

Web Design Trends : Web Design Big Images 1

Web Design Trends : Web Design Big Images 2

Web Design Trends : Web Design Big Images 3

Web Design Trends : Web Design Big Images 4

Web Design Trends : Web Design Big Images 5

Web Design Trends : Web Design Big Images 6

Web Design Trends : Web Design Big Images 7

Web Design Trends : Web Design Big Images 8

Web Design Trends : Web Design Big Images 9

Web Design Trends : Web Design Big Images 10

Web Design Trends : Web Design Big Images 11

Texture, Texture, Texture

Textures aren’t new, but as each year passes we see it being integrated in new and interesting ways. 2010 saw a lot of the “subtle noise” texture, but more than anything, we’re beginning to enter a style phase where more designs are starting to feel “touchable”. This doesn’t necessarily mean that big, file-heavy textures are being used… instead, we’re seeing more subtle, well designed textures that repeat naturally.

Web Design Trends : Web Design Background Textures 1

Web Design Trends : Web Design Background Textures 2

Web Design Trends : Web Design Background Textures 3

Web Design Trends : Web Design Background Textures 4

Web Design Trends : Web Design Background Textures 5

Web Design Trends : Web Design Background Textures 6

Web Design Trends : Web Design Background Textures 7

Single Page Sites

Web Design Trends : Web Design One Page Designs



3D Environments

This is more of a novelty than a trend… 3D based sites are fun to use, but aren’t entirely accessible from some browsers and devices. That said, there are some fun new things happening in the way of three dimensional environments, so they’re worth checking out, even if you won’t be seeing them on your iPhone anytime soon ;)



Let the Discussion Begin!

Alright, so I’ve just hit the tip of the iceberg for all of the great trends happening in 2010, and I’ll be the first to admit that I’m sure I missed something. Post your comments, thoughts, trends, and anything else in the comments section and I’ll be taking any really great comments into account when it comes time to edit this post later on!

Happy 2011!

Creative and Inviting Food Advertisement Design Inspiration

Sometimes people choose to buying foods because isn’t taste, price or anything else. Some people including me sometimes buy a food because of these advertisement design, an unique creative and inviting food advertising design could make anyone who look at this ads interest to buy the products. There are a variety of way that food advertisements try to influence you, and food advertising is generally based around the factors mentioned previously. Here you’ll find a collection of brilliant and clever food ads that will be sure to make you look twice and admire the creativity. Download the advertisement design below:
Download Advertising Design

The 960 Grid System

The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements.

Examination of Japanese Website Design Trends

Japan plays host to some very impressive website designers. Their skills in the arts cannot be compared and demonstrate a powerful digital force among Internet readers. Luckily understanding how to read Japanese isn’t required to admire their website graphics and animation effects.
We’ll be looking into a few Japanese website designs which have pushed the limits on conventional development. As a designer it’s a refreshing feeling to work with alternate design concepts and build your own unique ideas off these.

The Rise in Flash

Many of the most popular Japanese websites have been built in Flash, and this is no surprise. Although Flash-based websites do not rank very well in Google (at all) they offer a unique user experience which can’t be found anywhere else.
In fact, Flash offers so much extensible content you may be surprised at just what is possible. Motion backgrounds and animated menu effects are just the tipping point on many Adobe Flash powered websites. Intricate portfolio layouts and detailed characters almost spring to life off the webpage.

One overlooked misconception is the loading speed of each page. Because the entire website is Flash-based it will require a large amount of bandwidth to transfer and download all of the page content. This frequently leads to very long loading/splash pages which are a huge loss for potential user experience.
Although in the end it’s difficult to provide any judgement on the Flash-based approach. There are also many Japanese websites which are built off HTML5/CSS3 so I’m not categorizing all layouts as Flash-based. However with such a wide range of out-of-box thinking Japan has shown us a new outlook on envisioning the modern day website design.

Animation Ignition

It seems the Japanese community is well renowned for their work in the digital animation arts. Ranging from television to video games it seems the artistic works meld into the islands’ society and culture.

In many new-age web designs we are seeing much more illustrated artwork and digital graphics. Icon designers have also integrated an enormous amount of hand-drawn effects into their works. Japanese website designs have become much more branded by the likes of mascots, illustrated vectors, and small page icons.
Similarly artists who offer these graphics showcase their work on many places throughout the web. Twitter backgrounds and Deviant Art accounts are full of some amazing illustrations from past designs.

Custom UI Pattern

This is a common trend amongst web designers and has been growing rapidly. Many Japanese companies which involve their products in the entertainment sector have gone above and beyond to create a dynamic user interface to match their website.

Many of the websites coming to mind include innovative virtual worlds from video games. Katamari Damacy and Kingdom Hearts II specifically stand out as offering a very powerful user interface presence. The striking similarity between menu links in-game and on the webpages are resounding.
This can be seen not only for these games, but countless other series. The most common approach of course is an entire Flash-based website constructed through ActionScript events. Even so, other Japanese graphics artists are creating unique UI effects outside of just the video game industry.

Elements of Physical Reality

It’s not too often we’ll see images of physical reality built into the most popular websites of today. This is quite the contrary of many popular Japanese artists which in fact specialize in building outstanding modern-day layouts.
These include shots of arial birds-eye-view photos from cities and taller buildings. Many times the background or Flash animation on a page will include common everyday natural elements such as cats, trees, cars, and entire human cities. There are neat user effects applied to create a natural mood (e.g. website colors changing from day to night).

These graphics of buildings and people can sometimes even be built into the website itself. The varied degree of creativity from Japan shows even entire websites using a small land mass as navigation for the entire website. Pages can be accessed via buildings, lawn signs, even blimps flying atop the page heading!

Web Gallery Showcase

Below is a small collection of Japanese website designs. These include mostly Flash pages with animation effects and custom UI elements. If you’re looking for design inspiration this may be one of the most creative and “out-there” galleries.
The designs are from a selection of varied topics and niches from a handful of time periods. If you have other suggestions for similar websites feel free to share them in the comments below.

Nestle

Eye Talk Town

Egao Saku

Hiroto Rakusho

Love Happy

kids wonder project

Naruhodo Agent

HTML5 & CSS3: Take Your Design to Another Level

While both languages for HTML5 and CSS3 aren’t fully complete yet, taking the time time to familiarize yourself with some of the pointers in this post can really help you achieve that clean look and feel for your site. Let’s take a deeper look at them.

HTML5

HTML5 is the latest version of HTML or Hypertext Markup Language. It is currently only fully supported by a handful of browsers but the next year should see a large increase in usage. It isn’t expected to be completed until 2014, but the features that are available now are a great way to become acquainted with HTML5 and add some cool elements to your website.

Steve Jobs famously refuses to allow Flash on the iOS due to the many bugs and crashes it experiences, therefore, learning how to use the more intricate features of HTML5 is going to be a must for those who want to develop apps and iOS-friendly websites. With Google rolling out an HTML5-friendly version of YouTube, many developers are starting to see how important this system will become in the near future. However, with Firefox resisting some of the advent of HTML5, developers and designers are still feeling the need to cover all of their bases when implementing new features on a website.
The idea behind HTML5 is that it’s not one large entity, but rather made up of smaller parts that work together to create something innovative and advanced. Each browser may support different features of HTML5, which makes it important for those interested in coding to figure out which features they need and which will be supported by different browsers.
HTML5 simply builds upon the widespread success of HTML4. That means a coder doesn’t have to throw away the existing markup, but rather build upon and improve the old one. For example, forms can be updated to allow for new features such as a better email input for those using a mobile device. However, viewers stuck in IE6 will simply see it as a text field and still be able to use it.
Here are some examples of HTML5 in use:

Features

• Any HTML5 syntax requires a doctype to be specified so that the browser can render the page in standards mode. The good news though is that the doctype declaration has also been simplified from previous HTML. It is now just:
• The audio and visual support in HTML5 is outstanding. As soon as it’s fully running and all browsers support HTML5, you will find it easy to add audio and video to websites without the need for outside plugins.
• Editing the content of your website is simplified with HTML5. Using the contenteditable attribute, you can quickly and painlessly change your text by adding contenteditable=“true” to any element.
• The canvas element makes it possible for you to bypass Photoshop to make your 2D images and directly place them in your code.
• The application cache enables you to navigate web applications while you are offline.

Why Use It

• HTML5 will load much quicker than its older brother because it implements WebSockets.
• Mobile phone applications will be much more accessible if written in HTML5 because you will not have to write applications for a specific brand of phone but rather can create universal applications for all phones.
• You have more flexibility in creating your website.
• Video, audio and images are all easily written right into the code, eliminating the need for any third party software.
• This language is growing and will only result in more, new, better and faster features that will leave old websites looking outdated.
• HTML5 simply builds on HTML4, so the old markup can stay in place as you develop the new features.
• HTML5 and CSS3 together will give you some serious designer credibility.

CSS 3

Cascading Style Sheets (CSS) offer increased flexibility in the presentation of website content. In essence, it just makes everything prettier. Although CSS3 isn’t supported by all browsers yet, it’s becoming increasingly popular because it makes these changes so much easier than trying to get the same effect using something like a Javascript plugin or creating slightly different versions of the exact same image.
One drawback to using CSS is the requirement to implement filters to change how something will appear onscreen using different browsers. Although Internet Explorer is known for bugs, CSS can still be incorrectly interpreted by Firefox or Chrome. As such, some web designers have created different CSS codes to be sent to different browsers, or use filters to cut off CSS delivery completely.
CSS3 offers some exciting new features to enhance the appearance of a website. Although these features might not be absolutely necessary to the functionality of a website, users are coming to expect a website to look awesome as well as operate cleanly. CSS3 makes it easier for designs that will make visitors “ooh and aah” over them to be implemented.
Some features, such as menus, are necessary in almost any website. But with CSS3, the functionality and aesthetic appeal increases exponentially. Submenus upon hovering, horizontal menus, menus with rounded edges, submenus with tabs, submenus with descriptions, and menus with submenus with rounded edges with descriptions on hover are now all possible with some tweaking. Users will appreciate the ability to see a little more of what that page is about before potentially wasting loading time.

Cool New Tricks

Box-shadows – This could allow the main content to slide beneath another area, such as a footer, or cause the area to look as if it’s coming out of or sinking into the website. CSS3 makes this happen without requiring the coder to create a new image or use a Javascript plugin. Another technique is to cause the shadow to appear upon hover.

Text shadows – Sounds exactly like what it is: provide a drop shadow underneath HTML text elements.

h1 {
     text-shadow: 0px 1px 1px rgba(0,0,0,.2);
}

Easier font additions – To add a new font, simply upload the file to your server, link to the CSS file and create a font family.
Multiple backgrounds – Overlaying multiple backgrounds to a page is possible with this code:

body {
     background:
     url(../images/bottom-left.png) top right fixed no-repeat,
     url(../images/bottom-right.png) top left fixed no-repeat,
     url(../images/top-left.png) bottom left fixed no-repeat,
     url(../images/top-right.png) bottom right fixed no-repeat;
     background-color:#ffffff;
}

Border images – Rather than simply using a stodgy old plain border, CSS3 allows you to upload an image to use as a border.
Opacity levels – Before, you had to create a new image or use a CSS filter. Now, simply input “opacity: 0.5;” or another desired number to get the effect.
RGBA coloring – Rather than using hex colors and memorizing them or referring to a cheat sheet, this technique allows you to choose the amount of red, green, blue and opacity in your design and doesn’t require any browser extensions.
Transform – This code allows you to choose how big you want an area to become during hover.
Rounded corners – Prior to CSS3, these used to be tricky, but now you can get rid of those sharp corners without using images..

div {
     border: 2px solid #434343;
     padding: 10px;
     background: #e3e3e3;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     width: 500px;
}

Note: Moz stands for Mozilla, while webkit is for Safari and Chrome.
Resizing elements – This code works in Safari to provide a small resizing triangle that allows users to…resize.

div {
     resize: both;
}

About the Author

Brian Flores is a SEO and copywriter for InMotion Hosting, one of the top dedicated server providers in the country. He regularly posts useful tutorials on WebHostingHelpGuy. You can follow him on Twitter @WHHG_InMotion or @BrianAFlores.

Source: http://webdesignledger.com

Slideshows

Slideshows are becoming increasingly popular these days and can add great functionality to your website. There are a huge variety of plugins available on the internet, some are as easy as inserting a few images into an unordered list whilst others have a range of possible functions to enhance your site.
If used right you give off a great visual impact to your viewers, here are a few site’s that use slideshows to their advantage:

demo.duotive.com/duotive-two

apple.com

puppetbrain.com

launchmind.com

agnarson.com

boerdam.nl

marcsdesign.com

estebanmunoz.com

foxtie.com

---

Large Background Images

This isn’t really a new trend, it’s been going on for a while, but with latest technology and a lot more usage of CDN Servers and Caching Tools having Large Background Images is a lot less con-traversal than it used to be. The great thing with Large Image Backgrounds is that it automatically grabs your visitors attention and can have a huge impact if it’s relative to your target audience.
Overall it can give a great user experience if executed well.

august.com.au

creativespaces.net.au

carfreaks.net

cpeople.ru

thomasbrun.no

nespresso.com/variations

---

The power of CSS3

The new W3C CSS3 icon

CSS Level 3 has been in development since December 2005, since then it is becoming an extremely powerful markup. It supports things such as border effects, transformations, gradients, backgrounds, animations, transitions, media queries, web fonts and multi-column layouts and more. Most common browsers support CSS3 though as usual anything lower than IE9 doesn’t support it but why should that stop you?
You shouldn’t ‘not’ try to keep your website current just because 1 browser doesn’t meet the standards you need, remember website’s are always improving as well as the mark-up for it, don’t take the safe route and not bother else you may lose out in business to other competition. Remember, first impressions count for a lot.

Liquid Layouts

Web design has come along way over the years along with screen resolutions. As it’s evolved you can no longer just expect people to be using the typical 1024*768 screen resolution. Screen’s nowadays come in all shapes and sizes some people even use HDTV’s, why not make use of some of that potential extra space you have and adapt your site to sustain larger and smaller resolutions for a better user experience? It is 2011 remember technology is far superior to how it was 5 years ago.

Not only do you have to consider screen resolution but also aspect ratio, take the iPhone or iPad Touch for example, they have the ability to flip your site in an instant. Take our site for example, if your screen resolution is bigger than 1200px wide the sidebar will be double the width otherwise it will fall-back to a suitable size for a 1024px width resolution. Give it a go, change the browser width and see it change.
There are many popular site’s that do this already so there’s no reason why you shouldn’t support multiple resolutions, after all if you have the ability to use more space why not use it?

Source: http://thefinishedbox.com

Web Design Trends 2011

HTML5 and CSS3
You can’t talk about website design trends for 2011 without mentioning HTML5 and CSS3. As with most versions of HTML, the latest version tends to take over slowly, but eventually you’ll be hard pressed to find older styles. Both HTML5 and CSS3 make websites easier to build and link with social tools. In order to stay marketable as a designer, it is essential to understand how these systems work and use them appropriately.

There is no Flash on those websites. Flash was, and still is, in a way, fruit from the forbidden tree. While almost anything could be done with Flash, design-wise, compatibility issues and interference with search engine optimization still plague it. HTML5 offers some of the same design tools and functionality of Flash, without those problems, and that is why you’ll be seeing more of it in 2011.

Typography

Part of the appeal of HTML5 and CSS3 is the typography offered with them. Website design had always been somewhat limited in terms of typography. You could always use any font you wanted, as long as you rasterized it and placed it as a static image. Obviously, doing that hurts search engine optimization, and also limits the functionality of that type. Typefolly.com has a nice example of what can be done with type in HTML5.
Older typography programs allowed you to use more fonts in your html, but none of them were SEO friendly. With HTML5, CSS3, and new typography programs, there are now many fonts available that do not slow down search engine optimization. For example, Typekit now provides designers with options that are both attractive and SEO compatible. More print style typography will start to become mainstream in 2011 and it will even start to crop up on e-commerce sites.

Bigger and Smaller

High resolution, widescreen desktop monitors are now very affordable, and website designers will be taking advantage of that space. For many years designers had been using the Grid 960 system to optimize their design dimensions. It was based on 1024×768 pixels, which was the average monitor resolution just a few years ago. On activewebgroup.com, only 21% of visitors last month had a screen resolution narrower than 1024. Grid 1140 was created to adjust to this increase in average size. Expect to see most new grid designs for 2011 using this wider format.

In addition to making wider sites to accommodate larger monitors, website designers will also be focusing on smaller, mobile versions of their websites. People are getting more comfortable shopping on their phones, and mobile ecommerce transactions are on the rise. Ecommerce websites will increasingly have mobile versions available, either as an app, or as an alternate, small screen friendly site.

Headers

With wider designs naturally come wider headers. Since a header is the first impression a customer gets of the website, more companies will be making better use of that space. Large and interactive headers with special offers, promotions, and calls to action help increase the number of conversions a website creates. ProfessionalEquipment.com has a good example of this.

For a FREE WEBSITE DESIGN CONSULTATION, Contact Active Web Group TODAY!

Depth

For 2011 creating a sense of dimension and depth will become more common. 3D movies and televisions started to get some traction in 2010, and web designers will be looking to capitalize on that trend for 2011. While true 3D is still just a pipe dream for web designers, the technologies currently available can be used to create a very realistic sense of depth. HTML5, JavaScript, and even Flash combine for some interesting 3D effects. Rowtothepole.com uses parallax scrolling to give their website a sense of depth, and this Michael Jordan inspired site shows a clever use of pop-up book style graphics to create a 3D effect.

Touchscreen

With smartphones, tablets, and even some desktops using touchscreens, 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 touchscreen. Leave plenty of space for a finger to click a link or your website will be unusable on a touch screen device.

Big Image

While 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 2011. Here are a few examples:

Single Page

Along with touchscreens, smartphone apps, and more focus on accommodating varying screen sizes, you’ll be seeing more single page sites, with clear influences from applications and user interfaces in 2011. Interaction is key, and more user friendly websites will start to crop up.
For a FREE WEBSITE DESIGN CONSULTATION, Contact Active Web Group TODAY!

Quick Response

You’ve probably already seen these barcodes in commercials, advertising and magazines. Just take a picture with your smartphone and a website appears! These codes can be used in many ways, in many places, and over the next year will start to become a lot more common. You can use Kaywa to generate a QR code for your website!
We here at Active Web Group believe that these Web designs will be the major trends in Website design for 2011. For more information contact Active Web Group today for a free consultation or let us redesign your current Website with a custom-designed Website for your online presence.

Source: http://www.activewebgroup.com/