Business Community Rallies Around Initiative to Boost St. Louis IT

Earlier this week, we launched a new website for a client whom we've been working with over the past six months or so. The website is particularly close to our heart because of the cause it supports. Greater St. Louis Works (http://www.greaterstlouisworks.org/) is a group of private and public sector partners who have come together to make sure that St. Louis attracts, develops, and retains the great IT talent needed to compete in the global marketplace. Needless to say, being a Web development firm headquarted in St. Louis, this project was particularly interesting to us.

As the initiative is in its early stages, we guided the website strategy and provided design, development and deployment services. The website serves as the focal point for communication of this effort along with events and communications from the partners themselves and the St. Louis Regional Chamber of Growth Association.

Greater St. Louis Works really gave us the keys to drive this project; giving us the freedom to do what we do best. As a result, they were able to focus on their day-to-day business while we handled the website - getting their feedback and decisions as needed.

The resulting website was unveiled in downtown St. Louis to about a hundred IT business leaders interested in the intiative. The event was a success and additional collaborative efforts are now in the works to continue the evolution and expansion of the website to further boost the efforts of Greater St. Louis Works. So stay tuned to see the new features and community-related components to come.

*EDIT October 28, 2010. We have moved our blog to http://blog.roundedcube.com and you can now comment on this specific post at http://www.roundedcube.com/WhatsNew/Blog/business-community-rallies-around-initiative-to-boost-st-louis-it

Web 2.0 Design Fundamentals

Is Web 2.0 the handy term for a new, user-friendly and dynamic era of the web? Or is it just a buzz word? However you personally feel about the term, there are definite characteristics most people can agree on that define this new era, whatever you want to call it.

It is generally accepted that the first use of the term was at the first O'Reilly Media Web 2.0 conference in 2004, uttered by Tim O'Reilly. He said that it was "the business revolution in the computer industry caused by the move to the Internet as platform, and an attempt to understand the rules for success on that new platform."

That phrase, "internet as platform," was probably the three most important words to begin to define the often ambiguous term. Since even before 2004 websites have been moving in a direction to become more and more like desktop applications, even sites that aren't considered web applications per se. And to achieve this illusion of a desktop application, web sites and web apps should adhere to agreed-upon design fundamentals of this new "Web 2.0" era of a rich user experience.

Before getting into the actual design tenets, it is important to consider the relatively new technologies that make some of them possible. One of the biggest characteristics of Web 2.0 is managed content, sometimes in back-end Content Management Systems (CMS) for corporate websites, like Sitecore, or user-managed content, like blogs. Another technology to make this move to more desktop-like applications is AJAX (Asynchronous Javascript and XML) which allow rich customization, like collapsable and movable windows, just to name a few examples.

One of the biggest advantages of AJAX or other similar technologies is reduction - or sometimes complete elimination - of page loads and/or reloads. This is arguably the biggest consideration with Web 2.0 Design Fundamentals. Anything a designer can think of, and a developer can implement, to reduce page loads is a smart way to enrich user experience and ease usability. Wizards, movable and resizable windows or modules, and interpage scrolling are all relatively new possibilities in today's Web. This is in large part due to a move to utilize DIV layers more than tables, which were the clumsy old way of website presentation, at one time the only real way to do it. Indeed, you can bet that all of these customizable modules are in fact DIV layers, which are much more flexible and liquid than the clunky old rigid tables, especially used in conjunction with javascript, as in with AJAX. DIV layers can be tricky, though, and sometimes unreliable in terms of cross-browser compability if not coded properly, but they are generally much better than static tables.

Tables are still useful, however, for presenting tabular data and forms, which is really only what they were originally intended for.

So how do things like customizable windows and interpage scrolling reduce page loads, you might ask? It's all about doing as much work, and containing as much of the workflow that we can, on the same page. The old way involved http responses and requests - or loading a new page - just to change one or a few things. Like changing options on a form, for example. This was a nuisance to workflow. Now we can delight users by putting things like Drag and Drop, In-page custom editing, Grid Cell Editing, Slide-Our or Pop-Up editing, Auto Complete, Refining Searches, In-Place Drill-Down, Resizable and Scrolling Modules and In-Context tools in our designs.

On the flip side, there exists a list of things not to do, sometimes called "anti-patterns," that will ensure a poor user experience, things that can go wrong when one tries to make their site Web 2.0 without knowing what one is doing. Things like Meandering Way, where the user is forced to go on a tiring journey with the mouse all over the page to get to what they want, Tiny Targets, where key interactions that are almost too tiny to click, Hover and Cover, where the Pop-Ups mentioned in the previous paragraph cover up important information needed to complete the task the Pop-Up was for, Linkitus, inconsistent or bizarre use of linking schemes, and Too Many Windows and Too Much Animation can all leave users of the offending websites with a bad taste in their mouths. Designers and developers must be very careful when treading into the waters of this new era of the web and they haven't been properly trained on how to swim in it.

There are Web 2.0 design fundamentals that designers don't need developers for necessarily, that don't have to involve AJAX or any of the other progressive technologies available today. There are simpler, but still profound, basic tenets of modern design and production that must be considered when it's time to create - or recreate - a website.

One of those rules of the new Web is separation of presentation and content, which is largely achieved via the use of Cascading Style Sheets, or CSS for short. For the most part, these handy documents and accompanying coding techniques began working their way into the web around 2000 or 2001, and were quite ubiquitous by the middle of the decade. Now, you will be hard-pressed to find a website not utilizing CSS and if you do find one it's either grossly outdated or the person who created it needs a serious talking-to.

I will be going into this more in-depth in another article, but what Separation of Presentation and Content is simply about is... well... separating presentation and content. In other words, how the content is presented needs to be divorced from the content so that either one can be more easily changed. A website can be given a new coat of paint, if you will, without the need for a complete remodel. And without the mess of the old font tags and static HTML color definitions, content change is usually a snap. And that's very important because content, especially living content, on a website, as opposed to the monolith online brochures of yesteryear, is very important to this new age of the web. Users no longer want marketing fluff. Content on demand: they want the content they're looking for, and they want it NOW!

Which is why many of the most popular websites today are blogs. Or, like this blog for Roundedcube, Inc., they're used to go along with a corporate website. Sometimes the look and feel of a blog website, even if a site isn't a blog, is considered to be an aspect of designing in "Web 2.0." Things like tall headers, larger fonts (for a while there the trend was to make text smaller and smaller because somebody thought that looked cool and too many people decided to agree), and taller line height makes the text more readable, another sign of how much more important content is becoming.

Speaking of Roundedcube, we strive to stay on top of the latest trends in design and the technology needed to implement it. We employ AJAX, DIV layers, and of course we always use CSS; we want to make our clients happy by making sure users of their websites are happy. And happy users are repeat users. Which is why we design for a rich web experience, one of the most important aspects of what many have decided to dub "Web 2.0."

*EDIT October 28, 2010. We have moved our blog to http://blog.roundedcube.com and you can now comment on this specific post at http://www.roundedcube.com/WhatsNew/Blog/web-20-design-fundamentals