Traditionally, creating presentations requires using an app like Powerpoint and can cause various compatibility issues, but with the free, open source tool deck.js, you can create an elegant set of slides that can run in any browser either online or off. All it takes is minimal knowledge of basic HTML, and we've created a starter kit to help you put your first deck together in just a few minutes. More »

If managing your to-do lists is taking up more time and effort than you spend actually getting things done, a new iPhone app coming from developers Phill Ryu and Milen Dzhumerov, designer David Lanham, and publisher Realmac Software might be the perfect solution. Tossing most iPhone UI conventions out the window along with any religious adherence to GTD principles, the upcoming Clear app is designed to eliminate the friction and complexity of adhering to systems like GTD and be as easy to use as a paper list. We were able to meet up with the team at the 2012 Macworld|iWorld to check out the offerings.

Clear has no standard navigation bar at the top or tab bar at the bottom—common iPhone UI elements. Instead, the app is stripped down to the bare minimum, with a rectangular strip for each list item. Pull the list down from the top to add another item. Swipe right to mark the item completed. Swipe left to delete the item from your list. Pinch to access a list of lists—you could keep a shopping list, a list of errands, and a list of projects, for example.






Read the comments on this post

If being a successful jailbreak developer can get you hired at Apple, apparently so can redesigning the oft-criticized Notification Center. Apple has hired Jan-Michael Cart, perhaps best known for creating demos of proposed Notification Center tweaks, to intern with the company for the next seven months. Cart's internship follows two other recent hires known for notification work, suggesting the company is aware that iOS notifications still need some work.

Cart, currently a junior majoring in Mass Media Arts at the Univeristy of Georgia (go Bulldogs!), specializes in video and graphic design. He has recently begun experimenting with Xcode and learning about iOS development, according to his website. With the release of iOS 5, Cart began creating videos to demonstrate his ideas for improving its Notification Center feature.






Read the comments on this post

Last week Facebook launched an iPad app, along with improved versions of its iPhone app and mobile browser site (m.facebook.com). The mobile site is based on the latest, interactive version of HTML (HTML5). If browsed on the iPad, it looks almost identical to the iPad app. However, there is still a significant difference between the mobile versions (the apps and HTML5 site) and the full desktop browser version of Facebook.com. But over time, they will all converge.

Facebook's mobile moves are part of a larger trend called responsive web design. It won't just be the code bases that change either. We, the users, will notice the differences too. For example, it's likely that Facebook's desktop website will over time utilize more of the design patterns in its mobile apps and site.

Sponsor

Responsive web design was a term coined by Ethan Marcotte
on A List Apart (a long running and popular resource for web designers) in May 2010. He coined it in response to the increasing number of devices and browsers on which to view a website, which was kickstarted with the iPhone in 2007 and has since expanded to include the likes of Android and Internet TV browsers. As Marcotte wrote, "in short, we're faced with a greater number of devices, input modes, and browsers than ever before."

Facebook's new iPad app

Marcotte followed up with an entire book
on the topic. It should also be noted that Marcotte initially advocated a specific method for responsive design, but Jeffrey Zeldman (whose company published the book) clarified in July of this year that "our understanding of "responsive design" should be broadened to cover any approach that delivers elegant visual experiences regardless of the size of the user's display and the limitations or capabilities of the device."

How We Got To Responsive Design

Web design has had the concept of flexible design (also called fluid) for a long time, which came about as a reaction to the fixed design which dominated the dot com era of the Web.

Back in the dot com days, having a fixed design (with fixed widths, so that the website always looked the same even if you expanded your browser) was a way to ensure that the user experience stayed the same no matter which browser you used. Then, to make a long story short, flexible design came along. This allowed web designers to create websites that re-sized according to the size of a user's screen. Note that we're still talking about desktop browsers here.

With the rise of the iPhone and other types of mobile displays, flexible design no longer cut it. The challenge is now much more than simply re-sizing a design for a user's browser width. It's also about optimizing for the user interface - for example, swiping on iPhone vs. point-and-click on desktop. Plus ensuring that the right content for the user's device is displayed - for example on Facebook the iPhone app features navigation options on the homepage, whereas on the desktop version there's room for much more content. There are many other differences, such as what the user may want to do on a mobile device compared to the desktop.

This is what led to responsive web design. As Ethan Marcotte noted in his May 2010 article, neither fixed or fluid "scales seamlessly beyond the context for which it was originally intended." That context being desktop-centric. Web design needed to become more adaptive to other devices - such as mobile phones, tablets and televisions.

Marcotte summarized:

This is our way forward. Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.

The User Experience Will Converge

Up till now in the mobile revolution, websites and mobile apps/sites have been quite different from one another. That's still largely the case - the Facebook designs are but one example. However, we are entering a period where desktop and mobile designs are converging.

While there will continue to be differences in how content is best displayed on, for example a mobile phone vs. a desktop computer, there will also be more commonality in the user experience over time. Perhaps the desktop version of Facebook.com will evolve into a design that more resembles today's Facebook iPad app, than today's Facebook.com.

Boston Globe's new responsive design, desktop version

We examined one example of full responsive web design in action last month, a re-design by The Boston Globe. The design automatically refits the Boston Globe's content according to the device it's seen on, from desktop to tablet to mobile. Check out the video below to see how this works:

Facebook hasn't gotten to this point yet, which is understandable as it's a much, much bigger site than BostonGlobe.com. But it is working on it - read our in-depth technical explanation of Facebook's mobile strategy and follow-up analysis
for more details. This is just one part of a big mobile push for Facebook, internally code-named Project Spartan.

Responsive web design is the future of web design. It won't be long till we see an HTML5 design from Facebook that delivers an almost identical user experience across both the desktop and multiple devices. How it will change the user experience is yet to be determined, but let us know your best guesses in the comments below.

Discuss

Mozilla's user experience team is doing their nit-pick-y work on Firefox 5 in public—yes, before Firefox 4 is actually shipped. Check out what they're thinking of changing up, including webapp improvements, session restore, menu fixing, and other small but nice improvements. More »

“Goodreads.com is social cataloging service for books. In this post you will see how they’ve used the friend spam dark pattern, but how they’ve also failed to make it go viral. This makes it interesting to carry out a post mortem and work out what they should have done.”

—Anatomy of the Goodreads.com Friend Spam Dark Pattern

(Hat tip: Andrew Travers.)

When Mandy Brown, Jason Santa Maria and I formed A Book Apart, one topic burned uppermost in our minds, and there was only one author for the job.

Nothing else, not even “real fonts” or CSS3, has stirred the standards-based design community like the imminent arrival of HTML5. Born out of dissatisfaction with the pacing and politics of the W3C, and conceived for a web of applications (not just documents), this new edition of the web’s lingua franca has in equal measure excited, angered, and confused the web design community.

Win free copies of HTML5 For Web Designers on Gowalla!

Just as he did with the DOM and JavaScript, Jeremy Keith has a unique ability to illuminate HTML5 and cut straight to what matters to accessible, standards-based designer-developers. And he does it in this book, using only as many words and pictures as are needed.

Watch Jeremy Keith discuss HTML5 with Dan Benjamin and me live on The Big Web Show this Thursday at 1:00 PM Eastern.

There are other books about HTML5, and there will be many more. There will be 500 page technical books for application developers, whose needs drove much of HTML5’s development. There will be even longer secret books for browser makers, addressing technical challenges that you and I are blessed never to need to think about.

But this is a book for you—you who create web content, who mark up web pages for sense and semantics, and who design accessible interfaces and experiences. Call it your user guide to HTML5. Its goal—one it will share with every title in the forthcoming A Book Apart catalog—is to shed clear light on a tricky subject, and do it fast, so you can get back to work.

4 May 2010
Jeffrey Zeldman, Publisher
A Book Apart “for people who make websites”
In Association with A List Apart
An imprint of Happy Cog™

The present-day content producer refuses to die.

And don’t miss…

Read Chapter One free in today’s issue of A List Apart!
The author, Mr Jeremy Keith himself, shares his thoughts!
Creative director Jason Santa Maria discusses the design of A Book Apart!
Editor Mandy Brown discusses the business side of A Book Apart!

It’s only Wednesday but we already have our link of the week. Although they call it merely a “quick write-up” (and it is a fast read), iA’s mini-compendium of design insights before and after the appearance of the iPad at their office should be required reading for all web, app, and/or interaction designers.

In the equivalent of a breathlessly quick seminar presentation, iA discusses typographic resolution and feel; the effect of the device’s brilliant contrast on readability; the kitsch produced by rigorously adhering to Apple’s “make it 3D” guidelines; whether metaphors work; and more—all of it well worth far more than the little time it will take you to absorb.

In particular, I call your attention to the section entitled, “Interaction Design: So What Works?” Although intended as a guideline to producing well-tuned iPad apps, it also works splendidly as a mini-guide to creating better websites, much like Luke Wroblewski’s brilliant “Mobile First” presentation at last week’s An Event Apart, which carried a similar message:

The limited screen estate and the limited credit on the number of physical actions needed to complete one task (don’t make me swipe and touch too often), pushes the designer to create a dead simple information architecture and an elaborate an interaction design pattern with a minimal number of actions. This goes hand in hand with the economic rule of user interaction design: Minimize input, maximize output.
Since the smallest touch point for each operation is a circle of the size of a male index finger tip, we cannot cram thousands of features (or ads!) in the tight frame; we have to focus on the essential elements. Don’t waste screen estate and user attention on processing secondary functions.
We found that the iPad applications we designed, made it relatively easy to be translated back into websites. The iPad could prove to be a wonderful blue print to design web sites and applications. If it works on the iPad, with a few tweaks, it will work on a laptop.

Via iA » Designing for iPad: Reality Check.

Book By Its Cover is a glorious new blog devoted to the beauty of books.