When iPhone and iPad closed out the year 2011 with 52% of mobile web market share, you know it’s time for your business to have a decent iOS website. This article tells you everything (well, almost) you need to know to start making a mobile web for the iPhone. We will follow up with another post targeting the iPad specifically.

Before rolling up your sleeves to get the design started, let’s go over some iPhone basics:

Scree Size v.s Resolution

Although the 3.5-inch screen size stays the same across all iPhone models, resolution on older iPhone models (original iPhone, iPhone 3G, iPhone 3GS) is 320×480 pixels, which is significantly lower than the 640×960 pixels “Retina Display” equipped on the iPhone 4&4S.

What does this have to do with designing an iPhone website?

Difference in resolution causes the density of pixels on iPhone 4&4S to be 4 times greater (326 DPI per inch) than that on older iPhone models, even though they share the same screen size. This means each site we must have 2 versions of images for original resolution and the retina resolution.

But don’t be frustrated because most of the time, all we need to change is just the image elements. For instance:

• For original iPhone models, same the image as something like “freshtrax.jpg”
• For iPhone 4&4S, the name would be “freshtrax@2x.jpg”

Layout 

• Part 1– Normal size icon, and double size icon <link rel=”apple-touch-icon” href=”/apple-touch-icon-iphone.png”/> <link rel=”apple-touch-icon” size=”114×114″ href=”apple-touch-icon-iphone4.png”/>

• Part 2– Tell the iPhone 4Xbrowser to use 2X size image <link rel=”stylesheet” media=”only screen and (-webkit-min-device-pixel-ratio: 2)” type=”text..”/ >

Stay tuned for the next post about making iPad specific websites.

No, this is not a sneak peek of the new season of The Walking Dead, a massive rebellion, or political revolution. This is a picture taken by Jesus Diaz on Jan 12, when Apple was about to release the new iPhone 4S in China. The specific demographic of this photo? Most likely designers and people between the ages of 18 and 35. It seems that Apple products are no longer a “niche” necessity, but rather a signature of chic and urban culture.

Despite Apple’s back out in 2009, Macworld|iWorld 2012 still attracted over 20,000 visitors and 300+ exhibitors worldwide to the Moscone Center in San Francisco. I went to this 3-day event as a media reporter, and it was quite interesting to see many new faces(new companies) emerging – some of them came all the way from Asia. Here are some products that caught my eye.

All Jack Speakers. Here’s only one of the jaw-dropping examples:

This 4-speaker set is designed and made by Alljack, a Taiwanese company. Inspired by a wine bottle and a flower, this speaker set places your iPod/iPhone in the center and is decorated by the with Russian diamonds, bullion plating, unnatural timber pellet and other music inspired metal. The cost? $68,000!

Adventure Bar Story

The exhibition not only welcomed big companies and manufacturers, but also many startups and app developers. I was intrigued by this small iPad game booth in the app section:

Adventure Bar Story is a 16-Bit iPad/iPhone game that blended full-on restaurant management gameplay with turn-based RPG battling/exploration. 16-Bit! This game debuted in Japan’s PlayStation Store last summer and attracted a lot of attention because of the nostalgic graphics. The developer of this game – RideonJapan – is a small Japanese startup with a team of 7.

Given the fact that Apple products are gaining popularity in China and Asia in general, we see more companies and developers from Asia coming out of their region and aiming worldwide. These innovators in Asia are worth a closer look.

Following the success of SF Macworld|iWorld, IDG announced its 2nd Macworld exhibition in Asia this September at the China National Convention Center, Beijing. It will feature partners like China Unicom, Youku, Sina, Yesky. Let’s wait in anticipation to see what the next six months of innovative products/apps are going to appear at this event.

Related post: China Innovators

Last Month, we asked our designers to compete in a friendly artistic competition to create a iPhone wallpaper design for our community.  Our designers, Makoto, Erin, Steven and Angela got their “creative” juices flowing and came up with the wallpaper you see above. Here is some background on some of the designers ideas and thoughts behind their designs:

Titled “Me” by Steven : “My design is influenced by Japanese Cartoons or Anime, I like the vibrant, fun type of colors used in Anime”

Titled “btrax in SF” by Makoto: “I wanted to present the company and location, so I thought the “Batman”-like theme would fit with the Bay Bridge in the background”

Titled “Grow btrax” by Erin: “I thought it would be cool to have a mutant lotus flower sprout btrax from its tentacles.

Titled “At Work” by Angela “I wanted to express some of the things in my work environment that influence and nurture my design work. I’m powered by co-workers, music, wireframes, tea and cupcakes.”

Please feel free to download your favorite wallpaper for your iPhone at http://ht.ly/20JDC

If you like what you see, give them some designer love and a “thumbs up”  here or on our Facebook fan page.

btrax, Inc. can be reached on Twitter at (@btrax) or on our Facebook Fan Page

Job-less Keynote In stark contrast to Steve Job’s largely solo format, Apple’s marketing baron Phil Schiller farmed out much of the presentation to three other senior engineers.

They also paraded no less than seven different App developer teams to showcase how their apps will use the new capabilities of the iPhone 3GS and iPhone’s upgraded operating system.

While appealing to the 1,000+ developers present at Apple’s annual WWDC developer fete, the presentation seemed a bit long winded – with much of the time spent on only incremental changes. Some of the more substantial themes running throughout Apple’s presentation:

Not Quite All About Apps Apple’s game plan is both powerful and straight forward: provide raw ingredients (SDK and APIs) and a buffet table (App Store and iTunes) to developers. App downloads passed 1 billion in April 2009 and keeps growing with 40+ million iPhones and iPods on the streets.

Apple’s gamble on entering the cutthroat mobile industry and prescient view of your phone as a pocket computer is paying off – the iPhone represents 65% of all mobile web browsing.

More importantly, Apple has created a seamless system were it maximizes profits while outsourcing risk: • AT&T and other carriers foot the wireless infrastructure costs • Content piped in by major movie studios, music labels and individuals • App developers code and market software for both mainstream and niche audiences

Apple Everywhere? Apple is tipping its global hat, accelerating release schedules abroad for its core products. Also iPhone OS 3.0 is built on a truly universal base – no differences in the code on every new iPhone despite the 30+ supported languages.

This doesn’t mean just translation of UI text, but full localization with different layouts for email input, etc. The new OS adds several new languages, most notably Arabic and Indonesian.

As Apple keeps reducing product prices, their potential market reach expands exponentially beyond the semi-luxury category.

Feeling the Economic Squeeze The most evident theme throughout the WWDC keynote was price – every product covered had a price drop. The largest ones were for the MacBook Air (top end dropped by $700) and the iPhone 3G, which now will be $99 and sold alongside the newer iPhone 3GS.

Putting the iPhone 3G under $100 is a key move, coming the same week as the launch of the most sophisticated challenge to the iPhone yet – the Palm Pre, which we covered last week.

Photo by Tim Wagner © 2009

Rumors about Apple’s every move are common online, but each year the company tips its hand decisively with its Worldwide Developers Conference (WWDC). This year’s sold-out event will see a flock of 1,000 developers and IT professionals descend on San Francisco.

Based on the topics and the experts present at the 2009 WWDC, Apple fans can expect some of the below to appear soon in software and hardware:

More Revenue Engines The iPhone’s third developer kit enables requests for payments on subscriptions, additional game levels, or other content from within your applications. This is a natural and brilliant step on Apple’s part.

One reason why the iPhone has caught fire is the number of apps – developers are drawn by the App Store’s solid money making framework. Other platforms such as Facebook have stumbled in delivering in the payoff arena for developers, which is one reason why so much brainpower is being concentrated on Apple devices. Re-introducing the Basics The bane of iPhone owners everywhere, Apple is finally enabling cut, copy, and paste as “major new features” of the upcoming iPhone OS.

Stronger Security With its increasing market share and the discovery of a worm targeting the Apple operating system, developers now have to think about something that has long dogged Microsoft’s ubiquitous OS: how to foil people looking to steal valuable information or con you.

The conference will be aimed at shoring up techniques for the Mac OS X and iPhone – as well as pushing Apple’s proprietary Mobile Access Server, which provides a path through corporate firewalls for IMAP, SMTP, HTTP, and CalDAV without using VPN. The focus will also be on the 802.1x standard for authenticated access to data by a remote Mac, iPhone, or iPod touch.

Better In-App Features The new framework for Google’s Mobile Maps Service will allow developers to embed custom maps directly within your applications. The verdict isn’t in just yet on whether Apple will change the iPhone’s one-application-at-a-time OS (challenged by Palm’s upcoming Pre), meant to preserve overall performance.

Beyond English Apple’s global ambitions are clear from its ever expanding presence abroad and focus on foreign language versions of the independently created apps and software.

Photo by Tim Wagner

It sounded simple: sync the shared Google calendars for my company to my iCal calendars on my iPhone.

My first experiment ended disastrously with all my iPhone’s iCal calendars being overwritten. Luckily I restored the data by exporting my iCal calendars from my home iMac (i.e. the mothership for calendar syncing).

It turns out Google Calendar uses the Microsoft Exchange ActiveSync protocol, so this unidirectional approach removes “all existing contacts and calendar events” from your phone. However, if you aren’t trying to sync multiple calendars from two sources this should work.

After playing around with some alternatives, my final solution: 1) Export all my iCal calendars and upload them to Google Calendar (My Calendar / Settings > Import Calendar) 2) Add a subscription for my soccer team’s game schedule (living on the brilliant TeamSnap site) to my Google Calendar account 3) Share my work calendar with the btrax team Now I had all of my own calendars in one place (personal, work, soccer and shared colleague calendars). My iMac could slurp them up, but not add its own evens to the mix.

Getting everything the last mile to my iPhone and making the syncing bi-directional was the fuzzier part (few directions on this from Google): 1) Go to m.google.com/sync on your iPhone and log-in to your Gmail account 2) You should get a Google Sync page with the subtitle “Manage Devices” which shows your iPhone 3) Click the iPhone entry and select up to 5 calendars (including “private” shared calendars!) 4) Click “Save” at bottom

If I add an event on my iPhone it now instantly and automatically loads it to Google Calendar’s cloud servers (just make sure to select a specific Google calendar, otherwise it won’t sync). Whenever I boot up iCal with either my iPhone or iMac it also checks my selected calendars for updates.

And that’s it. There is no easier magic bullet yet, but this does a lot of heavy lifting without requiring you to jailbreak your iPhone.

For mobile applications geared to narrow niche audiences, Sushi Guru is a good case study of what to focus on and avoid in creating an iPhone app.

Slick User Experience SushiGuru nailed the most important thing – a great user interface. The design is professional and the navigation is simple – basic items that more than a few apps get horribly wrong. People should be able to understand and use all your app features without a user’s manual in a few seconds. Especially when they are paying for it – in this case $1.99.

Know Your Niche SushiGuru’s creator Ben Trotter didn’t try to make the Swiss Army knife of apps – staying focused on relevant features. The best one allows you to take notes on each sushi – useful for remembering your favorites at a particular sushi bar. The audio clip of the fish name in Japanese and ranking a fish’s eco-friendliness are also solid features. Partner Up This leads us to an area where most apps could be more powerful: not reinventing the wheel. Smart tech businesses favor strategic partnerships and third-party integration. Sushi Guru combines information from the Monterrey Aquarium’s established, well-researched seafood guide along with data from the FDA. The cred that lends, however, is not mentioned on SushiGuru’s website or App Store blurb.

The challenge in this case is that the Monterrey Aquarium’s has its own Seafood Guide iPhone app. Although the Aquarium’s app is free and has more specific regional info, it doesn’t have comparable cultural features or design.

Location, Location, Location Neither Sushi Guru or the Seafood Guide, however, take the next step – integrating with the iPhone’s Google Map app for directions to my favorite sushi bar . Or taps Yelp to provide location-aware listings of nearby sushi restaurants or customer rankings.

For some sushi fans, that’s a deal breaker. But Trotter promises more advanced features when the iPhone’s software is updated this summer, enabling push notifications.

With the release of the iPhone in Japan later this year, consumers may take to the phone with more enthusiasm than anticipated. Currently, the iPhone ranks as the #1 and #2 Smartphone in the US and UK, respectively, for browsing the internet. This trend may translate over into Japan and cause a paradigm shift in the world of Japanese cell phones, where complicated features are seen as alluring and the iPhone is touted as the answer to streamlining convoluted mobile phone operation.

Research conducted by the Asahi Shimbun shows that the one-way average commuting time for students and workers in Japan is about 72 and 67 minutes in the Tokyo metropolitan area, and 76 and 63 minutes in/around Osaka. Since a majority of the Japanese population has to commute for either work or school, the commuters can use their time more efficiently. Users could browse the internet with ease allowing students to do homework or workers to telecommute from their phones. Consumers who want added features can take advantage of the iPhone’s ability to accommodate third-party SDK’s.

Time can only tell if the iPhone holds the key to simplifying the average consumer’s life in the overworked, island nation.

btrax, Inc. offers design services specifically for sites accessed on an iPhone. More info here.