Typetester
Typetester is an awesome tool–a must for XHTML/CSS-heads–created by Marko Dugonjic. Also, make sure you check out his explanation for using the base font/ems approach. Very flexible and smart.
Typetester is an awesome tool–a must for XHTML/CSS-heads–created by Marko Dugonjic. Also, make sure you check out his explanation for using the base font/ems approach. Very flexible and smart.
Content with Style: Playing Nice with the Other CSS Kids <- This article has some good ideas for developing in CSS across a team. Some great organizational tips, too. Not too sure about the importing of multiple CSS files into a master CSS file, though.
Other gems this article leads to is some interesting thoughts on creating a standard CSS framework (see previous post) and some tactical stuff, like using "tags" to organize your mondo-biggo CSS files:
Wow, I’m becoming quite the XHTML/CSS geek these days, eh?
In this article, the author takes a stab at creating a naming convention for universal web page elements. Ambitious, if not a bit simplistic.
In general, I’m in favour of this sort of thing on a corporate level.
On a related note, I appreciate this guy’s motivation for introducing such conventions:
“…as a businessman I would like to establish conventions which make my development time more efficient and therefore more profitable.”
This is a big challenge for companies like ours, who pride themselves on unique solutions to unique problems. There isn’t a lot of space for process and workflow flexiblity when every project is so vastly different. (”vastly” is a bit of an over-statement, sure — it’s not like we’re making websites in one project and then stuffed bears on the next…)
Regardless, looking at this guy’s suggestions, I already see that it doesn’t apply cleanly to one of the music-based websites we’re working on. His conventions are:
- #container
- Page container (usually a
)
- #branding
- Used for a header or banner to brand the site.
- #branding-logo
- Used for a site logo
- #branding-tagline
- Used for a strapline or tagline to define the site’s purpose
- #nav or #navigation
- Used to contain a navigation device
- #nav-main
- Main or primary navigation
- #nav-section
- Navigation to pages within the current site section
- #nav-external
- Navigation to pages outside the site
- #nav-supplementary or #nav-supp
- A supplementary list of links, perhaps in a footer. This can replace the common, but presentational #footer
- #nav-(whatever)
- A list of links named at a designer’s descretion
- #search
- Related to search interface and search results
- #search-input
- A search form
- #search-output
- Search results which could include a
or other markup including definition lists
- #content
- Used for content rather than for another purpose such as navigation
- #content-main
- The main content area
- #content-news
- News related content
- #content-(whatever)
- Could include any form of content, including #content-related, #content-quote etc.
- #siteinfo
- Used for various site related information
- #siteinfo-legal
- Copyright information etc.
- #siteinfo-credits
- Designer or other credits
E-commerce related
- #content-products
- An overall area containing products
- .products
- Referring to individual products
- .products-prices
- Prices, discounts, special offers etc.
- .products-description
- A summary or longer description of a product
- .products-review
- A customer review
- .products-(whatever)
- Could include any form of product related content
This is great for corporate brochure sites or blogs, but it gets pretty restrictive (and thus useless) for some of the kinds of things we do.
That said, I still can’t underscore enough the importance of establishing consistent conventions on the project level. This is critical and sometimes gets brushed aside in the rush to “get it done”. Which brings me back to my original lament — I wish we could get rolling on the production of projects sooner by using a standard framework of conventions (and not redesigning the wheel on every go)!
This column from PC Magazine is a funny read for us HTML geeks. The author seems to get a few things wrong (or glosses over a few steps in logic), like in his assertion that:
“…CSS’s real benefit was that the layout not only could be changed easily but also could become dynamic: The content is stored in a database and presented as necessary, with instant updates.”
We all know that this really has nothing to do with CSS, but whatever…
If anything, this article underscores the true broken promise of web standards: you still need to pay a design professional oodles of money if you want to do it “right”. CSS for the masses has failed, thus far.
This forum had a post regarding a good cross-browser list style hack that gives one more precise control over custom bullet point graphics. The gist is here:
1. HTML:
2. CSS: (comments added for post)
#newsList ul { /* for positioning and styling preferences */
padding:0;
margin:0;
}
#newsList li a, #newsList li a:visited {
list-style-type:none; /* removes default bullet */
background-image:url(../img/arrow_red.gif);
background-repeat: no-repeat; /* ONE bullet only please */
background-position: 0 .45em; /* .45em from top (vertical) */
padding-left:12px; /* space between bullet and text */
/* styling options below */
line-height:1.5em;
font-weight:bold;
color:#000;
text-decoration:none;
}
Pretty painless and degrades nicely to boot. Noo doot aboot it.