Blogs

The right way to build a mobile site

Posted by Hafees on August 28, 2010 at 12:58 pm
3 Comments

Mobiles now outnumber televisions 3-to-1 and PCs by more than 4-to-1. Analysts predict by 2012, half of all devices accessing the Internet will be mobile devices.

phonesjpg

What impact does this have on brands and companies? In order to reach your audiences where they are, it is almost necessary to have two websites – one for desktop users which has the full functionality and another for mobile users with reduced or customized functionality.

But, developing a mobile site doesn’t just mean taking your regular site and shrinking it down. At Flip, we’ve developed many mobile sites and learned valuable lessons each time.

Before getting started, it’s important to consider the following basic restrictions of mobile platforms.

  • Small screen size and resolution – Mobile screens are much smaller than desktop monitors. So we should ensure that the content fits properly (a horizontal scrollbar is one of the most annoying things for a web page). Apart from that, the screen size and resolution varies from device to device which makes it complicated to generalize layouts. We need to consider devices from a small 240x320 pixels resolution to a massive 640 x 960 pixels iPhone Retina display.
  • Limited navigation– There is no mouse and not all mobile devices are equipped with touch screen.
  • Limited or no javascript support – There are still many devices which do not have good javascript support or it may be disabled by default.
  • Limited or no flash support – Though full flash support is promised for many mobile platforms in future, at present there are only very limited devices which support this(to name, Nokia N900 which runs on MAEMO and devices which are updated to the promising Android 2.2 Froyo) – the others only support a very limited subset called FlashLite. Also, the Apple vs Adobe fight goes on and it is almost certain that iPhone, one of the most popular platform/device, will not support flash in near future.
  • Limited and costly bandwidth – Though 3G connections are common and 4G connections are around the corner, there are many places in the world where even a GPRS enabled connection is considered a luxury. Also, the bandwidth is more costly when compared to normal broadband connections.

Mobile phone platforms

The actual process of “mobile site optimization” can be quite complex because there are so many different types of mobile smart phones and each has their own operating systems with different screen resolutions.

Here is a quick snapshot of the different platforms:

platformjpg

Platform Current status Popular devices
Apple iPhone OS (iOS) iOS version 4.x Iphone, iPod Touch, iPad
Symbian Symbian 3 is getting ready (Nokia N8 is announced on this platform) Nokia N Series
Android Android 2.2 (Froyo) with full flash support HTC Hero, Nexus One
RIM BlackBerry BlackBerry 6 BlackBerry Curve, BlackBerry Storm
Microsoft Windows Mobile HTC HD2, Samsung Omnia II Windows Mobile 7 is announced and will be available by the 4th quarter
Palm OS HP acquired Palm and it may be used in many devices including printers Palm Pre
Maemo Nokia and Intel announced merging of Maemo and Moblin. The new platform will be called MeeGo Nokia N900
Samsung Bada Bada is the newest platform from Samsung and will be used in their medium range smart phones Samsung Wave

Browsers

There are several browsers available for mobile devices.

browsers

Browser Rendering Engine Available platforms
Iphone Safari Webkit Apple iPhone, iPod Touch, iPad
Opera Mini Presto – implements server side compression Java based, available for almost all platforms including iPhone
Opera Mobile Presto Symbian, Windows Mobile, Android version expected
Skyfire Gecko – supports flash rendering through server side Symbian, Windows Mobile, Android
Android native browser Webkit Android
Symbian native browser Webkit Symbian
BlackBerry New webkit based engine announced Black Berry
IE Mobile Trident Windows Mobile
UC Web Gecko – server side compression Java, Symbian
Firefox Fennec Gecko Maemo/MeeGo, Android (alpha version)

There may be more browsers but they're not very popular and those may be derived from the native browsers just extending functionality rather than rendering (Eg: DolphinHD browser for the Android)

Design

Designing mobile templates requires very different thinking than a regular website.

  • The design should be simple. Otherwise it will require more complex CSS and HTML. That means it will take some extra time to load. Also, template matching in different browsers will become more difficult.
  • Optimize for thumb – Touch screen devices are becoming too common now. So even if the design is for generic mobiles, it should be touch friendly as well.
  • Use breadcrumbs – it will be easier to navigate around pages if we use the breadcrumb properly
  • No popups – They are one of the most irritating things when browsing a website in mobile devices
  • No flash content – There are very few mobile devices which can render flash animations properly
  • Related links – It will be easier to find similar or related posts

HTML / CSS / Programming

  • Use XHTML and CSS layouts. Most mobile devices can render XHTML faster. Also, make sure to validate your HTML because validation errors can affect the page rendering speed.
  • Use simple and clean HTML. The more complex you make it, the more difficult it will be when doing template matching in different browsers.
  • Always use 'em' units instead of 'px' units for proper scaling of layout.
  • Do not rely on javascript for layout as javascript support may be limited or turned off.
  • Avoid explicit 'font-size' declarations for inner elements. As far as possible, font-size should be given only to the body element. This will make inheriting easier and more predictable.
  • Use the 'viewport' meta to control the default page scaling
  • For phone numbers use the href=”tel:” property so that user can click (or touch) to dial that number
  • Use HTML5 input types like email, url, date, number, tel to bring up proper keyboard on touch screen devices.
  • Keep in mind that many mobile devices have a protected file system (Eg: iPhone) and does not allow file uploads. So, either provide alternate methods (may be send by email) or make the field optional.
  • Detect phone orientation and provide suitable layouts (For eg: to show images). Phone orientation (landscape or portrait) can be easily determined using javascript (compare window width and height – if width is greater the phone is in landscape mode. If height is greater it is in portrait mode). It should be noted that, we should not rely on javascript for layout - it should be an extra feature if supported.
  • Automatically switch to the mobile version or otherwise, offer a mobile friendly page based on user agent.
  • Use HTML 5 video tags for showing video and do not use flash based players (MP4 video format is recommended as many devices supports this format). This may not be 100 % compatible with every mobile devices out there. But it will ensure that, the video is playable at least on modern mobile devices. Also, do offer a download option. Many mobile devices have a built in video player which can play mp4 videos. So, even if the video is not playable on the browser directly, user can download the video and playback using the application.

Mobile version or iPhone version?

Well, there are many designers and programmers who optimize and test their pages in iPhone only. Please keep in mind that, Iphone may be the fastest selling smartphone in the world, but it is not the most popular platform. The BlackBerry, Android and Symbian outsells iPhone as a platform. So make sure, your site works well in Android, Symbian and BlackBerry phones – not just iPhone.

Multiple versions optimized for different devices

Another option is to provide different versions of your site optimized for different devices. For example, a generic mobile friendly version for medium range mobile devices without touch capability and touch optimized interfaces for iPhone or other touch screen based high end devices. Also, this can be offered based on resolution. For example, for an iPad with 1024x768 resolution, offer an iPad friendly high resolution page.

A real life popular example of this is touch.facebook.com, the touch friendly mobile version of Facebook, and m.facebook.com, the generic mobile friendly page.

SEO

Google mainly recommends the following for better indexing of a mobile site.

  • Google has a separate mobile bot for indexing mobile friendly pages. So, always redirect this bot (check for user agent 'Googlebot-Mobile') to the mobile version of your site. This bot should not see the normal site.
  • Use the XHTML Mobile doctype so that search engine bots can clearly identify the page as mobile friendly.
  • For each page, there should be a link for the standard view of that page. It will help Google to categorize mobile pages and its corresponding standard pages.

Separate domain or user agent based auto switching?

Choosing a separate domain (or sub domain) is debatable. I think the best approach is to redirect to a different domain ( preferably “m.domain” sub domain) for mobile friendly pages for the following reasons:

  • Users can clearly understand they are visiting the mobile friendly (or device friendly) version of the site and another version of the site exists.
  • It will be never considered as cloaking by search engines because the urls will be different (Googlebot might consider that we're trying to do some black hat SEO if it somehow sees both normal content and mobile friendly content on the same url - If you want to go with the 'no sub domain' approach, make sure Google bot only sees your normal site version). Though the content may be repeating, it won't be considered as duplicate content because search engines can easily identify it as mobile friendly version.
  • It is the common practice followed by many big sites (Eg: m.facebook.com, m.cnet.com)
  • Google themselves follow this approach and it can't go wrong. (eg: m.google.com, m.orukt.com, m.youtube.com etc)

Testing tools

Once you’ve completed the building, the site should be tested in as many platforms as possible (preferably on real devices). But in the absence of the real deal, the following simulators are excellent substitutes:

That’s the basics on mobile site development.

Read more

Flip Dubai - through my camera lens

Posted by Praveen on August 18, 2010 at 09:26 am
1 comment

As a photography enthusiast, I love traveling. But when I was asked to go from my base at Flip Trivandrum to work out of our head office in Dubai, I have to admit I wasn't exactly jumping for joy. I was expecting a dull month spent toiling away in a cold corporate environment.

img 4144 img 4148 img 4047

img 4049 img 4046 img 4242

But I couldnt have been more wrong. Contrary to my expectation, Flip Dubai  was really an amazing experience. So much so that I'm short on adjectives to describe it. Instead I thought I'd let my photos help do the talking.

img 4184 img 4080 img 4090

What struck me the most about the office is the cosmopolitan, yet  friendly and casual environment. With Flippers from different places and cultures, the office has a truly international feel.

img 4065 img 4076 img 4072

Tight deadlines on big projects usually kills the fun in programming. But I found that at Flip Dubai, the environment was so refreshing, the hours melted away while coding alongside people of the same passion – digital.  With the shallow background music and the office's funky industrial vibe (exposed ceilings and red and white furniture), Flip Dubai is the exact opposite of a stifling corporate environment.

img 4039 img 4031 img 4020

The lounge, with fluffy beanbags and transparent furniture, is a warm and relaxing area to work or to take a short break.

img 4251 img 4244

Working with Core team was spectacular. Being in the office just as we were on the verge of releasing Slide Reader, Flip's first iPad application, enabled me to experience the adrenline rush,  pressure and excitement of delivering an app first hand.

img 3941 img 4137 img 4135

img 3963 img 4155 img 3795

It has been a pleasure being here this last month working with so many great Flippers.

flip

Read more

Life's a Pitch

Posted by Yousef on August 7, 2010 at 11:32 am
4 Comments

A marketing manager dies, and gets to the pearly gates of Heaven. Upon arrival, he's presented with a special offer to try both Heaven and Hell in order to choose which one he likes best. His inspection of Heaven goes fine. It's a nice place, full of pleasant people.

His visit to Hell, on the other hand, is amazing. Rather than being confronted by pitchfork-wielding devils and cauldrons of fire, he opens the door to Hell and stumbles into the equivalent of the best VIP Lounge in the world. Great food, drinks and a nonstop party are on offer, and he has the best time he can remember.

Upon his return to the Pearly Gates, he decides that Hell would be the best place for him. When he returns to Hell, he rushes to open the door and rejoin and instead finds himself confronted with the Hell he originally imagined - fire, pitchforks, and the lot. He then runs up to the devil and angrily demands to know what's going on here - how he was promised the best party of his life, only to find the reality to be very different and far less rosy.

The devil responds, with a wry smile on his face "Last week was the pitch. Now, you're the client."

In Feburary, I read an article online about 25 Belgian agencies that had launched a "virtual strike" to protest unfair pitching practices by their clients.  For one week, if you visited any of their homepages, you were welcomed with a message that said "As you can see, we have replaced our regular website with this letter. It’s going to stay up one week to express our discontent. .."
And then, by clicking from one agency homepage to the next, one could read the full text of why Belgian agencies had grown discontented with the current pitch-happy scenario, and they made two major claims:

  1. Pitches cost a lot of money, and if you're competing in a 10-agency shootout, the chances of you winning are 10%, but agencies continue have no choice but to invest a small fortune in the equivalent of a boxing match, as they go from round to round in order to win new business.
  2. If agencies are spending all their time working on pitches, guess what they're not working on? Client business. As we all know, we usually divert our best resources - creative & strategic to pitches instead of client work, so it is the client's work that ultimately suffers.

According to Luc De Leersnyder, CEO of the ACC, Belgium's association of communication companies, which masterminded the strike. "..if you're called into a pitch and know there are six or seven other guys and that you'll spend 80,000 Euros on the pitch, you have a better chance at a casino."

After reading about the Belgian's discontent, I cynically tweeted "Belgian agencies protest about pitch process. If they knew what we put up with in the UAE, they'd shut up."

And I'm sad to see that 2010 has proven to me just how correct that cynical tweet was.

One week later, I received an RFP for the redesign of a portal – it consisted of three pages: a cover page requesting three sets of design concepts, a list of deliverables needed, and a disclaimer. No brief, no brand guidelines. Upon calling the prospective client, I was told "I'm fed up with all of you agencies asking for a brief and brand guidelines- just use your imagination!"  It turns out that 10 agencies had been invited to this pitch, and while some of my industry peers also turned down this invitation, all it takes is for one of us to accept these terms to make this sort of "brief" acceptable.

Not to be outdone, another Marketing Director sent out an integrated communications pitch brief to 19 agencies - regardless of our specialty - PR, advertising or digital. I know this because she was nice enough to accidentally CC all 19 of us on the tender invitation. Some days, you just can't make it up...

Along with the waves of sackings and unpaid invoices that accompanied the global recession, our industry has suffered another casualty: the cheapening of everything we do. Suddenly, agencies no longer find themselves in demand or able to differentiate ourselves through our original thinking. Instead, we now find ourselves at the mercy of procurement departments and enthusiastic marketing directors who know that they now have the pick of the litter. And who can blame them? While there are still as many agencies as ever in town (including all the new ones who have flocked to the region), there are fewer advertisers than ever with real money to spend. And so they find themselves in a unique position far away from the seller's market we enjoyed in 2008.

Nowadays, it seems that every pitch invitation that comes across our desks requires endless rounds of free design concepts or campaigns, with the end result that the best agency is told they are too expensive, and that unless they reduce their costs to match the cheaper agencies, they can forget it. Quite often, pitches are cancelled or shelved indefinitely, rendering the hundreds of thousands dollars spent by multiple agencies completely wasted.

And while we continue to provide round after round of campaign ideas and free design concepts and appeal to the lowest common denominator, we are working to a zero-sum endgame in which only the agency willing to do the most for the least will win. We are devaluing the strategic thinking process behind our craft - the reason why each of our agencies feels that they have the best approach to creating arresting work that gets results.

One leading major advertising agency in the UAE - which enjoys its fair share of globally aligned work - still participated in 32 pitches last year for regionally based clients last year. And we're all guilty of this. Even though my agency refused to "pitch" for most client inquiries in 2008 in the heady days of Dubai's real estate and tourism boom, we find ourselves willing to do more and more in 2009 & 2010 to win less and less. After all, every agency has overheads and salaries, and sometimes in that desperation to win a new client or "get our foot in the door", we offer ourselves up cheaply or for free in the hope that it will pay dividends in the future.

I'm not saying that advertisers should not have the right to make the best-informed decisions about who their marketing partners will be, and I do not dispute that some of the best ideas ever created came out of the energy, enthusiasm and sky-high ambition that only a new pitch can generate, but I question the direction in which we are headed.

Agencies in the region come in all sorts of shapes and sizes, and it does not take much to understand what each of us is good at.  And a 5-minute chat with an existing client about us is far more insightful than any polished credentials presentation we can put together. As the Belgian strike manifesto stated, “Judging an agency isn't rocket science. Our work is on every street corner, and all over the Internet." 

I'm not asking for end to the pitch process. Just a reality check and an acceptance that by making the selection process, more opaque, more competitive and less realistic in its expectations, we are ultimately denying everyone - agencies, clients and the media - the chance to align with the best partners. This will only lead to less inspired work, less growth and less opportunity for our next generation of Arabic advertising talent. We are consultants, not used-car salesmen.

But there is hope, and in my regular interactions with colleagues across the industry, we know that we cannot go on like this. I do not know what the answer is, and in our fractured state, it's unlikely that we would rally around a common charter and stick to it. It is a brave agency head that turns down a pitch for being unreasonable, incomplete or unsuitable, but it is starting to happen.

What was most striking about the global ad agency I mentioned earlier is not that they participated in 32 pitches in 2009, but the number they turned down: 128.

Read more
Flip Media Read Blogs
A Flip Holding Company