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. 

I can’t tell you how many times it’s happened to me: I’m checking my iPhone at red lights and on the side of the street. I enter my destination in a map or web search, and bam – they’ve got a website. I anxiously click the link, eager to learn the missing piece of information, and I am rewarded with a blank screen with a small blue Lego block in the center... nothing else! What? How can this be? Did the designer/developer of this site, really develop the ENTIRE site in Flash? Come on…even the navigation?

Today, more than ever, it’s become vital for businesses to adhere to some of the most basic web strategies, to ensure this doesn’t happen to every customer who has the luxury of looking you up on the iPhone. It’s part of the reason we advocate for developing two separate sites: One for desktop users, and another for your mobile users. Why not spend a portion of your web budget to ensure an optimal browsing experience regardless of how someone chooses to view your site? There’s no need to download huge images and rich media if you are in a car and just need basic contact information. On the flip side, the desktop/home user would prefer to see the large, beautiful photography and a more complex user experience.

We need to recognize our audiences, and many of them are beginning to rely heavily on mobile browsing. Not providing a mobile-friendly version of your website is making a conscious choice to ignore the fastest growing web browsing audience in the world. If you're interested in our mobile website development services, you can learn more here, or visit m.keenfootwear.com to see a mobile commerce site in action.