All posts tagged ‘UI/UX’

File Under: Visual Design

Sneak a Peek at the Process Behind 37Signals’ Redesigned Site

If you’ve ever wanted a peek behind the scenes of a redesign, the 37Signals blog has a fascinating look at the design iterations for the company’s new website.

37Signals is best known for its Basecamp project management software and the Ruby on Rails platform, which grew out of the former.

Even if you don’t like the final design — and plenty of commenters on the blog post don’t seem to be big fans of the typography-focused redesign — the process behind it is worth looking at. Sometimes, seeing what ends up on the cutting room floor is more instructive than looking at the finished product.

The post should also make you feel a bit better if you too fail to magically draw up the right design on your first try.

See Also:

File Under: Browsers, Web Services

Browserling Puts Every Browser Inside Your Browser

Developing a website that works well in all web browser isn’t easy, particularly if you’re using newer elements in HTML5. Even among modern, standards-compliant browsers, HTML5 support varies, and figuring out how and when to fall back on other solutions means a lot of cross-browser testing.

Thanks to virtual machines, testing across web browsers has become much easier. But if you’re looking for an even easier way to see what you site looks like in, say, Internet Explorer 6, check out Browserling, a new cross-browser testing tool that embeds any another browser inside your browser.

Browserling relies on Amazon-hosted virtual machines to do the embedding. The result is a real-time, fully interactive look at your site in virtually any Windows web browser, (Yep, it only works in Windows). It’s a step up from other web-based browser tests which just offer screenshots of what your site looks like in other browsers.

Unfortunately, as cool as the concept is, Browserling has a few drawbacks. The worst part of the service is that, for now anyway, you’ll be waiting in the queue for some time. To keep resources under control, Browserling severely limits the number of users connecting to the service at any one time. You’re also limited to how long you can use Browserlings VMs — 90 seconds is all you’ll get without creating an account. If you sign up you’ll have five minutes, which gives you a better chance to check out your website, but is hardly enough time for real testing.

The site advertises paid plans, which promise to let you ditch the queue and time limits, but at the moment the paid option isn’t actually available.

Our other main gripe is that while Internet Explorer is well represented — you can test in versions 5.5 all the way up to IE9 Beta — older versions of other browsers are scarce. While it’s true IE is probably what most developers are interested in, it would be nice to see older versions of Firefox, Safari and Opera supported as well.

While it would be premature to delete your own virtual machines, Browserling has potential. If Browserling can work out the kinks — we experienced numerous errors, crashing VMs and other problems, but it’s probably just getting smothered by hugs — it may eventually help take some of the pain out of cross-browser testing.

See Also:

File Under: Programming, UI/UX

Unleash an Army of Bees With Machine Guns on Your Website

Want to know if your website can stand up to a sudden, massive deluge of traffic? Sure, you could use some of the available tools like Flood, JMeter or The Ginder. But none of those options have bees with machine guns.

The news applications team at the Chicago Tribune, has released a new tool it calls Bees with Machine Guns that uses Amazon EC2 servers to launch what amounts to a distributed DoS attack against your site.

Now only is it an incredibly handy way to load test a website under arguably more realistic conditions than you’d get with other load testing tools, Bees with Machine Guns has awesome print statements that will turn your terminal session into a war zone.

For example:

$ fab -f bees.py attack:http://YOUR-DOMAIN.com/,1000,100
Read 2 bees from the roster.
Connecting to the hive.
Assembling bees.
Each of 2 bees will fire 500 rounds, 50 at a time.
Stinging URL so it will be cached for the attack.
[localhost] run: curl http://YOUR-DOMAIN.com/ >> /dev/null
Organizing the swarm.
Bee 0 is joining the swarm.
Bee 1 is joining the swarm.
Bee 0 is firing his machine gun. Bang bang!
Bee 1 is firing his machine gun. Bang bang!
Bee 0 is out of ammo.
Bee 1 lost sight of the target (connection timed out).
Offensive complete.
     Target failed to fully respond to 1 bees.
     Complete requests:     500
     Requests per second:   81.670000 [#/sec] (mean)
     Time per request:      612.188000 [ms] (mean)
     50% response time:     358.000000 [ms] (mean)
     90% response time:     1541.000000 [ms] (mean)
Mission Assessment: Target successfully fended off the swarm.
The swarm is awaiting new orders.
Done.

Keep in mind that this is essentially a DoS attack. Launch it against a site that isn’t yours and very bad things will happen to you. But for testing your own site’s performance, Bees with Machine Guns is awesome — all you need is an EC2 account and the script.

Major bonus points if your site can fend off the bees with miniature pies:

See Also:

File Under: Browsers

Firefox Offers a Taste of Tab Candy

Are you one of those hyper-multitaskers (aka insane weirdos) who keeps a bazillion browser tabs open at once?

Here’s something for you, and for the tab-curious: Tab Candy, a new experimental feature in Firefox that groups tabs into topical clusters to improve your workflow. It’s made entirely with JavaScript and HTML.

Firefox creative lead Aza Raskin offers this synopsis:

With one keystroke Tab Candy shows an overview of all tabs to allow you to quickly locate and switch between them. Tab Candy also lets you group tabs to organize your work flow. You can create a group for your vacation, work, recipes, games and social sites, however it makes sense to you to group tabs. When you switch to a grouped tab only the relevant tabs are shown in the tab bar, which helps you focus on what you want.

Here’s a video of Tab Candy in action.

An Introduction to Firefox’s Tab Candy from Aza Raskin on Vimeo.

Tab Candy has been kicking around as a pre-release for a while, but it’s just now getting to the point where the Mozilla folks feel it’s ready to be tested by a wider audience.

If you want to try it out, head to Raskin’s site where you can download a TabCandy-enabled build of Firefox. Note that this isn’t an extension, it’s a bleeding-edge build of Firefox with Tab Candy built in, so plan accordingly.

There’s also an FAQ, and a feedback forum you can use to get answers or submit requests.

See Also:

File Under: Browsers, UI/UX

An Alternate Version of Firefox’s Home Button

Back at the beginning of July, we saw the release of Firefox 4 beta 1. The first beta version of Mozilla’s next browser shipped with some important user interface changes — most notably, Windows users got tabs-on-top and the new Firefox Button. It’s a button that sits at the top of the browser window and contains all of the most-used menu options, neatly nested in hierarchical menus and accessible via one click.

The final browser isn’t expected until October, but the team is still experimenting. The picture above is one such experiment, a rough first draft at “flattening” the new Firefox Button, which turns it into something less of a “Greatest Hits” menu and more of a browser dashboard.

Firefox creative lead Aza Raskin, who really did this to satisfy his own curiosity, writes:

Hierarchical menus are almost always slower to use than flattened menus. This is a first-draft pass at flattening the Firefox Button’s menu. For things like accessing bookmarks, I’ve left the menu as a secondary action. In truth, I ran out of time while doing the bottom left hand corner of the mockup and so it is still very raw and not right. I’ve also moved more rich interactions to the right side pane. Letting us bubble up interesting add-ons and extension points inside the Firefox menu, as well as give real indication and controls to Sync.

Keep in mind that this design is just an idea and most likely will not be part of the next Firefox. But Raskin’s design could push the button in interesting directions.

See Also: