Editor’s note: This article is the second piece in our new series introducing new, useful and freely available tools and techniques presented and released by active members of the Web design community (the first article covered PrefixFree, a new tool be Lea Verou). ZURB are well-known for their wireframing and prototyping tools and in this post they present their recent tool, Foundation, a framework to help you build prototypes and production code that’s truly responsive.

You’ve probably already heard about responsive design, which is website design that responds to the device constraints of the person viewing it. It’s a hot topic right now, and with good reason: alternative devices outsell desktop PCs 4 to 1 already, and within three years more Internet traffic in the US will go through mobile devices than through laptops or desktops.

All of this is forcing a convergence on what Jeremy Keith calls the “one Web”: a single Web that doesn’t care what device you’re on, how you’re viewing content or how you’re interacting with it.

Since the beginning of time people have exploited the human desire to sin, to achieve their goals. Finding out what causes people to sin helps us understand the triggers which prompt people to take an action. The Web has made it even easier to exploit these tendencies to sin, in order to build user engagement and excitement about your service or product. In this article we’ll show examples of how successful companies exploit the tendency to conduct all the famous Seven Deadly Sins, and in turn generate momentum with their website visitors. Ready? Let’s roll.

Pride is defined as having an excessively high opinion of oneself. You must remember someone from your school days who had an extremely high sense of their personal appearance or abilities. That’s pride at work. On the Web, this sin will help you sell your product. Every website visitor wants to be associated with a successful service that other people might find impressive.

There comes a point in every website design when you simply want to give the website a little spice to impress the visitor and make it memorable. You want that sexy interaction to capture the user's attention. In our previous articles, we showed you how to spice up your website with sexy buttons, practical elements and attractive visual effects.

In this article, we’ll discuss how to seduce your visitors with a little JavaScript action. In our examples, we'll be using jQuery, a fast and concise JavaScript library that simplifies HTML document traversing, event handling, animation and Ajax interactions for rapid Web development. Ready? Let's get things rolling!

In our past articles, we've experimented with better ways to engage users on web pages with CSS3. We love getting into the nuts and bolts of web design by showing off some nifty coding tricks. In this article we'll take a step back to provide some reasoning for designers to embark on that next redesign.

Great web design happens with sound user needs, solid business goals and focused metrics. Learning how to deconstruct a website is an important step in building a plan that aligns the company vision with the needs of users. A good review will put the focus on the profitability of the business.

Not everything in this article is practical, or even bug-free, but it's a fun primer on what's in the pipeline for Web design. To get the most from these examples, you'll have to use Safari 4 or Chrome. (Firefox 3.5 can handle most of it, but not everything: WebKit is further along than Gecko in its tentative CSS support.) We'll show you how to create impressive image galleries, build animated music players and overlay images like a pro. All set? Let's rock.

In our last article about CSS3, "Pushing Your Buttons With Practical CSS3, we talked about using new CSS3 techniques like gradients, border-radius and drop-shadows to create compelling, flexible and (in some cases) hilarious buttons. In this second article we're going to focus on using those CSS techniques (and a little JavaScript) to create some practical elements and layouts.

As before, caveat coder — a lot of the CSS properties we're going to use have limited support, if any, in IE6/7 and probably 8. Firefox 3.5+ and Safari 4 are your best bet right now to see all the cool stuff going on in CSS right now (Chrome does a pretty good job, too). Why bother with CSS that has such limited support? It won't always have limited support, and these articles are all about preparing for the future of web design (and just doing some really cool stuff). Ready? Let's roll.

CSS3 is the partially implemented sequel to the CSS2 spec we all know and love. It's already popping up in new browsers such as Firefox 3.5, Safari 4 and Chrome. In this article, the first of the articles that explore practical (and even far-fetched) implementation of CSS3, we start by applying CSS3 to something we all have to create: buttons.

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.

Subscribe to our email newsletter for useful tips and valuable resources, sent out every second Tuesday.

It's finally here. Smashing Book #5, our new book on real-life responsive design. With front-end techniques and patterns from actual projects, it's a playbook to master all the tricky facets and hurdles of responsive design. Get the book.Free shipping.

Fixing RWD issues can be quite easy — once you understand exactly why they come up. The Mobile Web Handbook will help you understand technical issues on mobile and how to deal with them effectively.

Hungry for more content? Over 60 eBooks are waiting to be discovered in our lovely Smashing Library. And guess what? You can watch Smashing Conference talks there, too.