Skip navigation
Help

Jeffrey Zeldman

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.

At yesterday’s Ampersand New York web typography conference in the Times Center at The New York Times, Font Bureau designer/technologist (and A List Apart columnist) Nick Sherman demo’d Size Calculator, a web application created to bring screen design a capability that print design has enjoyed for 500 years.

It is trivial for a designer to set type (or any artwork) to appear at a specific size in centimeters or inches on the printed page. But it is impossible to do so when designing for screens. Here’s how Zen it gets: if I use CSS to set a line of type at 65cm, it will most certainly not be 65cm tall—nor does the W3C expect it to be. Actual size will depend on the dimensions and resolution of the screen. (Perceived size will of course depend on viewing distance, but that is true for print as well.)

Likewise, if I want an image or a line of type to appear to be exactly the same size when viewed on different screens—say, on a smartphone and a desktop monitor—there’s no way to achieve that, either.

Size Calculator solves these problems by using JavaScript to do the math.

What it is good for: if you know the dimensions and resolution of your device (be it a wall screen at a conference, a digital billboard, or a specific model phone held in a specific orientation), you can finally do the things I mentioned in the paragraphs above. Same size type on different screens viewed at different distances? Achievement unlocked. Another thing Nick did in his demo was to “print” an exact size dollar bill on the screen in the Times Center auditorium. He proved that it worked by walking to the screen and holding the actual dollar in front of the projected dollar. He then printed a life-size image of himself. Fun!

What it is not good for: although Size Calculator is exciting, it would not be good for responsive web design, because RWD is about designing for a universe of unknown devices, resolutions, and capabilities.

But if you are designing for a limited set of known screens, the sky’s the limit—literally: your design can take miles or km into account. If you’ve always wanted to make a ten thousand foot letter display at 12pt when viewed from a helicopter, now’s your chance.

What will you do with Size Calculator?

0
Your rating: None
Original author: 
(author unknown)

Three years ago in these pages, ALA technical editor Ethan Marcotte fired the shot heard ’round the web. ALA designer Mike Pick thought it might be fun to celebrate the third anniversary of “Responsive Web Design” (A List Apart Issue No. 306, May 25, 2010) by secreting an Easter Egg in the original article; our illustrator, Kevin Cornell, rose to the challenge.

To see it in action, visit alistapart.com/article/responsive-web-design, grab the edge of the browser window (device permitting), and perform the responsive resize mambo. (ALA’s Tim Murtaugh, who coded the Easter Egg, has provided a handy video demo of what you’ll see.)

0
Your rating: None

Sir Tim Berners-Lee, inventor of the web, is credited with making hyperlinks blue, a decision he appears to have reached at random. But although accessibility may not have been on Sir Tim’s mind at the time, the color choice was a happy one, according to Joe Clark:

Red and green are the colours most affected by colour-vision deficiency.  Almost no one has a blue deficiency. Accordingly, nearly everyone can see blue, or, more accurately, almost everyone can distinguish blue as a colour different from others. It was pure good luck that the default colour of hyperlinks is blue with underlining.
Joe Clark, Building Accessible Websites

0
Your rating: None

If you work in any kind of service industry you’ve undoubtedly come across the Request For Proposal, or “RFP.” The RFP process has become a standard by which organizations solicit competitive bids. It attempts to level the playing field and minimize bias by holding everyone to the same requirements—no special treatment, no rule bending. In return, the organization issuing the RFP is able to select a vendor by comparing apples to apples. Alas, in practice, RFPs are the least creative way to hire creative people. The rigidity of the process, and the lack of meaningful dialogue makes this little more than a game of roulette. How can we successfully navigate the heartburn-inducing RFP process? And what can we as an industry do to turn RFPs into the exception rather than the default means of hiring an agency?

0
Your rating: None

There’s 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 project—and 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.

0
Your rating: None

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 don’t 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.

0
Your rating: None

One of the most powerful security tools available to web developers is cryptography—essentially 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 app’s 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.

0
Your rating: None

Designing websites for kids is a fascinating, challenging, rewarding, and exasperating experience: You’re 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, it’s 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.

0
Your rating: None

You don’t have to be a great singer to write a great song—just ask Bob Dylan. Likewise, you needn’t be a Leonardo to draw your way to more and better ideas. Sketching helps you generate concepts quickly, exploring alternatives rapidly and at no cost of resources. The looseness of a sketch removes inhibitions, granting clients and colleagues permission to consider and challenge the ideas it represents. Mike Rohde outlines the practice, surveys the tools, and shares ways to become confident with this method of brainstorming, regardless of your level of artistic ability.

0
Your rating: None