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.
Visited on my iPhone, looks very neat, congratulations!
Rob,
Was the business decision to develop an iPhone friendly site determined by the number of people who visit viget.com on iPhones or was it also to show you have the capability of building iPhone-centric sites (likely both, no?)?
What’s the normal use case for someone visiting the viget.com site from a mobile device you needed to accommodate by building an iPhone site?
It’s especially good to see you provide critical info for what I would imagine is the primary reason to visit your site from my iPhone: simple contact and maps immediately available from the first page if I’m coming by for an interview or project meeting and I can’t find your office…
Looks great. I’ve been meaning to dig into doing iPhone optimized design, and this is inspiring.
Looks great, and very easy to navigate (which is particularly important with a small screen and slow connection).
One problem, though, on my iPhone the nav bar (Home, About....) is showing up too far down on the page, overlapping your logo. It loads at the top of the page, but then I can scroll up to show a blank, dark-blue area approximately the height of the nav-bar itself. I don’t know if it’s just me...feel free to email me if you need more details.
Otherwise, very nice work! I’m looking forward to hanging out with your Southern compatriots at Refresh the Triangle tonight.
@Chris, I’ll jump in for Rob here on the business decision side.
Our iPhone traffic, as it stands, is just about the same as our traffic from users still using 800x600, so it’s not exactly enormous.
However, since mobile work is part of what we do (and want to do more), it’s something we wanted to be able to showcase using our own site. We may, at some point, work on a more traditional mobile site (WAP, etc), but we decided to go this direction first.
As for the use case, you’re pretty much spot-on. The primary drivers included clients coming in for a meeting, applicants coming in for interviews, and others—such as folks hearing or meeting us at conferences or other events—needing some basic information on the go. We wanted visitors to have the essential info presented first, but still be able to get to know us a bit in an iPhone-friendly format.
Hey Rob,
Sounds good, some screenshots or screencasts of the real site running in the iphone would be appreciated.
CSS animations are powerful indeed, I’d love to see what you managed to write there.
Congrats,
@Joan Piedra
You can go to http://i.viget.com in Safari, Firefox seems to work fine too.
It definitely doesn’t work in Firefox (not that it should), especially once you’re more than a level or two deep. Lots of webkit-only transitions and rules, just to set expectations for Firefox users.
In Safari on the desktop, there are a couple of rendering quirks here or there, but it works in general if you’re taking a quick look.
I just stumbled upon your site and I am definitely adding to my feed reader. A couple of things about your iPhone page.
1. Not landscape friendly
2. Long strings of text don’t seem to be wrapping properly
Other than that, it looks and works famously!
@Wolf, thank you, it looks like the “i” is becoming a new pseudo-standard for iphone subdomains, like “m” is for mobile sites.
@Shane, you are right, this could be fixed using min-width and max-width instead of just width.
#wrap-main {
min-width:320px; // portrait
max-width:480px; // landscape
}
@Shane & @Joan - Thanks for your comments regarding the landscape layout. There’s actually a snippet of JS that sets an attribute on the body call ‘orient.’ I then use that to set the width of body. I’ve never actually had issues with the landscape mode. Maybe you’re rotating before the script has a chance to load completely? Thanks again.
Benchmark!
Next entry: Load Selections with Channels in Photoshop
Previous entry: Bridging the Gap Between the Print and Web Community
Recent Comments
Nice goals. I am totally in agreement with you on #3. CSS galleries easily become tiresome. You may already do this but one thing that helps me out a lot is to pick up an art/design...
- Menachem Weight loss goals on 'New Year, New Web Design Goals'.
- jessica on 'An Age of Presentation: Styles, Trends, and Trendsetters'.
- Simon Raybould - presentations training on 'An Age of Presentation: Styles, Trends, and Trendsetters'.
Subscribe to Comments RSS