Archive for the ‘Software & Tools’ Category

File Under: CSS, HTML5, Software & Tools

Screenfly: The Easy Way to Test Responsive Web Designs

Testing websites with Screenfly

If you’ve embraced responsive web design — and we sincerely hope you have — you know that fluid layouts, helpful as they are, can be tricky. Combine them with @media queries to re-size and re-position elements on the fly and you’ll quickly find that testing your site is much more complex. Not only do you need to test across browsers for rendering differences, now you need to test across screen sizes as well.

Unless you’ve got a giant horde of cash stashed under your desk, you probably don’t have every tablet and phone out there. Even if you did have every mobile device and screen size on the market, would you really want to test a website in every single one?

That would be incredibly inefficient when there’s nice web-based tools like Screenfly that can handle it all for you. Head over to Screenfly, plug in the URL you’d like to test and then start flipping through the various tablet and mobile device screen sizes to see how your @media queries are handling smaller screens.

Screenfly doesn’t account for rendering differences between devices (which should be minimal given that most mobile web browsers are based on the same WebKit rendering engine), but it does do a good job of showing you what your shiny new design looks like on the latest tablets.

There are of course other web-based tools out there that can help in similar ways, but we like Screenfly for its clean, simple interface and nicely done transitions. If you’ve got a favorite, drop a link in the comments and we’ll check it out. If you like Screenfly, you might want to keep an eye on Quirktools, the makers of Screenfly. The developers claim to have a wireframe app (no flash) and some other tools in the works.

See Also:

Add a Little 3D ‘Tilt’ to Your Website

Webmonkey.com Tilted

Tilt is a great new Firefox extension that uses a 3D model to visualize any web page DOM.

Tilt is a Firefox add-on, but it’s in the very early stages of development so you’ll need to manually install it. Head over to GitHub to download a copy, and then drag the downloaded file into Firefox to install it.

A webpage’s Document Object Model, better known as the DOM, is typically visualized as a tree, with nested HTML nodes arrayed like leaves around the trunk of the page (the <body> tag). Tilt uses the same idea, but maps the DOM into a 3D object, so that nodes are stacked on top of each other. You can then interact with the resulting visual model, tilting, rotating, flipping, panning, zooming and otherwise exploring the page structure within the browser window.

If you want more info about a particular DOM node, just double-click it and a small editor window will pop up, showing more useful information about the node and the inner HTML.

Mozilla has put together a short video showing off what Tilt can do:

Tilt started out as a Google Summer of Code project by developers Victor Porof, Cedric Vivier and Rob Campbell, but it’s since morphed into a Mozilla Developer Tools project.

Tilt isn’t for everyone, but if the typical DOM tree metaphor has never really made sense to you, perhaps Tilt’s 3D visualization will help.

See Also:

Review: Hype Animates the Web, No Flash Necessary

To create animations using web standards like HTML5, CSS 3 and JavaScript requires writing code. That’s fine for programmers who love nothing more than the blank space of a new document in their favorite text editor, but it’s a problem for designers accustomed to the visual, drag-and-drop workflow of animation apps like Flash. There’s nothing quite like Adobe’s Flash application for designers who want to stick with web standards.

Hype is hoping to change that. The new Mac OS X application uses many of the familiar interface elements that Adobe Flash offers — timelines, keyframes and drag-and-drop editing — but generates web standards output consisting of HTML, CSS and JavaScript. In short, Hype hopes to be to standards-based animation what the Flash app is to creating Flash movies.

While the initial release of Hype is impressive, it’s far from a Flash replacement. Perhaps more disappointing is that animations created with Hype suffer some of the same drawbacks you’ll encounter when using Flash.

The Good

For those with a background in Flash, the Hype learning curve is very short. Hype’s menu layout and palette structures are different, but the basic elements are essentially the same. To use Hype you drag objects — images, videos, vector art, etc — onto the stage and then you animate them by creating keyframes. One thing that’s different from Flash is Hype’s very handy “record” feature. To animate an element, just get everything where you want it for the first frame, add a new keyframe and then click record. Everything you do after that is recorded and translated into CSS and JavaScript-based animation.

To create a more complete movie-like animation Hype uses scenes, which break up your content and allow you to create transitions. For example, to create a slideshow, just drag your images into Hype and then create a new scene for each image. Add some transitions and you’re on your way. (That’s not the only way to create a slideshow, but it’s one of the simplest.)

Hype doesn’t offer everything you’ll find in Flash. Most notably there is no concept of MovieClips — self-contained movies within movies. There’s also no equivalent to Flash’s customizable tweens and advanced filters for blending objects.

Hype does offers plenty of canned elements, like buttons, boxes, and text boxes, to speed up simple tasks like adding text and other elements to your animations. To add elements to your page you just head to the Insert menu, select what you want and then you can style it with the properties palette just like you would any other element in Hype.

Hype's Flash-like IDE makes animating easy

Hype is simple enough to use that I was able to download a copy, watch the intro movie and five minutes later I generated the simple animation at the bottom of this post. Naturally to create something more interesting and useful will take you a bit longer, but it’s nothing compared to writing out the CSS and scripts by hand.

While Hype is primarily a visual editor, there are options to access properties like an element’s innerHTML and the Identity palette allows you to customize element IDs so you can target that element from other scripts. This is particularly handy if you want to create some custom CSS on top of what Hype generates.

The Bad

Hype, despite what its marketing materials claim, does not generate HTML5. It generates good old (standards compliant) HTML 4, CSS and JavaScript. That shouldn’t detract from from what Hype is capable of, but it’s disappointing to see the amount of HTML5, ahem, hype, surrounding Hype. Hype doesn’t even use canvas elements (animations are wrapped in div tags), nor does it use any of the new APIs (like say History or Web Workers).

Perhaps most disappointingly Hype doesn’t use the HTML5 History API. Because of the way Hype documents are embedded in a page, like Flash animations, Hype breaks the browser’s back button. What’s even more disappointing about Hype breaking the back button is that it’s not necessary. If Hype supported the History API, Hype documents could easily update the URL and not break one of the most fundamental elements of the web (see Mark Pilgrim’s excellent write up in the History API for more details on how to use it).

In some use cases that won’t matter, but if you’re thinking Hype would make a great slideshow creator, well, keep in mind that no one will ever be able to link to your individual photos without some extra effort on your part. Similarly, any transitions that happen in any Hype animation won’t be accessible via the back button.

Hype does offer an embedded editor so you can hook up the JavaScript yourself and take advantage of the History API, but then you’re back to writing code yourself.

Hype also makes some assumptions about your site structure when it generates HTML and JS. If you’ve got FTP access to your server then there’s nothing to worry about. But to embed my simple Hype animation in this post I had to change quite a few file references in the code. Hype assumes that all the resources it needs are in the resources folder it creates. Since I don’t have FTP access to this domain there is no way to get that folder on the server. Instead I uploaded the three required files through WordPress and then had to edit the generated Hype code to add the correct file paths. It wasn’t all that hard, but it did mean digging into the code, which at least partially defeats the purpose of Hype.

Another things to keep in mind is that Hype is heavily geared toward the WebKit rendering engine. While most of the effects work just fine in other standards compliant browsers, there are a few things that only work in WebKit. Where possible Hype falls back to pure JavaScript (for example in browsers that don’t understand CSS 3). Fortunately the Hype export function will warn you about any browser incompatibilities when you publish.

Conclusion

Despite some publishing hiccups and a few missing features, Hype is still one of the easiest ways I’ve seen to create Flash-free web animations. It’s like having most of what’s good about Adobe’s Flash app, without the downside of publishing to the Flash file format. Sadly Hype still falls prey to some of Flash’s weaknesses, but this is a 1.0 release and no doubt Hype will improve as time goes on.

Hype is currently available for $30 in the Mac app store. If you’ve been wanting to transition from Flash-based animations to web standards, but haven’t wanted to wade through the complexities of JavaScript and CSS 3, Hype is the droids you’ve been looking for. Just bear in mind that it has a few shortcomings of its own.

Hype Example

Here’s a very simple example of an animation created with Hype. Use the WebKit Inspector or Firebug to see how it works.

Mac App Store Gems for Web Developers

The Mac App Store has launched with over 1,000 OS X applications. Our sister site Gadget Lab has more details on what that means for Apple fans.

One thousand apps for the launch is impressive, but what’s in it for web developers? Here’s a quick roundup of a few apps that Mac-loving web developers might want to check out (URLs point to the Mac App Store so you’ll need OS X 10.6.6 for the links to work).

  • iSlice (free) — This slick little app opens PhotoShop documents and slices them up. ISlice retains all the layer info in the Photoshop file so it’s easy to hide background layers and focus on what you need to extract. If you already own Photoshop there’s no point to this one, but if you frequently need to slice comps and don’t want to pay Photoshop’s hefty price tag, iSlice fits the bill.

  • OAuth for Mac ($3) — OAuth is pain if all you want to do is pull a bit of data out of say, the Twitter API. OAuth for Mac handles the OAuth calls for you and quickly generates a token. I haven’t had a chance to test it yet, but it looks like it would be handy for testing and developing quick scripts.

  • Colorbender ($2) — A nice looking color-scheme generator with hex and RGB values. There are tons of free color-scheme generators on the web, but if you’d like a Mac-native version, Colorbender looks like it would fit the bill.

  • mColorMeter ($3) — Ever wanted to know what color your favorite website is using in its menubar? With mColorMeter you can just hover over any pixel on your screen and the app will tell you the value in RGB, Hex and Munsell colors.

  • Base ($17) — Base is nice-looking graphical interface for working with SQLite databases. It’s not cheap, but $17 seems a small price to pay if it means never having to work the sqlite3 command line again.

  • Gitbox ($40) — Hardly a day goes by without someone claiming there are no good Git GUIs. We haven’t tried Gitbox so we’re not endorsing it, especially at $40, but it does offer a very nice-looking graphical UI for Git. And the app comes bundled with the official Git binaries so there’s nothing extra to install — just download the app and start using Git. Great for the command-line-phobic, but seasoned Git users will likely turn up their noses at the price. (See this thread on Hacker News for some more thoughts on Gitbox.)

  • Honorable Mentions — There are quite a few apps in the new store that have been around forever. We love the all-in-one development tool Coda ($100), Text Wrangler (free), BBEdit ($125 currently on sale for $99) and Pixelmator ($30).

The biggest downside to Apple’s new App Store for Mac is that there are no trial versions of the software. For that, you’ll have to head to the developers’ site and (assuming there’s a trial version available) download a good ol’ .dmg file.

See Also:

Mozilla Labs Seeks to Tame Your Address Book With ‘Contacts’

labs-logo

Mozilla Labs has a new goal — saving your contacts list from the chaos of the web.

If you’re like most of us, your contacts are probably spread out all over the place — in your webmail provider, on social networks like Twitter or Facebook, on your mobile and maybe even hiding in a desktop address book app.

In short, your contacts are a vast, sprawling jungle. Mozilla Labs wants to solve that problem and a new project, dubbed, appropriately enough, Contacts is aiming to help you centralize and organize your various lists.

The Contacts project works by using the browser to sort, organize, access and share your contact data. The information is stored in a local database and — should the project take flight — will eventually be synced across platforms by the Weave add-on.

contactsA prototype of the Contacts interface. Click the image for a larger view.

For now, the most notable features of the Contacts add-on is some very nice auto-completion in web forms. The features is roughly analogous to what Gmail does in the To field of your e-mails, but obviously Contacts’ auto-completion works on any website.

To build the database, Contacts will pull your info from GMail, Twitter and the Mac address book. Mozilla has promised that the list of supported apps and web services will be expanded shortly thanks to the importer API (which eventually will be public, meaning other add-ons can access it).

The other nice thing about Contacts is the per-site privacy control which make it relatively easy to control which sites can grab which data.

Like Mozilla’s Raindrop experiment, Contacts has loads of potential and might one day be another must-have part of Firefox, but for now the add-on is very rough.

If you’d like to take it for a spin there’s an experimental, pre-alpha version of Contacts available for download. Just keep in mind that Contacts is very experimental code and could crash your browser.

If you like what you see in Contacts or you have ideas on how to improve it, be sure to let Mozilla know.

See Also: