E-Books as a Blank Canvas

While reading a book yesterday I made an interesting discovery: a chapter that began on a verso (left-side) page. In a standard typeset book, chapters or other major divisions generally begin on a recto (right-side) page, leaving a blank verso if the previous section ended on a recto page. This book followed that standard everywhere else, so I wondered if this was an accidental oversight on the part of the typesetter or if it was a deliberate act that met some other, unknown publishing requirement.

I thought to myself that in an e-book, these distinctions are entirely meaningless. E-book hardware only shows one page at a time. Even the notion of “pages” is abstracted away, as the user re-sizes text on the fly and the entire book re-flows its own layout to match, adding or dropping page numbers as needed.

So are typesetters out of a job? Hardly. A professionally typeset book exudes quality, even if the writing within does not. Until everyone starts writing their books in a system like LaTeX, typesetters will play an important role in adding value to a finished book, online or not. Even with publishing systems like LaTeX, a good typesetter can still make a book stand out in a way that matches the tone and style of its writing. As with anything else in design, the rules exist so that those who have mastered the rules can break them creatively.

I propose that the e-book can serve as a blank canvas on which an entirely new art of typesetting can flourish. What we have currently is a system that creates beautiful printed books and then translates them into e-books in imitation of the original. Where we need to end up is a system for creating beautiful e-books from the beginning, with their own standards and conventions. As e-books become more popular, I think we will see a revolution in how we conceive of the “book” as an object.

For reference, one need only look to the constant evolutions of the video game industry. Whenever a new console cycle begins, developers’ first impulse is to create games that are very similar to what has already been done, only “better”. As the hardware matures and developers become more confident in working with it, entirely new types of games are created that utilize the best features of the new hardware while casting aside gameplay mechanics and practices that no longer make sense. The end result is a set of games that are unique to that generation of consoles and represent the best of an era.

Printed books have had a long run, but a new cycle is beginning, and I’m eagerly waiting for the end results.

Posted in Design, Misc, Technologies | Tagged , | Leave a comment

What Is The What

So, as you may have noticed, I haven’t posted anything in “104 Designs for 2010″ in over a week. “What gives?,” you might ask.

Well, to be honest I’ve actually been pretty busy. I started the “104 Designs for 2010″ project in the hope that building a solid portfolio would net me more work, and that’s exactly what happened. Word to the wise: the new secret to business success, as Gary Vaynerchuk eloquently put it, is working your a** off. I’m doing some (hopefully long-term) freelance work with a local agency and loving it.

Is this the end for 104/2010? No, certainly not, but it’s definitely been put on the back burner. I think what I most enjoy about 104/2010 is the way it lets me experiment with new web technologies, so as I find new techniques and tools, I’ll be sure to put them to use here. (I’ve been thinking a lot lately about the Pure CSS3 AT-AT Walker demo…)

I’m still writing articles as usual, and I’ll have another post up soon about Information Architecture.

Thanks for reading!

Posted in 104 Designs for 2010, News | Tagged , , , | Leave a comment

The Apple iPad, Flash, and the Future of Computing

On Wednesday, months of rumor and speculation came to an abrupt end when Apple chief Steve Jobs formally unveiled his “latest creation,” the Apple iPad. The death of rumor relating to the device ushered in an entirely new wave of speculation. Is this really the thing that Apple spent years developing? Will it actually sell? Do we really need a “third device” between laptops and smartphones? Who came up with the name?

Most of the negative assessments of the device fall into one of two camps. The first camp says that the iPad isn’t anywhere near as innovative as rumor and speculation had indicated, and that the iPad is really nothing more than “a giant iPod Touch.” The second camp says that the iPad is too locked down to be attractive, since it only runs applications that Apple has blessed with inclusion in the App Store – notably excluding any version of Adobe’s Flash runtime. I’d like to address both camps in this post.

The iPad doesn’t have a camera / wash my car / cook me breakfast.

First, Apple products rarely live up to their pre-launch hype, but that doesn’t make them any less compelling or significant over the long haul. Look back to the iPod; when it was first released, I was happy with my portable MiniDisc player / recorder (which is still, to me anyways, the true successor of the cassette tape). The iPod was like any other MP3 player on the market when it was released, and while the Apple hype machine might not have been in full gear at the time, there certainly wasn’t much to be enthused about at the time. But as release followed release, the iPod became a thousand-ton juggernaut in the portable audio market. Apple refined iTunes until it was the best music management software available, on any platform, not to mention the premier online store for buying content. Apple invented the “podcast,” the sonic equivalent of blogging. The iPod itself became ever more capacious, and when it reached 40GB in its third generation, even I was tempted enough to ditch my minidisc collection for a device that could hold my entire music library (at that time, anyways… it’s become much larger since then). The initial product may have disappointed, but it quickly grew into something much bigger than even the most outlandish hype could have predicted.

The cycle repeated itself with the iPhone. Remember the Motorola ROKR? 100-song hardware limit, with a clumsy music-playing interface – an abomination that was quickly forgotten in Cupertino. Then Steve Jobs announced the iPhone. The hype was incredible – desktop-like web surfing, innovative new multi-touch screen, a whole new way of interacting with an iPod. Then the criticism began. Mobile Safari doesn’t have a Flash plugin; the phone is too expensive; there’s no way to write real applications for it; you’re stuck in a two-year contract with AT&T; it’s too slow. Within two years, Apple had introduced the blazing-fast iPhone 3GS at nearly half the cost of the original iPhone, the App Store had outperformed any analyst’s expectations, and Flash started its decline in popularity.

I predict a similar cycle with the iPad. Every “major” concern that would supposedly keep people from buying an iPad – its lack of a camera, the inability to make phone calls on 3G-equipped models, or the continuing lack of Flash support – will become a non-issue within two years. Sure, entirely new issues will arise during that time; witness the complaints about the App Store approvals process or the outrage at AT&T’s service that accompanied the growth of the iPhone. But the iPad will in all likelihood sell like hotcakes within one to two years, even if its initial launch is underwhelming, simply because Apple doesn’t sit around on their laurels when they release a new product line. Apple tweaks, prods, and perfects their devices, and if they still don’t sell well, only then does Apple lose interest (see the AppleTV or Mac Mini).

The iPad is a locked-down DRM love-fest.

Sad but true. The only way to get an application onto a standard-issue iPad will be through the iTunes App Store, meaning that if you consider the iPad a computer, it’s about the most locked-down computer to be sold in the history of computing. If Apple doesn’t like your app, it will not find its way to an unmodified iPad, period. The lack of a disc drive or even a USB port further solidifies that, and the iPad’s non-traditional filesystem won’t even let you shoehorn an unauthorized application onto the device. Note that I haven’t even mentioned content yet, the traditional place for talk about DRM. No, the iPad’s DRM limits what can come into the device as much as (if not more than) what you can copy off of it. No wonder the Free Software Foundation is up in arms.

All the same, devices like the iPad really are the future of computing. It’s certainly powerful enough to run nearly any traditional desktop application, along with relatively complex games (though it’s not any real competition to something like the Xbox 360 or PlayStation 3). It has the world’s easiest application installation process; click a button, potentially charge your credit card, and the application is on your device and ready to use. And since every developer in the world is forced to use the same application installer, you will never see the confused jumble that is Windows (or, to a lesser extent, even Mac) application installs, with product activation, serial numbers, and actual installer programs. The iPad “just works,” in an actually meaningful way, and that’s all most people care about. If the Web conforms more closely to Apple’s vision, which, thankfully for Apple, is also the vision of Google and others, then many users may not even need a “real” computer to complement their iPad. The stereotypical computer-literate family member who keeps all the family’s computers in good working order will become a thing of the past, because the iPad is built so that it cannot be broken. It can crash now and then, sure, but no one will ever need to “re-install iPhone OS” or make sure that they have the most recent browser or plugins.

I make only one caveat to the above paragraph: Apple, and computer manufacturers in general, cannot use the iPad approach for everyone. Plenty of people use computers because they enjoy keeping a well-maintained system, much like car enthusiasts who truly enjoy fixing up their cars with their own two hands. And specialists – designers, developers, and researchers – will always need the unparalleled flexibility of a general-purpose operating system. The geeks will be all too happy to recommend the iPad to their relatives, so long as they can keep the shiny toys for themselves.

Yeah, but what about Flash?

Over the years, I’ve had a love/hate relationship with Adobe. I first learned web design by using my school’s copy of Dreamweaver; without that experience, I probably wouldn’t be where I am today. At the same time, Dreamweaver keeps designers weak by holding their hands and creating shoddy look-alikes of well-implemented sites.

The Flash Platform is exciting because of its power and its near-universal install base. ActionScript 3.0 can do an awful lot, and the Flash runtime can execute some fairly complicated code (like full 3D gaming) at a reasonable speed. But Flash is, and likely always will be, proprietary. Adobe makes its income selling the tools that allow developers to target the one and only Flash runtime. If Adobe opened up Flash development, you would see multiple Flash runtimes for everything from supercomputers to toasters, and a proliferation of Flash development tools as well. This would be incredibly good for Flash adoption – it would have the opportunity to unseat JavaScript as the go-to scripting language of the Web – but it would bankrupt Adobe.

So Adobe has to walk a fine line. They have to push for adoption of Flash wherever possible, promoting it as an essential part of the Web like HTML or CSS, but at the same time they have to keep Flash protected from any attempt to open-source it or otherwise reveal its complete inner workings. It’s a strategy that makes Adobe act like it has multiple personalities, threatening open-source developers reverse-engineering Flash for being too open, but criticizing Apple’s exclusion of Flash from its mobile devices for being not open enough.

What will the outcome be? Ultimately, I don’t think potential iPad buyers are going to care about the lack of Flash. Adobe will either find a way to make Flash web-accessible while still remaining proprietary, or Flash will wither and die. You can see the beginnings of the first option in Adobe’s CS5 demonstrations, where Flash CS5 was shown compiling Flash apps into native iPhone OS apps, and Dreamweaver could convert interactive charts from Flash components to HTML5 components. If Adobe’s money-maker is tools for designers and developers, I think Adobe will be making its tools as useful and relevant as possible – and I think that means embracing HTML5 and finding ways to make Flash content work within that scope.

Rant mode off.

The iPad really is a unique device, even if it is nothing more than a giant iPod Touch. When the iPad evolves into a notebook replacement, the computing landscape will be changed forever, and I believe that such a change is inevitable. In two years, we will look back at the iPad announcement and tell ourselves that the whole time we were asking the wrong questions and focusing on the wrong things. It really is going to be a game-changer, even if I don’t find myself all that enthused about buying the first generation.

Posted in Misc, News, Technologies | Tagged , , , , | Leave a comment

Design 006: Local Newspaper

Two days after Design 005, here’s #006: a re-work of the Coral Gables Tribune, a free weekly newspaper distributed at retail stores in the area. The current site for the newspaper uses a Flash component to display the print version of the newspaper in exact page-by-page detail, including pages of ads. The Flash version of the paper is displayed too small to read easily, and the “zoom” function only makes things slightly better. The challenge for me was to create a more reader-friendly layout, while still letting the newspaper sell ads both in its paper and on its website.

To solve the advertising problem, I created a vertical column on the right side of the design to hold 125×125 pixel ads. This size is smaller than the ads the site currently offers, but I feel this is offset by the positioning of the ads directly next to the content, rather than at the very bottom of the site. The redesign has space for five of these ads.

To solve the readability problem, I changed the central content area into a photo index of the issue’s ten top stories. The featured story gets a wider display area, and the remaining nine form a grid underneath. Furthermore, the “Community News” section, generally found in the middle of the paper, gets a sidebar on the left for excerpts from the first few stories, with a link to the full community news section.

The site’s original horizontal navigation at the top of the site was transformed into three lists of links each in the header. This groups the links by type, and also echoes the grid structure of the article photos underneath.

Finally, I kept the grid layout for the paper’s eight columnists below the main content area, but tweaked the layout a bit to give it a more open look. There is slightly more spacing between each columnist’s grid space, and I got rid of the large borders around each grid space as well.

So, that’s Design 006. Stay tuned for the License to Kill, Design 007.

Posted in 104 Designs for 2010 | Tagged , , , , , , , | Leave a comment

Design 005: Art House Cinema

Today, I present Design 005, a re-imagining of the Miami Beach Cinematheque‘s website. The MBC currently has a Flash-powered website that also links in a boilerplate ticket ordering site from Tix.com. I liked the style of the existing site, but the use of Flash didn’t add anything to the site, while simultaneously making the site harder to update and totally unusable on the iPhone. So, I sought to re-work the site’s overall feel using only CSS3 and JavaScript, while updating the layout to entice new visitors.

The site’s title in the upper-left is positioned using CSS3 Transforms, rotating the headers -5 degrees and giving them 20 pixels of top margin to keep them legible. This solution degrades nicely in browsers that don’t support (all of) CSS3, appearing as standard, horizontal headers. The headers are also given a transparent background with RGBA color. The site uses the excellent Museo font for its headers thanks to Cufón.

The site navigation in the upper right has rounded corners thanks to border-radius, and the same transparent background as the headers.

The current film section is set to a fixed height with overflow: auto to get vertical scrolling. I chose this setup because it allows visitors not as interested in the current film to see that there is additional content underneath without scrolling, while allowing interested readers to learn more about the film without clicking to a new page. Upcoming films are presented with their film posters and the dates of their showings below the current film.

The background image for the site comes from the 1923 Harold Lloyd film “Safety Last!“, chosen because I feel it evokes a sense of whimsy and a connection to film history. The original image from the film was given a color overlay layer and some artistic filters in Photoshop to help it blend into the background.

Only 99 designs left to go for the year. Next, I’ll be taking a look at the world of online magazines.

Posted in 104 Designs for 2010 | Tagged , , , , , , , | Leave a comment

Design 004: South Florida Real Estate

It’s a bit late in the week, but luckily Design 004 is good enough to compensate. This design is for a fictional South Florida real estate firm, “Heart of Miami,” selling condos and homes in and around the beaches. I created the firm’s logo in Photoshop (since I don’t own a copy of Illustrator) by piecing together photos of skyscrapers, a neon sign in the shape of a heart, and Photoshop’s stroke, outer glow, and inner glow blending filters. I had originally intended to create the logo using Google SketchUp, but learning to use SketchUp was taking too much time. I’m definitely interested in that program, though, and I hope to add elements designed in SketchUp to a future design.

On to the technology. The main feature of this site is the combined vertical and horizontal scroll box featuring photos of each condo complex. This was achieved using the jQuery Tools library from FlowPlayer and its “scrollable” plugin. The vertical column on the left is a single scrollable which acts as the navigation for the “pages”, and each “page” is a horizontal scrollable. This setup could be expanded for additional properties by allowing the vertical scrollable to work in the same way as the horizontal scrollables – displaying four properties at a time, and having “next” and “previous” buttons to show additional properties. This site also uses Cufón to show headings and links in Futura. I am certainly interested in CSS3′s @font-face property, but I’m waiting for the dust to settle before embracing it wholeheartedly.

As always, you can interact with this new design on my separate portfolio site. I’m working on integrating the portfolio site into the current site’s “Portfolio” page. Be sure to check out the keyboard navigation – up/down to change pages, and left/right to change photos.

Well, we’re 21 days into January and I have four designs to show for it. I think the year is off to a great start, and I look forward to bringing you more designs as I finish them.

Posted in 104 Designs for 2010 | Tagged , , , , , | Leave a comment