IN THIS ISSUE: Streamlining The Responsive Design Process

Digging Into Responsive Design Ingredients



What Topic Would You Like Us to Cover Next?



That's an exciting blog. Thanks for the great work.Really looking forward to read more. Awesome.


For starters I would want to say superb blog! I needed a simple question which I'd prefer to ask if you do not mind. I found myself interested to find out the method that you center yourself and clear your feelings prior to writing. I have had difficulty clearing my thoughts in acquiring my thoughts available. I truly do get pleasure from writing but it really just seems like the 1st ten to fifteen minutes are lost just simply figuring out where to start. Any recommendations or hints? Kudos!

View All Comments

The MasterPiece


There are countless combinations of tools, frameworks, and processes to build a responsive website. While there may not be just one right or wrong way to begin, an outline is a great way to start your project. From the initial wireframes and concepts to the co…

Quick Tutorial


Typefaces play an important role in responsive web design. UX designer Joshua Sortino covers how using a little snazzy jQuery plugin (FitText) and a special typeface can get our fonts and images scale easily. Let’s jump right in!

1. FitText is a lightweight and simple yet very functional jQuery plugin to achieve scalable headlines that fill the width of a pa

A Designer's Quote

If we could treat font sizes not as pixels, but as proportions measured against their container, we could do the same with the different elements draped across our grid.

— Ethan Marcotte



Sequence is a jQuery slider plugin with infinite style. It provides the complete functionality for a website slider without forcing you to use a set theme. In fact, Sequence has no in-built theme, leaving you complete creative control to build a unique slider using only CSS3 — no jQuery knowledge required!


Hoverizr is a very small (2.5KB minified) responsive jQuery plugin that outputs manipulated images on top (or below) your targeted images. It features three effects: “grayscale”, “blur” and “color inversion”. Automatically when you move your mouse over the target elements, the element above fades out to reveal the element beneath whether it is the original image or the manipulated one.


Below you'll find a hand-picked selection of some for your viewing pleasure.


From the Archive


Jeremy Keith loads up his sleigh this year with a nifty mobile-first approach that responds to onscreen conditions.
Rather then starting with the big, bloated desktop site and then scaling down for smaller devices, it makes more sense to start with the constraints of the small screen and then scale up for larger viewports. Using this approach, your layout grid, your large images and your media queries are applied on top of the pre-existing small-screen design. One of the great advantages of the mobile-first approach is that it forces you to really focus on the core content of your page.