http://icant.co.uk Web design articles. CSS layout, XHTML, usability, accessibility. Designing with web standards. en-uk http://www.thinkvitamin.com/features/dev/enhance-your-page-performance A few tricks to implement to make your web site appear faster and give the user a more instant experience. Christian Heilmann Thinkvitamin http://yuiblog.com/blog/2007/01/17/event-plan/ Ever wondered why so many web applications are inaccessible and hard to maintain? Maybe it is time to change the approach to web application design. Christian Heilmann Yahoo User Interface Blog http://www.alistapart.com/articles/fontresizing/ A quick trick mixed with a custom event allows you to detect and react on font size changes in the page. Christian Heilmann Alistapart http://www.wait-till-i.com/index.php?p=327 A reminder why JavaScript is so much better in providing web page behaviour than CSS is. Christian Heilmann Wait-Till-I.com http://www.thinkvitamin.com/features/dev/the-importance-of-maintainable-javascript JavaScript is hip again; there's no doubt about it. But if you're starting to get down and dirty with it, there's no excuse not to keep it clean. Christian Heilmann Thinkvitamin http://icant.co.uk/articles/from-dhtml-to-dom/ This article tries to explain the difference between DHTML and DOM scripting and their danges and virtues and uses the development of a dynamic web page (Tab Interface, product pop-up, slideshow) as an example. Christian Heilmann local http://icant.co.uk/articles/imagepreview/ Sometimes we want to offer the visitors a preview of the image a link points to. Depending on PHP and GD availability, this script will offer a preview link showing or creating a thumbnail of the linked image. The visitors can see if the link is worth opening without leaving the current page. Christian Heilmann local http://icant.co.uk/domslides/ DOMSlides turns an HTML document into presentation slides via Unobtrusive JavaScript. Readers without JavaScript will see one HTML page with content split up into headings and content. Readers with JavaScript can navigate the slides either via previous and next, the cursor up and cursor down keys ora table of contents. Christian Heilmann domscripting.webstandards.org http://www.alistapart.com/articles/complexdynamiclists/ This article describes how you can turn a nested list into a OSX styled finder navigation to help the visitor choose one item out of a complex hierarchy of items. Christian Heilmann alistapart.com http://www.icant.co.uk/articles/cssconstants/ One feature designers often wished they had with style sheets are constants –- the chance to define something once and reuse it over and over in the style sheet document. This article shows some techniques for how to achieve that and discusses their pros and cons. Christian Heilmann devarticles.com http://www.devarticles.com/c/a/Web-Style-Sheets/Dynamic-Galleries-with-DOM-and-CSS/ This article shows how to use DOM and CSS to create a fully accessible dynamic gallery that shows images without page reloads for those who can and falls back to a linked thumbnail list for all others. [Link:Local copy without ads (http://www.icant.co.uk/articles/dyngallery/)]. Christian Heilmann Devarticles.com http://www.sitepoint.com/article/standards-sensible-design [Link:Illogically (http://www.sitepoint.com/forums/showpost.php?p=1311769&postcount=9)] called "Standards Vs. Sensible Design", this article tries to explain why following and advocating standards is great, but not enough. It needs a shift in technical use and in design to make web development a more secure and respected job. If you want to, you can also [Link:read the original "director's cut" version with all special effects (/forreview/standards.html)]. Christian Heilmann Sitepoint.com http://www.alistapart.com/articles/javascriptreplacement/ A JavaScript-based alternative to the Fahrner Image Replacement technique using plain vanilla XHTML, with no special IDs or CSS tricks. Published on alistapart, this one caused a rather long and ugly discussion on the forum, mainly due to a misunderstanding that later on got sorted out. Christian Heilmann Alistapart http://www.devarticles.com/c/a/Web-Design-Usability/Dynamic-Page-Elements-Cloak-and-Dagger-Web-Design/ Dynamic elements make web pages more fun, more interactive and allow us to make pages more usable - if we have CSS, Javascript and a mouse at our disposal. This article discusses some uses of dynamic page elements with accessibility and usability in mind and shows where they fail and what to do to make them better. Also make sure to check [Link:the local copy of this article (http://www.icant.co.uk/forreview/dynamicelements/)] for updates and less advertisements. Christian Heilmann devarticles.com http://www.evolt.org/accessible_select/ This article explains how to mimick the funtionality of an interdependent select box in an accessible way. Christian Heilmann evolt.org http://www.sitepoint.com/article/pop-ups-dead-links A short article explaining how you can create popup windows with enhanced features only for those browsers and settings supporting it. Currently this article is with a wrong photo and was mildly edited, if you want to read the original proposal, you can [Link:read it here (/forreview/popstuff/popstuff.html)]. Christian Heilmann Sitepoint.com http://www.onlinetools.org/articles/unobtrusivejavascript/ Brush up on your Javascript skills and join us in 2000 with this self training course. Christian Heilmann http://www.onlinetools.org/articles/javascript_fallback.htm A quick example how Javascript can work for the user rather than against them. Done to show a .NET team that the inbuilt fallback functionality is not up to the task. Christian Heilmann onlinetools.org http://www.devarticles.com/c/a/DHTML/YADM-Yet-Another-Dynamic-Menu/ This "article" is a copy of the [Link:YADM (http://www.onlinetools.org/tools/yadm/" rel="external)] homepage. Christian Heilmann Devarticles.com http://www.alistapart.com/articles/dynanav A JavaScript-trick to automatically add a navigation dropdown to the page. The navigation gets populated by the LINK data in the document, thus enhancing browsers that don't do that. Comes with a PHP example, too. Christian Heilmann Alistapart.com http://www.evolt.org/dynamicelements/ Dynamic elements make web pages more fun, more interactive and allow us to make pages more usable - if we have CSS, Javascript and a mouse at our disposal. This article discusses some uses of dynamic page elements with accessibility and usability in mind and shows where they fail and what to do to make them better. You can view this article in a [Link:local version (/forreview/dynamicelements/)], that gets maintained more frequently. Christian Heilmann Evolt.org http://www.evolt.org/cleanmeanjs/ Javascript makes HTML more interactive and can increase usability. It can also mess up the markup code with loads of event handlers. Which is not at all necessary, as this example explains. Christian Heilmann Evolt.org http://www.evolt.org/explorer_script/ A script that turns a nested unordered list into a collapsible and expandable explorer tree. This article covers the basic functionality of [Link:Puredom Explorer (http://www.onlinetools.org/tools/puredom/)]. Christian Heilmann http://www.evolt.org/collapsible_page_elements/ This article explains how to collapse and expand a part of a page via DOM without disturbing the accessibility of the document. The article lead to the release of the [Link:DOMCollapse (http://www.onlinetools.org/tools/domcollapsedata/)] script. Christian Heilmann Evolt.org http://www.alistapart.com/articles/tableruler A JavaScript-trick how to make a table row highlight when you hover the mouse over it. Using DOM to avoid the need for inline event calls, the HTML of the table is kept very clean. Christian Heilmann Alistapart.com