Viget.com gets iPhone-ized

Throughout the year the team here at Viget embarks on numerous internal projects aimed to expand our expertise. With that thought in mind, we just recently designed an built an iPhone-specific site to accommodate the majority of our mobile users. The overall process was an enjoyable one. Here's a glimpse of how the project came together.

The Process

Wireframes

This project, like the majority of our others, initially started with wireframes. Jackson conceptualized the site around the ideas of usability, audience and purpose. After consolidating his ideas, he jumped into a black hole of wireframing and emerged a day later, unscathed from his adventure, with a great set of wireframes to move forward with.

Design

From there, I took wireframes and began the design process. Since the Viget brand is close to my heart and we have an existing look and feel, I jumped right into comps -- skipping over the moodboard process. The design concept came quickly because of the quality of the wireframes and my understanding of our brand and goals for the site. I designed and comped up the three main types of layouts:The homepage, a basic listing page, and a content page. Due to the low resolution, I kept in mind the audience, text-size, download time/connection speed, and readability.

Front-end Development

Once we finalized and approved the design, I moved into buildout. This, in my opinion, was the best part of the process. When building out a site designed specifically for the iPhone, your hands are no longer tied with the typical browser constraints (<cough>IE</cough>). Mobile Safari -- the browser used by the iPhone -- supports CSS3, 24-bit tranparent PNGs, and custom CSS animations.

Since the new site was going to be at a separate URL from our current CMS, ExpressionEngine, I needed to dynamically pull in that data. For this, I used various AJAX functions from the great JavaScript library, jQuery. Doing this dramatically helped page-load times.

Quick Takeaways

• Designing and developing for the iPhone is a blast. Only having to worry about one browser is a huge advantage during build out.
• CSS3 can't come soon enough. When CSS3 is more broadly accepted, and we can make it a part of build out process, it will save a lot of time and ease designer's pain.
• Webkit's CSS animations are a bit complex but extremely powerful.
• jQuery is still the best. It's small, compact size makes it ideal for almost every situation needing JavaScript -- even in the mobile web space. I heart you jQuery.

You can view the new site by simply visiting www.viget.com on your iPhone or iPod Touch.