Those who were at Digital Design World in Seattle this year saw me present a session titled, “No More Tables, CSS Layout Techniques“. In that session, we reviewed proper use of tables, and a few pointers for styling them with CSS. Then we turned to tableless layout, reviewing examples and an overview of the two basic approaches (positioning and floats). read more
A little over a week ago, in an article for ALA titled Sliding Doors of CSS, I introduced a new technique for layering background images with CSS. We walked through an example of how it could be used to create visually appealing tabs while keeping simple, text-based, semantic markup. We intentionally limited the scope of what the article covered so that it could remain focused on explaining and demonstrating the technique.
With an understanding of the technique firmly in grasp, now we can push it further. ALA just published Sliding Doors of CSS, Part II, which expands on what we covered the first article (Part I). Specifically, Part II addresses:
Part II fills in some gaps and expands on the utility and behavior of the original technique. If you haven’t yet read Part I, I highly recommend you do so before reading Part II. Again, instead of opening up comments here, I’ll direct any feedback you might have to the discussion on Part II already open at ALA.
It’s time to push the limits of CSS and raise another bar for standards-based web design. This tutorial walks through a new Sliding Doors technique for creating visually stunning interface elements with simple, text-based, semantic markup. (Translated into: Farsi, French I, French II, Italian, Russian)
Read the full article at A List Apart.
Just a few months ago, I wrote an article which walked through my design process for a CSS Zen Garden entry, titled “A Design Process Revealed“.
If you happen to speak or understand French better than English, I’ll point you to a new translation of this article at Pompage.net: Les coulisses d’un design. Thanks to Stéphane Deschamps who did the translation after asking permission. Unfortunately, I speak very little French (pero hablo español mucho más). But since I wrote the original version, I can at least follow along every ten words or so.
A curious reader recently asked about the Adaptive Path redesign:
“I’m puzzling over why with the main nav bar you nested an absolute div into a relative div?”
A simple answer to his question is: Because I wanted optimum flexibility for the header and navigation, and to keep the navigation the same distance from the logo, no matter how the text is resized.
That’s the strategic answer providing rationale for the method. But I gather he might also be seeking a tactical answer. To answer his question thoroughly, I’ll backpedal a bit, and explain the workings of CSS absolute positioning in my own words, provide an example which demonstrates a different effect than the one achieved in the Adaptive Path design, then come back to the AP navigation.
For individuals who are neither designers nor artists, it may seem like those who are, use a lot of smoke and mirrors, magically whipping up each stunning creation. Artistic talent and creativity can certainly aid and enhance the final result, but design, in particular, generally follows a process. Each designer — or design group — develops a method for solving problems, then evolves that method over time. While no one person or group may view a problem from the same perspective, general similarities often appear in their approach. read more
Please note: The original technique (FIR) described in the body of this article is no longer recommended for use, as it makes the hidden text completely inaccessible for certain screen readers. Instead, see one of the alternative techniques mentioned at the end of the article under “Important Notes“.
This tutorial assumes a base-level knowledge of CSS, but not much more. Beyond that, it also assumes care will be taken to use these methods fairly and responsibly with well-structured markup.
Do you still crave the typographic control of creating headlines and decorative type with images instead of pure HTML text? Even with all the options we have for styling text with CSS, sometimes there’s just nothing that beats the indulgence of opening up Adobe Photoshop, then setting type in your favorite font at just the right size, kerning, and tracking. You know if you save it as an image and place it on a webpage, anyone with an image-enabled browser will see your typographic mastery just as you intended. Right? read more
An interview conducted by CSS guru and standards evangelist, Eric Meyer, covering the ins and outs of the conversion to a standards-based design for Wired News. Read the original article here.
(Translated into: Japanese)