Design

Oct 20, 2010

The 1Kb CSS Grid

Phil Powell CSS, Design, Web 0 Comment

I’m a bit late to the table with this one, but worth noting nonetheless. The 1Kb CSS Grid is a super-lightweight CSS grid system:

Other CSS frameworks try to do everything—grid system, style reset, basic typography, form styles. But complex systems are, well, complex.

Tyler Tate elaborates in the first of a series of posts:

With added complexity comes… well, complexity: a steeper learning curve, increased development time, and — cringe — tougher debugging.

Here is a fresh take on the CSS grid (loosely based on Nathan Smith’s 960 Grid System). Its mission is to be lightweight.

Oct 20, 2010

Is the iPad Really the Savior of the Newspaper Industry?

Phil Powell Applications, Creative, Design, Publishing, Web 0 Comment

In-depth analysis from Mashable about the current state of newspaper applications for mobile devices. There’s nothing conclusive in the article, but it does include some interesting tidbits and some startling facts and figures:

The Harrison Group survey found that tablet users spend nearly 75% more time reading newspapers and newspaper articles, and 25% more time reading books. Those surveyed were apparently so convinced by the digital delivery and form factor, that 81% of tablet owners believe that it is inevitable that all forms of publications will eventually be produced almost exclusively in a digital format.

Those are some pretty compelling and encouraging numbers for content creators. So why are so many of the current apps failing to make the grade?

After looking at a variety of newspaper iPad apps, our main complaint — and we’re generalizing across the entire market — is that they don’t take enough advantage of the iPad’s wowing capabilities.

Uh-oh.

The solution could be found in a new “hybrid newspaper app” suggests Fidler, in which “automated sections with continuously updated news stories and more visually rich magazine-like sections created by editors and designers could coexist.” The Reynolds Journalism Institute is experimenting with exactly that kind of new publishing model.

The NAA also acknowledges the need for newspapers to “differentiate” content, and digital strategist Levitz says that consumers read longer-form content on the iPad, and they really enjoy the high quality of the visual images on the screen. She thinks newspapers can thrive in the tablet space if they take advantage of the device’s capabilities.

So essentially, what’s being said here is “people like pretty pictures and clicky, whizzy, shiny things.” This is where so many publishers and analysts seem to be missing the point. The IPad’s wow factors aren’t it’s ability to show high-quality imagery, nor it’s slick animations. The iPad’s wow factors are it’s pick-up-ability, it’s tactile and responsive interface, it’s ability to connect your offline world seamlessly with your online world.

So many newspaper publishers got it so wrong when they tried to transition from print to the web. They failed to innovate; failed to adapt their business models; failed to see the value in their content and the power of their readers. Amid that disruption, they appear to be about to make the same mistakes again: failing to innovate, failing to adapt; failing to realise that their content has become even more valuable, and their readers ever more powerful.

Oct 18, 2010

iPad as the new Flash

Phil Powell Applications, Design, Web 0 Comment

Jeffrey Zeldman compares the trend for creating novelty interfaces in publication apps to the bad old days when Flash spawned a million bad interface designs. He also succinctly picks up on an important point as to why web standards are so important:

Everything we’ve learned in the past decade about preferring open standards to proprietary platforms and user-focused interfaces to masturbatory ones is forgotten as designers and publishers once again scramble to create novelty interfaces no one but them cares about.

While some of this will lead to useful innovation, particularly in the area of gestural interfaces, that same innovation can just as readily be accomplished on websites built with HTML, CSS, and JavaScript—and the advantage of creating websites instead of iPad apps is that websites work for everyone, on browsers and devices at all price points. That, after all, is the point of the web. It’s the point of web standards and progressive enhancement.

There’s also some really good discussion to be found in the comments. But Zeldman nails the case for why this kind of stuff makes bad business sense for magazine publishers:

Unless your organization’s business model includes turning a profit by hiring redundant, competing teams, “Write once, publish everywhere” makes more economic sense than “Write once, publish to iPad. Write again, publish to Kindle. Write again, publish to some other device.”

Oct 18, 2010

End hover abuse now

Phil Powell Accessibility, CSS, Design, Web 0 Comment

Cennydd Bowles speaks out on the trend of using hover states in web interaction:

Designers who pop up information panels or move page elements on hover are using flawed logic, second-guessing what users want to do before they do it. The result, which I’ve seen in countless usability tests, is that users activate these controls accidentally. You know what happens? People actually flinch: “What was that?” They return with hesitation, less confident in their understanding of the site. It’s no accident that the Twitter worm propagated through hover— accidental activation meant users spread the worm unintentionally.

He makes a good point, particularly in a time when hover states are becoming a less reliable feature anyway, as the onset of touch devices makes hovering a non-entity.

Trent Walton has written a really useful and informative article about this subject:

As designers, we’ve turned to hover states to accommodate extra content and allow visual aesthetics to trump usability. Like it or not, those days are over and the interactions we design are going to have to stand on their own two feet.

Oct 14, 2010

jQuery AppMenu

Phil Powell Design, Web 0 Comment

A Mac-style Alt+Tab menu, implemented with jQuery:

AppMenu takes the default cmd+tab functionality on the Apple Mac and imitates it almost exactly on a website, instead using alt+tab (oroption+tab).

Not entirely sure of where this could be used in the real world – this kind of thing needs to be universal to be any use – but a really nice implementation nonetheless. A great example of what can be done with keyboard navigation.

Oct 6, 2010

Keys.css

Phil Powell CSS, Design, Web 0 Comment

Keys.css is a really simple and elegant stylesheet from Michael Hüneburg for rendering beautiful keyboard-style elements. Compatible with all modern browsers, and degrades gracefully in older ones.

Top job! And no horrible font-wrangling or images in sight.

Oct 6, 2010

WIRED on iPad

Phil Powell Applications, Design, Publishing 0 Comment

I’d missed this first time around: Oliver Reichenstein wrote a thorough, in-depth analysis of the typographic problems with the WIRED iPad app:

First, the paper magazine was crammed into the little iPad frame. In form of a PNG slide show. To compensate for the lack of interactive logic, this pretty package was provided with a fruity navigation. In the end it was spiced with in-app links, plucked with a couple of movies and salted with audio files (“interactive”). Then it was off to marketing. And it sold 24,000 copies. Dammit. It’s the Nineties all over again.

He makes some really potent points about the differences between designing readable publications for print and screen: the folly of column layouts, careful use of gutters, the impact of too much ornamentation. He presents some very subtle examples, but that is the strength of his reasoning: it’s the subtleties of designing for different digital devices which are most important; the devil is, indeed, in the details. Porting a print design directly to digital reading devices like the iPad isn’t good enough.

We should use original tools to create iPad apps, not because Steve Jobs said so, but because these tools create products with flesh and bone, that is: an understanding of both the purpose, the potential and the limits of the iPad technology.

Oct 5, 2010

The Square Grid

Phil Powell CSS, Design, Web 0 Comment

There are a proliferation of new grid-based CSS frameworks popping up. The latest is The Square Grid, built around the idea of a 28px horizontal and vertical rhythm:

A simple CSS framework for designers and developers, based on 35 equal-width columns. It aims to cut down on development time and help you create beautiful-structured websites.

Well thought through, and nicely presented.

Oct 5, 2010

960 Grid System is Getting Old

Phil Powell CSS, Design, Web 0 Comment

Nick La on why it might be time to take a fresh look at the trend of using the 960 grid system:

The problem with 960gs is the gutter space and content width. Minus the margin space, the actual content area is only 940px. It worked well back then because most designs are set at 12px font size. These days most designs are set at 13px font size or higher. Since the font size has increased, don’t you think we should increase the content area as well as the gutter space?

In a follow up post, he elaborates and presents details of a more modern, semantic and simpler grid system, concluding:

Don’t force your design to fit to a grid that hinders your creative genius. Do what makes your designs look good and is comfortable to you. A grid should be your layout guideline, not restriction.

Sep 30, 2010

The problem with magazines on the iPad

Phil Powell Accessibility, Applications, Design, Web 0 Comment

Peter Kafka writes about the problems with bulky magazine apps:

The Wired iPad app has a weight problem.

The first one came in at about half a gigabyte of memory, and it hasn’t shrunk that much since.

And Condé Nast’s newest iPad app, from the New Yorker, isn’t much better: It takes up 173 megabytes–but that’s for a weekly issue. If Condé can’t slim the app down, a month’s worth of New Yorkers will be much heavier than the first monthly Wired app.

Appears that this weight problem is down to their use of some horrible image-based reader software:

Both the New Yorker and Wired have the same weight problem for the same reason: They are built on the back of an Adobe (ADBE) program that essentially functions as an image reader.

That is, each page of the magazine is turned into the equivalent of several big photos. Which means an image-rich layout at Wired or a page of text at the New Yorker both consume a lot of memory.

Aside from the horribly inappropriate use of technology (displaying text as images is just dumb and inefficient), this is a horrible accessibility problem: it means that these magazine apps are pretty much unusable for many disabled users.

Once Adobe figures out how to break up HTML text into individual pages, McCarthy will make the switch, she says. Perhaps in a month.

There’s really no need to use HTML. And there’s really no need to have to compromise and use text scrolling. There’s a technology which allows for portable reading of rich media content, whilst maintaining precision layouts, and even maintains accessibility. It’s been around for a while.

It’s called PDF. It’s an open format, and it was created by Adobe. Duh.

1 2 3 4