Design Tips & Tutorials (Archive)

Page 2 of 3 (30 total articles)
  • July 29, 2008 in Design Tips & Tutorials

    Indestructible Website: How to Build an EM Based Layout that Won't Break

    The EM is a measurement just like PX or PT. One EM is equal to the pixel measurement of the current font size. So, for example, 1em on a web page with a font size of 16px equals 16px. The direct relationship between font size and EM allows us to build layouts that scale along with the font size. This means that a visitor with a browser font size set to "large" will see a perfectly scaled version the layout rather than a skinny layout with really big letters.

  • July 22, 2008 in Design Tips & Tutorials

    Pushing the Limits (Part 3): Building a Semantic Four-column CSS Layout

    In part two of the Pushing the Limits series, we looked at some simple techniques for building a four-column CSS layout. Unfortunately, the divide and conquer method we explored (although quick and easy) leaves something to be desired in the area of semantic markup. Now, we'll consider another solution that uses a little Javascript to make up for the shortcomings of CSS.

  • July 14, 2008 in Design Tips & Tutorials

    Pushing the Limits (Part 2): A Simple Four Column CSS Layout with a Little Divitis

    CSS works very well for designing one and two column layouts. It's shaky but workable on three-column layouts. But if you want a four column layout, you have to get downright creative. This article presents an easy, straightforward method for designing a four-column CSS powered layout without deviating too far from the semantic model. Granted, Jeffrey Zeldman would accuse me of a slight case of divitis but at least this method doesn't revert to tables or improper use of unordered lists.

  • July 7, 2008 in Design Tips & Tutorials

    Pushing the Limits (Part 1): The Perfectly Semantic Three Column CSS Layout

    Building a three or four column layout on the web without the help of a table can be a difficult task. The CSS3 spec proposes a perfectly tailored solution; but, unfortunately, CSS3 support is spotty at best even in modern browsers. We're stuck with CSS2 until that changes, so we might as well make the best of it. There are a number of ways to overcome the lack of multi-column support in CSS and none of them is very pretty. The three-column layout is the easiest to achieve without stepping outside the semantic boundaries, so we'll start there. Then in the next few articles we'll move on to the rarely explored waters of four-column+ CSS layouts.

  • May 26, 2008 in Design Tips & Tutorials

    HTML Transitional What? | The Ins and Outs of HTML Document Type

    There's a divisive little tag at the top of every web page called DOCTYPE. It's not divisive because web designers disagree about what should go in that tag or which doctype should be specified (although they argue about that too). It's divisive because half of the web designers barely give a thought to it and the other half would die a bloody death for what's in that tag. Whatever category you happen to fall in, I think you'll appreciate this concise guide to HTML DTDs. Every designer should know the basics and make an informed decision about doctype.

  • April 28, 2008 in Design Tips & Tutorials

    Web to Print: Restyling Pages on the Fly with CSS

    Whether we like it or not, people are still printing information from the web. For years now the big question for newsletters, newspapers, and magazines has been, how do we get our printed product on the web? But as these mediums have gradually adapted to become more webcentric, the opposite question is becoming more appropriate--how do we get our web product to the printed page? Fortunately, this is a much easier question to answer than the first one--and one worth addressing. Until recently, I didn't give this idea much thought. But writing for a blog has brought the issue to the top of the list and now I'd like to share the experience I've gained writing a print stylesheet for Bits O' NewMedia.

  • April 9, 2008 in Design Tips & Tutorials

    In the Background: Simplifying and Demystifying CSS Backgrounds

    If you've been designing websites for awhile then you probably remember this: . I wrote a lot of websites like that before CSS arrived, but when I tried to remember how backgrounds worked back then, I honestly had to look it up--it looks completely alien now. There's little chance that you're still using HTML like that (although there are still some old school tutorials floating around out there); but a lot of web designers have never taken the time to really explore and understand the background property in CSS. In this article, I'm going to give a quick rundown of how to use the background property effectively and eliminate all the background-position, background-color, and other redundant properties.

  • March 31, 2008 in Design Tips & Tutorials

    3 Layouts that Handle Screen Resolution with Dignity

    There's nothing more discouraging than watching your beautifully designed website load on a screen with a resolution it wasn't built for. And it usually happens when you're unveiling your work to a client. Other than browser variations, screen resolution is the biggest unknown we face. It's also a dilemma unique to interactive design which makes it difficult for people outside the industry to understand. In fact, even designers working in other areas of design have a difficult time relating. So let's take a look beyond the simple fixed-width / variable-width decision and zoom in on three creative solutions that can make the process a little less painful.

  • March 19, 2008 in Design Tips & Tutorials

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

    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 (if you wanted to). This article is a tutorial and a tribute to the amazing li.

  • February 6, 2008 in Design Tips & Tutorials

    Beat Your Website into Submission with .htaccess

    I devote most of my day to designing and coding. I don't have a lot of extra time to mess with server configuration. But my neglect of that aspect of web design has cost me countless hours of unnecessary development and a near break-down on more than one occasion. My server was bending me to its will instead of the other way around. Somewhere along the way I discovered its weakness--.htaccess. That's the little file that puts password protection on directories (that's all I knew it did). Now I'm beating my websites into submission one command at a time.

[BEGIN] [< 1 2 3 [Next>>] [END]