50+ Fresh CSS Techniques, Tutorials and Resources

Learning CSS and how to use it effectively can be a reasonably easy thing to do for a beginning web developer. In the hands of a seasoned professional, CSS can be stretched and pushed it to its limits where it can seem complicated and yet perfect at the same time.
Being able to adapt to new ideas and different techniques, as well as seeking new solutions to old problems is part and parcel of being a web designer. And with the speed at which CSS development is constantly moving, keeping up with new developments can be challenging.
In this article, we’ll bring you up to date with the latest in CSS development through a collection of fresh CSS tutorials, techniques, and resources. We hope this extensive list will teach you something new, or else remind you of some methods you haven’t used for a while.

Menus, Buttons and Forms

Create a Button with Hover and Active States using CSS Sprites
Some designers neglect the click state (active: property in CSS) in web design, either because they’re unaware of it, underestimate the importance of it, or are just lazy. It’s a simple effect that improves usability by giving the user feedback as to what they’ve clicked on, and can add depth to a design.

CSS Absolute Positioning: Create A Fancy Link Block
Absolute positioning is a well-known CSS technique supported by all web browsers. If you position an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact position you specify. In this tutorial, you’ll use absolute positioning to create a fancy link block.

Simply-Buttons v2
Cross-browser, custom HTML <button> elements with inactive, active, and hover states.

Create A Sexy Vertical Sliding Panel Using jQuery And CSS3
In this post you will learn how to create a flexible vertically-positioned sliding panel that simulates a drawer effect. Normally, this technique would be used for a horizontally-positioned sliding panel that would push everything else down, but with this technique, the panel overlays the content.

Style a List with One Pixel
Using a one-pixel background image in CSS (repeat-x for a horizontal line, repeat-y for vertical, and repeat for a fill color) you’ll learn how to style a depth-chart looking unordered list.

Pushing Your Buttons With Practical CSS3
“Calls to action are critical for any website, and a compelling, attention-grabbing, clickable button goes a long way toward driving that engagement. In the past, really awesome buttons needed extra markup, sliding doors or other trickery. We’ll show you here how to create nice button styles without any hacks or cheats.”

Multi-level Multi-column Multi Menus with pure CSS
Have you ever successfully built a multi-level, multi-column, multi-menu, light-weight, and cross browser menu or navigation with pure CSS and without JavaScript? This tutorial will teach you how.

Elegant Drop Menu with CSS only
If you have a clean web site that’s become cluttered with extra content, categories, and pages, this clean and elegant menu offers a great space-saving solution.

Create a Beautiful Dropdown Blogroll Without JavaScript
This tutorial demonstrates how to style a drop-down menu to hold your blogroll content (instead of using the typically-ugly HTML <select> element). Done with pure CSS, but requires hacks to work with IE6.

Build a Simple Button with CSS Image Sprites
In this tutorial you’ll learn how to create a simple button using CSS sprites. The tutorial covers creation of the image in Photoshop and finishes with the coded example.

CSS3 Hover Tabs without JavaScript
Using some new CSS3 techniques you’ll learn how to create a basic tabbed content area that changes on hover using pure CSS

Use Pure CSS To Style a Web Form Dynamically
Form elements are normally styled by changing the border color or background color properties via CSS. This tutorial shows you how to style text field and textarea elements of varying widths with rounded-corner background images.

Horizontal Sub-nav with CSS & jQuery
In this tutorial, Soh Tanaka teaches you how to create an elegant horizontal sub-nav using CSS and a little jQuery for IE6 compatibility.

CSS3 Speech Bubble
Learn how to create a speech bubble with HTML and CSS3.

Create Nice Scalable CSS Based Breadcrumbs
This tutorial shows you how to create a scalable CSS-based breadcrumb navigation using a single graphic, some basic CSS, and an unordered list.

Fluid Searchbox
Creating a search box that adjusts to the size of the browser window is simple, but becomes difficult when you add elements to the left and right of it, some being fixed width (width in px or em) and some fluid width (width in %). This article demonstrates a solution to this problem.

Using Rounded Corners with CSS3
As CSS3 gets closer to becoming the new standard for mainstream design, the days of rounded corners through elaborate background images is fading. In this tutorial you’ll learn how to create rounded corners using vendor-specific CSS3 techniques supported by Firefox and Safari.

Web Page Layout Techniques

The Ultimate Guide to Creating a Design and Converting it to HTML and CSS
This in-depth screencast tutorial is the third part of a series that demonstrates how to create an iPhone app web site. This tutorial demonstrates the final step: converting the Photoshop design into HTML and CSS.

How to Code a Clean Portfolio Design with jQuery Slider
This tutorial will teach you how to slice and code a web page from a Photoshop design, plus teach you how to implement a jQuery image slider.

Minimal and Modern Layout: PSD to XHTML/CSS Conversion
This is the second part of a two-part series of creating a minimal and modern website layout in Photoshop. The part focuses on converting the design to styled markup.

Create YouTube-like adaptable view using CSS and jQuery
Have you ever noticed the "change view" feature on YouTube that allows you to switch between normal and wide mode and thus expand/shrink the movie area? In this tutorial you’ll learn how to duplicate this feature using CSS and jQuery.

How to distribute elements horizontally using CSS
This article shows you how to resolve the problem of extra margin settings on first and last children that are distributed horizontally within a main container using CSS.

Sticky (Fixed) SideNav Layout with CSS
This tutorial teaches you how to build a frame-like fixed sidebar navigation menu that stays in place when the page is scrolled.

CSS: Design Out Of The Box
In this informative post, the author discusses a number of example website designs that break away from typical columned and boxed layout. The article includes a number of tips and best practices that can help designers accomplish a similar style.

5 Simple, But Useful CSS Properties
Another article from Web Designer Wall, this time discussing five well-supported, practical, but rarely-used, CSS properties

25 Incredibly Useful CSS Tricks You Should Know
This article describes 25 useful CSS tips and techniques to help you design great web interfaces.

11 Classic CSS Techniques Made Simple with CSS3
You shouldn't limit yourself to old techniques when there's a new age coming. This new age includes the use of CSS3. In this tutorial, you’ll learn eleven different effects that can be achieved quite easily with CSS3 but would normally be quite time-consuming with standard CSS methods.

5 Rules To Write More Readable CSS Files
This article describes five practical rules that can help you write well-structured and more readable CSS files.

Text and Typography

6 Ways To Improve Your Web Typography
Because of the many options available, not to mention cross-browser differences, improving typography on the web is not always simple. In this post you’ll learn six different ways to improve typography on your web projects.

Create a Letterpress Effect with CSS Text-Shadow
The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS.

Images, Galleries and Sprites

3 Easy and Fast CSS Techniques for Faux Image Cropping
This article is a summary of 3 fast and easy CSS techniques you can use to display only a portion of an image in your content. Because the images aren’t literally cropped, the method is termed “Faux Image Cropping”.

Use CSS to build a map with hoverable regions
In this article you will learn how to how to build a map with hoverable regions, using CSS and a single image.

Date Display Technique with Sprites
This article on CSS-Tricks demonstrates how to display the date on WordPress blog posts using image sprites — the same method that’s used on the Learning jQuery website.

Building Faster Websites with CSS Sprites
In this tutorial you’ll learn how to take advantage of CSS sprites to greatly increase your website’s speed.

Perfect Full Page Background Image
Another technique from CSS-Tricks, this time demonstrating how to implement a full-page background image that fills the entire page, will scale the image as needed, retain image proportions, does not cause scrollbars, and is cross-browser compatible.

A Beautiful Apple-style Slideshow Gallery With CSS & jQuery
Learn how to build an Apple-like slideshow gallery, similar to what Apple uses to showcase their products.

How To Create a Pure CSS Polaroid Photo Gallery
Magical things can be created by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. In this tutorial you’ll learn how to build a Polaroid photo gallery with a re-stacking hover effect using pure CSS.

Editable CSS3 Image Gallery
A screencast from CSS-Tricks that demonstrates how to create a fancy image gallery with some HTML5, CSS3, and jQuery. Works best in a WebKit browser.

Turn Your Images Into Polaroids with CSS3
In the first part of this tutorial you’ll create a grid of images that’s linked to a Flickr account. In the second part, you’ll spice it up by giving the images a pure CSS Polaroid effect.

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
This is a comprehensive discussion of the technique of CSS image sprites, by Chris Coyier. The article has been recently updated to include more up-to-date information and methods.

Fresh CSS Frameworks

CSScaffold Framework
CSScaffold is a a new type of CSS Framework, built with PHP, that helps speed up your development time by doing the hard work for you. Its power lies in its ability to extend CSS and generate CSS found in other CSS frameworks.

xCSS – Object Oriented CSS Framework
xCSS is a lightweight framework, still in beta, that allows you to take advantage of an object-oriented workflow, which means a dramatic cut-down in development time through the use of variables and other handy features.

eCSStender.org
eCSStender is a JavaScript library that lets you write CSS without having to use browser-specific properties and hacks. Extensions built with eCSStender greatly simplify the design process because you can author modern CSS using advanced selectors, properties such as border-radius, and custom font faces, all of which work in IE6.

Cross Browser Hacks, Fixes and Guides

Render alternate layouts in IE6 with only CSS
Although this may not be something you would do on a client project, this article shows you how to create an alternate layout IE6 users using CSS and a conditional comment.

Definitive Guide to Taming the IE6 Beast
A useful collection of IE6 hacks and fixes that will, as the title implies, help you tame the beast that is IE6.

Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs
The author of this article 'has scoured the web' for resources and fixes for IE6 and put them all together in this cheatsheet/reference manual as a resource for anyone who has to deal with Internet Explorer 6 on a regular basis.

ie6fixer
ie6fixer is a tool specifically designed to ease the pain of the IE6 CSS debugger. The tool was conceived to decrease the monkey work when starting an ie6 CSS fix file by applying a series of basic fixes that are known to conquer many problems and cause as little harm as possible. It should fix 40-60% of all IE6 issues and problems, with just one click, outputting rough CSS that can be placed in a separate section and can be used as a solid start for debugging IE6 issues.

Useful CSS Resources

CSSG Collection: Free Comment Styles
Designing the dreaded comments section of a web page can be a pain. To help you with this, CSS Globe is giving away a collection of comment styles that you can use on your own projects to save you a lot of time and agony.

CSS 3 Cheat Sheet (PDF)
This printable CSS 3 Cheat Sheet (PDF), first published on SM in July 2009, offers a complete listing of all the properties, selector types, and allowed values in the current CSS 3 specification from the W3C. Each property is provided in a section that attempts to match it with the section (module) that it is most actively associated within the W3C specification. Next to each property is a listing of the expected values that that property takes.

Cascading Style Sheet Level 2 Visual Cheat Sheet
This cheat sheet (3 pages) contains an essential reference to CSS2 properties with detailed descriptions and some sample code. The simple visual style used to design this sheet allows you to find, at a glance, everything you’re looking for.

CSS Specificity – Cheat Sheet
A common difficulty with CSS is determining what CSS rule will be applied on the page. This cheat sheet can help you better understand CSS specificity.

Best Web-Frameworks – Find and compare PHP, Ruby, Python, Java, JS and CSS Frameworks
This useful resource helps you compare almost all CSS, PHP, Ruby, Python, Java and JavaScript frameworks, so you can make the right choice for your project.

Visual Cheat Sheet: CSS Compatibility with Internet Explorer 6, 7 and 8
This Visual Cheat Sheet will help you understand CSS behavior in the three commonly-used versions of Internet Explorer. It includes information on @rules, element selectors, attribute selectors, pseudo-classes, border and layout properties, and more.

SlickMap CSS – A Visual Sitemapping Tool for Web Developers
SlickMap CSS is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.

CSS Basics
CSS Basics is divided into 18 chapters, covering all aspects of CSS, from CSS classes and IDs to the more difficult pseudo elements and positioning. CSS basics covers a wide range of information so it’s valuable for those learning the basics of CSS as well as experienced CSS developers. Each chapter is downloadable and printable and you also have the option to download the entire series in a single PDF file.

Top 10 Best Web Design Tips

Top 10 Web Design Tips

When it comes to web design, Alchemy Interactive – a leading London based web design agency – offers the following top ten tips: 

 

1. Have a strong, clear brand message

Your web site should project the image you want the world to see – and the great news is that through web design you can control that image entirely. In terms of physical design this means positioning your logo or key message in the top left hand corner – the part of the screen our eyes are most naturally drawn to.

 

2. Provide a clear, concise navigation method 

A good web designer will ensure that they use design techniques to lead the user around the screen and site. Clearly differentiated sub-sections and even a site map can ensure a concise, easy to follow navigation route, while good use of position, colour, contrast and size can all help focus the eye. Stick to one main navigation menu, remain consistent throughout the site, use sub-navigation and keep it uncluttered by avoiding drop down menus.

 

3. Make it intuitively easy to use

Visitors can be fickle and if a site is hard or slow to navigate they’ll be off. Ensure navigation buttons are obvious and easily identifiable – towards the top of the page is good – and have appropriate links directly from page to page so the user can quickly switch when something catches their interest. Finally, adhere to the functionalities people have come to expect. For example, if text is underlined your user will naturally expect it to be a link.

 

4. Keep it consistent

Users like to know where they are within a website and if the style of a page changes dramatically or somehow feels different visitors will become disengaged and can start to feel lost. Maintain consistency – and a professional image – by ensuring everything matches, from heading sizes and typefaces to design, colour and style of image. 

 

5. Keep it simple

The whole draw of using a website is that it should be quick and easy to use. To this end simplicity is key.
 

Succinct, useful information should be available at the touch of a button.  Today’s surfers won’t hang around so make sure the page is scannable. That means not being afraid to use (read: leave in) plenty of white space. There is a theory behind this – our eyes do not naturally work in a linear fashion. Given the chance they’ll take in more and then zoom in to an area of interest from the bigger picture. 

 

6. Ensure it’s easy to understand 

Visitors coming to your website typically won’t want to spend much time so ensure that every aspect is easy to understand; from the navigation to the copy. There are design techniques that can help make the information on a page easier to understand – think shorter sentences, larger font, sections differentiated by contrast and colour and, as previously mentioned, good use of white space. To this end, there are some common rules of thumb: never use more than three typefaces, or more than three different point sizes for a font and keep lines of text to 18 words - 50-80 characters – max!

 

7. Degrade gracefully

Not everyone has the latest pc and the fastest broadband so make sure your code is as simple as it can be without compromising on the elements you need. HTML code needs to degrade gracefully and not slow down or cause problems to lower spec computers. Cause an IT issue on your visitors pc and you can be sure that customer won’t be back again... or be recommending your site to anyone else!

 

8. Write it with your target audience in mind

When writing – or commissioning - the copy for your website, do bear in mind your target audience. Tempting as it is to use the medium to bombard the user with all the information you can, do keep it succinct in style and use laymen’s terms if appropriate – or include a glossary if technical terms are unavoidable. If you are hoping to attract visitors through search engine optimisation (SEO) you’ll need to consider the key words people will be using in their searches. Weave these into the copy as often as is appropriate to help propel your site up a search engines listings.

 

9. Consider usability 

At the end of the day if your website isn’t usable visitors will be off – as quick as a mouse. So, when working on the web design, consider the end user’s experience of the site.

It can be a good idea to make a list of the things a user will want to use your site for and then checking that these are easy to achieve and if necessary are readily available from the homepage – e.g. Start shopping, Current offers, Book an appointment etc. Then test early and throughout the process test and test again. The only way to really check that your site is as user friendly as it can be is to test it out on people who know nothing about your business.

 

10. Make sure it’s compliant

A good website should adhere to certain guidelines. For example, all web sites designed by Alchemy Interactive – a London based web design agency – comply with the Web Accessibility Initiative (WAI). This ensures their sites are suitable and accessible for people with disabilities and cover aspects of web design such as screen flickering - line with the Disability Discrimination Act (DDA).

 

source: http://www.alchemyinteractive.co.uk/resources/top-10-web-design-tips

 

10 Design Tips for Your Web Site

 

There’s nothing like a cluttered, clunky Web site to drive away prospective customers. How can you make your site an enticing place? Here are my tips for improving 10 key aspects of your Web site.

1. Navigation – Put some real thought into site layout, so customers can navigate it easily. Make sure all important sections are prominently listed. Link as many pages as you can into the main navigation bar, instead of having subpages from pages.
2. Branding – Incorporate memorable elements of your brand into your Web site, such as your logo and company color scheme. Make your logo prominent on your home page and put it on all subsequent pages to promote your brand.
3. Home page – Visitors should be able to tell immediately what your site is about. Any call to action such as “Buy Now” sould be visually prominent on the page.
4. Content – If your primary business is offline, just present enough clear, concise information to get customers to call or email. If you sell your products or services online, provide complete information to give customers the confidence to click and buy. Don’t put too much content on any one page, as Internet readers don’t like to scroll down.
5. Refresh content – Changing content draws customers back. One easy way to renew your content without a lot of code changes is by starting a blog.
6. Think SEO – Always bear search engine optimization (SEO) in mind as you design. Photos and splashy graphics may look nice, but likely won’t be read by search engines. One fix: have a text link that says “View portfolio” instead of a graphical button. The text will be more easily read by search engines.
7. Colors – Use complementary colors that make your text easily readable. Clashing colors such as red text on a blue background make text too hard to read and turn off visitors.
8. Be accessible – Make sure your contact information or a prominent link to it is at the top or bottom of every page of your site.
9. Sound good – Music that starts playing automatically when your site loads is an automatic turnoff for many visitors. If you have sound, make sure it’s pleasant and easily disabled.
10. External links – Links that take visitors away from your site should always load in a new window. Make sure your site stays in front of the customer, even as you provide them with additional resources.

source: http://www.register.com/learningcenter/web-101/10-design-tips-for-your-web-site/

Small Business Website Design Tips

Of all of the tools in the small business owner's marketing arsenal, your website is one of the most powerful. A well-designed site can be the critical difference that makes a customer choose to stay, browse and buy instead of moving on to a competitor's page. That could mean more sales to track with your retail management software.

Many small business owners hire web design professionals to create their site, but even if you choose someone else to implement your vision, knowing what you want ahead of time will help ensure the final product looks great and achieves its purpose.

Here are some tips to keep in mind when creating an eye-catching, user-friendly and effective website for your small firm.

Branding

A strong brand identity is important because you want your website to look as professional as possible and instill confidence in potential customers, as part of your strategy to boost sales which are captured by your retail management software. Fortunately, the web offers small businesses the chance to look much bigger than they are through the use of clever branding and an attractive and prominently placed logo.

Make sure you use this same logo on the rest of your marketing materials, as well as on invoices and other business communications to create a consistent and familiar brand.

Simplicity

It has been proven time and time again - people don't like websites that have too much clutter or require excessive clicking to find information. Much like a well-organized shop, a clean and clear site design allows customers to relax and enables them to locate what they are looking for.

Fonts. Make sure your choice of font and font size are focused on readability rather than just design. Remember that people with different levels of vision could be viewing your page and aim to be as inclusive as possible.

Graphics. Pictures are eye-catching and attractive, but resist the temptation to overload customers with visual images. Too many pictures can also make a site load more slowly. Experts suggest that you include a good mix of graphics and text on each page to better allow search engines to assess your site's relevancy.

Text. Aim for at least 250 words of text per page, with keywords included. You can also make text as easy to read as possible by using bullet points, numbered lists and bolding to draw the viewer's eye to the most important points.

Transparency

Contact information. Make sure you provide relevant contact information - including phone number, email and physical address - on your home page, or as a header on every page. The idea is to make it as easy as possible for someone to get in touch if they have a query, encounter a problem or would like more information on your products or services.

Business information. Be upfront and clear about exactly what you do and include this information on your home page. What is your pricing system? Who do you sell to? Try to anticipate people's questions before they ask them.

Navigability

Site map. Consider including a site map that will list all of the pages on your site. Remember to update your map whenever you add or delete a page.

Search function. These days, people are used to being able to search for what they want and obtain meaningful results at the click of a button. Adding a search function to your site will help prevent customers from looking elsewhere if they don't immediately see what they are looking for on your home page.

Icons and navigation. Rather than challenging people's expectations with an unusual layout, it is probably better to stick to web standards for icons and navigation. Your customers will thank you.

Photos

If you are trying to sell a product, you want to make it look as good as possible. Many small business owners use professional photos to highlight what they are selling. This may be the closest a customer gets to your product before they decide to buy - or not to buy.

Content

Of course, the aim of your web page is to create new customers and encourage existing ones to buy more, so you can record the sales with your retail management software. One of the best ways to achieve this goal is by including interesting and informative content on your site.

Keep in mind that if any of this content is time-sensitive, you will have to keep an eye on it to make sure it has not become out of date. If your last press release is from two years ago, consider removing that page altogether or adding a few new ones to avoid appearing behind the times.

Interactive content. There is an increasing trend for websites offering interactive content, such as surveys, comments, ratings and reviews. Just make sure you can invest the time and effort needed to monitor communications on your site - for example, by manually approving reviews before they are posted to prevent abuse.

link:
http://smallbusiness.intuit.com/news/Marketing-business/19019151/

Latest 10 Web Design Trends for 2013

For starters, we’d like to say thank you for the amazing reception our free eBook Web design and Mobile Trends for 2013 has had since its launch last week, and especially to all those who made it possible by sharing their insightful opinions.
Today we’re doing a review of the end conclusions, where we will identify and analyze 10 of the key trends. This is just a brief overview of the conclusions you can read in the book. In fact, we have now released an updated version of the eBook in PDF format, which includes a few corrections and a new layout for an easier and more enjoyable reading experience.

• What will be those key trends?

• 1. CONTENT FIRST
• 2. SIMPLICITY OF DESIGN INTERACTION AND CONTENT
• 3. UX CENTERED DESIGN
• 4. APP STYLE INTERFACES
• 5. THE UNIFICATION OF DESKTOP AND MOBILE INTO A SINGLE VERSION
• 6. SVG AND RESPONSIVE TECHNIQUES
• 7. FLAT COLORS AND NO MORE SKEUOMORPHISM
• 8. TECHNOLOGY AGNOSTIC
• 9. EXPERIMENTATION AND INNOVATION IN DEVICE SENSORS AND INTERACTION
• 10. THE INTERNET OF THINGS

It’s no easy task putting together a short summary of all the interviews, but as far as we’re concerned, there are a few memorable statements in the book which nicely encapsulate the conclusions we’ve come to:

Bruce Lawson:“If I go to a train website, I don't really want to see a picture of Richard Branson smiling at me, I don't want to read the Chief Exec's ambitions and life history. All I want to know is what time my train is and how much it is.”
Karen McGrane:“Mobile is not the Lite version. You don’t get to decide which device people use to visit your website. They do.”
Simon Foster:“I always keep it in mind that no matter how beautiful I make a website the average user only really wants to spend about 10 seconds on it.”

This project reveals the need to prioritize content and the user’s point of view. Almost all the participants expressed concerns about accessibility and application performance across the multiple devices that exist today and will only continue to increase in number. This wasn’t the case a few years ago, as Rachel Andrew points out:

“We were all saying ‘in a few year’s time we’re going to have massive screens and all this space and people are going to have really fast connections’ and what’s happened is we’ve all ended up on tiny little screens with crappy bandwidth.”

So years ago the tendencies would have been very different. We would have been focusing more on development of visual effects, animation etc...But the future is unknowable.
We have to reach our target users, wherever they live, whatever device or browser they use, and serve them our content in the most efficient way possible. Though this is what web standards evangelists have been shouting from the rooftops for years.
All the trends discussed here are interdependent and fundamentally defined by three principles: Content oriented, UX-centered and Simplicity, which make up the new paradigm we’ll need to work with when we come to face the deluge of devices that’s looming on the horizon.

• 1. Content First

  
  Content-first will be the center of the galaxy. Content is the most talked-about term in the book. In the coming months we’ll see deep debate about how content should be presented to the user and whether or not we should adapt it to the device.
  In any case, this should be our main concern. We need to create efficient, searchable, accessible, multi-platform content and make sure it reaches the user via the best interactive experience possible.
  

• 2. Simplicity of Design Interaction and Content

  
  Simplicity is the new paradigm. The process of simplification will be the only tool we have to make content accessible and readable on the greatest possible number of devices, with the best user experience. Content strategy, UX, Usability, Accessibility and Visual Design must all be guided by this new paradigm.
  

• 3. UX Centered Design

  
  The user’s point of view and their experience of using the site and its content is what is ultimately important. All participants agree on simplification on a visual and interaction level. Traditional websites will continue to adopt mobile app UI patterns precisely because they offer a more simple and efficient user experience, which brings us to the next point, “App Style Interfaces”...
  

• 4. App Style Interfaces

  
  Over the next few months we’re going to witness a process of transformation for most desktop websites, which will increasingly imitate the style and interfaces of mobile apps, unifying and simplifying content and design and at the same time facilitating the creation of responsive projects.
  

• 5. The unification of desktop and mobile into a single version

  
  Responsive, Adaptative Content, Mobile First, Device Agnostic, Resolution Independent; all these terms are evolving towards a common destination which is the unification of desktop and mobile into a single version. But how to integrate apps and experiences through multiple devices?
  Our experts foresee an evolution in responsive. The trend until now has been to adapt content, but many voices now argue for unification.
  

• 6. SVG and Responsive Techniques

  
  The search for multi-platform versions and cross-platform technologies will lead to responsive techniques such as SVG, webfonts, design with typography and icon fonts evolving and becoming more widespread, and on a visual level we’ll see trends like the ones coming up in the next point...
  

• 7. Flat Colors and no more skeuomorphism

  
  The main visual trends identified by our participants were simplicity, minimalism, clear layouts, app-style interfaces, design focusing on typography, less decoration, less skeuomorphic interfaces, flat style, flat colors... This exact trend towards simplification in design and seemingly aesthetic matters, such as flat colors, responds to the need to create adaptative projects and serve images and scalable elements to retina displays with excellent performance on 3G connections, but also to mobiles with inferior provisions from the non-western market and to devices such as eReaders.
  

• 8. Technology Agnostic

  
  Technology agnostic, of course, is the main idea.
  In web standards based applications, looking at the data graphic below we can see that the HTML/ CSS/ Javascript trio is the “primordial soup”. We then have lots of CSS in its various forms, custom filters, CSS Effects, 3D Transforms, Preprocessors and technologies such SVG or webfonts related to responsive techniques. It’s worth pointing out the growing interest in Javascript for web app development, but when it comes to effects, animation, filters etc., it will step aside to make way for the new capacities of CSS3.
  In server-side languages Ruby and Python and experimentation with Node.js are becoming more widespread. The multiplicity of frameworks and builders will be another constant.
  On the other hand we have the development of native apps for iOS and Android, where there’s nothing new either, just the intense and continual increase in demand and the desire to have more suitable cross-platform technologies, based on web standard technologies or otherwise. The spread of Android means demand for Android apps seems to be gaining in importance.
  Another thing that really stands out is the growing interest in WebGL, particularly among the big agencies. This technology is raising high expectations thanks to its performance and the potential it offers on an experimental level.
  

• 9. Experimentation and innovation in device sensors and interaction

  
  It will be a time for getting the best out of mobile technology and creating new user experiences, exploring device sensors and experimenting widely with touch-enabled-interfaces, speech-based, etc.
  

• 10. The internet of things

  
  Soon we’ll be able to communicate not only with our fridges and televisions, but even with devices with tiny LED screens, In-kitchen devices, In-car audio interfaces... Hundreds of totally different platforms will spring up. Without a doubt, interactive TV will have a leading role. How will we be able to evolve towards a rational unification of all this?
  As Aarron Walter says, we’ll see an “Ecosystem of connected services” and we’ll have to work hard on integrating services and user accounts.
  
  source:http://www.awwwards.com/10-web-design-trends-for-2013.html
  
  

5 Simple Web Design Tips To Improve Site Conversions

Great web design is not about winning awards or having the most colorful website. Its about the experience your users encounter when they get to your site and achieve what you have set out for them to do.
If you are a small business owner most likely your site is to create new leads and sales.
Here are 5 simple tips that will help improve conversions:

1. Layout

Make your layout support your content; not the other way around.
You want the eye to flow from your main message and supporting attributes (testimonials, blog posts, videos, really neat things your company has achieved) right to your conversion points. Remember, your site is not there to showcase how great your company is but to achieve your business goal: sales or leads.

The example on the left shows your hard conversion point, title, and a picture above the fold.
The eye has enough room to follow a path to the next headline and its supporting point. There is no horizontal line "at the fold" breaking up the page; this lets the user know there is more content.
The other examples bombard with imagery, no text. Consequently there is no flow from one message to the other. The flow through the page is cut off with cluttered images and text. These layouts create a horizontal line "at the fold"; the user may not even know to scroll down to get to understand what your company does.

2. Colors

If you have strong colors in your logo pull them out and use them as highlights rather than the base of your site: just because your logo is black and red certainly does not mean your site should be.

• use light backgrounds; it is extremely hard to read anything more than a headline on a dark colored background
• use a single color for all your calls to action (This will help call them out)
• be consistent with your color usage

Overwhelming colors = overwhelmed visitors.

3. Calls To Action

Make sure your calls to action sit in your visitor's path above the fold.
Make sure primary calls to action are larger and have a prominent position over your soft conversion points like a sign up newsletter buttons etc.
Just because everyone zigs, does not mean you have to zag. You still want to be consistent to what is out there on the web. Be aware of your demographic and what they are used to in terms of usability and style and always make sure your CTA is prominent and stands out.
Remember to test, test, test and find out what works for your site! You can use these free CSS button sites for testing:

• cssbuttongenerator.com
• CSS Tricks Button Maker

For more on effective Calls to Actions see 50 Effective and Creative Call to Action Buttons

4. Use Font Size To Indicate Importance

If all your text is the same size nothing seems important on the page and your message will get lost.
By creating a hierarchy you will have a visual flow from what is important to less.

Are You Reading This?

Now are you reading this?

Now this!

5. Stock Imagery

Ever seen this image? She not only sells condos but ALSO answers your phones!

Avoid common stock images. We know the girl selling condos in that billboard ad is definitely not the same answering your phones.
Stock images are okay if used properly. Otherwise they just seem cold and uninviting. Check out Stock Xchng for free stock photos that dont look like stock photos.
Pictures are great; just make sure that the pictures make sense for your business. You want potential consumers to see themselves in your brand so why not use them in your imagery?
By following these simple tips, you will be on your way to helping your potential customers easily find the information they need to make a more informed decision about your brand and the service/product you provide and increase your conversions.

source more: http://www.searchenginepeople.com/blog/5-simple-web-design-tips-to-improve-site-conversions.html#ixzz2TXXWw5lI