All posts tagged ‘HTML’

File Under: Frameworks, Multimedia

Meet Treesaver, a New HTML Magazine App

A startup called Treesaver has developed a slick presentation framework for digital magazines that runs in the browser. It has many of the features you’d expect from a clean, reader-friendly content wrapper (like Instapaper or Readability) but it couples that functionality with a way-cool user interface.

Pages can be navigated by swiping from side-to-side, and you get helpful ghost images on either side of the page you’re reading, which aid in signposting. Also, the pages within the web app dynamically resize for different screens — and it even resizes on the fly as you make the browser smaller and larger. It’s all HTML, JavaScript and CSS.

Here’s the demo video for Nomad Editions, the first of Treesaver’s launch partners using the company’s framework to make a public announcement (Treesaver is still pre-launch right now):

Nomad also got some love from The New York Times Wednesday.

With digital magazines all the rage, everyone’s racing to get their traditional paper-and-ink publications onto the iPad. There are two routes — the native app, which requires the use of Apple’s tools and adherence to its rules, or the web app, which lets you do just about whatever you want as long as it works in a browser.

If you build a native app, you get some impressive performance with the swipey-swipey stuff, and you control both the ad revenue and your kerning pairs. But you’re also locked into a specific device’s platform, distribution is a pain, and you’re disconnected from the internet unless you bother to build it in.

The webby route has its own advantages, of course. Filipe Fortes, one of the founders of Treesaver, has posted an excellent list of all the ways the web wins — a wider audience, a wider range of compatible devices, easy access to social networking tools, real hyperlinks, search indexing, content embedding.

Treesaver will be entering beta testing in a few weeks, and the code will be released under an open-source license soon after that.

See Also:

File Under: CSS, HTML, Web Standards

The Solar System, Rendered in CSS and HTML

A web developer named Alex Giron has created a working model of the solar system using only web standards.

It’s fully animated — though Alex takes advantage of some new CSS 3 features (border-radius, transforms and animations) and utilizes the -webkit prefix, so you’ll need to view it in Safari or Chrome to see the planets move around the sun.

Firefox and Opera users won’t see the animations, just a static CSS layout. But the hover events work, so you can mouse over each planet and learn the story of each celestial body. And yes, he included Pluto.

Here’s Alex’s blog post that includes a walk-through of the code.

Bonus: Alex’s screenshot of the same page in IE.

[Via kottke]

See Also:

File Under: Software, Visual Design

Photoshop Contemplates Adding Live HTML Layers

Adobe’s Principal Product Manager of Photoshop, John Nack has posted an idea for a new Photoshop feature on his blog. Nack’s idea is to create a way of rendering HTML and CSS within Photoshop. This means visual designers could work with “live” HTML objects as they’re building websites within a team of programmers, easing the workflow between the designing and coding stages.

Before you get to excited (or disappointed) keep in mind that isn’t a feature, isn’t even part of a plan, it’s simply and idea that Nack would like feedback on.

Nack describes the idea (and workflow) like this: a designer creates a mockup, which he hands off to a programmer. The programmer then renders the mockup in HTML/CSS, at which point he could hand it back to the designer who can open it in Photoshop as a kind of live layer. Resizing and other layer actions would cause the code to respond according to how the programmer has written the code.

What Nack is envisioning is a smart layer that uses WebKit (already part of the Creative Suite) to render what he calls “programmable layers.”

Among the benefits Nack sees are “[live] pixel-accurate web rendering (text and shapes); the ability to style objects via CSS parameters (enabling effects like dotted lines); data-driven 2D and 3D graphics; and high fidelity web output (HTML as HTML).”

The real world example Nack uses is a calendar widget, but that particular example raises an interesting question — what about scripting languages? We don’t know of anyone who writes out calendar code in HTML, that would be insane to update. So if you’re generating the calendar with, say, PHP, where does the script rendering happen?

So far, the comments appear pretty evenly divided between those who think such a feature would be great and those think that either it’s just more bloat in Photoshop, or that Fireworks would be a better home for the idea.

If you’ve got strong opinions one way or the other, head over to Nack’s blog and let him know what you think, either in the comments or by completing this survey.

Just remember that this is not part of a roadmap and may well never happen. In the words of Douglas Adams, “Don’t panic.”

See Also:

File Under: HTML, UI/UX

Using ‘Mad Libs’ to Make Web Forms More Fun

In an ideal world, the web would have a built-in identity solutions — websites would automatically know who you are when you arrive. In the real world, however, almost every website has its own sign up and authentication process, endless forms enticing you to enter your name, your e-mail, pick a password… yawn, what now?

It’s repetitive, boring and makes many of your users click away in disgust. But what if you turned the sign up form into a narrative, something a bit like a Mad Lib?

That’s exactly what web developer Jeremy Keith has done for his podcasting site, Huffduffer. Instead of a list of blank boxes, Huffduffer’s sign up form looks like this:

All the usual behaviors of a web form are still there. You can tab between fields, your password is still masked and errors are highlighted if there are any. The difference is the in the presentation. It doesn’t look like some kind of online test.

In short, Huffduffer’s sign up for is refreshing, but does it work? Well, Luke Wroblewski, Chief Design Architect at Yahoo and author of the book Web Form Design, had the same question and, with some help from the team at Vast.com, ran some tests.

The designers at Vast redesigned their response forms along the lines of Huffduffer’s form and found that, as Wroblewski reports, “Mad Libs style forms increased conversion across the board by 25-40 percent.”

The forms are live on both Vast and the Kelley Blue Book website if you’d like to experience them yourself. Wroblewski has a few minor caveats about the increased number of users — be sure to check out his post for the complete details — but at least in some cases it would seem that a narrative flow trumps the boring old form.

See Also:

File Under: Glossary

Meta Information

Meta information means “information about information.”

In HTML, meta tags describe the content of the document in which they’re written. Meta tags have two possible attributes:
<META HTTP-EQUIV="name" CONTENT="content">
and
<META NAME="name" CONTENT="content">
. Meta tags with an
HTTP-EQUIV
attribute are analogous to
HTTP
headers that can control the action of browsers. Meta tags with a
NAME
attribute are used primarily by indexing and searching tools. These tools can gather meta information in order to sort and classify web pages. One way to help your document show up more frequently in search engines and directories is to use the
META NAME
attribute to set keywords that will pull up your site when someone does a search for those words.