25 Secrets of the Browser Developer Tools

Andi Smith:

Historically developers have used Firefox’s Firebug add-on to develop and debug their websites, but more recently each browser has developed its own set of tools and each comes with its own advantages and disadvantages. Nowadays it seems hard to imagine ever building a website without one of these handy tools, which are normally accessible by either pressing “F12″ in Windows or “Cmd” ⌘, “Option” ⌥ and “I” on the Mac, or by right clicking on the page and selecting “Inspect Element”.

But are you using the developer tools to their full potential? The biggest positive about the developer tools is that they are incredibly easy to use, but as a result developers often miss out on a large proportion of the functionality provided. Inspired by a video talk by Paul Irish and Pavel Feldman, I’ve compiled a list of “secrets” of the developer console. I’m not expecting every one of these to be unknown to you, but hopefully some of these will help you to become an even better web developer.

My favorite Chrome trick is clicking to flip through the various methods of describing a color.

(Source: twitter.com)

“There are a lot of people I dislike in the world. I mean, a lot. I don’t follow any of them on Twitter.”

— John Gruber

(Source: theverge.com)

The Webfont Revolution Is Over, Let the Evolution Begin

Stephen Coles rains on the webfonts parade:

Building the fonts is the part of this story that so few anticipated or dared to face. It’s the hard part. So hard, in fact, that some font manufacturers skipped the process altogether, simply releasing their print-optimized fonts as “webfonts” without the significant changes required to make them read well on screen. To me, this is akin to shipping software that is bug-ridden at best. Still, the tech media touts the “thousands” of new fonts now available for web use. Most of what consumers read is about how many fonts you can get and how they are served, but not so much about how they look and read.

Proof by Mask

Frédéric Filloux:

Web design is in bad shape. In the applications boom, news-related websites end up as collateral damage. For graphic designers, the graphics tools and the computer languages used to design apps for tablets and smartphones have unleashed a great deal of creativity. The transformation took longer than expected, but great designs begin to appear in iPad applications (in previous Monday Notes, we discussed Business Week+ and the new Guardian app). The best applications get rid of the print layout; they start from a blank slate in which a basic set of rules (typefaces, general structure of a page, colour codes) are adapted to the digital format. Happily, we just stand at the very beginning of a major evolution in news-related graphic design for apps. And this new world proves to be a killer for the traditional web which, in turn, seems to age fast.

The graphic evolution of the web must deal with two negative forces: its language framework doesn’t evolve fast enough, and it faces the burden of messy advertising.

Particularly interesting in this column is a roundup of how display ads are positioned across a handful of major news sites. It would be difficult to overstate the damage overgrown advertising real estate inflicts on the reading experience of the worst offenders Filloux investigates.

Where Are All the Ed-Ex Designers?

Khoi Vinh:

I would guess that there are less than a few dozen people in the world who can create superb software for editorial products, who can combine the holistic, systems-level thinking of UX with the incisive storytelling instincts of editorial design. I’m not even talking about a designer who can ‘do both,’ who can create a great digital publication one day and then create a great print publication another day. There are almost assuredly even fewer of those in the world, if any.

Instead, I’m talking about the kind of person who can build a great digital product out of great editorial content, a difficult enough challenge on its own. For lack of a better term, I call them editorial experience (or ‘ed-ex’) designers. A few of them include Marcos Weskamp from Flipboard, Oliver Reichenstein from iA, Ian Adelman from NYTimes.com, and the now-independent Mark Porter, formerly of The Guardian. There are more names than just these of course, but not very many.

Editorial experience design is delightfully clarifying in what seems like an endless stream of job titles assigned to those of us who do the work of shepherding the digital product design of media organizations.

What Should I Look For In a UI Typeface?

Ian Hex:

I’ve touched briefly before on some typefaces that I consider to be particularly good for on-screen reading. But now I wish to delve further into this realm of typography and consider: What makes a typeface good for screens and UI design in particular?

Thanks, Ian, for a great deep-dive into a tricky topic that is too often ignored when selecting typefaces for screen reading.

Pew Study: People Undervalue Their Local Newspaper

Freakonomics:

While 69 percent of Americans claim that losing their local newspaper would have no impact, their reading habits show that people rely on print and online papers for 11 out of 16 major news topics.

And who wants to bet that radio and TV are relying on newspapers to steer coverage of the remaining five?

Foundation

The guys at ZURB have built another nice responsive-grid framework to add to the rapidly growing list:

Foundation is a rock-solid, responsive framework for rapidly prototyping and iterating into production code. It includes a 12-column, future-friendly grid and tons of great tools and elements that’ll get you up and running in no time. Clone the repo to get the marketing site, docs, and base source. You can also visit http://foundation.zurb.com to download just the base source as a starting boilerplate.

Along with the responsive grid, Foundation features ZURB-flavored buttons, forms, tabs, pagination, tables, image sliders and modals. The global CSS also includes baseline typography, though this isn’t described in the documentation.

/via Yuri Victor

“Allowing artist-illustrators to control the design of statistical graphics is almost like allowing typographers to control the content, style, and editing of prose.”

— Edward Tufte, “The Visual Display of Quantitative Information”

Steve Jobs: Visionary, Inventor, and Very Challenging Photo Subject

This great article from Photo District News on Jobs’ difficulty as a photo subject also includes a gem towards the end — the story behind the portrait selected for Apple’s homepage tribute:

Albert Watson, who photographed Jobs just once for a portfolio of people in power that Fortune commissioned him to shoot in 2008, had a different experience from other photographers. “The one thing I insisted on was that we have a three hour window of set up time,” Watson says. “We were prepared…we set up to make [every shoot] as greased lightning fast as possible for the [subject].’ Watson says he had also read “a massive amount of stuff” about Jobs to help him conceptualize the shoot, and so he would be able to converse with Jobs intelligently.

When Jobs walked in, Watson says that his power, charisma and genius were palpable. “It was like when Clint Eastwood walks in to the room.”

Jobs didn’t look immediately at Watson, but looked instead at the set-up and then focused on Watson’s 4×5 camera “like it was something dinosauric,” Watson recalls, “and he said, ‘Wow, you’re shooting film.”

(Source: poynter.org)