Last year I wrote about a promising approach to multi-device Web design that enhanced responsive web design techniques with server-side solutions. Since then the idea, which I dubbed RESS (Responsive Web Design with Server Side Components), has been gaining popularity and a number of developers have written about how they're using it. Hopefully these resources are useful to anyone interested in learning more about RESS.

There are number of nasty traps to avoid when making your site responsive. Brad Frost of R/GA reveals five of the biggest ones and how to sidestep them

As Gestalt principles go, the principle of similarity would seem to be one of the simplest to grasp. It states things that are similar are perceived to be more related than things that are dissimilar. Simple enough, right? As a web designer, however, you’ll need to be familiar with all of the ways that elements can be similar so that you can in any given situation choose the right one to exploit. This is because the different modes of similarity are not created equal. Some are strongly communicative while others are comparatively weak …and there is context to consider. It seems that the principle of similarity is not quite so simple as we might imagine.

Gestalt Principles of Perception:
1 – Figure Ground Relationships

It's pretty amazing what you can do with the pseudo elements :before and :after. For every element on the page, you get two more free ones that you can do just about anything another HTML element could do. They unlock a whole lot of interesting design possibilities without negatively affecting the semantics of your markup. Here's a whole bunch of those amazing things. A roundup, if you will1.

If you’ve yet to get your hands dirty with media queries, now is your chance to create your first responsive website design. In this tutorial we’ll look at converting one of my previous WordPress theme designs into a responsive layout, while taking into consideration the design’s original grid structure.

Use our handy graph paper with browser chrome on top to sketch out your UI and website ideas. The grid matches the scale on our Web Stencil Kit. Easily tear off sheets for review and pin-up.

Today we’re going to take Orman Clark’s Menu Notification Badges design and build it using HTML and CSS. We’ll look at a couple of ways to achieve the effect, including the use of HTML5 data attributes which you may be unfamiliar with. Let’s dive in!

Companies like Apple are making design impossible for startups to ignore. Startups like Path, Airbnb, Square, and Massive Health have design at the core of their business, and they're doing phenomenal work. But what is ‘design’ actually? Is it a logo? A Wordpress theme? An innovative UI?

This was inspired by, and based on @lensco's excellent Simple Responsive Design Test Page. It lets you view any webpage in multiple screen sizes, simulating the viewport of different devices. After getting such a positive response to my original post, I thought I'd expand on it a little. Since people are obviously targeting different device screen sizes with their projects, the form below now lets you generate a custom bookmarklet that displays only those device sizes you're interested in.

RT @Cennydd: Most of my UI layouts now begin as Page Description Diagrams: . So important in this responsive era. /c ...

@stugoo @withoutnations - just a bit odd

For designers, it’s easy to jump right into the design phase of a website before giving the user experience the consideration it deserves. Too often, we prematurely turn our focus to page design and information architecture, when we should focus on the user flows that need to be supported by our designs. It’s time to make the user flows a bigger priority in our design process.

RT @uxfactory: How-To Minimize Load Time for Fast User Experiences | UX Booth:

RT @whatterz: Responsive web design templates and frameworks #responsive #design

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid

RT @Folletto: Excellent examples of CSS media queries:
/via @adactio

@thetalldesigner it was Ethan Marcotte or @beep

Simple things: the 1px drop in click navigation items

In this article, the focus is on what’s coming: styling techniques you’ll use in the immediate and near-term future. From styling HTML 5 elements to rearranging layout based on display parameters to crazy selection patterns to transforming element layout, these are all techniques that you may use tomorrow, next month, or next year. With partial browser support, they’re all on the cutting edge of Web design.

RT @typekit: Type study: Using Lettering,js for kerning and other radical web typography

Findings from the A LIST APART Survey, 2008

Emastic is a very complete CSS Framework integrating various CSS construction techniques like floats, absolute positioning, complete freedom of your default width, extra usability with em based grid system plus possibility of fluid columns and extra % based grid system and many more features. Then the question is why build another grid system.

The Golden Grid is a web grid system. It 's a product of the search for the perfect modern grid system. It 's meant to be a CSS tool for grid based web sites.

The Problem with CSS

Matrix of fonts bundled with Mac and Windows operating systems, Microsoft Office and Adobe Creative Suite

The user will get a site design that looks pretty much as intended, however, it will be a watered down version of the beauty intended.

Web designs need not look exactly the same in all browsers