A List Apart - RSS Feed

Showing and hiding content using JavaScript-based page manipulations for tabbed interfaces, collapsible elements, and accordion widgets is a common development pattern. Learn how your choice of hiding mechanism can influence content accessibility in assistive technologies like screen readers in an excerpt from Adaptive Web Design.

Designing with modular scales is one way to make more conscious, meaningful choices about measurement on the web. Modular scales work withnot againstresponsive design and grids, provide a sensible alternative to basing our compositions on viewport limitations du jour, and help us achieve a visual harmony not found in compositions that use arbitrary, conventional, or easily divisible numbers. Tim Brown shows us how.

Baby's got backchannel! If everybody at the conference is staring at their Twitter stream instead of at the person who's doing the speaking, maybe the speaker should meet them halfway. Migrating speaker presentations to the backchannel can empower the audience while enabling the speaker to listen carefully to their responses. The broadcast model of presentations is dead! Long live the conversation model.

Bookmarklet apps like Instapaper and Readability point to a future where content is no longer stuck in websites, but floats in orbit around users. And were halfway there. Content shifting lets a user take content from one context (e.g. your website) to another (e.g. Instapaper). Before content can be shifted, it must be correctly identified, uprooted from its source, and tied to a user. But content shifting, as powerful as it is, is only the beginning. Discover whats possible when content is liberated.

Theres really only one central principle of good content: it should be appropriate for your business, for your users, and for its context. Appropriate in its method of delivery, in its style and structure, and above all in its substance. As Erin Kissane explains, content strategy is the practice of determining what each of those things means for your projectand how to get there from where you are now. We are delighted to present an excerpt from Erin's new book, (and the third title from A Book Apart), The Elements of Content Strategy.

The float property is a valuable and powerful asset to any web designer/developer working with HTML and CSS. Tragically, it can also cause frustration and confusion if you dont fully understand how it works. Test or refresh your knowledge as Noah Stokes explores float theory and behavior, and guides us through common float-related coding pitfalls.

If youre a web designer or developer, youre well acquainted with prototyping. From raw wireframing to creating interfaces in Photoshop, designers map out how sites will work before they create them. Over the past few years, the protoyping process has changed significantly. With browser makers generally agreeing on web standards and the rise of tools such as Firebug and WebKits web inspector, we can sometimes skip Photoshop and go straight to the browser. Plus, JavaScript frameworks like jQuery let us play with browser events with only a few lines of code. But what if we need to do even more? As websites increasingly become web apps, we now need to prototype backend functionality, too. Learn how Sinatra, a so-called micro web framework, helps you create real (albeit simple) web apps extremely fast, letting you prototype flows and behavior you may want to integrate into a final product.

One of the most powerful security tools available to web developers is cryptographyessentially a process by which meaningful information is turned into random noise, unreadable except where specifically intended. A web developer working on an underpowered netbook in his basement now has access to cryptosystems that major governments could only have dreamed of a few decades ago. And ignorance of cryptography is not bliss. You may think your web apps profile is too low to worry about hackers, but attacks are frequently automated, not targeted, and a compromise of the weakest system can often give access to better-protected systems when people re-use passwords across multiple sites. Learn the three broad categories of cryptosystems that commonly relate to web applications and begin strategizing how to make your site secure.

Designing websites for kids is a fascinating, challenging, rewarding, and exasperating experience: Youre trying to create a digital experience for people who lack the cognitive capacity to understand abstraction; to establish brand loyalty with people who are influenced almost exclusively by their peers; and to communicate subjective value propositions to people who can only see things in black-and-white. Fortunately, its possible to create a successful registration process for these folks with an understanding of how their brains work. Debra Levin Gelman explores how to design effective registration forms for kids based on their context, technical skills, and cognitive capabilities.

Pity Scalable Vector Graphics. Its been an official standard since before IE6 was released yet has never found much of an audience on the web, certainly not the one it deserves. Just as SVG was starting to establish some browser support, along came the canvas tag, stealing the thunder of dynamically generated client-side images. Yet despite all the attention being paid to canvas, theres still a place for SVG, particularly for developers looking to replace plug-ins like Flash for data visualization. Unlike canvas or other script-only approaches, SVG can be easily divided into design and code elements, with just a little code to add interactivity. It even works on devices like the iPad and iPhone. And now, thanks to svgweb and a clever use of Flash, it works on older platforms no one could have ever imagined supporting SVG. Jim Ray shows how.