Foresight.js gives webpages the ability to tell if the user's device is capable of viewing high-resolution images (such as the 3rd generation iPad) before the image has been requested from the server. Additionally, it judges if the user's device currently has a fast enough network connection for high-resolution images. Depending on device display and network connectivity, foresight.js will request the appropriate image for the webpage. By customizing the img src attribute using methods such as URI templates, or finding and replacing values within the URI, it is able to form requests built for your image's resolution variants. Media queries however, could be used when dealing with CSS background-images, while foresight.js is used to handle inline img elements (or until current web standards are improved).

Breakpoint aims to take some of the pain out of creating a responsive layout. Breakpoint figures out the minimum screen size needed to achieve the layout you want and creates the media query for you.

LifeEdited shows how to design your life to include more money, health and happiness with less stuff, space and energy. It’s life. Edited.

Since 1950, the average American consumes 6 times more energy and carries 24 times more personal debt. He uses 3 times more living space, but still doesn’t have enough room to store his stuff, a fact made clear by a $22B personal storage industry. Despite this excess (or perhaps because of it), we find ourselves no happier than we were 60 years ago. Most of us realize it’s relationships and experiences–not possessions–that make us happy. Why don’t we design our homes, products and lifestyles accordingly?

LifeEdited is answering those questions directly. It started in 2010 when Graham Hill, founder of Treehugger.com, launched a competition to design his compact New York City apartment, making it into a living embodiment of the ‘edited’ lifestyle. Following Hill’s popular TED talk about the apartment, he realized he wasn’t the only one craving a better, simpler life. Committed to making this lifestyle available to all, LifeEdited became a company and is now building homes, consulting, showcasing products and giving tips that show how we can all have more time, money and happiness with less stuff, space and waste.

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? It’s so much more than that. It’s a state of mind. It’s an approach to a problem. It’s how you’re going to kick your competitor’s ass. This handy guide will help you understand design and provide resources to help you find awesome design talent.

Made with HTML/CSS (no images, no JS*) this is a simple interactive experiment with responsive design techniques. Use the buttons top-right to toggle between desktop and mobile layouts.

Using simple layout wireframes, this illustrates how a series of pages could work across these different devices, by simulating how the layout of each page would change responsively, to suit the context.

UK Government web design principles

The H5 Theme Template provides everything you need to create beautiful themes with HTML 5 right now. H5 contains a complete set of theme files and folders, and each file has been meticulously crafted with all of the latest and greatest WordPress functionality. As a template theme, H5 is designed with easy customization and personalization in mind, serving as a solid starting point for your next HTML-5-based theme.

Unlike other frameworks, H5 works great as a basic theme right out of the box. Of course, this is a template theme we’re talking about here, so you will inevitably feel “inspired” to begin tweaking and styling its minimalistic appearance to get the design looking exactly how you want it. And that is entirely the point: H5 makes it quick and easy to begin designing themes with HTML 5. And best of all, H5 is completely free.

The Logo Kit is a logo dimension framework that helps you define your next customers (or your own) logos in leading social network formats. The kit incorporates major social networks and dimensions for precise logo implementation and is fully editable in vector format (Adobe Illustrator CS-CS5). Simply drag and drop your client’s logos into it – then take it to your next meeting. Use the kit to impress them, show your forward thinking and future preparation for their upcoming brand. It’s also a great tool to ensure your client’s logo isn’t excessive in length, and sits perfectly in the Logo Kit.

This simple one-page website is a way for people to have a very quick and easy personable website that aggregates your activity and positions a simple logo, a portrait and some description text in a nicely-formatted manner. This is licensed under the MIT and GPL licenses.

on-request vector portraits

Top and left navigations are typical on large screens, but lack of screen real estate on small screens makes for an interesting challenge. As responsive design becomes more popular, it’s worth looking at the various ways of handling navigation for small screen sizes. Mobile web navigation must strike a balance between quick access to a site’s information and unobtrusiveness.

We like to think of Method and Craft as the DVD extras of design: the stories behind the work, who made it, how they did it, and the techniques people have developed throughout their professional career. We all use the same tools, but we use them differently. We strive to educate you on more efficient, creative, and engaging ways to create your design. This site will not only be valuable to creative veterans, but also educational to those new to the design field. It's like looking over the shoulder of your favorite designer.

You'll be able to learn through Articles, Interviews, Videos, and Notes. Articles focus on process and workflow. Interviews let designers discuss their approach & perspective in their own words. Videos show the designer at work, sharing application-specific techniques. Notes are short tips and resource links.

vector icons drawn in JS and rendered with raphael.js

BusinessCard is a simple jQuery-powered, one-page theme that allows you to provide your visitors with clean and concise information. BusinessCard transforms your blog into an easily customizable website complete with enhanced javascript effects and a fully functional gallery. Despite its unconventional appearance, BusinessCard is quick and easy to set up and a breeze to manage.

drop a jpeg over your page for design review

Centratissimo
all centered auto-resizable layout
with some jQuery juice

Includes narrow monotype font

WP theme to create your own snippets library (patterns sounds a bit too lofty)

A design using only one font, at one size, with no graphic elements

Grid-and-humanist-font-centered portfolio designs.

Inexpensive color calibration kit

Sometimes the most daunting part of a new project can be the brainstorming phase. Thinking of color schemes and font selections can be inspiring in your head, but really tough when you start mixing and matching elements on paper or for your website.

Understanding some of the history of fonts and typography can help make any project a little easier. Learn how to pair different typefaces to get desired effect every time and learn what things to avoid. Sharp typography and font selections can really make or break just about any project.

Art History Through Sci Fi-Colored Glasses

Gridlover is the tool to establish a type system with modular scale and vertical rhythm to build upon. Go ahead and Launch Gridlover right here.

Twitter’s Bootstrap is an excellent set of carefully crafted user interface elements, layouts, and javascript tools, freely available to use in your next web design project. This video series aims to introduce you to Bootstrap; taking you all the way from downloading the resources, to building a complete Bootstrap-based website.

Pairing fonts can be a challenge. Selecting two or more fonts which work well is one thing – selecting two which work together to achieve your typographic aims may have you reaching for the aspirin. Let’s see if we can alleviate any headaches. This guide will help you get started with font pairing for the web.

There are over 400 typefaces in the Google web fonts directory. Many of them are awful. But there are also high-quality typefaces that deserve a closer look. Below are examples of these typefaces in action. Click the examples to get the typeface from the Google web fonts directory.

There are some pretty complex testing tools for responsive designs out there. I even see people constantly resizing their browser window using on-screen rulers. The easiest approach to me is just a simple page with a bunch of iframes, like Matt Kersley’s test page. Because I always ended up refreshing the whole page rather than the URL bar on that page, I saved the file locally and tweaked it a little.

Somebody recently asked me to share it, so here it is. Just drop this HTML document in the same folder as your index page and open it – it’s dead simple, really!

Tangerine-based palettes

Dealing with grids in Photoshop is a pain
With GuideGuide, it doesn’t have to be. Pixel accurate columns, rows, midpoints, and baselines can be created based on your document or marquee with the click of a button. Frequently used guide sets can be saved for repeat use. Grids can use multiple types of measurements.

Hans + Helvetica + Calender = Hansvetical

I was just about to order one of those beautiful and minimalistic Helvectia-calenders online, when the thought struck me – why don’t I just make my own? That way I could have it exactly as I want it, and also add week-numbers – those are commonly used in business-settings (in spite of nobody in the real world actually using them…).

Anyway, That’s how it started, and the result is Helvetical. There’s wallpapers for your desktop, your iPad and your iPhone (retina). Happy downloading!

syze is a library for JavaScript that lets you easily target your designs by device or browser sizes. syze makes designing for desktops, televisions, tablets, and mobile devices simultaneously as easy as CSS. syze works before page load so there is no flicker. Size can update on window resize and orientation change - it works cross-browser, cross-device, cross-library and is less than 1KB.

We made this calendar for ourselves. Like all calendars, it’s a bit of escapism, a parallel life, the year we want to have; a year of time spent in the garden, of the smell of woodsmoke, that kind of carry-on.

We think it’s pretty neat, so we’re sharing it with you. You can download it to match your hemisphere (to make sure the seasons match up properly - we’re from Aotearoa, where the weather is back-to-front).

Choose the file below that matches your hemisphere, and print it off on some nice yellowed card (ideally ivory-coloured, 250gsm, matte). It’s an A3 file, if you’re from the US that’s close to tabloid-sized. You just need to punch some holes at the top and hang it with twine.

Home | Font bundles | Users | About Login via Twitter

Awesome Fontstacks
Font: DejaVu Serif Condensed

add an overlay of mockup to web page for testing

preview words with the fonts installed on your computer

Tiny Fluid Grid ships with a index.html with demo code, and the grid.css containing the CSS for the grid you created.

0to255 is a simple tool that helps web designers find variations of any color.