Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. Skeleton is built on three core principles:

A JQuery plugin to display a horizontal timeline with milestones/events

Enter the url to your site - local or online: both work - and use the controls to adjust the width and height of your viewport to find exact breakpoint widths in pixels. Then use that information in your media queries to create a responsive design.

De website is gelanceerd en samen met je collega’s ben je een groot feest aan het vieren. Vele uren zijn er geïnvesteerd in de schitterend ogende en rijke website/webshop. Je leunt achterover en geniet van de bezoekers en de reviews. Dat moet je zeker doen, maar niet te lang! Er is nog zoveel werk te doen! In dit artikel 7 belangrijke redenen om vooral te blijven doorontwikkelen.

Zelf, met de hand, een website maken is tegenwoordig zo lastig nog niet. Echter, een grote maatwerk website is heel andere koek. In het begin lijkt het wel simpel maar iedere beslissing heeft invloed op je volgende beslissing en één verkeerde beslissing kan heel snel tot frustratie leiden. Mocht je toevallig het (on)geluk hebben om meerdere grote websites te maken en te onderhouden, dan ben je, als je niet uitkijkt, al heel snel de sigaar.

Waarom? Niets blijft hetzelfde en het maken van een website is een oefening in constante verandering.

HTML wil je zo hebben dat je het achteraf niet hoeft aan te passen voor CSS of JavaScript. Dergelijke aanpassingen zijn duur, omdat je met nog meer onderhoud wordt opgezadeld, wat uiteindelijk ook de duurzaamheid van je product aantast. Erger nog, het is meestal onnodig en makkelijker te voorkomen dan je denkt.

De truc is om binnen de drie front-end gebieden (HTML, CSS en JavaScript) generiek te zijn waar deze gebieden elkaar raken en specifiek te zijn binnen een enkel gebied.

(Source: http://twitter.com/twotribes/status/131088256224858112)

You'll find over 1,618,901 user-created color palettes to inspire your ideas.

Using Hype, you can create beautiful HTML5 web content. Animations and interactive content made with Hype work on desktops, smartphones and iPads.

Users pay close attention to photos and other images that contain relevant information but ignore fluffy pictures used to "jazz up" Web pages.

Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs? Ever wished you could control the look and feel of your form elements between all browsers?

If so, Uniform is your new best friend.

Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.

SlickMap CSS is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.

The general idea of SlickMap CSS is to streamline the web design process by automating the illustration of sitemaps while at the same time allowing for the predevelopment of functional HTML navigation.

Ember is the best way to share your design inspiration with the world - from webpages to screenshots, design to illustration, Ember is built for creatives looking to build an online design scrapbook.

Have you ever wanted to do if-statements in your CSS for the availability of cool features like border-radius? Well, with Modernizr you can accomplish just that! The syntax is very intuitive, too.

Perch is a really little content management system for when you (or your clients) need to edit content without the hassle of setting up a big CMS.

A 3d colour picker?

While I might use some different language today, this technique I posted in 2004 (inspired by Alexander) is still a major help when I’m designing a UI with many elements to juggle. The reason I come back to it is that it helps me design with language first instead of empty templates. Too often a design starts top-down with empty content areas (maybe a main column and a sidebar) and then we fill those boxes in until its “done.” Filling in the boxes would work fine, except having a bunch of stuff on the page doesn’t mean we served the design goals.

Rated Five Stars at Amazon.com since the day it was published, “Taking Your Talent to the Web” is now a free downloadable book from zeldman.com

This Screen Ruler is a great tool that allows you to accurately measure anything on your screen. This is especially useful when measuring graphics, web page browser sizes or whatever. Screen Ruler can display Pixels, Inches, Picas or Centimeters.

Web Safe Typography on Screen for Pixel Perfectionists

Great website design.

The 100% Easy-2-Read Standard Most websites are crammed with small text that’s a pain to read. Why? There is no reason for squeezing so much information onto the screen. It’s just a stupid collective mistake that dates back to a time when screens were really, really small. So…

The ultimate resource in grid systems.

What is the book about? A Practical Guide to Designing for the Web aims to teach you techniques for designing your website using the principles of graphic design. Featuring five sections, each covering a core aspect of graphic design: Getting Started, Research, Typography, Colour, and Layout. Learn solid graphic design theory that you can simply apply to your designs, making the difference from a good design to a great one.

This is the official page for the Secure and Accessible PHP Contact Form v.2.0WP for WordPress

Our Search Engine Optimization Starter Guide covers around a dozen common areas that webmasters might consider optimizing. We felt that these areas (like improving title and description meta tags, URL structure, site navigation, content creation, anchor text, and more) would apply to webmasters of all experience levels and sites of all sizes and types. Throughout the guide, we also worked in many illustrations, pitfalls to avoid, and links to other resources that help expand our explanation of the topics. We plan on updating the guide at regular intervals with new optimization suggestions and to keep the technical advice current.

Finally a lightweight accordion that is built with scriptaculous and works properly in every browser.

Text editor + file transfer + svn + CSS + Terminal + Books + More = Whoah. Welcome to Coda. Grow beautiful code.

Spontaneous, unobtrusive usability testing software for designers and developers.

Design beautiful, innovative and fast-loading web sites… with a beautiful, innovative and fast app. CSSEdit's intuitive approach to style sheets and powerful previewing features will make you deliver awesome standards-based sites in no time!

A few weeks ago we released a version of the Flickr site tailored specifically for the iPhone. Developing this site was very different from any other project I’ve worked on; there seems to be a new set of frontend rules for developing high-end mobile sites. A lot of the current best practices get thrown out the window in the quest for minimum page weight and fastest load times over slow celluar connections.

Step out of your problem-solving role Whether we’re improving what we make, how we make it, or how we share it, we normally take the perspective of the creator by default. We can’t help it. We’re drawn into decisions about all sorts of details. We love the minutia—solving problems, finding a way around a limitation. We don’t try to see past our own role in the process. The field of user experience (UX) helps us change that. UX practitioners examine the everyday lives of the people we endeavor to help.

Lets you flip through, preview and compare web typography while retrieving the CSS.

Tables got to be one of the most difficult objects to style in the Web, thanks to the cryptic markup, amount of detail we have to look over to, and lack of browser compatibility. A lot of time could be wasted on a single table although it’s just a simple one. This is where this article comes in handy. It will show you ten most easily implemented CSS table designs so you can style your tables in a zap!

Welcome to the all new premium WordPress themes shop. At WooThemes you will find some of the most cutting edge WordPress templates, packed full of features, presented beautifully with clean layouts, slick colour palettes and neat typography.

Article about incremental leading, a typography thing.

George explains how the Flickr community started, and how the users shaped the Flickr web platform in more ways than the site itself shaped the user interaction.

This is the official home for the Fauna for Wordpress theme. Grab your latest copy here, and post bugs in the forum.

This CSS tutorial will show you how to display two double-quote images using one blockquote tag. The trick here is apply one background image to blockquote, and then apply another background to the first-letter (pseudo-element) of blockquote.

Here are some Picasa web templates to create web Flash and HTML photo galleries and slideshows using Google's Picasa without any knowledge of Flash, HTML, CSS and Javascript. Use these free templates to showcase your photos and images.

Parallax scrolling is a psuedo-3D effect often used in side scrolling games to create depth. In this article Clearleft lead designer Paul Annett explains how he used the effect to great success on their newly launched Silverback site.

Intelligent websites should tune-in to the content preferences of their visitors, tailoring a specific experience based on each visitor's favorite sites and services across the social web. In this post I will teach you how to mine the rich treasure trove

This is the demo of the Peacock Tail Tumblr theme, by Richard Dunlop-Walters.

After a brief period of unstyledness, we’re back with a realign and overhaul of simplebits.com. Aesthetically, it’s not much of a departure from the previous design — but under the hood is new markup, new stylesheets and a strict grid layout based o

Designed to view full-size photos and images inline without requiring a separate web page load, FancyZoom's raison d’être (French for "raisin-determination") is providing a smooth, clean, truly Mac-like effect, almost like it's a function of Safari its

The Morning After is a magazine-style theme for WordPress created by Arun Kale. The theme was created based on a brief survey on the WordPress forums about what people would want to see in a unique magazine-style theme.

I’ve been pondering reset styles over the past few months, and come to a bit of a shift in my thinking. Here’s the result of that thinking.

If I could, I’d give you a special present this christmas - I’d tell you how to make IE on Windows behave like a grown-up browser. Sadly, reality sucks - as does IE on Windows - so I can only offer to share with you a couple of CSS tips to ease the pa

"Who’s afraid of HTML 5? Not Lachlan Hunt! As both a front-end web developer and a contributor to HTML 5, he tells us what we can expect from the emerging markup specification, whose goals include more flexibility and greater interoperability."

There’s been a welcome resurgence of interest in web typography over the past year or so, with many articles and conference talks offering techniques and theory. Frequently asserted is the notion that good typography requires accurate control of font si

Hide e-mail addresses from spam bots while revealing them to readers as real, clickable links. This transparent and fully automated solution guarantees that all addresses on your site will be safe—even the ones that show up in blog comments!

I recently completed my biggest project yet; a fully fledged social network aimed at female college students. The difference? It’s built on Wordpress MU.

Redirection is a WordPress plugin to manage 301 redirections, keep track of 404 errors, and generally tidy up any loose ends your site may have. This is particularly useful if you are migrating pages from an old website, or are changing the directory of y

This is a CSS tutorial on how I created the image browser controls for Shacknews.

"For the last three months, my sole focus at work has been getting this site ready. It has involved a major redesign, a major architectural change and dramatic streamlining of the content." -- Nice job!

JavaScript geeft je de mogelijkheid om de CSS-presentatielaag van je site te veranderen. Een verandering in hoe een element in de pagina er uit ziet is een uitstekende (en veelgebruikte) manier om de aandacht van je bezoekers te trekken naar het element w

Eric's basic sheet that resets all browsers. The starting point for ny good CSS based website, thus any website.

Hypertext Markup Language (HTML) 5 introduces new elements to HTML for the first time since the last millennium. New structural elements include aside, figure, and section. New inline elements include time, meter, and progress. New embedding elements incl

Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.

ModalBox is a JavaScript technique for creating modern (Web 2.0-style) modal dialogs or even wizards (sequences of dialogs) without using conventional popups and page reloads.

FlowPlayer is a free Flash video player. You can easily embed it into HTML pages to play FLV files.

Slimbox is a 7kb visual clone of the popular Lightbox JS v2.0 by Lokesh Dhakar.

An icon to represent the generic action of sharing a web page. This could mean adding the page to a social bookmarking site or memetracker, e-mailing the page to someone, etc.

1 Bit Audio Player is a very simple and lightweight Adobe Flash MP3 player with automatic JavaScript insertion. It's main purpose is to act as a quick in-page preview for audio files you link to from your website or blog.

How to divide content over multiple columns, while keeping layout/design and content separated.

A simple PHP tip for marking alternating rows in different colours.

I don't get this explanation, but Thickbox provides fun effects for displaying images online. - "ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline con