Web standards blog posts

  • Preventing too-short final lines of text blocks

    At the end my previous post, I said I’d settle for direct control over widows and orphans in text blocks. It turns out not to be quite as a simple as one might think, with lots of discussion over the years. I created an experiment to test a solution.

  • Avoiding groupthink: fine-tuning CSS specifications

    Every now and then I’m asked to help out the CSS Working Group, especially when typography is involved. Invariably it’s also a chance to learn, not just about upcoming CSS, but also new methods of collaboration and group decision making.

  • All you need to know about hyphenation in CSS

    Automatic hyphenation on the web has been possible since 2011 and is now broadly supported. There is however far more control available to designers than just turning on hyphens. Updated January 2023.

  • Upcoming changes to the CSS you need for variable fonts

    Two weeks ago I was invited to Berlin for a CSS Working Group meeting. One afternoon was dedicated to resolving issues with the CSS Text and Font modules. Two resolutions in particular will affect the CSS we need to work with variable fonts.

  • Whatever happened to font-stretch?

    The font-stretch property was removed from CSS2 in the transition to CSS2.1. Unfortunately this leaves us with a rather gaping hole in overall font support.

  • Microformats for business owners

    An explanation of the practical benefits that microformats can bring to a business and its customers, written with the business owner in mind.”

  • Professional body for web designers

    Mark Boulton has written a thoughtful post on having a professional body for web design. I commented in detail there, but I wanted to expand my thoughts on the subject, particularly on certification and the need for such an organisation.

  • At @media again

    So I’m off to @media for the rest of this week – can’t wait! And in other news I have an article in this month’s Practical Web Design magazine.

  • CSS Naked Day

    Today, April 5th, is CSS Naked Day. This means that if you are reading this on the website and not via RSS, what you are seeing is Clagnut with the CSS stripped off.

  • What’s in a word?

    @media wrapped up with a Hot Topics discussion panel. One of the hot topics suggested by an attendee was ‘semantics’. There seems to be something of an obsession with the word in web circles.

  • Internet Explorer 7 will have fixes

    Over on the ‘official’ IEBlog, Chris Wilson confirms that support for PNG alpha channels and some CSS fixes, in particular the peekaboo and guillotine bugs, have been added to IE7 beta 1. Bring on max-width and friends.

  • DevEdge dead?

    Anyone know if it’s permanent and where the sidebar might be replicated?

  • Web Essentials blog

    Web Essentials is almost upon us and now it has a blog. On a vaguely related note, CSS Vault recently pointed to some demonstrations of CSS in scientific web publishing in particular rendering mathematical expressions.

  • The devil’s in the minutia

    Zeldman recently opined that, since the mainstreaming of web standards, there should be more talk in design circles of content, design and usability, but then lays into recent round table discussions on HTML, implying they are harmful.

  • Real life savings through Web standards

    Following on from Doug Bowman’s recent article on potential bandwidth savings for Microsoft, in which he recounts using CSS to rebuild Microsoft’s home page, I’d like to restate here the points I made in my Ten Questions interview with the Web Standards Group.…

  • I’m back

    And there are photos. And a list of what’s been happening: Odeon crapsters, AMG retrograde, per-site stylesheets, disabling IE6 imagebar, Mozilla security flaw, Malarkey forms, Colly links, Gmail whitelist, XHTML to RSS and fantasy footie.

  • Multimap redesign

    I’ve been somewhat quiet of late, which as usual means busy, busy, busy. And without further ado, the fruits of my labour can be found at Multimap.com – a complete rebuild using Web standards, semantic HTML and CSS layout.

  • Strictly necessary?

    Dan’s latest SimpleQuiz asks the question ‘When using the XHTML 1.0 Strict doctype, how would you launch links in a new window?.’ The problem to overcome is that the target attribute is deprecated and not available in XHTML 1.0 Strict. We’re not talking…

  • Web Essentials 04

    Web Essentials 2004 looks to be an inspiring conference on Web standards, and a really good excuse to travel to Syndey late September/October. The conference will cover the key aspects of web standards: accessibility, markup (HTML/XHTML) and presentation (CSS). The…

  • Hyphens a soft problem

    Typographers divide words using hyphens to increase readability. All books and newspapers of any quality use this technique to ‘justify’ their text, yet it is not a tool available to Web designers in any useful form.

  • Web Standards Awards

    The Web Standards Awards have just launched tp celebrate and encourage CSS-based design. The emphasis will be on commercial sites which is definitely a good thing as the Web design world as a whole has a lot of catching up to do.

  • Structure, presentation & behaviour

    By the miracle of coincidence, the latest issue of Digital Web has a fine article describing the issues I tried to overcome with the Clagnut drop-down menu, as discussed in my previous post.

  • XFN

    XHTML Friends Network is a simple piece of mark-up for identifying human relationships of links.

  • Images in liquid columns

    I’ve been playing around with ways of displaying images in variable width columns, particularly with images that are wider than their container. Please cast your eye over my experiments.

  • CSS Vault

    Paul ‘Scrivs’ Scrivens of Whitespace and 9rules has created the CSS Vault, an elegant twin bladed portal comprising beautiful CSS-based sites and CSS resources. One for your bookmarks.

  • A List Apart returns

    Every Web designer’s favourite online magazine is back! Yep, A List Apart has returned and it’s looking lush with three top new articles from Dave Shea, Joe Clark and Dan Benjamin.

  • Form layout

    Semantically speaking, should we be using tables to lay out forms, or should we be using some other mark-up combined with CSS? There arguments for both, but I reckon the most flexible answer is hidden in HTML 2.

  • All I’m offering is the truth

    Jeremy Keith has published his excellent SkillSwap talk on CSS Based Design. Its real selling point is that Jeremy advocates and demonstrates how starting out with meaningful mark-up will help along your CSS. And he even manages to ape the Matrix along the way.

  • Fastest rollovers

    Pixy demonstrates superfast rollovers simply by shifting the position of a single image. Antenna demonstrates the power of the human mind.

  • Fixing this, sliding that

    Redesigned si-blog uses some cool position-fixed tricks to selectively scroll text over or under an banner. Also, a nifty child-selector sends a gif to IE and a superior PNG to better browsers.

  • Eliminating inline styles

    This week’s MCU web access tip recommends placing printable characters between adjacent links (such as in horizontal navigation). The tip suggests hiding the printable character using spans and inline styles. I show how to do it a little better.

  • Lists and more lists

    Russ Wealkley of Max Design has created Listamatic, a great resource showing how to apply CSS styles to lists. There’s heaps of examples with the CSS exposed, including a version of my own tabs as a list effort. What’s more, it’s in the spirit of the Zen…

  • Mark-up tactics

    Your mantra for today: ditch divs and eliminate ids for leaner, more meaningful mark-up. Now before you turn away, branding me as a slave to semantics, I will explain some of the common misconceptions to show how the number of divs and ids can easily be reduced.

  • Pushing CSS

    Introducing Position is Everything and CSS Destory, a couple of CSS resources exploring bugs and extremes.

  • Transparently brilliant

    There’s a fabulous new design in the CSS Zen Garden which makes use of a clever transparent PNG effect.

  • Pixelsurgeon cured

    So taken was I with Pixelsurgeon’s invalid plight (as mentioned in the previous post) that I decided to rebuild the interview page using meaningful XHTML and CSS for all layout and presentation. The markup now validates to XHTML 1.0 and is much more useful, employing…

  • Tabs revisited

    Not so long ago, I posted a first pass at CSS tabs with lists which, importantly, included secondary navigation and mouseover effects on the tabs themselves. My implemenation wasn’t bad but it was flawed. Radu Darvas has since come along and made some big…

  • CSS Tutorials

    I’ve been following Simon Willison’s ongoing CSS Tutorials with great interest. He’s so far covered styling blockquotes with big quotation marks, a CSS version of jwz which gaves us a bunch of IE5 workarounds, a remake of scripting.com to introduce the…

  • Buy buy

    Boxes & Arrows has a great article on the Principles of Task Flow for Web Applications which outlines the concept of views and forms. All the cool kids are doing it, so why not me. Go and buy Zeldman’s Designing with Web Standards, or better still get your employers…

  • Skills swapped

    Last night, I enjoyed the SkillSwap presentation by Jeremy on ‘CSS based design’. There was a full house, with folks representing disciplines from techie to Flash, and I reckon everyone took away a lot from the talk. Interestingly, a good deal of time was spent…

  • Accesskey standards

    One of my goals for Clagnut is to make it accessible beyond good alt tags and valid code. Providing keyboard shortcuts through the accesskey attribute for important parts of the site, such as search, help and home, can help. It struck me that there should be consistency in…

  • CSS tabs

    Mark Pilgrim recently published his version of tabs build with HTML lists and CSS. So I thought I’d publish my version of as well.

  • Normal service resumes

    Friday Biscuit: Out of curiosity
    I dug up Logie Baird
    And I asked him what petrified forests see<
    To make them all so scared. from Albert Hammond Bootleg on Back In The D.H.S.S. The website for this year’s Brighton Festival has got some thoughtful bits of…

  • Frame pain

    Douglas Bowman has been busy with a nice alternative to textual images and a some research into browsers’ treatment of frames given the lack of control provided by HTML standards. The Friday bite of Biscuit: I was just sitting there Eating a salmonella sandwich,
    …

  • Remix results

    Entries for the WThRemix competition are in. Many of the entries stuck quite closely with the current W3C feel, but a few pushed the boat out a bit (as I believe was the idea of the contest). In no particular order, my favourites came from Ben Darlow, Rene Grassegger, Tom…

  • Colours

    EasyRGB has got a great tool for determining colour harmonies, perfect for someone with my eyes. Centricle has a brilliant table of CSS filters (hacks); note the smart column/row mouseovers. And I forgot last Friday’s HMHB. I’ll make up for it this week.

  • The good, the bad & the funny

    Netscape’s DevEdge has been redesigned as a standards showcase. Yes, another important web site has been redesigned and built without table-layout. Visually, it’s hardly cutting edge, but is easy on both the eye and the mouse. The drop down menus are rather splendid…

  • Phonetic diacritics

    Epizootic is to animals as epidemic is to people. And a brief exploration of putting Unicode characters into Web pages.

  • Checky

    Checky is a great plugin for Mozilla that gives you one-click page validation, configurable across any of 18 different online validation and analysis services. It’s not quite as groovy as the tool in Opera which will validate local files, although Checky’s scope is…

  • Lists, lists & more lists

    A discussion of the recent prevalence and possible overuse of heavily styled lists for such elements as site navigation and overall blog structure.

  • Rewrite

    At the moment, I’m attempting to completely rewrite the HTML and CSS beneath clagnut.

  • Upgrade some more!

    Zeldman has added his thoughts to the Upgrade Now message debate [inner-self jigs around the office, singing ‘I got a link from Zeldman’]. With the demise of 4.0 browsers and that fact that fewer and fewer clients insist on giving those users exactly the same…

  • Upgrade update!

    In response to last week’s rant about upgrade messages for non-CSS browsers, Doug has written an fascinating post on the process Wired went through with their upgrade message. Doug talks about the evolution of the message wording and how it’s placement differs…

  • Upgrade now!

    A discussion of the Upgrade Your Browser message so often placed at the top of web pages which can only displayed as intended by browsers with good CSS capabilities. Personally I find find it annoying…

  • Good stuff

    Good stuff on design, usability and elegant coding from Adrian Holovaty and Tantek Çelik. And Dean has introduced a great Google highlighting tool which highlights your Google search terms. See it in action here (click the top link to clagnut). Update: Cal Henderson…

  • Don’t break the back button!

    The new W3C Validator has come out of beta and released unto the world. There is an improved UI and loads of links to the Specs, as well as help, documentation, tips and improved accessibility (accesskeys a-plenty). There also seems to have been a few changes to the…

  • Clutching at straws

    A recoding of Zeldman’s ‘previous reports’ button to use a styled link rather than a javascript-driven form button.

  • IE6 bug

    The way I’ve coded the Clagnut CSS shows up a bug in IE6 Win. All the left and right margins (actually padding) around my text are doubled in width for no apparent reason. In fact it’s not even that straightforward – the page isn’t rendered consistently…

  • Linkorama

    I have rediscovered the long-forgotten link tag. Use it to make your site more accessible.

  • Liquid lunch

    The new issue of Digital Web mag sees Peter-Paul Koch extolling the fine virtues of graceful degradation. That is the honourable action of building web sites that work† on all browsers without worrying if they are pixel perfect. With care, attention & experience this…

  • When good lists go bad

    First off, the css-discuss mailing list now has a searchable online archive. It’s high traffic, extremely high quality and will almost certainly already contain an answer to your CSS problems. Here are a few gems I discovered there regarding the problems with styling…

  • Fontastic

    Survey of installed fonts on different platforms, Mark Newhouse’s real world CSS and the Polar Bear 2 is in beta.

  • XMaLarkey

    Grant Hutchinson provides a bunch of extremely useful RSS links. ’Cos I intend to follow the herd at some point and get this blog syndicateable. Bob Sawyer gives us a dead handy XHTML meta tag generator. David Eisenberg creates an XML-based markup language from scratch…

  • old skool

    Frames and nested tables bemoan their demise: “NESTED TABLE: is there a place for us, for us maligned remnants of earlier html? We who are cast off by maturing web designers like the velveteen rabbit?” And a fine explanation of the correct use of quotation marks.…

  • transparent

    Cross-Browser PNG Translucency in the current issue of SitePoint. Useful, but won’t validate: Let’s just hope that Microsoft wise up and support PNG transparency with the standard tag in Internet Explorer 7! Westciv (makers of Style Master) announce the…

  • TT

    Latest issue of Boxes and Arrows, the redesign of Audi.com. The process explored workgroup software, utilized technology to support the brand ideals and challenged the status quo of current web navigation thinking by proposing a right handed navigation system. Hillman…

  • buy this book

    ‘Cascading Style Sheets: Separating Content from Presentation’ has just been released. Published by Glasshaus, it is written by four seriously talented people: Owen Briggs, Steven Champeon, Eric Costello and Matt Patterson. On this information alone I can…

  • SVG

    DigitalWeb Magazine has reached it’s sixth year and celebrated with a rather neat introductory tutorial on SVG. “What Do I Know?” is an elegant web log with a decidedly Mac slant.

  • @media

    This week’s ALA shows how to conceive and design print style sheets that automatically format web content for off-screen delivery. Includes tips on hiding inappropriate content, styling text for the printer, and displaying the URL of every link on the page.

  • Minimum width

    A recent thread on css-d addressed the issue of assigning a minimum width to a box, for instance one might want to set a box width to be 60% (in a nice liquid layout) but want to stop it being less than 400px wide. The CSS2 min-width property springs to mind as a solution, but…

  • Curvacious

    Web designers are forever sticking curves in their designs, particularly when smoothing corners of boxes. Designers have good reasons for this, but those of us charged with building the reality find it a pain in the bum, usually having to resort to tables to quickly get the job…