Powered by GoodBarry

“Ninja Training for Web Designers”

65 Resources for Grid-Based Design

Monday, April 14, 2008 - Lawrence Hsu | BC

Can't get enough of grids? :p

Grid-based design is obviously a popular approach in modern web design. Ford designers that use grids, this post includes links to useful tools that can improve your efficiency and effectiveness, as well as some articles for advanced techniques. For those of you who are not as familiar with the details of grid-based design, there are plenty of articles and learning resources here.

65 Resources for Grid-Based Design from Vandelay Design

CSS Compatibility and Internet Explorer

Sunday, April 13, 2008 - Lawrence Hsu | BC

In case you're interested, because you just can't avoid IE these days.

With each new release of Windows Internet Explorer, support for the Cascading Style Sheets (CSS) standard has steadily improved. Internet Explorer 6 was the first fully CSS Level 1-compliant version of Internet Explorer. Windows Internet Explorer 8 is planned to be a fully CSS Level 2.1-compliant browser, and will support some features of CSS 3.

CSS Compatibility and Internet Explorer from MSDN

Top 12 CSS Frameworks and How to Understand Them

Sunday, April 13, 2008 - Lawrence Hsu | BC

A CSS framework is a library that is meant to allow for easier, more standards-compliant styling of a webpage using the Cascading Style Sheets language. Just like programming and scripting language libraries, CSS frameworks package a number of ready-made options for designing and outlaying a webpage.

I highly recommend 960 Grid System which is missing from the list :)

Top 12 CSS Frameworks and How to Understand Them from Specky Boy

Nine Techniques for CSS Image Replacement

Saturday, April 12, 2008 - Lawrence Hsu | BC

CSS image replacement is a technique of replacing a text page element with an image. An example of this would be including a logo on a page. You may want to use a <h1> tag and text for this for the accessibility and SEO benefits, but ideally you’d like to show your logo, not text.

I use the 3rd technique in case you were wondering.

Nine Techniques for CSS Image Replacement from CSS Tricks

10 CSS Form Examples

Friday, April 11, 2008 - Lawrence Hsu | BC

Check out the comments for other great form examples as well.

10 CSS Form Examples from Design Shack

Why are You Still Using Tables for Layouts?

Wednesday, April 09, 2008 - Lawrence Hsu | BC


Some web designers swear that table-based layouts are better than CSS-based layouts, while others believe that table-based layouts are ancient history and XHTML combined with CSS is the only real solution to coding a web site’s visual layout. Since we’re one of those CSS die-hards, we’ve compiled a list of 13 reasons why CSS-based layouts are superior to table-based layouts.

13 Reasons Why CSS Is Superior to Tables in Website Design from Chromatic Sites

750px, 950px and 100% CSS Layouts Ready for Download

Tuesday, April 08, 2008 - Lawrence Hsu | BC

Use these to shorten developement time or for faster prototyping. :)

These CSS Layout offers full Grade-A browser support. That means that these CSS Layout will look and behave the same in internet browsers like Internet Explores 6 (IE6), Internet Explorer 7 (IE7), Firefox, Opera, Safari and so on. Since Search Engine Optimization (SEO) is very important to websites, these CSS layout has been optimized to give you the best possible search engine results. Use these CSS Layout anywhere you wish. It is perfect for Website templates, Blog themes, Content Management Systems (CMS) or as a starting point for your Web projects. Use these CSS Layout to optimize your Web Development workflow. These CSS Layout is done in Pure CSS, not tables.

CSS Layouts from Iron Myers

960 Grid System

Monday, April 07, 2008 - Lawrence Hsu | BC

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

The Amazing LI: Using CSS and Unordered List Items to Do Just About Anything

Tuesday, April 01, 2008 - Lawrence Hsu | BC

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

HTML and CSS Properties Index

Sunday, March 30, 2008 - Lawrence Hsu | BC

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

Easiest Cross-Browser CSS Min-Height (and Min-Width)

Wednesday, March 26, 2008 - Lawrence Hsu | BC

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

CSS Message Box Collection

Monday, March 24, 2008 - Lawrence Hsu | BC

This is a good article for beginners of CSS; Antonio Lupetti shows us how to apply different CSS styles to message boxes.

CSS Message Box Collection from Woork

Table-Based Layout is the Next Big Thing

Monday, March 24, 2008 - Lawrence Hsu | BC

This is still a bit controversial so don't get too excited yet, for example, some people are saying inline-block is the way to go since it got implemented in Firefox 3.

With the release of IE8 coming this year, the stage is set for all that to change. IE8 will be the last of the major browsers to add support for CSS tables, which will enable designers to use table-based layout techniques without misusing HTML table markup.

In short, CSS table lets you use div's like table elements using the display property.

Table-Based Layout Is The Next Big Thing from Sitepoint

Cross-Browser Transparent Columns

Monday, March 24, 2008 - Lawrence Hsu | BC

This tutorial shows you how to make the content container transparent like this, using an awesome CSS positioning trick.

Cross-Browser Transparent Columns from Bits & Pixels

Float-less CSS Layout

Monday, March 24, 2008 - Lawrence Hsu | BC

Check out the CSS layout that doesn't use div, float, clear or structural hack. Instead it uses li. Very interesting.

No div, no float, no clear, no hack*, no joke! from TJK Design

Perfect Pagination Style Using CSS

Monday, March 17, 2008 - Lawrence Hsu | BC

This tutorial explains how to design a pagination for search results or more in general to split a long list of records in more pages.

Perfect Pagination Style Using CSS from Woork

Coding for the Mobile Web

Sunday, March 16, 2008 - Lawrence Hsu | BC

Good evening — in this article I will aim to demystify the world of mobile web development, or in other words, developing web sites so that they will provide an acceptable user experience on mobile devices. I’ll run through how “the mobile web” differs from the normal web, the basics of techniques you can employ to make your sites work sucessfully on both mobile and desktop browsers, some general DOs and DON’Ts for mobile web design, and numerous resources where you can go to find out more information.

Coding for the Mobile Web from Vitamin

Equidistant Objects with CSS

Sunday, March 16, 2008 - Lawrence Hsu | BC

Creating a horizontal row of objects that are equidistant from each other is another one of those things in web design that is much more difficult than it should be. This can be a very useful thing to do, especially in fluid width layouts when you are trying to make the most of whatever horizontal space you have.

Equidistant Objects with CSS from CSS Tricks

99 Sites All Designers Must Know About

Sunday, March 16, 2008 - Lawrence Hsu | BC

A list of design related websites have been compiled by Jacob Cass of Just Creative Design. Not sure if ALL designers must know about these 99 sites :p but I must say it's a pretty nice list.

99 Sites ALL Designers Must Know About from Just Creative Design

Write a Well Structured CSS File Without Becoming Crazy

Sunday, March 16, 2008 - Lawrence Hsu | BC

This is a descriptive post about how to write a well structured CSS file. I already spoken about code readability in CSS files, but after several most specific requests about this argument (mainly about the difficult of some readers to manage CSS file with a big quantity of layout elements), I decided to illustrate the process I use in these cases.

Write a Well Structured CSS File Without Becoming Crazy from Woork

Recent Posts



    Back to Top