KEEN recently launched a new campaign encouraging their customers to take a 15 minute Recess from their busy life and go outside and play.  In order for their user-friendly website to fit the new marketing message, we helped with a redesign.  Take a look!

You'll see we really made the focus of the site the fun, new lifestyle images provided by North.  Because the campaign uses bright, bold colors, we knew we needed to add a little spice to the website. 

Make sure to check out the Recess Toolkit which includes a doorhanger, a few hall passes, a screensaver and a pledge to take Recess back!  And we've definitely been taking advantage around our office.

We love the new direction and design of the website, but the BEST news for KEEN customers is the site is just as easy to navigate and make a purchase as it was before we spruced it up.

Have you had a recess worth talking about?  Share it on the KEEN Fan Photos page!

We recently launched a new mobile-friendly version of SmartBank's website.  Check out a quick glimpse below.

When we began planning for this project, our goal was to think about what a customer on their mobile device would want to learn about SmartBank. 

So we focused on locations, operating hours, services offered and logging into a personal account, all with a streamlined design and easy navigation built for a mobile device.

Because mobile banking was a new option for SmartBank clients, we were sure to include information about banking on a mobile device on their main site too.

We are always glad to continue to improve services for a long time client like SmartBank.  For a complete look at their mobile-friendly site, check out SmartBank on a mobile device or take a look here.

We just launched several updates to the Rodeo Austin website for this event season, all of which are now in Saffire Event Websites.

As you can see from the slideshow, we kept all that was great about the site and just made it better.

We added a "Locations" page so you can view all events taking place at a particular location. 

We also added a lot of options for Rodeo Austin to control an event page, including all the new tabs in the Admin Site view above like specific event sponsors, important PDFs, URLs, Results and even the order in which all these new features appear on the page.

We also added a way for you to associate particular "Items" with an event.  This can be used in several ways, including selling tickets from various price levels, different times of an event and even different dates of an event.  This allows Rodeo Austin to give their customers even more specific information about an event.

Overall, we are so happy with the site improvements and glad we were able to make the site more user friendly for both visitors and Rodeo Austin!

We are so excited to announce the launch of the new website for Andy’s Frozen Custard!

Do you feel like you just walked into your local Andy's and you're standing at the counter trying to decide which delicious treat to order?  We sure hope so!  We wanted to bring the look and feel of an Andy's store to the website and really showcase the mouth watering treats to get customers excited for their next trip to Andy's.

Now, are you craving a big scoop of Andy’s Legendary Frozen Custard or another one of their delicious treats?

Take a look at their website and leave a comment to let us know what you think of the new site and which treat you can’t wait to try!

In our offices, we’ve got folks on the iPhone, Blackberry and Android. We’re always peeking at them during site development to make sure our sites aren’t completely useless to one of the fastest growing user markets.

One thing we continually notice is that often times, a mobile app is much more usable on our devices than a full website. Let’s face it – the screens are tiny, our fingers are giant and clumsy and when sites aren’t optimized for these devices, browsing them can get frustrating in a hurry.

Here’s an example of a mobile app on the iPhone for a news aggregation site called Fark (where I enjoy getting my humorous sports news headlines) and the same full website as viewed on a mobile browser. The advantage to using the app is that I can see the text without zooming, click easily and quickly access relevant content, or the main reason I visit Fark’s Sports headlines.

Fark App:

If I visit the full website on my phone, I get a junky experience. The site is unreadable without zooming: I have to move the screen to read anything when I am zoomed in, and I have to wait for extra graphics, banners and ads to load on the screen.

Fark Full Website: 

To me as a user, the advantage of the app is clear. But as a developer, it introduces the issue of possibly having to develop a website, as well as an app and maybe even a mobile version of the same site. Now it seems like I’d have to support three separate platforms for the same site. However, if sites like Fark would offer a mobile-friendly version, I’d be happy, and for the most part, both versions of the site would be fed by the same information infrastructure.

A great example of this is the mobile commerce site we developed for KEEN Footwear. By simply detecting whether someone is viewing the site on a mobile device, we are able to provide a simplified HTML experience within the browser that essentially delivers the same advantages of a mobile app! Clean, simple, readable.

KEEN Mobile Site:

As a developer and provider, developing a mobile version of a site is the clear winner. Regardless of the device, users get a pleasing, streamlined experience, without the provider having to support apps for an array of devices and platforms.

As web developers, we spend a lot of time helping our clients figure out what’s most important so we can put it above the fold (meaning viewable on an “average” configuration without scrolling). This is incredibly important, since people spend about 80% of their time looking at information above the fold.

But horizontal placement is also important. According to user interface expert Jakob Nielson’s research, Web users spend 69% of their time viewing the left half of the page and 30% viewing the right half. This is good to know when designing a website, since it makes a more conventional layout more profitable.

Here are some things to consider:

• Keep navigation all the way to the left. This is where people look to find a list of current options.
• Keep the main content a bit further in from the left.
• The most important stuff should be showcased between one-third and halfway across the page. This is where users focus their attention the most.
• Keep secondary content to the right. It won't be seen as much here, but that's okay — not everything can get top billing, and you need a place to put less-important material. 

Of course, rules are made to be broken, but if you know the rules, you will have a better shot at a profitable website.

One of the kickoff panels for SXSWi this year was run by Paul Boag, Creative Director of Headscape, a web agency based in England. The objective of his panel was not, as many thought, to make the design phase of a project pain free for designers, but to make it an easy, pleasing process for clients.

Boag noted that as designers, we sometimes fall into the trap of being defensive during the design process. He suggested the following collaborative techniques for ensuring a pain free experience for clients, and developers alike. 

Six Tips for Pain Free Design Signoff

1. Ensure the client understands their role in the project. Starting with the kickoff meeting, reiterate that the client's job is to find problems, not solutions.
2. Have a strong methodology and instill confidence in the project by making sure your development process is clearly outlined to the client.
3. Include the client often and early so that they feel engaged in the progress and development of the project. 
4. Educate your client about design decisions. Explain and justify your final decisions so the client will be confident and able to explain changes to other stakeholders or superiors.
5. Ask for specific kinds of feedback from the client. Target your questions so that you and the client can finish strong. Focus on the end result: “Will users like this?” “Does this fulfill our original design objectives?”
6. Avoid saying “no” during the process. Be open to discussing and negotiating prospective changes.

Over the years we’ve learned to adopt many of the principles Boag discussed. Involving our clients as team members during the design phase has eliminated the element of “surprise” that often comes from designing an entire website internally, then releasing it to the client in one single chunk. We also see it as our duty to keep our clients involved, as a measure of good customer service, allowing team work and “buy in” at important design phases.

There was a lot of buzz this year at SXSWi about HTML5 and CSS3. HTML, HyperText Markup Language, has been the standard language of the Web since its beginning. Versions of HTML4 have been used since 1997, so it's been a long time since we've gotten a major update to basic web language. CSS, Cascading Style Sheets, allows developers to style elements on a web page, making pages standard and friendly for viewers. With the innovations of HTML5 and CSS3, developers can make websites faster to run, easier to develop and nicer to view.

HTML5 has several new elements for developers to use including semantic replacements for common elements on a page like headers, navigation and footer blocks. Gaining the most steam was HTML5's support for <video> and <audio> tags. When developers want video and audio to play on a website, they almost always turn to Adobe Flash Player. HTML5 could eliminate the need for Flash in some circumstances, allowing pages to perform faster and still look and interact the same way.

CSS3 has a whole host of new ways to style web pages including adding web fonts, rounded corners, shadows, shading, and much more. These attributes mean developers will be less reliant on images, decreasing the amount of time it takes for a page to load.

As is often the case in web development, cool new technologies take some time to be implemented. Currently, HTML5 and CSS3 have the support of four of the five major browsers, the exception being Internet Explorer. Expected to be released in 2011, Internet Explorer 9 will support HTML5 and CSS3, however, until large numbers of consumers upgrade to IE9 or other modern browsers, it'll be awhile before a lot of these techniques can be used.

Here's a great page for visualizing how browsers are supporting HTML5 and CSS3. You'll instantly notice how current Internet Explorer options don't measure up. 

As designers, it’s important that we keep our eye on the prize: the target user for our finished product. During SXSWi, I sat in on a panel that highlighted some of the core concepts to keep in mind when designing and developing the first interaction a user has with your website. While geared toward the designer, these tactics can help the entire development team work together to create a fun, enticing user experience.

Tips for Designing the First 15 Minutes:

• Design with empathy. Remember what it’s like to visit your site for the very first time. Not everyone knows what’s expected of them.
• Give users the fun stuff first, and then ask them to save their work. Wait until there’s something to save.
• Integrate instructional and educational pieces into your initial user processes.
• Always look at your processes again with fresh eyes.

Some sites that do it right:

• Geni.com – “Best of breed” account creation and an easy progress saving system
• Mint.com – Super quick checkboxes and congratulatory feedback let you know you are progressing correctly
• Linkedin.com – Progress bar for account creation incentivizes users to keep going
• Tumblr.com – Quick and simple account setup

With the use of smart phones steadily growing, developers have become increasingly aware that the future of the Web may very well be in our pockets and purses and not on our desks. This has led to the need for applications that are lightweight and optimized for smaller screens and touch screens.

This year at SXSW Interactive, I attended a jaw-dropping session that explained how to make an iPhone application using only basic HTML, CSS and JavaScript.

Speaker Jonathan Stark, a mobile and web app consultant, began coding in very basic HTML as a class full of developers and designers looked on with feigned interest… it was all code we've written a hundred times before. Then he explained the use of jQuery and jQTouch, JavaScript specifically for use on Apple iPhones and waited for the gasps…

By adding this JavaScript, his simple HTML code was immediately rendered on an iPhone as a really cool looking app: the buttons took on the iPhone format, the touch screen functionality was enabled and animations were activated when moving from one screen to the next. He went on to explain the capabilities of this script as the room sat in amazement.

There are many different ways to build applications, and sometimes you do need more complicated code to achieve more complicated design or function, but the bottom line of the session? "If you can build your app with HTML, CSS and JavaScript, then you probably should."

Stark’s discussion is a great example of what we can hope to see for the mobile web’s future: developers working together to dream up new ways to easily bridge the gap between standard web design and mobile devices.