In today’s blog post I’m going to be talking about one of the most recognizable layout models on the web today, its flaws, and some suggestions for retiring this old chestnut.

The culprit here is the reliable fall-back of web layouts: 3 columns, with the main content centered. It’s used in a wide range of websites, from e-commerce to news outlets, and has become the default model for many content management systems. Although there are times when the 3-column layout is appropriate, more often than not the layout is abused, degenerating into a poorly implemented default.

(more…)

Much like a magpie, I find myself oddly infatuated with shiny things. When a UI component somewhere just screams elegance, I find myself compelled to use it. A lot of the time a simple right-click will indicate the said UI was implemented in Flash, and it loses a tiny piece of street-cred.

I’m most impressed by FX when they enhance the user experience. By using subtle FX during transitions (or an element fading out rather than harshly ‘disappearing’ for example) we give our users an added element of flair while requiring nothing of their browser other than JavaScript being enabled. Any marketing type will tell you the value of a first and lasting impression. The UI really is the only thing the customer sees, isn’t it?

(more…)

At SitePen, we value amazing user experiences. Once in a while, you see an elegant solution to a problem that has annoyed users for years.

For most consumer web sites and web applications, logging a user out of a service after a certain amount of inactivity is not very important, and does more to annoy a user than anything else. In the enterprise or when using bank web sites, security is a far greater concern, and most services resort to logging users out automatically after 15 or 30 minutes of inactivity. This is especially frustrating for users of advanced web apps, which might require several clicks to restore the user interface back to the state it was in before the session timed out.

(more…)

Recently Apple delivered Safari 3.1 with some very exciting features. While we still can’t use things like multiple background images and drop shadows across all browsers, we are getting to play with the future and I, for one, am loving it. One of the most interesting things in Safari 3.1 is the (hopefully soon to be proposed and standardized as part of the CSS3 spec) CSS Animations. CSS animations allow you to animate just about any property on an element as well as do fun things like rotate and skew. As a demo of this I created a quick and dirty CSS3 fisheye/dock demo. As an added bonus, the demo uses SVG in the img tag.

(more…)

Over the past few years designing and developing I’ve come to rely on a number of tools. Most of these are obvious like Photoshop and Firebug, however I’ve come to realize that a few tools I use aren’t as well known.

(more…)

SitePen was in the news recently:

Simplexity Rising: Web usability reveals itself to be a game of hide-and-seek covers our session, “Your Mom, 2.0″, for the upcoming SXSW 2008, and offers some choice quotes about building web apps that are feature rich yet easy to use. At this session, we’ll be discussing the things that make an app that’s easy for Mom to use but still delivers the features everyone wants to use. The format is somewhat of a round-table discussion, and we’ve invited a few local Austin Moms to attend. We’ll also present the results of a survey of Moms, and see where this open discussion takes us.

Developers Seek Web, Dynamic Languages is a summary of a recent developer survey, noting the rise in interest of Ajax among other things. Our Research & Development Director Alex Russell explains why dynamic languages are becoming so popular: increasing CPU power puts greater emphasis on developer efficiency. Dynamic languages like Ruby, Python, and PHP are “just riding the complexity versus CPU power curves.” It’s not just a matter of letting people bang out apps in 30 minutes—when you worry less about the infrastructure, you get to spend more time on features and design.

The article mentions a number of advantages to web apps—easy deployment, painless updates, huge reach—plus one of our favorites: openness. As proponents of the Open Web, our investments in research and development of open source web tools and technologies make it easier for you to deliver great user experiences, even for Your Mom.

This week Eye-Fi launched the Eye-Fi Card combining wifi with a 2GB flash memory card, and we couldn’t be more excited for everyone to get their hands on it. With Eye-Fi, your photos can be automatically sent to any number of popular online photo services (Shutterfly, Flickr, Facebook, SmugMug, etc.) and to your computer all via wifi. No need to dock your camera, sync the photos to your computer and then upload your photos to the various photo services. Just configure the wifi and start taking pictures! It’s that easy!

(more…)

These are truly exciting times. Not only for SitePen, but for the web application space in general. It seems we are seeing a seismic shift in the way we use computer applications: moving away from the clunky, static, boxed-installed lot to those that are quick, lightweight, flexible, and web-based. More and more we are building and using applications that are not tied down to one single computer. Web applications have allowed us a truly mobile lifestyle, giving and providing us access to all of our crucial - and not so crucial - information on multiple computers and devices at the touch of a fingertip.

So how do we go about building these applications? How do we take these web-based ideas and concepts and turn them into something people can use and enjoy? When building web applications, it is crucial to not only have the back-end functionality and nuts and bolts in place. You need the smooth curves, the chrome, and a consistent, uniform design to tie everything together. The design of an application’s user interface can be a make or break experience, one that determines if you and your organization have the next true “killer app”, or one that will languish in obscurity.

(more…)

One of the more exciting projects coming out of the Dojo Toolkit is DojoX Graphics–a cross-browser API for creating vector graphics. Over the next few months, I’ll be writing a series of tutorials showing you how you can use DojoX Graphics to accomplish a number of tasks–starting with showing you how to soften a polyline like this:

…to this……using cubic bezier curve segments.

(more…)

In the past two or so months that I’ve been an employee of SitePen, my main task has been to design and write the materials for the majority of our new training course offering’s including slides, activity handouts, working code equivalents, slide design (which in the end Torrey did, a brilliant job too), and other branding aspects. On top of that, I’ve had to design these materials in such a way as to allow any of the SitePen instructors to create a specific course in a minimum amount of time with the ability to cherry-pick among various topics all to give our clientele the best learning experience possible.

The result has been to take a modularized approach to training materials. Like with the Dojo Toolkit (the main focus of our training offerings), I created a set of resources by topic that any of our instructors can then use to assemble a full presentation. You simply open the Keynote presentation on that particular topic, and drag all of the slides to the show that you’re working on. Very simple and neat!
(more…)