960 Grid System is another CSS grid-layout framework. Can't wait to try this one out when I have time!
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
960 Grid System by Nathan Smith
Many designers have waxed admiringly about Barack Obama’s sophisticated typographical design scheme, particularly the consistent use in much of his graphic material of the typeface Gotham, designed by Tobias Frere-Jones. So I called Brian Collins, an expert on branding, to get his thoughts on what this “good design” means for the candidate.
To the Letter Born from New York Times
Registering as a member will allow you to access Font Cubes's unique font management system that were made for designer's uses. By registering, you could keep track on your favourite fonts by fontmarking them and asside of that, you could also use the system to keep track of font you have used in your project. If you're a font author, feel free to signup and publish your work to other users. You could also use our site feature to collect donation on your font work.
Whether you are just starting out or a seasoned veteran these tools, tutorials, lists and other resources are great sites for any web designer. Organized into helpful categories (design inspiration, CSS resources, web design guides, color tools, free fonts and more) this collection not only has useful resources but also categorized links to other lists with 100s more.
42 Must-Bookmark Resources for Web Designers - Inspiration, Design, Color, Fonts and More from [Re] Encoded
This demo shows how compound microformats can be used to progressively enhance HTML with semantic meaning.
If you have no idea what Microformats are, check out Microformats - Plugging the Gaps in HTML. Semantic web is the future i.e. it will coexist with advanced robots and stuff :p
Compound Microformats from Premasagar
This is a must read!
A webmaster's work is never done. What may have worked a few years ago when could be outdated today, so it's important to constantly improve your Web site. However, a massive overhaul is just too much work to undertake at one time. Instead, tackle these quick fixes over time, and you'll be able to improve your Web site with minimal pain.
101 Five-Minute Fixes to Incrementally Improve Your Web Site from Inside CRM
After creating a well-structured and usable grid, consider allowing it to breath. A page without a grid is a usability nightmare. On the other hand, a grid that has creatively overlapping, escaping, or energizing columns leads to a more enjoyable user experience. Discovering or planning areas of the design that will have some freedom will lead to more interesting and appealing design solutions.
Grid-Based Design: Six Creative Column Techniques from Smashing Magazine
Here’s a collection of 10 powerful – yet easy-to-implement — JavaScript effects to supplement your web page’s interface. These were picked using a “bang for your buck” methodology; meaning that these effects were chosen specifically because they provide high-impact effects with very little effort in installing and using them.
10 JavaScript Effects to Boost Your Website’s Fanciness Factor from Six Revisions
Not a detailed tutorial but it gives you an overview of the font making process.
Create Your Own Font from Wired
This one is for beginners of CSS.
I can still remember the day I discovered the <li> tag. It's not that I had never used list items before—I had built plenty of bulleted lists. What I discovered that day was that with a little CSS, the <li> becomes one of the most powerful and versatile tags in a web designer's arsenal. So versatile is the list item, in fact, that you could build and entire website layout out of just <ul> <li> tag pairs. Of course, that wouldn't be semantically correct, but you could do it. This article is a tutorial and a tribute to the amazing <li>.
The Amazing LI: Using CSS and Unordered List Items to Do Just About Anything from Bits O' New Media
Microformats are small formatting pieces designed to make your data easier to read by both users and software. Although their use is not widespread, it’s important that every web developer becomes familiar with them, as they’re sure to be an integral part of the web’s future.
Microformats University: 100+ Articles and Resources from Jessica Hupp
You may have developed your website using an expensive "what you see is what you get" editor but there’s no guarantee that site visitors "will get the website as you see it".
You will need to extensively test the website to ensure that visitors have a comfortable stay and don’t leave your site in a jiffy. And here are some useful tools to help you completely check your website
How to Completely Test Your Website from Digital Inspiration
This is gold.
The Poetic Prophet (AKA The SEO Rapper) is back with another marketing rap. This time he describes how web standards and proper design can affect the ranking and conversion of pages on your site.
Your site design is the first thing people see
it should be reflective of you and the industry
easy to look at with a nice navigation
when you can't find what you want it causes frustration
a clear Call to action to increase the temptation
use appealing graphics they create motivation
if you have animation
use with moderation
cause search engines can't index the information
display the logos of all your associations
highlight your contact info that's an obligation
create a clean design you can use some decoration
but to try to prevent any client hesitation
every page that they click should provide and explanation
should be easy to understand like having a conversation
when you design the style go ahead and use your imagination
but make sure you use correct color combinations
do some investigation, look at other organizations
but don't duplicate or you might face a litigation
design done, congratulations but it's time to start construction
follow these instructions when you move into production
your photoshop functions then slice that design
do your layout with divs make sure that it's aligned
please don't use tables even though they work fine
when it come to indexing they give searches a hard time
make it easy for the spiders to crawl what you provide
remove font type, font color and font size
no background colors, keep your coding real neat,
tag your look and feel on a separate style sheet
better results with xml and css
now you making progress, a lil closer to success
describe your doctype so the browser can relate
make sure you do it great or it won't validate
check in all browsers, I do it directly
gotta make sure that it renders correctly
some use IE, some others use Flock
some use AOL, I use Firefox
title everything including links and images
don't use italics, use emphasis
don't use bold, please use strong
if you use bold that's old and wrong
when you use CSS, you page will load quicker
client satisfied like they eating on a snicker
they stuck on your page like you made it with a sticker
and then they convert now that's the real kicker
make you a lil richer, your site a lil slicker
design and code right man I hope you get the picture
what I'm telling you is true man it should be a scripture
if it's built right you'll be the pick of the litter
everyone will want to follow you like twitter
competition will get bitter and you'll shine like glitter
if you trying to grow your company will get bigger
design and code right man can you get with it
Ready for HTML5, XHTML 2.0 and CSS3? :)
What would HTML be without CSS? And what is an index of all HTML elements without an index of all CSS properties? To fix the latter I indeed proudly present a continuously updated index of all properties specified in CSS 1, CSS 2, CSS 2.1, and even CSS 3, including all initial values as well.
HTML Properties Index and CSS Properties Index from Jens Meiert
Anyway, design history and research of good design do confirm that truly good designers rarely just ornament but definitely focus on use and usability. And making a product useful and usable never meant that it doesn’t need to be appealing. This still is, and will always be, one of the key lessons the hordes of fresh, so-called designers need to learn.
The 10 Design Theses of Dieter Rams from Jens Meiert
How User-Friendly is your Site? from Demo Girl
Forms can be dreadfully tricky to style and structure properly. Several articles that are out there focus on best practises for building forms using HTML en CSS. This article focusses in a non technical fashion on the use of meaningful nomenclature and how form semantics relate to elements that current markup standards have to offer. It may help you recognise structural patterns and to compose forms properly.
Form Follows Function and Achieving Thereof from Cornelis
Type is saying things to us all the time. Typefaces express a mood, an atmosphere, they give words a certain coloring.
Great Scenes from TV and Film, Told Using Only Typography (and Sound) from Always Watching
Not design related but I believe knowing more about the future will help you choose the right path to awesomeness.
In this article, we'll analyze the trends and technologies that power the Semantic Web. We'll identify patterns that are beginning to emerge, classify the different trends, and peak into what the future holds.
Semantic Web Patterns: A Guide to Semantic Technologies from Read Write Web
Enforcing a minimum height for block elements in HTML is one of those few CSS tricks that you can't live without. There are still enough folks using IE6, unfortunately, and it doesn't support the min-height or min-width CSS parameters. This has caused the invention of a number of different hacks and browser-conditional style sheets to get the desired effect.
Easiest Cross-Browser CSS Min-Height from Hackzine
Comments
Post has no comments.