The new Kindle has a lot going for it. It’s inexpensive compared to a full-featured tablet computer like the iPad; you can slip it in your back pocket, where it’s more comfortable than an old-style paperback; and it includes a Webkit browser. This last point is where folks like us start to give a hoot, whether we’re fans of epub reading or not.
The flavor of Kindle’s browser concerns us because it affords us the ability to optimize the mobile viewing experience with a single line of markup. You can see this in action in the photo at the head of this article (published and discussed on Flickr).
I made no tweaks for Kindle per se; the Kindle is simply responding to a line of markup I’ve been putting into my web pages since 2007—namely, the viewport meta element, which controls the width of the viewport, thus enabling mobile devices with a limited number of pixels to focus all available pixels on your site’s core content (instead of, for instance, wasting part of the small screen on a background color, image, or gradient). The technique is as simple as web design gets:
meta name="viewport" content="width=770"
(Obviously, the value of “width” should be adjusted to match your site’s layout.)
I learned this little trick from Craig Hockenberry’s Put Your Content in My Pocket (A List Apart, August 28, 2007), which I naturally recommend to any designer who hasn’t seen it.
Legendary art director Roger Black guests on tomorrow’s episode of The Big Web Show, co-hosted by Dan Benjamin and taped in front of a live internet audience.
Roger co-founded the following new companies: Webtype, creators of high-end fonts for online typography; Treesaver, a platform that uses CSS, HTML, JavaScript, and the principles of responsive design to publish beautifully formatted content on any device with a web browser; Ready-Media, which designs templates for newspaper and magazine publishers (and attracts controversy); and Nomad Editions, a series of digital weeklies designed directly for mobile devices.
Roger is also a founding partner in Danilo Black, an international design agency he co-founded with Eduardo Danilo, and The Font Bureau, a leading type foundry he co-founded with David Berlow.
“He pioneered the use of computers in design, cut the best deals, and made himself synonymous with the modern magazine,” wrote Michael Wolff in a New York Magazine profile of Roger back in the 1990s, when Roger was the best-known magazine art director in the world. (Among many others, he designed Rolling Stone, The New York Times Magazine, Newsweek, The New Republic, Fast Company, Advertising Age, and Esquire.)
He also co-founded Interactive Bureau, one of the biggest and most successful web design agencies of the dot-com era.
In his free time, Roger putters around in his award-winning West Texas vacation home made of recycled shipping containers.
Roger Black is an astoundingly prolific creative force; we hope you can join us for this Episode of the show.
The Big Web Show (“Everything Web That Matters”) is taped live in front of an internet audience every Thursday at 1:00 PM ET on live.5by5.tv. Edited episodes can be watched afterwards, often within hours of taping, via iTunes (audio feed | video feed) and the web.
Photo of Roger Black at Happy Cog by Jeffrey Zeldman.
Jeremy Keith’s HTML5 for Web Designers is now available as an epub at books.alistapart.com.
If you bought the paperback, watch your inbox for a special discount on the ebook. (To take advantage of this offer, enter the discount code in page 2 of the shopping cart’s checkout process, after you put in your billing information.)
Also, be on the lookout for our second book, CSS3 For Web Designers by Dan Cederholm, forthcoming this Fall. Upcoming A Book Apart topics include progressive enhancement, content strategy, responsive web design, and emotional design by industry-leading authors Aaron Gustafson, Erin Kissane, Ethan Marcotte, and Aarron Walter.
No, it isn’t a Happy Cog project (it’s by Simon Willison and Natalie Downe) but we couldn’t love Lanyrd, the social conference directory any more if we’d created it ourselves.
Lanyrd uses Twitter to tell you which conferences, workshops and such your friends are attending or speaking at. You can add and track events, and soon you’ll be able to export your events as iCal or into your Google calendar (the site is powered by microformats). Soon, too, you’ll be able to add sessions, slides, and videos.
The site’s not for everyone. It’s for people who attend web/UX conferences, and as it was created by inhabitants of the UK, it presently focuses mainly on Western European and North American events, but that will change as more people use it.
Sacrebleu! The French edition of the ebook of Monsieur Jeremy Keith’s HTML5 For Web Designers is in the top five sellers in the iTunes Store Français.
To answer your other questions: an eBook version in English is coming to books.alistapart.com next week, will soon thereafter also be sold via the iTunes Store, and will be followed by a PDF version. Get those downloading fingers in shape now!
Bay area designer Tracy Osborn (@limedaring) is our guest on Thursday’s episode of The Big Web Show, co-hosted by Dan Benjamin and taped in front of a live internet audience.
Tracy is the kind of young entrepreneur who bears watching, and an exemplar of the empowering energy of the web. In virtually every other sphere of industry, even can’t-miss notions demand tremendous financial backing to attain the merest chance of success. But on the web, quite often, all you need is a strong idea and the willingness and ability to work.
Tracy’s latest idea is to launch a startup that’s likely to shake up the wedding invitation industry:
In wedding invitations alone, there are two options: spend hundreds of dollars for custom designed invitations (expensive but pretty), or do-it-yourself (cheap but ugly). I want to build a web application catering to … price sensitive couples who have an aversion to Comic Sans.
We’ll discuss the ins and outs of networking when you’re not well known; where ideas and inspiration come from; how to recognize and develop your best ideas and persuade others to believe in them; and more.
The Big Web Show (“Everything Web That Matters”) is taped live in front of an internet audience every Thursday at 1:00 PM ET on live.5by5.tv. Edited episodes can be watched afterwards, often within hours of taping, via iTunes (audio feed | video feed) and the web.
Voting is underway for next year’s SXSW Interactive Festival in Austin, TX, and members of Happy Cog have proposed eighteen panel ideas shown here. Follow the links to vote for your favorites, increasing the likelihood you’ll see them on the schedule in March 2011. Voting ends 11:59 PM CDT on Friday, August 27, 2010.
Project ManagementPanelists:
Presenter: Kevin Hoffman — Happy Cog User Experience Director
Dual Presenters:
Dual Presenters:
Dual Presenters:
Presenter: Christopher Cashdollar — Happy Cog Creative Director
Panelists:
Panelists:
Panelists:
Panelists:
Presenter: Jeffrey Zeldman — Happy Cog Founder & Executive Creative Director
Presenter: Greg Hoy — Happy Cog President
Dual Presenters:
Presenter: Robert Jolly — Happy Cog Client Services Director
Panelists:
Presenter: Whitney Hess — Happy Cog Senior Experience Designer
Panelists:
Panelists:
In Issue No. 312 of A List Apart for people who make websites: Twitterific’s Craig Hockenberry compares web apps to iPhone apps,and tells iPhone app developers what they need to know to succeed, in Apps vs. the Web. And Lyle Mullican shows how to convert frustrated users into loyal customers by strategizing, writing, and maintaining better help copy in Good Help is Hard to Find. (Plus: possibly the best Kevin Cornell ALA illustrations yet.)
Dear Apple: It is a triumph of engineering and marketing and general cause for joy that Apple provides highly functional iPad versions of Keynote, Pages, and Numbers for a mere $9.99 apiece. Alas, the iPad versions’ inability to import or transfer fonts diminishes the apps’ value and utility.
You, Apple, have done much to foster today’s design culture, so it is no surprise to you that we designers are particular about the fonts we use. One font is not the same as another. Helvetica is not the same as Franklin or Gotham. You know this as well as we do. Which means you also know that, in transferring Keynote presentations and Pages layouts between the Macs and iPads you sell us, our joy gets dented when the iPad replaces our fonts with “a close match” or Helvetica.
And it’s not just a matter of joy. I sometimes spend weeks on a Keynote presentation, and so do my colleagues. We’d love to be able to work on them whether we have a Mac or an iPad at hand—that, after all, is the promise of the devices we buy from you; frankly, it is the promise of all computers. But when the iPad loses my fonts, it loses me. A Keynote presentation with substitute fonts is of no use to me, except perhaps as a rehearsal tool—and I can just as easily rehearse with a PDF.
Please either add the ability to retain fonts (and all their settings) when importing Keynote, Pages, and Numbers documents from computer to iPad, or else please create a simple font management tool for the iPad that allows us to import a reasonable subset of our fonts to the device.
Sincerely,
For nearly 13 years, I created websites with PageSpinner, a charmingly old-fashioned HTML coding environment from the days of Netscape 1.0. But two years ago, seeking updated web page encoding and other modern conveniences, I switched to TextMate, “the missing editor for MacOS X.”
PageSpinner greatly helps coders (but offends the aesthete’s eye) with Microsoft-Word-like menu bars containing buttons that let you instantly create paragraphs, list items, and so on. In contrast, TextMate has no UI chrome whatever. A screenshot of the TextMate interface is like a photograph of snow.
For two years, I’ve created web pages in TextMate, hand-coding every entity with no help from the application because I didn’t know it offered any. But my friend Ethan Marcotte knew, and today, responding to my cry for help, he sent the following info:
I highly recommend starting here. (If you only read one thing in this email—and who could blame you?—make it that link.)
Moving on! Here’s a more exhaustive “getting started” tutorial.
Random feature blogs:
Macromates has some helpful screencasts (most of which could use a good editor, but they might be good train fodder):
Because I have no life, I’ll occasionally trawl through Vimeo to find random tips.
And here’s Dan Rubin’s macro to convert multi-line CSS to single-line (or vice versa).
An essay in three tweets:
Morality isn’t how you think, it’s what you do about your violent carnal greedy cowardly natural impulses. #
Good religion attempts to explain our deep connection to others. Bad religion scares us out of being monkeys. #
God loves my sin more than it shames me. Ladies. #
If you’re intrigued, as I am, by the trailer for David Fincher’s upcoming The Social Network, and if part of what compels you about the trailer is the musical score—a choral version of Radiohead’s “Creep”—you’ll be happy to know you can purchase said song via emusic.com: On The Rocks is the album, “Creep” is the track, and Scala, a Belgian all-teenage-girl choir, are the artists. Highly recommended.
P.S. If emusic.com had an affiliate program, I’d have free music for life.
In What I learned at An Event Apart Minneapolis, Marc Drummond writes:
A really good session, in my opinion, is not about the how, it’s about the why. … A really good session, through arguments and examples, stories and slides, humor and deep thoughts, compels you to try something new. A great session exposes you to something you haven’t done before and inspires you to take action, change the way you do things.
Based on my experience, I plan to focus even more on understanding users for the sites I work on, strategize more about content, focus on mobile and adaptive layouts, consult existing patterns for interfaces, humanize interfaces, work more iteratively, start using HTML5 and CSS3 techniques that will save loads of time and give Dreamweaver CS5 a try.
While I might have run across information about these topics before, now I feel the urgency in putting these techniques in the top tray of my toolbox, where I will use them more frequently.
A List Apart and .net magazine have long admired each other. So when .net editor Dan Oliver did me the great honor of asking if I wished to guest edit an issue, I saluted smartly. The result is now arriving in subscriber post boxes and will soon flood Her Majesty’s newsstands.
In .net magazine Issue No. 206, on sale 17th August in UK (and next month in the US, where it goes by the name “Practical Web Design”), we examine how new standards like CSS3 and HTML5, new devices like iPhone and Droid, and maturing UX disciplines like content strategy are converging to create new opportunities for web designers and the web users we serve:
You can also read my article, which asks the musical question:
Cheap, complex devices such as the iPhone and the Droid have come along at precisely the moment when HTML5, CSS3 and web fonts are ready for action; when standards-based web development is no longer relegated to the fringe; and when web designers, no longer content to merely decorate screens, are crafting provocative, multi-platform experiences. Is this the dawn of a newer, more mature, more ubiquitous web?
Today’s web is about interacting with your users wherever they are, whenever they have a minute to spare. New code and new ideas for a new time are what the new issue of .net magazine captures. There has never been a better time to create websites. Enjoy!
Photo by Daniel Byrne for .net magazine. All rights reserved.
Free for use in all web projects, professional or personal, HTML5 Reset by Monkey Do! is a set of HTML5 and CSS templates that jumpstart web development by removing the styling native to each browser, establishing basic HTML structures (title, header, footer, etc.), clearing floats, correcting for IE problems, and more.
Most of us who design websites begin every project with bits and pieces of this kind of code, but developer Tim Murtaugh, who created these files and who modestly thanks everyone in the universe, has struck a near-ideal balance. In these lean, simple files, without fuss or clutter, he manages to give us the best-practices equivalent of everything but the kitchen sink.
Tim Murtaugh sits beside me at Happy Cog, so I’ve seen him use these very files (and earlier versions of them) to quickly code advanced websites. If you’re up to speed on all the new hotness, these files will help you stay that way and work faster. If you’re still learning (and who isn’t?) about HTML5, CSS3, and browser workarounds, studying these files and Tim’s notes about them will help you become a more knowledgeable web designer slash developer. (We need a better name for what we do.)
My daughter calls Mr Murtaugh “Tim the giant.” With the release of this little package, he earns the moniker. Highly recommended.
About 40 copies of HTML5 For Web Designers out of the first 10,000 sold have been returned to us because the recipients moved, or there was an error in their address.
Returns come from every continent on the globe. Japanese returns are quietly beautiful. French returns are vaguely contemptuous.
Sunni Brown (website, Twitter) is our guest on Thursday’s episode of The Big Web Show, co-hosted by Dan Benjamin and taped in front of a live internet audience.
Sunni is a business owner, author, and information designer, and her consultancy, BrightSpot I.D., specializes in visual thinking and the broad range of its applications. She is currently an Associate of The Grove, a freelance consultant for XPLANE—the visual thinking company—and an Associate of Alphachimp Studios.
Sunni is co-Founder of VizThink Austin, currently the largest visual thinking community in the United States. She is also the leader of The Doodle Revolution, a growing effort to debunk the myth that doodling is a distraction.
The Big Web Show (“Everything Web That Matters”) is taped live in front of an internet audience every Thursday at 1:00 PM ET on live.5by5.tv. Edited episodes can be watched afterwards, often within hours of taping, via iTunes (audio feed | video feed) and the web.
Gosh knows how they reproduce in newspaper or how effectively they can be translated into favicons, but there’s no denying that there are some lovely works in Wsblogz.com’s gallery of color logos.