Produxion

The personal weblog of Phil Powell

Writer for iPad

This new writing application for the iPad from Information Architects is pure elegance. Hardly surprising considering the well-thought philosophy behind it:

Professional Typography is not just pretty to look at. It facilitates the process of reading. If you look at text as an interface, typography is its usability. Common text editors are typographically weak (small font, tight leading, random measure, lack of whitespace). In addition, few people have the professional skills to design digital text. In Writer, font type, text size, column width, leading and contrast are carefully set for the best reading experience both in portrait and landscape mode.

I’ve been finding it difficult to find a reason to invest in a first-generation iPad, but it’s beautiful apps like this which might just sway me. The thoroughness of their branding nails it:

The period at the end of the logo reflects the main virtue of the application: It pushes you to get to the point.

The Tech Behind the New Twitter.com

An interesting technical look at the architecture and technology behind the new Twitter.com:

One of the goals with this project was to make page navigation easier and faster. Building on the web’s traditional analogy of interlinked documents, our application uses a page routing system that maintains a strong relationship between a URL and its content. This allows us to provide a rich web application that behaves like a traditional web site. Doing so demanded that we develop a rich routing model on the client. To do so we developed a routing system to switch between stateful pages, driven by the URL hash. As the user navigates, the application caches the visited pages in memory.

The team behind this build have made some very brave, and yet very intelligent architectural decisions. Although the site is a very sophisticated Javascript application, it’s encouraging that it builds upon one of the core design principles of the web: the URL as context.

And for anyone who doubts my recent assertion that the browser has re-emerged as a serious application platform:

With #NewTwitter, we’ve officially adopted JavaScript as a core technology in our organization.

Hallelujah.

Who Will Own The Living Room?

Techi analyse the four main players in the race to dominate the living room:

What is clear is that right now, no-one is quite sure what the winning formula is. Do you create a service like Netflix that is accessible through a whole whack of hardware? Do you make the hardware and ecosystem for others to display content? Or do you do both, and hope that the integration of hardware and software makes your experience the most desirable?

All four of the companies above have their strengths. Apple have their brand and UI expertise. Google have their software wizadry. Sony have their engineering chops and Playstation brand, while Microsoft have the capacity to reach huge numbers of people. But which model will win out? It’s likely it will still take years to find out.

I suspect that none of these big boys will “own” the living room, simply because the living room is an intimate space which isn’t prime for “domination”. It’ll take an innovative and more holistic disruptor to come along and make any impact on the transformation of the digital TV space.

Why the new Twitter.com design changes everything

This week, Twitter unveiled a new design for their website, and I think it’s a really important step in the evolution of their service, and web services in general.

The fact that Twitter has such an open and powerful API is what has allowed a thriving ecosystem of apps and services to grow and evolve. This is Twitter’s success: the micro-blogging service in and of itself isn’t the main catalyst for it’s wide adoption, it’s the way the core service can be used, applied and integrated in so many different ways, on any platform, anywhere there is a data network. It has, essentially, created an accessible, non-passive use for portable, mobile computing.

Despite languishing with a slightly ageing design, and with so many different apps around for accessing the micro-blogging service, it’s quite surprising that twitter.com is still used by the majority of users. The fact is though, that despite nonsense claims to the contrary, most of our online activity still takes place on the web, particularly when it comes to interactions. The browser is still the best choice for, well: browsing.

Apple popularised the model of the “app”, making software sexy again. Installing bespoke, well-designed apps to access your favourite online services is quick and easy – and they’ve proven that we’re willing to pay for that speed and ease. If we have so much choice when it comes to shaping our experience of Twitter, then why is their website so important?

Something is changing. Software – whether it be installed apps, or web apps – are becoming easier to use, and our online interactions are becoming ubiquitous with our everyday lives. Without even knowing it, we’re all becoming power users. We’re demanding better online experiences; we’re demanding more immersive online experiences.

The fact is that the browser is still the best platform for developing online applications, and the new twitter.com proves that. Embedded media available instantly? Show me a desktop or mobile app that can do that as elegantly. Infinite scrolling? Even the super-elegant Twitter for iPhone app does this clunkily. Related content? Inline bio panels? True, not every user wants these features all the time, but when you do want them, the browser delivers the best experience. And it’s quite telling that the new design is based so heavily on the Twitter iPad app: I think it says a lot about the kind of interactive design we’re coming to expect as we move into a new era of portable, cloud computing.

And, yes: desktop or mobile applications can be developed which do the same things. But the frameworks and development tools of the web have matured to a point where it is possible to develop and roll out these kinds of advanced features with ease. Want to roll out a new feature for an installed app? Develop, deploy, wait for the user to upgrade. Want to roll out a new feature on a web app? Develop, deploy – as often as you like. Services, APIs and applications are all well and good, but when it comes to getting the most immersive, immediate and adaptable experience: HTML is still king.

The browser as a platform: I think we’re finally there.

Less Framework 2

Joni Korpi has released version 2 of the mightily impressive and devilishly simple Less Framework. It uses CSS3 media-queries, mixed with a dash of column layout to create a distinctly unobtrusive framework for fluid CSS layouts.

Less Framework uses inline css3 media-queries to switch between three layouts:

  • a two-column layout at 320 px, for smartphones
  • a five-column layout at 768 px, for iPads and netbooks
  • and an eight-column layout at 1280 px, for desktops and laptops.

The code is beautifully simple, with a minimal set of features. It provides a perfect foundation for working with media-queries, without bundling in too many bloated features to get in your way.

All three layouts essentially use the same grid. They all have the same column width (120 px), the same gutters (24 px), and the same vertical rhythm (24 px). The only things that change are the amount of columns and the margins around the layout. This means you’re not designing three different layouts, but rather three variations of one layout.

It’s free and easy to download and implement, and is released under Creative Commons. Total win!

Flash is not a de facto standard technology

John Gruber continues to hammer home the reasons why Apple’s abandonment of Flash on mobile and touch devices is a good thing for web standards:

If no one releases a popular web browsing platform that lacks Flash support, then web sites that already publish Flash content are never going to move away from it. I think the web would be a far better place without Flash, or, at least, with Flash relegated to a position like that of Java applets: there if you want it, but not a major foundation.

Flash is never going to decrease in popularity so long as all web browsers support it. Flash might decrease in popularity because of iOS. If you believe that Flash’s current position as a de facto standard technology is harmful to the web, then users — not just iOS users but everyone using the web — would benefit if that happens.

I don’t think Flash is quite as evil as some commentators make out – it can be a powerful tool. But I agree that it needs to be repositioned: less as a standard web technology, and more as a bespoke application platform. So much of the stuff people use Flash for can now be achieved almost effortlessly with modern Javascript frameworks and clever use of CSS. I’ve yet to see a practical example of where Flash could be applied to applications on a mobile device.

Why Does Clean Markup Matter in Web Design?

Webdesigner Depot are on a roll at the moment, putting out some really useful and informative articles, covering some of the basics of good web practice. This latest article covers the practical, long-term benefits of using clean, maintainable  markup:

Mobile browsing is growing like Godzilla on atomic-steroids. Instead of being relegated to the jet-setting Blackberry addicts from 5 years ago, today everyone is using their phone to surf the web.

Assistive technology -screen readers for the blind and alternate interface devices for the handicapped- is common, and you don’t want to lose a sale or alienate traffic just because you didn’t take that into account.

Your site is likely to be translated into a half-dozen languages as readers from around the world find your content. Thanks to the Internet Archive, Google’s cache and others, pages you publish today will be around for a long, long time even after they’ve been removed from your live site.

Clean markup and standards-compliance will go a long way to ensure your sites work in each of these scenarios.

Even if you’re a hardened web developer who knows your craft well, I think it’s always good to refresh your basic knowledge with articles like this: sometimes to reinforce your assertions and assumptions; and sometimes to pick up useful tidbits which have passed you by, or which you haven’t given much thought to.

Progressive Enhancement: Explained

Webdesigner Depot have a really well-written feature on the oft-misunderstood subject of progressive enhancement:

A lot of designers think progressive enhancement only benefits those users who are using outdated browsers, but other users benefit, too. Mobile browsers are the most likely to take full advantage of progressive enhancement. The reasons for this are two-fold. First, mobile browsers that don’t support CSS or JavaScript can still display the content of your site. While most modern smart phone browsers support at least one of those, not all browsers for basic cell phones do.

It’s worth reading the whole article, which includes some very clearly explained advice, including how to sell the benefits of progressive enhancement to clients:

When working on your own, personal website projects, progressive enhancement is something you can implement without a problem. When dealing with clients, however, it can get a bit trickier. A lot of clients are still stuck on the idea that their website needs to appear exactly the same in every browser they’ve ever used. Ever.

Explain the benefits of progressive enhancement to your clients. Tell them that it’s faster and less expensive for them to have you design the site with progressive enhancement in mind, and that their visitors likely won’t care either way, as long as the content is available.

It’s worth noting that progressive enhancement is not the same thing as graceful degradation. This article from A List Apart explains it best:

Progressive enhancement focuses on the content. Note the difference: I didn’t even mention browsers.

Content is the reason we create websites to begin with. Some sites disseminate it, some collect it, some request it, some manipulate it, and some even do all of the above, but they all require it. That’s what makes progressive enhancement a more appropriate paradigm. It’s why Yahoo! swiftly adopted it and used it to create their Graded Browser Support strategy.

Motorola acquires 280 North. But why?

280 North wowed people with the creation of their web application framework Cappuccino, which is built on an impressive new programming language, Objective-J. The whole framework is modelled on desktop development with Objective-C for Mac OS X, and it can do some pretty amazing stuff – it’s like Cocoa but for the web.

Techcrunch report that 280 North has been acquired by Motorola for a whopping $20 million, quoting a Motorola spokesperson:

“I can confirm that Motorola acquired 280 North earlier this summer. The transaction provides Motorola with specialized web-app engineering talent and technology that will help facilitate the continued expansion of Motorola’s application ecosystem. We believe 280 North will be instrumental in helping us continue to foster the Android ecosystem with innovative web-based technologies and applications.”

I really don’t understand the logic behind this acquisition, and suspect it could mean the end of the great open-source work that 280 North have done.

  1. Motorola are committed to developing for the Android platform, so why acquire technology which is so intrinsically tied to the Mac platform? Objective-J is essentially a webified version of Objective-C; the look-and-feel of Cappuccino’s UI elements are based on the Mac UI, and the development tools feel just like Mac apps.
  2. Cappuccino’s aim was to bring the ease of developing desktop applications to the web: it’s about creating web applications which feel like desktop applications. Motorola have very firmly positioned themselves in the mobile market, so why the interest in web applications which feel like desktop applications? Even if they are branching out into the development of tablet devices for the home, surely it makes sense to develop technology for a touch UI? Touch is not what Cappuccino is about – Sproutcore is way ahead of the game in this area.

I’m ready to be proven wrong, but this seems like a knee-jerk acquisition. This isn’t about acquiring 280 North as a viable company, or Cappuccino as a platform for further development – it’s about acquiring the clever brains behind this web app framework for Motorola’s bespoke purposes. It’s right there in that Motorola statement: “the transaction provides Motorola with specialized web-app engineering talent”.

Further Thoughts on CSS, Experiments and Icons

Matt Ward has written a follow-up to the really good article he posted last week, expanding on his thoughts and responding to some of the discussion which has been raised. He talks about the distinction between experimental techniques intended as an educational resource, and commercial resources which encourage bad practice:

Yes, I don’t think that (most of) the CSS experiments are meant to be practical. I also agree that they are have entertainment value, though I think they have even greater value as an educational resource. As long as these things are generally understood, then there’s really no issue, and if things had stayed that way, I would probably not have written the article at all.

However, when we actually start charging money for these icons – as with the Peculiar set – that places everything in an entirely new light, which I have termed the implication of cost. As long as everything remained in in the experimental stage, all this unique CSS work remained could be understood as primarily theoretical and conceptual. The moment we put a price tag on it, though, the implications change.

Charging people for the icons is essentially a means of sanctioning their use in a production environment and are stepping firmly across the line between the experimental and the implementable. When this happens, I think that there is an argument, because we are no longer just in the realm of the experimental, and the message we are sending is the wrong one.

I totally agree, and any web developer worth their salt will be wary of implementing any of these experimental techniques in a production environment. Font replacement techniques like Cufón and sIFR have their detractors, but at least these techniques degrade gracefully – even @font-face is designed to degrade so that it doesn’t interfere with the browsing experience served up by unsupported technology. But as soon as you start to use wild CSS for the design of graphical icons, or start fudging dingbats to convey visual context where it doesn’t belong, you create horrendous accessibility problems and degrade the user experience ungracefully.