 |
As the technology for mobile devices grows, so does the opportunity for development. Many companies are not creating their own apps, but instead utilizing HTML5, Javascript and CSS3 to aid in the creation of web apps and mobile websites. Reducing the initial investment, companies can get the most out of the money they are spending and release it to the public themselves on their own terms. Who wouldn’t want to save money and produce a more expandable product?
When building mobile apps with these technologies you no longer have to duplicate efforts for mobile cross-platform flexibility. By implementing the latest technology you can rely on full support (WebKit) by popular devices that use iOS, Android and the experience can be altered or downgraded for others. You will receive the best results if you build for the masses but utilize a specific strategy for your demographic knowing that not everyone owns a smartphone with HTML5 support. With over 120 million iOS devices on market and more than 302 million Android devices sold, there is a large customer base that will only continue to grow.
With the various devices available and variation of screens, developers must consider all user experiences.
Once your idea is in place and you have decided that you want to utilize the mobile platform as your base, you must determine several factors to formulate an effective plan. Whether you are bypassing desktop devices completely and focusing on mobile or just utilizing mobile marketing in your campaign you will need to define a campaign, devices to support and build for mobile devices.
On average, Americans spend 2.7 hours per day socializing on their mobile device. That’s twice the amount of time they spend eating, and over 1/3 of the time they spend sleeping each day. – Microsoft
Defining a Campaign
Before any campaign is launched it must first be defined to help flush out questions that can be detrimental if asked too late. Will you be marketing to anyone with an internet connection or just mobile devices? How will users find your website? What do you expect users to do once they arrive? How will you track behavior? These are some (of many) important questions you should be asking. While each campaign specifically revolves around very unique goals, we can discuss how you can find your own answers to the questions above.
What devices will you support?
If you are marketing to any device with an internet connection you must account for regular resolutions, high resolutions, the more complicated mobile screen trends and various mobile screen resolutions. By narrowing your campaign down to specific mobile devices (eg smartphones) depending on your needs, you can focus on as little as three key screen resolutions. For example if you are utilizing QR Codes or MS Tag (free to use) in your campaign, you can only choose to only support iPhone/iPod Touch, Android and Windows 7 Mobile. This is due to the fact that scanning technology requires a camera and a scanning app before you can be directed to the website being marketed.
If mobile tags were a family, QR codes would be the parents while MS Tags would be the spunky children.
If you are reaching out to a larger base you can utilize a flier, napkin, product package, label, menu, web banner or even a commercial to display these 2d codes for users to scan. Some establishments even place a window sticker on their front door (eg restaurants, store front merchants). If your demographic is much smaller, perhaps you can add a code within a company newsletter, promotion or business card. These methods are most effective with incentives (eg discounts, free gifts) and other methods are more successful with general company promotion. Mobile tags gained extreme popularity as instant entry for contests since personal information can be quickly accessed through a mobile phone and remove the irritation of filling out a form. Mobile tags help users initiate the process rather than delivering a coupon or content by self-engaging.
QR Codes and MS Tags can be used for:
- Content Sampling
- Event Information
- Giveaways
- Hotels/Resorts
- Loyalty Rewards
- Location Based Games
- Product Preview
- Product Reviews
- Realtors
- Retail Stores
- Restaurants
- Scan-to-Pay
- Tourism Attractions
- Tourist Attractions
When users visit your website you should have an immediate call to action. Users can watch a video, vote on a poll, complete a form or even purchase a product. When you immediately engage users you have a better chance of keeping their attention and delivering your message. Usability tests demonstrate that users see and understand less and do not engage unpleasing websites. Get users attention act on their impulses, engage users and complete your goal. Once your campaign gains more focus, it will be easier to determine the project details and make decisions as you continue to plan.
Over 85 percent of new handsets will be able to access the mobile Web. Today in US and W. Europe, 90 percent of mobile subscribers have an Internet-ready phone. – Gartner
Defining Devices To Support
After you have reviewed the resolution information we discussed in the previous section you can decide which delivery methods and mobile devices you will support. This will have a large effect on the images and code you will be developing. A mobile device is not just a smaller computer, but a whole different realm of user interaction and web development. Altering something that works for a desktop user by scaling it down will not work due to the limited screen space and touch technology.
Please note that this is a very limited list, and is by no means complete. What is important to take from this data is that a wide range of screen resolutions are out there, and new devices are introduced constantly. Source
When working with popular mobile devices you have to account for not only standard viewing (portrait) but for adjusted viewing (landscape) with images and content. By looking at the screen resolution image above you can see that the iOS low/high screen resolution and Android low/high screen resolutions are very similar. They are not exact but will help you during development keeping in mind the smallest possible max screen resolution of your mobile website will be 960 x 960 pixels due to the retina display. The lowest screen resolution you will want to develop for would be 320 x 320 for smaller Android devices. All other popular screen resolutions will fit in-between. In the following section we will discuss how to create a flexible site, even when graphic heavy.
The market today contains rapidly changing display dimensions and you will want to be certain you pick the devices you support wisely. Since cell phones enter and leave the market at an average of 18 months you will want to avoid devices that are not widely accepted since this will have an effect on the supported screen resolutions. When you start developing your mobile website you will want to utilize the HTML5 and CSS3 functionality built into these smart browsers and review which features are widely adapted.
Building for Mobile Devices
When you begin building for mobile devices you will need to take into account the small viewing areas, load times and touch screen support. Will you be including a quick launch menu or will your site only be one page? Will you offer multiple types of media or just serve specific information? With screen sizes that vary, providing relatively small viewing areas, you will need to provide quick and simple navigation to any information you are offering. This includes preloaded images, videos and identifying the page load order. With many restrictions on older devices, you cannot meet user expectations for feature rich websites thanks to the new standard people expect due to the iOS and Android systems.
Mobile websites must offer various media types that differ from the desktop but offer a similar experience.
People are used to the simple, flexible interfaces that many apps offer due to the mass offerings of the Apple iTunes store. With that in mind you must be sure to provide a similar experience on your mobile website that common apps are providing users currently. These high expectations will force you as a developer to increase performance, create a dynamic environment, test and test some more. With current HTML5 and CSS3 technology it is easier for developers to support multiple devices and offer a degraded experience for others. There are also many cross-platform mobile development tools available for use.
Many mobile Web users are mobile-only, i.e. they do not, or very rarely use a desktop, laptop or tablet to access the Web. Mobile-only in Egypt is 70 percent, India 59 percent, even in the US it’s 25 percent of subscribers. – On Device Research
Icons
A great feature that has arrived with current smartphones in the ability to save website bookmarks to your home screen and being able to create your own icon that will look like an app. There are Android icon guidelines and iPhone icon guidelines to help you through this process but we will discuss the basics to get you going.
In the past with websites we only had to identify a favicon (16×16 pixels) that would show up in the address bar next to the website URL. You would either link a PNG or ICO file directly and this was all that you needed to do.
<link rel=”icon” href=”/images/favicon.png”/>
<link rel=”shortcut icon” href=”/images/favicon.ico”/>
For mobile devices you have a whole new set of options available to you. Besides the tags mentioned above you can now identify an icon for iPhone, iPod Touch and Android devices.
<link rel=”apple-touch-icon” href=”/images/favicon-ios.png”/>
<link rel=”apple-touch-icon-precomposed” href=”/images/favicon-ios.png”/>
Older Android devices (1.5, 1.6) will see the precomposed icon and newer versions (2.1+) will use the alternate. Apple recommends a 114×114 pixel (high resolution) icon for their retina displays and the same image can be used for Android to achieve a better quality result.
The above code will work seamlessly with iPhone and iPod Touch but will not always display correctly for Android. There are issues when using an SSL certificate that is expired or differs from your domain and HTC phones will only overlay a small version of your icon when saved. You may also want to look into web capable content, status bar style and start up image for further Apple device customization.
<link rel=”Shortcut Icon” type=”image/ico” href=”/images/favicon.ico” />
<meta name=”apple-mobile-web-app-capable” content=”no” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />
<link rel=”apple-touch-icon” href=”/images/favicon-ios.png” />
<link rel=”apple-touch-startup-image” href=”/images/loading.png” />
Pixel Aspect Ratio
The variety of available display sizes makes for a difficult decision when creating your mobile website. As we discussed before, it’s best to narrow down your customer base and make a decision from there. You can decide to move forward with a fluid layout or create layouts for specific groups of devices. Remember the chart we looked at earlier with the iOS and Android resolutions? Instead of creating a universal layout you can instead design depending on the current device resolution and orientation. With the implementation of CSS3 media queries you no longer have to rely wholly on javascript of detecting user agents.
Compare the slight size resolution differences between pixel aspect ratios for 1, 1.5 and 2.
CSS3 media queries give developers the ability to target devices by using variables for device width, orientation and pixel aspect ratio. You can use these variables to load specific styles when developing for mobile devices. For instance the iPod Touch, iPhone, iPhone 3G and iPhone 3GS (pixel-ratio: 1) all utilize one pixel aspect ratio. You can target all of these devices very simply and target iPhone 4 (pixel-ratio: 2) and Android devices (pixel-ratio: 1.5) separately. If you were trying to create a graphic heavy website with a flexible background image, your CSS may look something like this:
#container {
height: 675px;
width: 100%;
margin: 0 auto;
padding-top: 0px;
background: url(/images/675x675.jpg) no-repeat left top;
background-size: 100%;
}
@Media only screen and (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 480px) {
#container {
width: 583px;
background: url(/images/640x750.jpg) no-repeat left top;
}
}
@Media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
#container {
background: url(/images/480x854-70.jpg) no-repeat left bottom;
height: 854px;
}
#main {
background: url(/images/bgContent-group.png) no-repeat -20px 5px;
}
#main #video {
padding-left: 61px;
}
}
@Media only screen and (-webkit-min-device-pixel-ratio: 2) {
#container {
width: 583px;
}
}
@Media all and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2) {
#container {
width: 950px;
}
}
body.alt {
background-repeat: repeat-x;
}
The above example may be a bit heavy for starters but it gives you a great idea of the versatility that CSS3 media queries bring to developing for mobile websites. You can alter the container width and serve up different images with a few steps. You don’t want to deliver a different experience on separate devices but rather the same experience, seamlessly across multiple devices. It is also good to remember that that hiding images with media queries doesn’t necessarily mean they won’t be downloaded
Saving Images
When working with mobile devices, fast load times are important more than ever because users are on the go and want content NOW. Because the website resolution is close to a standard desktop for iPhone 4 and Android devices, you want to pay close attention to file size and cut it down whenever possible. A great way to speed up your website is by optimizing your images using Adobe Photoshop. Avoid using “save” or Save as” and instead utilize the diverse “save for the web” feature. This will help you compare image quality, file size and make adjustments where needed. By learning about the different options available, you can optimize images, create presets and drastically change file size.
There are three main formats that you work with when creating a website and they all have specific uses depending on the image being saved.
- .jpg is a commonly used method of lossy compression. The compression levels can be adjusted and works great for photographs.
- .png is a bitmap image format with lossless compression. There is a limited color range but works well with transparency.
- .gif is a bitmap image format with lossless compression. There is a limited color range and .png typically turns out better quality.
You can notice when comparing the images that used the “Save For Web” feature in Photoshop there is little noticeable difference between High quality (36KB) and Medium quality (8KB). There is however, a file size difference of over 28KB (80 percent). The low quality (4KB) image has a noticeable quality difference and does not differ much from the medium quality in file size.
.gif (16KB) and .png (16KB) utilize lossless compression and have a restricted number of colors which produce higher quality graphics for icons and plain graphics. .jpeg (24KB) is best specifically for photography and when comparing quality and file size.
By paying close attention to file size and what images work best for your needs, you can serve up websites faster for mobile phones and on the web. Faster load times will incubate a positive user experience and save server bandwidth. Slow load times can drive away users from a website even if it has valuable content. Speeding up your website is a great way to prevent this. Because mobile devices utilize slower data transfer rates
The avg. download speed between the AT&T, Sprint, T-Mobile, and Verizon 3G networks was 987Kbps. Some providers may throttle users that exceed a monthly data limit to significantly lower data rates (ie: T-Mobile reduces download speeds after customers reach a 5GB limit). – PCWorld & Novarum Inc ’09-’10 Study
Video
When planning on delivering video to a mobile device there are various options available to you, though some devices are limited. If you are creating a one-page promotional mobile website that will only be online for a few months, YouTube would be a great option. If the mobile website will receive many viewers and have an extended life, perhaps streaming via a CDN is your best option. Today most smartphones can play videos from YouTube, Vimeo and even a CDN by streaming them without conflict. Others however, such as the Windows 7 Phone cannot since it is still catching up and uses IE6 as its base browser. To get around this, you must download a low resolution video to the device and play it locally.
In the above example you can see a placeholder image is used instead of immediately displaying a YouTube video.
You can also see an HTML5 embedded video, where the browser is able to display the MP4 file just like it would an image.
<article>
<video>
<source src="/files/368x208-low.mp4"/>
<source src="/files/368x208-low.ogv"/>
<video>
<p>
<input type="button" id="play" value="play">
<span id="position">00:00</span> / <span id="duration>
</p>
<article>
Unsupported Devices
If you decide you only want to support specific mobile devices and offer a different experience for others, this can be done easily. For example, you can create a graphic website for smartphones and a text only version for older devices. If you wish, you can even block users from viewing the website via PC or laptops (though not highly recommended). By utilizing the CSS3 media queries as a catch all, you can pass all other visitors into an”unsupported” area with alternate content. If you are interested in utilizing progressive enhancement over degrading gracefully, you should read Where Progressive Enhancement Meets Graceful Degradation and Progressive Enhancement in Mobile Design.
Utilizing a more specific method of detection with user agent (as mentioned user pixel aspect ratio above) you can send users to a specific version of the site (eg unsupported for text only). The user agent refers to the software that someone is using to browse your site (eg iOS iPhone). You can use a script that will identify this and serve up separate content. There are two approaches to using mobile specific style sheets, by including a mobile specific stylesheet in your HTML or by importing mobile specific rules through an existing style sheet.
body.unsupported {
background: #01536b;
}
body.unsupported #container {
background: none transparent;
width: 480px;
margin: 0 auto;
color: #002639;
text-align: center;
height: auto;
margin-bottom: 40px;
}
body.unsupported #container #pageBody {
width: 440px;
text-align: left;
margin-top: 20px;
border: 1px solid #fcefa1;
background: #fbf9ee;
padding: 20px 20px 10px;
Tracking
When working on any marketing campaign, tracking is essential, though often forgotten on the mobile world. With the array of websites that generate a QR Code and MS Tag for free, many do not offer tracking. Why wouldn’t you want to know who is visiting your website? If you decide to go with the old QR Code or new MS Tag, make sure there is built-in tracking! You can always use Google Analytics in your code to track, but I only suggest this as a catch-all backup plan. Tracking is free, offers great insight on your visitors and their devices.
Google Analytics will display visitor browser and OS combinations among other information.
When considering which tag to move forward with, QR Codes have been around since 1994 in Japan and are built-in to Android devices for scanning. MS Tag is fairly new but works on multiple devices just the same. The advantage comes in with size in addition to tracking. If you are planning on placing a code on product packaging, a business card or even the window of an establishment, size is important.
By comparing the size differences above you can see that there is a key advantage in using the 3/4″ MS Tag over the 1″ size. Microsoft displays the QR slightly larger at 1.25″ on its website to sway users perspectives.
Here is the minimum dimensions for each:
- MS Tag (color): 0.75 inch
- MS Tag (b&w): 0.875 inch
- QR Code: 1 inch
Another factor that comes into play over size, is the ability to alter where to send your users with the generated code/tag. Once a QR Code is generated it is permanently linked to whatever has been programmed into the code. Made a mistake and it’s already printed? You can’t change it now! MS Tags can be switched at any time, redirecting users to a new message, website, SMS, video, audio, or phone number. In this fast paced world you can use the same code for a particular client, for multiple campaigns and track them without ever changing the tag. While both tags are free for the time being, Microsoft has mentioned interest in charging in the future.
During the beta period, there is no charge to create and use Tags. And in the event that Microsoft decides to charge publishers to use Tags, any Tags that were created and used during the beta, will continue to work, free of charge, for at least two years. – Microsoft
Example Mobile Campaigns
Sean “Diddy” Combs
Sean “Diddy” Combs a United States music artist launched a social campaign titled the “12 Days of Tagâ€�. This campaign promoted the release of his album Last Train to Paris and a $50,000 donation to charities. Diddy used Twitter to promote an exclusive giveaway to his millions of followers by giving away details on how to find the content, scan the MS Tag and unlock gifts. Participants were given exclusive content and the ability to help decide which five charities to deliver a $10,000 donation to.
Cheeseburger in Paradise
In a national campaign, Cheeseburger in Paradise restaurants partnered with beverage makers to run a promotional campaign using MS Tag. By scanning a flier at one of the restaurants 31 locations, users were directed to a video and additional information on contest entry. By ordering one of two signature drinks or joining in a photo submission contest, participants could win an all-inclusive trip to Cancun, Mexico. In addition, all participants qualify for a free appetizer card in the process.
View mobile-only website
Harrah’s Entertainment
In a national campaign, Harrah’s in partnership with Crown Royal ran a promotional football promotion utilizing MS Tag. They placed a scannable tag on printed table toppers during football game events where guest can see unique content. Guests were treated with a specific location on the Crown Royal website where they were able to look up drink recipes that included the beverage makers product.
Ben & Jerry’s
Ben & Jerry’s partnered with Stickybits in a national retail campaign utilizing barcode scanners on smartphones. Users were encouraged to scan the barcode on a newly launched fair trade ice cream to enter a contest. The first 500 users to scan the new flavors could win free products and a branded T-shirt.
View campaign details
ESET Anti Virus
As a four part scavenger hunt, ESET targeted South by Southwest (SXSW) conference attendees in Austin, TX with a QR Code. Participants scanned various QR Codes that offered up useful clues that brought them to specific locations. Including brand installations at these specific locations, the anti-virus software maker gained maximum exposure. The first 200 participants to complete the four part scavenger hunt were given a free gift (the companies software) and were entered in a contest to win a Sony VAIO laptop.
View campaign case study
Smyth Jewelers
There have been many brazen Christmas promotions seen in the past, but none as forward thinking and bold as the Smyth Jewelers 15 Days, 15 Deals Christmas campaign using a QR Code. This retailer placed a 20×20 banner on their building exterior on that could be seen by passers by at the nearest intersection. Users who scanned the QR Code on the building in addition to their social media promotion were directed to a landing page with their seasonable promotions.
View campaign details
Perhaps the best “15 Days, 15 Deals� special is an autographed official NFL football signed by Baltimore Ravens running back Ray Rice, which comes with the purchase of a TAG Heuer or Breitling watch. Smyth Jewelers is the preferred jeweler of the Ravens and this gift with purchase reinforces that valuable brand tie-in.
Allure Magazine
Allure Magazine utilized their August 2010 issue to giveaway free beauty products to readers. By creating a series of mini sweepstakes with MS Tag, readers signed up for the contest and were notified via SMS about future giveaways. The US fashion publication gave away a total of $725,000 in free beauty products to readers and the mobile tags increased entries by 28 percent.
View campaign details
Wilkinson Sword
Wilkinson Sword launched a country-wide POS campaign in the UK using QR Code. Featuring their new Hydro Razor 5, the encouraged shoppers to scan the code and access product videos and enter into a contest.
View campaign details
Colorado University
Boulder Digital Works of Colorado University launched a mobile scavenger hunt using MS Tag. The University created the game Zombies vs. Hippies to encourage students to scan posters located around campus to participate in various missions.
View campaign news
Boondoggle Lifelabs
Boondoggle Lifelabs launched a country-wide campaign in Belgium, using QR Code. Developing Likify, a service which allows marketers to add mobile tags to products and signage. When people scan the codes with their smartphone it will “like” the scanned item on the associated brand’s Facebook page. Nike used Likify in a campaign to promote their shoes by getting people to “likeâ€� different jogging routes.
View campaign details
Conclusion
As you continue to take advantage of new technology, moving with the mobile market and not being left behind is important. Implementing new technology as it hits the market, testing new innovative ideas and saving clients money will be beneficial in the long-term. While some technology may fade away, staying on the cusp of growth will help keep the market thriving and meet users ever expanding expectations of how a device and website should perform together.
Most popular activities on the mobile Web are mobile search, reading news and sports information, downloading music and videos, and email and instant messages. In the future, money transfer; location-based services; m-health and m-payment will be key drivers. – IDC
Whether you are using framework or implementing the code yourself, HTML5 with CSS3 will continue to drive the future of mobile website and application development. As elements and authoring practices for this emerging technology continue to evolve, the adaptation will continue to grow. Have you used HTML with CSS3 to build a mobile website or web application? Sound off in the comments below!
Resources
- How-To Minimize Load Time for Fast User Experiences
Experienced front-end developers optimize their site to load quickly and display accurately across all modern browsers. Learn how to analyze the bottlenecks preventing websites and blogs from loading quickly and how to resolve them. - Speed Up Your Website with Better Image Optimization
We all know the importance of load time for faster user experiences and why it’s important to have them. Learn how to optimize images in Photoshop for better web performance. - 5 Cross-Platform Mobile Development Tools You Should Try
Cross-OS platforms for mobile development on the whole are not yet a completely perfect, have-your-cake-and-eat-it-too solution, but many of them offer an excellent alternative to ignoring one mobile OS in favor of another or, perhaps worse, burning serious resources to develop for two or three platforms at once. - jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets
A unified user interface system across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design. - HTML 5 Resources
This site, the HTML5 Playground, Studio, and Presentation slides are all open source projects. Tweak the code or contribute new guides! - Estimates of Mobile Phones and Smartphones supporting HTML5
Discover which mobile phones or smart phones support HTML5 and what they are expected to support in the future. - Future Of Mobile Tagging Report
Mobile tags and QR Codes provide an exciting opportunity to interact with customers in ways not previously available to marketers. This report shines a light on to the work of other marketers to both inspire you and present some mobile tagging options as you consider your next campaign. - Infographic: Mobile Statistics, Stats & Facts 2011
Microsoft Tag has just released a neat infographic highlighting statistics on how people are using mobile phones in 2011. There is also a video that featured late last year with an array of great mobile “growth� statistics, stats and facts for 2011. - Global Mobile Statistics 2011
The essential compendium of need-to-know statistics. Beware of media hype and mobile myth – put your mobile strategy on a sound footing with the latest research from credible independent experts. Global mobile subscribers, handset sales, mobile Web usage, mobile apps, mobile ad spend, top mobile operators and mobile financial services. - Progressive Enhancement in Mobile Design
When designing for the mobile web there are many variables to take in to consideration. Probably one of the biggest hurdles is designing for the such a wide variety of devices. There are the high-end devices like the iPhone, Android and Palm OS devices. Then there are lower level devices that can’t render high-end styles. That’s where progressive enhancement comes in. - Where Progressive Enhancement Meets Graceful Degradation
Two important web development philosophies are often at odds when it comes to using new or advanced technologies and supporting older browsers or low bandwidth connections. But as is the case with many polemic arguments, the best practice may reside on the middle ground between these two positions. - Industry briefing Mobile Industry Trends 2011
Predictions and trends for the coming year with an assessment of the market. - Mobile and HTML5 <video> in Action with Brightcove
Brightcove Smart Players automatically detect playback environments and device capabilities to dynamically deliver the appropriate rendition and format, so you can embed a single Brightcove player to deliver video in both Flash and HTML5.
(rb)
