What Zen was to the 70’s (most famously with motorcycle maintenance), the Tao Te Ching was to the 90’s. From Piglet and Pooh to Physics and back, many have sought sense in applying the Tao Te Ching to something (the Tao of Physics), or something to the Tao Te Ching (the Tao of Pooh). It can be a cheap trick, but lately it has struck me that there is more than a little to be understood about web design by looking through the prism of the Tao.

How does it work? Just put your image size after our URL and you'll get a placeholder.

A quick and simple service for getting pictures of kittens for use as placeholders in your designs or code. Just put your image size (width & height) after our URL and you'll get a placeholder.

Screenqueri.es is a Pixel Perfect Tool to test your Responsive Design / Media Queries. Select from Pre-defined Screen Resolutions OR Drag Screen Handles To Go With Your Custom Screen Resolutions.

Responsive layouts in web design – this is probably one of the most popular topics of discussion at this present time. The contemporary phase of website designing offers some truly amazing elements that help the web designers in creating exclusive websites. The main motto of building or creating a website is to attract the mind and eyes of the viewers. With these responsive layouts this job can be easily done. These responsive layouts allow the website designers to offer specific and optimized screen size based on a wide range of devices, starting from PC, mobile phone to tablet and iPhone.

Centring block level elements is easy, just define a width and set margin:0 auto;, but what if you don’t know that fixed width? You could use text-align:center;, but that won’t work on 100%-width block-level elements either… that’ll only work on text-level elements.

Hey there, WordPress theme developers. When’re you crafting themes, are you checking the quality of your theme code? The design is important, yes, but so is the code.

Use these Adobe Illustrator files when creating different layouts for Responsive Web Design

A lot of people want centered menus on their website but for the CSS novice this task seems impossible. If you do a search online you will find a few centering methods but most of these rely on CSS hacks, JavaScript or non-standard CSS rules that are not supported by all browsers (display:inline-block; is an example). In this post I'm going to show you my secret method of achieving centered tabs that does not use any CSS hacks and will work in all the common web browsers. It is also compatible with my perfect liquid layouts. Let's start with a basic example then I'll explain how it works.

All resources published on this website are free and can be used for both personal and commercial purposes, I’ll be happy to find out your comments and suggestions

Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design.

Responsive Image illustration: contextual image sizes shown on iPhone and desktopResponsive Web Design has been a very hot topic this year, inspiring developers who long for a “one codebase serves all” future. But critics of the technique have pointed out several issues that need to be addressed before it can scale perfectly from handheld to desktop — specifically, while HTML, CSS and JavaScript can be light enough to share across all experiences, desktop-optimized images are often too heavy for mobile connections, and mobile-optimized images are too low quality for desktop viewers.

Our PSD to HTML coding and implementations support all the latest and most popular browsers: Internet Explorer 7+, Firefox, Opera, Chrome and Safari.

One aspect of designing for the web that almost immediately offends designers is the lack of fonts that are considered safe to use. While it is true that there are only a handful of web safe fonts, the ones we do have at our disposal can be quite powerful and diversely useful. On top of that, CSS gives us a nice little thing called a font stack.

Adaptive Web Design
Crafting Rich Experiences with Progressive Enhancement

a collection of sites using media queries

The awards for design, creativity and innovation on the Internet, which recognize and promote the best web designers in the world. Read more

A jQuery plugin for radical web typography

What is Typesites?

Typesites is a weekly look at sites that have great typographic design.

Real web type in real web context

Web Font Specimen is a handy, free resource web designers and type designers can use to see how typefaces will look on the web. Debuted in a special issue of A List Apart, Web Font Specimen is now in its second iteration.

CSS Tools: Reset CSS

Modular Scale

Me And MyBright Ideas

...will help translate your dreams into world-class digital experiences. Hi, my name is Yaron and I provide creative interface solutions for a visual world.

Use this form to evaluate the functional accessibility of a single web page.

Stylus

Expressive, dynamic, robust CSS

Built with typographic standards in mind, Baseline makes it easy to develop a website with a pleasing grid and good typography. Baseline starts with several files to reset the browser’s default behavior, build a basic typographic layout — including style for HTML forms and new HTML 5 elements — and build a simple grid system. Baseline was born to be a quick way to prototype a website and grew up to become a full typographic framework for the web using “real” baseline grid as its foundation.

Internet Explorer User Agent Style Sheets

A UA Style Sheet is a simple set of css styles that each web browser uses before any other css styles are applied.

This chart lists and compares the different default style sheets used to render HTML in the four major versions of Internet Explorer; IE6, IE7, IE8, and IE9 Platform Preview.

You can download each of these UA style sheets by using the links at the top of this chart.

Everyone loves talking about design, but with everyone talking, we don’t always hear other ideas. If you show a client a design matrix before creating the initial comprehensives, then you will visibly and quantifiably show that you are on the same page; and because of that, you’ll likely be successful in the long run.

/* ------------------------------------------------------------- CSS3, Please! The Cross-Browser CSS3 Rule Generator =================================================== You can edit the underlined values in this css file, but don't worry about making sure the corresponding values match, that's all done automagically for you. Whenever you want, you can copy the whole or part of this page and paste it into your own stylesheet. ------------------------------------------------------------- */

A Frenchman
protecting your secrets.
Yes, seriously.
Ben the Bodyguard

Protecting your passwords, photos, contacts
and other sensitive stuff on your iPhone® or iPod touch®

This week’s extended round up takes a look at some superb examples of responsive web design, as well as the best resources to find out more about this new way of designing for a flexible internet experience.

Made popular by the International Typographic Style movement and pioneered by legends like Josef Müller-Brockmann and Wim Crouwel, the grid is the foundation of any solid design. The Grid System is an ever-growing resource where graphic designers can learn about grid systems, the golden ratio and baseline grids.

Designers are constantly striving to create eye-catching designs without losing the usability features that add significant importance to the experience of online shopping. Today’s showcase presents a variety of websites with elegant design solutions and innovative design techniques. We have analyzed the designs and now discuss their advantages and disadvantages in this review. We also suggest improvements and further ideas that could help improve shopping experience on these sites. Hopefully, you can learn something useful from our thoughts.

Today we’re excited to present you a new icon set called Coded. Designed with web developers in mind, Coded features 25 high-quality icons ranging from 512×512px to 32×32px. Designed by Thomas McGee of WinePress of Words1, this set has been released exclusively for Smashing Magazine and its readers.

An important website has gone down, and sooner or later, heads will turn to the Web development corner of the office, where you are sitting quietly, minding your own business, regretting that you ever mentioned “Linux” on your CV. You need to take action. Your company needs you. Your client needs you. Here’s what to do.

From advanced selectors to generated content to the triumphant return of web fonts, and from gradients, shadows, and rounded corners to full-blown animations, CSS3 is a universe of creative possibilities. No one can better guide you through these galaxies than world-renowned designer, author, and CSS superstar Dan Cederholm. Learn what works, how it works, and how to work around browsers where it doesn’t work.

he 997 Grid System—makin’ sh*t bigger and simpler…

Welcome to Simple:Press – the feature rich, completely integrated and fully scalable forum plugin for WordPress.

Highly customizable, Simple:Press packs the features of a standalone forum into a plugin – seamlessly turning your WordPress site into a community.

Our recent article covering the new features of Adobe Fireworks CS5 provoked a very interesting and intense debate. But because comments ranged from “Fireworks is the best tool for screen design!” to “What exactly is Fireworks?”, we thought that another article on this topic might be very useful to Smashing Magazine readers.

Although successful websites typically have high usability, average sites can hurt their business by copying design elements that don't work well in other contexts.

Website designs for premium Mac application websites are amongst the most beautiful web designs on the net. Here’s an inspirational showcase of some of the best, along with a look at some common trends and features.

The Web Style Guide site houses an unabridged, online version of the third edition of Web Style Guide: Basic Design Principles for Creating Web Sites, by Patrick J. Lynch and Sarah Horton. You’ll find the complete text and illustrations from the printed book here under Web Style Guide Online.

Bounce
A fun and easy way to share ideas on a website.

#
About

Launchlist is intended to help and encourage web designers and developers to check their work before exposing it to the world at large.

At first glance the Google Map API may seem scary, I mean, were do you possibly start? You probably only want to display a simple map that displays directions to your clients address, you don’t really want an all singing and dancing interactive map with more options than necessary. There has to be a simpler way.
Of course there is, and as with almost all web site interactivity, jQuery does offer some simple and easy to use plugins.

Find broken links on web sites

Hi. I'm Alex Hunter. Independent Digital Ninja, brand consultant, angel investor, and speaker.

CSS Killswitch works by creating a unique, inconspicuous, and innocuous stylesheet that you'll link the potentially problematic client's site to. Should negotiations go south and passwords get changed before you receive payment, that stylesheet can be activated to superficially black out the site, returning to you the upper hand. *

This article focuses on actual wireframing tools and standalone applications, as well as resources that you’ll need to build your own wireframe: wireframing kits, browser windows, form elements, grids, Mac OS X elements, mobile elements, which you’ll use in any typical graphics editor such as Photoshop or Illustrator. …Or you could use pen and paper.

With so many free icon sets available now, sometimes it makes more sense to not spend countless hours designing and creating your own. However, it’s important that you do find the right style of icons to match your design. In the case of minimal web design, it’s all about clean layouts, little use of color, and few design elements. This means that when icons are required, they should posses the same minimal design qualities. Here are some of the best icon sets for this type of design style.

There are a few things that a designer can not have enough of in his or her design arsenal, and one of them is textures. So to continue our “Best of 2009″ series, we’ve selected the best free textures from this past year.

CSS is the best thing to happen to the web since Tim Berners-Lee. It’s simple, powerful, and easy to use. But even with all its simplicity, it hides some important capabilities. Ask any designer, and they’ll tell you that the majority of their code headaches are caused and ultimately solved by CSS.

Cross browser testing can be a pain for a web designer, so I tried to make it slightly more enjoyable with a simple checklist. These are all the things I personally check when coding and designing a site.

Photoshop Layer Styles are the easiest way to speed up the design process. I found that my previous article - Ultimate Web 2.0 Gradients v3.0 was a lot helpful to many.

What a year it has been for Photoshop… so many new techniques, so many fresh ideas and so many new and creative web sites offering free tutorials.

his article presents the second part of the article; it covers customizing basic content administration and adding features to the post and page editor in WordPress. You would like to see more similar articles in the future? Let us know in the comments to this post!

we’ve hand picked 20+ Tools for Quick & Clean Code Development that will help you code much faster and in an efficient manner.

Round-ups of beautiful and useful icons are almost legendary here, on Smashing Magazine. While some readers complain about the annoying “list”-style of some of our articles, we are confident that useful round-ups of relevant resources are very valuable and useful for designers. This is why over months we collect useful links and then present them in posts in the magazine. Like it or hate it, but the feedback that we get from the design community when we publish such posts is mostly positive which is why we keep doing it.

At some stage in your career, it’s likely you’ll be asked by a client to design a HTML email. Before you rush to explain that all the cool kids are using social media, keep in mind that when done correctly, email is still one of the best ways to promote you and your clients online. In fact, a recent survey showed that every dollar spent on email marketing this year generated more than $40 in return. That’s more than any other marketing channel, including the cool ones.