make a mobile web site

Sante Strategies ׀ Web Strategy Consulting ׀ www.santestrategies.com

Making a Mobile Website


Overview of Presentation• Shared Vocabulary

– What is Mobile• Mobile Ecosystem

– Devices, Phones, Browsers, Etc• Entering the Ecosystem

– Apps, Mobile Web, Text/SMS• Why You Need to Mobilize• Where We Are in Mobile (1999 -> 2010)• Mobile Strategy• Mobile Context• Mobile is Different• Mobile User Experience• Mobile Design & IA – Basic Best Practices• Options in Mobile

– Current Site, Microsite, Others– External Tools, Hosted, Others

• Making the Decision• Getting Ready• Reminders• Resources


SHARED VOCABULARY


What is “Mobile”The word “Mobile”:• mobile, nomadic, roving wandering

(migratory) "a restless mobile society"; • mobile (moving or capable of moving

readily (especially from place to place)) "the tongue is...the most mobile articulator"

• mobile (having transportation available)• mobile (capable of changing quickly

from one state or condition to another) "a highly mobile face"

• mobile (affording change (especially in social status)) "Britain is not a truly fluid society"; "upwardly mobile“

- Princeton’s WordNet, http://wordnet.princeton.edu

The technology term “Mobile”:• The definition of “mobile” in the

technology vernacular is in flux. • Some include laptops – which are

“capable of moving readily”.• Others focus on what type of

connectivity is in use.• For our purposes, the use case is the

most relevant.

“Laptops are more like PCs than mobile phones, and iPads are more like mobile phones than like laptops.”

•http://moconews.net/article/419-cnn-offers-one-definition-to-answer-the-question-what-is-mobile/

http://wordnet.princeton.edu/



http://moconews.net/article/419-cnn-offers-one-definition-to-answer-the-question-what-is-mobile/

http://moconews.net/article/419-cnn-offers-one-definition-to-answer-the-question-what-is-mobile/


MOBILE ECOSYSTEM


Diverse Ecosystem

• Many types of – Devices (phones - but also iPad, game consoles, etc)– Phones

• Platform (iPhone, Blackberry, Nokia, etc)• Type of Phone

– Screen Size & Resolution– Input Types– Features (camera, etc)– Memory Phone

• Operating System• Operator Customizations to the Phone

– Browsers– Connection Speeds & Issues

• 2G, 3G, 4G, etc• Connectivity issues (network capacity, lack of coverage, etc)


“Build for more than one device. No device will be dominant. No, not even that one.”

- Design4mobile, Full Browsershttp://patterns.design4mobile.com/index.php/Full_browsers

Blackberry, Android and Symbian all outsell iPhone as a platform.

http://blogs.barrons.com/techtraderdaily/2010/10/05/android-phones-outsell-iphone-blackberry-in-us-nielsen-says

And smartphones account for only 17% of US mobile phone penetration. **

http://articles.cnn.com/2010-09-30/tech/gahran.smartphone.ownership_1_feature-phones-cell-phone-smartphones?_s=PM:TECH

** That said, Nielsen predicts that more Americans will have smartphones by the end of 2011 than feature phones

http://blog.nielsen.com/nielsenwire/consumer/smartphones-to-overtake-feature-phones-in-u-s-by-2011

http://patterns.design4mobile.com/index.php/Full_browsers

http://patterns.design4mobile.com/index.php/Full_browsers



http://articles.cnn.com/2010-09-30/tech/gahran.smartphone.ownership_1_feature-phones-cell-phone-smartphones?_s=PM:TECH




Diverse Ecosystem Devices (Phones - But Not Just Phones)• More than just phones

– Kindle– Tablet PC– iPod Touch & other wired

mp3 players– Some GPS systems– Video game consoles– Home entertainment systems– Etc.

• But mainly phones– Smartphone– Feature Phone– Standard Phone


Diverse Ecosystem:Types of Phones – Smart, Clever, Etc

Platform + Device• iPhone• Android• Blackberry• + many, many types of feature phones


Diverse Ecosystem:Phone Models

Even with in the same platform, there are major differences in phone features & capabilities.– Memory– Battery life – Screen Size

• Many ranges: 84-132px, 160-176px, 208-240px, 320-480+px

– Input Types (touch screen, keypad, click wheel, etc)– Other Phone Features (camera, music player, etc)


Diverse Ecosystem:Operator Customizations to Phone

• Device application controls

• Network controls• System integration• Access to hardware

Example:Phone companies can affect search results.

When you go to Google search on AT&T phones, it creates a cookie and then delivers select results within the search.


Diverse Ecosystem:Browsers

There are hundreds of mobile browsers, though on smartphones there is more consistency.

- http://www.flipcorp.com/en/blog/read/blog/the-right-way-to-build-a-mobile-site.html

http://www.flipcorp.com/en/blog/read/blog/the-right-way-to-build-a-mobile-site.html


ENTERING THE ECOSYSTEM – APPS, MOBILE WEB, TEXT


Shared Vocabulary - TechnologiesThe Mobile Pyramid

• Mobile Apps– Native– Non-Native– Hybrid

• Mobile Web• SMS/Text

http://www.pointabout.com/understanding-the-mobile-landscape/the-mobile-pyramid/




Mobile Web vs Apps6 Benefits of Mobile Web

1. Anyone with mobile web access can visit your site.– No need to download anything.

2. Not platform/device specific – so you only have to develop one version.– Apps are developed for individual platforms.

3. Users can click on an email in their phone – and be directed to that URL (or a redirected page).– Apps can’t open webpages.

4. Feature phones can access mobile websites. – And if you develop properly, it will even be a good experience.

5. You can develop a mobile website for very little $– It might take a little more to do it well and make it seamless (and to include the proper

redirects from your website). But it will still be a fraction of developing an app for a single platform.

6. Update model is simple.– Just like editing a website. And with RSS, you can auto-update some pages.

NOTE: Apps have a place in the mobile world – but unless you have a compelling reason to develop an app, work on a mobile website first.


Mobile Web and Text/MMS/Social/Email

• Mobile web plays nicely with text, IM, social tools (Facebook, Twitter etc) and email.

• URLs can be received by a user and then open the website on a mobile phone.


WHY YOU NEED TO MOBILIZE


Growing Fast

• 30% of mobile phone users browse the mobile web

• 1 in 5 phones are smart phones• Smart phone adoption rising by 85% a year• Mobile will eclipse desktop by mid 2013

- Comscore, The State of Mobile, June 8, 2010

• Last year, mobile web usage increased 148% worldwide.

- 2009 Mobile Trends Reporthttp://www.quantcast.com/docs/display/info/Mobile+Report


Coming, Ready or Not

“Simply put, we [consumers] expect more, all the time. Instead of thinking about whether mobile is big enough, we should be thinking about what expectations we’d actually be failing to meet without a thoughtful approach to mobile in place.”

- 10 Tips for Creating a Winning Mobile Strategyhttp://www.clickz.com/clickz/column/1721831/tips-creating-winning-mobile-strategy


50% Won’t Come Back

• Bad experience = lost users• More than half of users are unlikely to return

to a website that they had trouble accessing from their phone– Gomez, Why The Mobile Web Is Disappointing End-Users,

http://gomez.com/resources/whitepapers/mobile-survey-whitepaper

http://gomez.com/resources/whitepapers/mobile-survey-whitepaper


Converging Trends

• 3G/4G• Impact of Social Networking• New mobile devices• Touch Screens and enhancements to the user

experience• Plus the network effect• Friend has a phone, I am more likely to get a

phone


WHERE WE ARE


Back to 1999 – For Developers

For Web Developers, 1999 was the Wild West.There was a lot of really cool stuff going on – but it was also insane.• Undefined, inconsistent terminology• Few standards• Proprietary systems & walled gardens

– Little convergence– Fragmentation– Remember the browser wars?

• Rapid change...and in an undefined direction– Lots of great business ideas– Since we didn’t know the trajectory

• Success undefined• Business model undefined


And we adjusted...

• Cross-browser compatibility• File size and weight• Concerns about image size


2010 - Similar for Mobile• Undefined, inconsistent terminology

– What is mobile? What qualifies as a mobile device?– And what isn’t mobile? We know a desktop isn’t – but what about a laptop?

• Standards but not consistently enforced• Proprietary systems & walled gardens

– From a consumer perspective, leads to a lot of confusion.– Little convergence– Fragmentation– Remember the browser wars? Now platform wars?

• Rapid change...and in an undefined direction– Lots of great business ideas– But no real certainty about where this new communication tool will take us.– Leaving...

• Success undefined• And business model undefined

If you need proof –just look at search. Google is still figuring out what mobile search looks like. And the results, thus, are always changing.


Back in 1999 - For Users

• For most users in 1999, the internet was like a bonus item – a new toy.

• Most accessed the web at work.• Not integrated into the rest of life (except for geeks)• Significant barriers to entry

– Had to have a PC– Had to have an internet connection– Had to make that work

• Provided new options– There was a lot of excitement.– And not a great deal of critique.


Different This Time

• Mobile adoption is different and more rapid. • Very low barriers to entry.– Go to CVS, buy a feature phone, add minutes, go on

the mobile web.• Developers have the same issues • BUT users are more impatient and have much

faster rates of adoption.

This means we don’t have much time to catch-up.


MOBILE STRATEGY


Mobile Strategy – Get One

Strategy can involve a multi-pronged approach to planning for mobile.

For example:• Short term

– Minor modifications• Mid term

– Modifications to mobile optimize your entire site OR– A basic mobile site running in parallel with your main site (i.e.

give them contact info & the basics that they’d want on a phone)• Longer term

– A well-designed & executed mobile site


Mobile Strategy – The StepsWeb is to mobile as print is to web

– Just as print needs to be translated to the web– So a standard website needs to be translated to mobile

Web & Mobile Strategy– Goal of the Project– Audience– Budget– Resources– Etc[For the time, budget, resources, capacity I have, what can I get/do that gives the most value]

• Think about– What users want/need– What you want/need– What you can afford in time, capacity, $, political capital, etc

• Remember that users don’t always know what they want/need• Remember that managers don’t always know what they want/need


Basic Elements of Mobile Strategy• Consider your users

– Where they are today– Where they will be tomorrow

• Consider devices– Plan for Android and other new entrants– Where they are today– Where they will be tomorrow

• Consider the technology– Plan for today– And plan for HTML 5

• Consider the context– Mobile context is different– Plan for the limitations– Capitalize on the strengths


MOBILE CONTEXT


Mobile Intentions

- RuderFinn Intent Index, http://www.intentindex.com/mobile/


Context

“Context is about understanding human relationships to the people, places and things in the world”

- Adaptive Path, Mobile User Experiencehttp://www.slideshare.net/Rachel_Hinman/mobile-user-experience-what-web-designers-need-to-know

http://www.slideshare.net/Rachel_Hinman/mobile-user-experience-what-web-designers-need-to-know


The Mobile ContextElements of Mobile Context Include:• Positioning: spatial / location

information, and related (surroundings)

• Point in time• Presence and related status (online,

offline, available, busy, etc)• Handset status and capabilities• Personal context (User Preferences,

calm behavior)• Information Genre, Descriptor tags,

allows for categorization and context based processing

• Social contextMobile Context is the intersection of

these elements

- The Mobile Context, C Enrique Ortizhttp://www.slideshare.net/c.enrique.ortiz/the-mobile-context-and-peoplecentric-mobile-computing

http://www.slideshare.net/c.enrique.ortiz/the-mobile-context-and-peoplecentric-mobile-computing


Mobile Context - Location• Users can be anywhere– Restaurant– Coffee shop– In a meeting– Walking– Babysitting– On metro/bus/train– Still in bed– Driving Photo credit

http://www.flickr.com/photos/yourdon/4502012803/sizes/m/


Mobile Context – Immediacy & Distraction

Visitors in the mobile space are likely to:• Be distracted• Have short attention spans• Be interrupted• Receive a call while browsing


“Context will center on observing patterns, particularly location, presence and social interactions.”

- Gartner, http://www.gartner.com/it/page.jsp?id=1278413

“The most powerful position in the context business model will be a context provider. Web, device, social platforms, telecom service providers, enterprise software vendors and communication infrastructure vendors will compete to become significant context providers during the next three years. Any Web vendor that does not become a context provider risks handing over effective customer ownership to a context provider, which would impact the vendor's mobile and classic Web businesses.”

- Gartner, http://www.gartner.com/it/page.jsp?id=1278413

http://www.gartner.com/it/page.jsp?id=1278413

http://www.gartner.com/it/page.jsp?id=1278413


Consider Mobile Users In A 360degrees Environment

• Mobile users live in a 360 degrees environment– Short attention span– Multi-tasking/wasting time– Sudden interruptions– Momentary social context– On the move

- The Return of Shovelwarehttp://www.dopedata.com/2010/04/19/mobile-content-the-return-of-shovelware

http://www.dopedata.com/2010/04/19/mobile-content-the-return-of-shovelware

http://www.dopedata.com/2010/04/19/mobile-content-the-return-of-shovelware


Mobile is Different

• Mobile is Different• Capitalize on strengths• Be aware of challenges

– so you can find solutions or alternatives• Challenges

– Limited display– Users may be distracted– Power management– Text input challenges– Different navigation options– Slower network (sometimes dramatically)


Differences – Pro & Con

• Personal• Always with me• Always on– So you can remind me of a webinar– So your 4 AM text message may wake me up

• Allows for immediacy


MOBILE USER EXPERIENCE


Mobile vs Tethered

• Desktop– Full sized keyboard– Full sized screen– Multi-key mouse– Power!!

Photo Credit

http://www.flickr.com/photos/netsrac/173500383/


Mobile is Different

• Limited battery life• Small screen• Small keyboard• Limited display

resolution• Varied and inconsistent

keyboard & input options

• Limited CPU and memory

Check out the banana peel!

Photo Credit

http://www.flickr.com/photos/arvindgrover/4638276207/


Wide Range of Content


And Different from Tethered Web


Phone = A Convenience Tool• The phone is a convenience tool and a social tool• The desktop/laptop is a productivity tool• Expectations of each device differ

When I’m in my kitchen, I use my phone to reply to a quick email. >More convenient.

When I’m out with friends, I use my phone to look up a artist we plan to see.>More social.

When I’m in my office, I use my computer. >More productive.


What Users Want

• They want it to work• They want it to be easy• Useful• Fast• Free – or if I have to pay, make it easy. • Simple• Don’t interfere with other uses of the phone– Your use is very often secondary for me

• Don’t’ break anything


MOBILE DESIGN BEST PRACTICES


“For the most part, you won’t need to learn any new technologies for mobile site design. But you will need to look at site design in a different way, one that is decidedly more restrictive than design for standard browsers.”

- Mobile Web Design, Noupe Design Blog- http://www.noupe.com/how-tos/mobile-web-design-tips-and-best-practices.html

http://www.noupe.com/how-tos/mobile-web-design-tips-and-best-practices.html


Be Aware of Context

• Design for Partial Attention and Interruption – Don’t expect to have your users undivided

attention• Simplify, Simplify, Simplify– Distracted users require a reduced cognitive load


Best Practices for Mobile Microsites

• Ensure that clickable areas are obvious• Use drill-down instead of long pages• Navigation should be consistent but not

comprehensive• Place additional links at the bottom but don’t

assume they’ll be found.• Simplify forms


Navigation and Content: Microsites

Navigation – Keep it SimpleOnly the essential elements– Logo and Company Name• Try to keep color and brand consistency across the sites

– Contact Information• Include a phone number even if you don’t provide that

on the main site

– Link to the full website


Best Practices in Mobile Optimization

These guidelines apply to any site rendered on mobile – your full site or a microsite.• Images:

– Use images with only with defined purpose– Resize images to reduce file size– Define image size in HTML– Reduce extraneous images– Slows page load time– Clutters the screen– Removes focus from content

• Layout:– No tables – Use relative units (ems, percentages etc vs pixels, etc)

• ALT tags (images may not load or may be turned off)• Label all form fields• Avoid opening new windows• Make buttons clear and easy to select• Don’t rely on javascript or images for navigation or essential function (as these may be turned off on many

phones)• To consider:

– Color contrast – high is best with low rez screens– Reduce margins & padding


OPTIONS IN MOBILE


Walk Before You FlyYou don’t have to do everything at once...

- Charlie Browninghttp://www.slideshare.net/charlienb/mobile-trends-and-strategies

http://www.slideshare.net/charlienb/mobile-trends-and-strategies


Strategies for MobileOne WebThe Internet is the Internet, and sites should run well on all devices. Optimization should be based on CSS and device detection, but should not change site function or content beyond the necessary.

Mobile WebThe mobile is a different platform with different capabilities and different user needs. Sites should be optimized for mobile in many (but not all) cases.”

Or...A HybridA mix of options based on resources, website capabilities, web platform, plans to upgrade and other factors that provides the best current options and plans for an even better experience later.

- One Web & Mobile Web elements extracted from Barbara Ballard’s piece: http://www.littlespringsdesign.com/blog/2006/Sep/whats-wrong-with-the-mobile-web-part-1/

http://www.littlespringsdesign.com/blog/2006/Sep/whats-wrong-with-the-mobile-web-part-1/

http://www.littlespringsdesign.com/blog/2006/Sep/whats-wrong-with-the-mobile-web-part-1/


Your Approach

One Web:Make changes to your current site to improve user experience.

Mobile Web:Continue to maintain your current site and create a separate site specifically for mobile devices.

Hybrid:Based on your current realities and plans for the future, determine the best mix of options to improve current user experience and plan for the best long-term option for your organization.


Options in MobileMicrosite/Mobile Site• Separate microsite for mobile

phones with redirect.

Mobile Landing Page• Landing page with link to

microsite/mobile specific (without an automatic redirect)

• Landing page with link to App(s)

Current site• Minor Fixes

– Changes that help your site render better on mobile. No differentiation between mobile & desktop browsers (i.e. no mobile detection).

• Mobile OptimizedLite– Major issues are addressed but

efforts are focused on 1) a mobile microsite or 2) a redesign or new WCMS implementation.

• Mobile Optimized– The site is intentionally designed to

display and execute properly on a mobile device.


Mobile Optimize vs OptimizeLiteOptimizeLite In this model you are only trying to make your site “better” as an interim step while you either work on optimizing your site or creating a mobile microsite.

Optimize In this model, you are optimizing your existing site for mobile – making substantial changes to design, navigation, content, etc to improve the user experience on mobile devices.

Which to Choose? It’s about balancing NOW with LATER.You want to provide the best current experience, while leaving time and

resources available for creating a great site later.


Options: Current Site – Minor FixesDefinition: Making updates to your current site that cut down on the primary issues encountered by mobile visitors. These changes will affect all visitors and are really just good design/usability. No differentiation between mobile & non-mobile (so no mobile Optimization or OptimizationLite).

Content: The same content, design and navigation is delivered to desktop and mobile visitors. The rendering depends on the mobile device.

What to Do:- Go through your site and make changes to reduce page load and other issues. - Focus particularly on

- Homepage- Contact page - Any page/section that would be of special interest to mobile users (i.e. news, regularly used reference sections, etc).

- Consider monitoring URLs distributed in email newsletters, through twitter, etc as these may also be accessed on a mobile device.

Details:There are many changes you can make that will drastically improve mobile user experience. A few simple items to consider are below. Review the information in the design best practices for additional information.

• Reduce page load (images, multi-media, extraneous javascript, etc)• Always optimize images/multimedia to reduce size and ensure proper rendering• Reconsider Flash & Javascript (which often aren’t enable on mobile devices)• Test forms to ensure processing works.

– Pay particular attention to search – as mobile users are more likely to search than desktop visitors.• Only new windows in crucial areas – or eliminate them altogether.• Replace image or flash based navigation with text based navigation

– And remember javascript won’t execute so if you use jt, test to ensure the nav still functions properly and subnavs can be accessed.• Reduce repetitious navigation


Options: Mobile OptimizeLite

Definition: Use CSS to display pages differently based on the device. In this model, visitors have access to your entire site – but experience a cleaner version of the site.

Content: Visitors encounter different content based on CSS. Mobile visitors will have a different experience than desktop, based on changes you select.

What to Do:1) Do-It-Yourself

– Define two CSS files – one for mobile and one for desktop.– Use agent detection to determine the device and utilize the appropriate CSS to display the page

2) Use an external tool or site to provide the script.1) Very few tools do this well – be careful that you aren’t making the user experience worse.2) Tools usually “HTML scrape” your site and provide a script for you to embed in your site (similar options to the DIY options above). A few host the

altered site themselves.3) These are generally “one size fits all” tools and may not execute well on your site. Look for options that allow you to edit the script afterwards.

Details:-Look at your site on a series of mobile devices. - Consider making the changes suggested in “Minor Fixes” – these are often easy and impact both mobile and

desktop users (and are accessibility compliant).-If you plan to mobile optimize , consider making substantial changes – but iteratively. - If you don’t plan to mobile optimize, fix the most egregious or those that can be executed quickly.


Options: Mobile OptimizeDefinition: Use agent detection, JavaScript, CSS or a mix to render your site differently for mobile users. This is part of along-term strategy to enhance user experience on your site for visitors on

all devices.

Content: Visitors encounter different content based on CSS. Mobile visitors will have a different experience than desktop, based on changes you select.

What to Do:- Begin with Define two CSS files – one for mobile and one for desktop.- Use agent detection to determine the device and utilize the appropriate CSS to display the page.

NOTE: This model of detection doesn’t work for all devices.

Detection Detecting mobile devices isn’t as easy as it sounds so the best option is to either:1. Find an available script or 2. Use a service (these generally provide you with a script to load on your site that they update).

Where to Find Scripts- For .ASP.NET: http://51degrees.codeplex.com/ - Detecting mobile devices isn’t as easy as it sounds so the best option is to either:

1. Find an available script or 2. Use a service (these generally provide you with a script to load on your site that they update).

- Go through your site and make changes to reduce page load and other issues. - Focus particularly on

- Homepage- Contact page - Any page/section that would be of special interest to mobile users (i.e. news, regularly used reference sections, etc).

- Consider monitoring URLs distributed in email newsletters, through twitter, etc as these may also be accessed on a mobile device.

Details:-As with OptimizedLite, look at your site on a series of mobile devices. - Consider making the changes suggested in “Minor Fixes” – these are often easy and impact both mobile and desktop users (and are accessibility compliant).

http://51degrees.codeplex.com/


Options: Mobile MicrositesDefinition: Use CSS to display pages differently based on the device. In this model, visitors have access to your entire site – but experience a cleaner version of the site.Content: Desktop Visitors and Mobile Visitors see the same content but mobile visitors have an optimized

design and navigation experience , based on changes you select.Options:• Create your own and publish

– Create your own design– Download template– Purchase/download software

• Hosted – No Site Integration– All updating is manual

• Hosted – RSS Feed Integration– You can select pages on your site with RSS feeds and the mobile site will update.

• Hosted – RSS Feed Integration and Initial “Grab” of Your Site.– As above but with additional tools that help you set-up your site (they do an initial “grab” of your pages). You

can then set-up RSS feeds to update pages.• Hosted – Site integration

– Generally, they provide an initial site “grab” and also give you the option of auto-syncing content either with RSS or without (usually they use HTML Scraping which keeps content consistent but doesn’t require RSS)


Options: Mobile Landing Page

Definition: Use CSS to display pages differently based on the device. In this model, visitors have access to your entire site – but experience a cleaner version of the site.Content: Desktop Visitors and Mobile Visitors

see the same content but mobile visitors have an optimized design and navigation experience , based on changes you select.


Redirects

Mobile MicrositesIf you have a mobile microsite, you’ll have a redirect. You can generally rely on a host or external tool to help you with this but if you handle it in house, check out the resources below.

Resources:It’s complicated but if you want to learn more...– http://www.w3.org/TR/mwabp/#bp-devcap– http://mobiforge.com/developing/story/device-detection-cloud-devic

eatlas-personal– http://51degrees.codeplex.com/wikipage?title=EnhanceTutorial– http://webservices.usc.edu/blog/development/mobile_detection/– http://webdesign.about.com/od/mobile/a/detect-mobile-devices.htm

http://www.w3.org/TR/mwabp/#bp-devcap

http://mobiforge.com/developing/story/device-detection-cloud-deviceatlas-personal

http://mobiforge.com/developing/story/device-detection-cloud-deviceatlas-personal

http://51degrees.codeplex.com/wikipage?title=EnhanceTutorial

http://webservices.usc.edu/blog/development/mobile_detection/

http://webdesign.about.com/od/mobile/a/detect-mobile-devices.htm


Hosted Options

There are several types of tools to mobile optimize your website.

1) Site Builder with No Update Option2) Site Builder with RSS feed integration3) Site Builder with RSS feed integration and

advanced tools4) Site Builder with integration with your website5) Site “Mobilizer” which renders your website as

mobile optimized pages


Hosted Options – More Details1) Site Builder with No Update Option2) Site Builder with RSS feed integration3) Site Builder with RSS feed integration and advanced tools4) Site Builder with integration with your website5) Site “Mobilizer” which renders your website as mobile optimized

pages6) Downloadable Options

1) Scripts – free, renders your site in a mobile friendly format2) Scripts – generated by vendor, renders your site in a mobile friendly format3) Software that creates a mobile website that you publish4) Templates that create a mobile website that you publish

Note: Some tools let you edit from your mobile phone


MAKING THE DECISION


Evaluate Your Options:Juggling the Options

On the Horizon• Optimize your main site for

mobile - even if you also have a mobile microsite.

• Because...– Many users visit your main site

after a mobile redirect.– The iPad and similar devices

will change the requirements of mobile.

– Users may seek information only available on your main site.

Right Now• But in the meantime...• Evaluate your options

and, if your site can’t be mobile optimized in the short term, consider a progressive enhancement strategy.


Your Considerations

• Evaluate– Timeframe– Budget– Resources– Buy-in– Capacity– Options

• To get the best options • Move quickly


Your Realities• CMS

– Are there extensions already available? • If your vendor already has extensions, review those to see what options are available.

• How Your Site Was Built– Tables

• If your site is table based, it will probably render poorly no matter which tool you use. Consider building a separate site.

– RSS• If your site isn’t RSS-compliant, you won’t be able to use RSS-feed based external tools. Consider building a

separate site, updating select pages to be RSS-compliant and then creating the update tool

– Use of Flash & Javascript Navigation• If your site uses Flash or Javascript navigation, mobile optimizing will likely fail to render consistently. Consider

building a separate site and replacing the navigation with text based options.

• Content “blocks” and structure• Type of site• Resources

– Technology– Staff Time– Money


Making the Decision

If you are using Wordpress, Drupal or similar open-source CMSConsider add-ons & tools to mobilize you

If you have:- A table-based site- Aren’t RSS Feed ReadyThen...


Not Mobile Ready?Approach the challenge from three directions.

1) Minor Fixes on your main site– Helps with major issues encountered by users– And will make your site leaner, cleaner and more accessible

2) Create a simple mobile microsite a) Use mobile sensing on your main site to direct users to a simple version

of your site.b) Include the basic information desired by a mobile user (contact

information, etc)c) Include a link to the main siteNOTE: Be sure to plan for an update strategy so that this information doesn’t grow stale (i.e. have the

contact email be [email protected] and not [email protected].

3) Begin the process of mobile optimizing your main website.

mailto:[email protected]

mailto:[email protected]


GETTING READY


Online Tools: Mobile Ready & Phone Emulators

Mobile Ready Evaluation SitesTools to evaluate your site. They return specific errors that you can use to determine the best options for fixing your site. • http://mobiready.com/

A service of mobi.forge, a mobile reference and news site.• http://validator.w3.org/mobile/

MobileOK checker from W3C• http://www.gomez.com/mobile-readiness-instant-test

Gomez provides paid services in this area. The readiness check is free.

Emulators – OnlineEmulate/simulate your site on a mobile device.• http://emulator.mtld.mobi/emulator.php

Enter a site to evaluate and select from several devices• http://www.opera.com/mobile/demo/

Enter a site to view it within a simulation of the opera mini browser.

Site Emulators (from mobile tool vendors)Tools that will display your site on an online emulator (as part of the sales process). Not especially robust but worth a quick view.• http://www.bmobilized.com – A basic view• http://mippin.com/web/?p=portal - Emulators for several types of phones (iphone, BB, etc) BUT only for RSS feed sites

http://mobiready.com/



http://validator.w3.org/mobile/



http://www.gomez.com/mobile-readiness-instant-test



http://emulator.mtld.mobi/emulator.php



http://www.opera.com/mobile/demo/



http://www.bmobilized.com/

http://mippin.com/web/?p=portal


Download: Phone Emulators

Phone Emulators – DownloadsPhoney: http://www.marketcircle.com/iphoney/Not a full emulator but displays Safari within an iPhone optimzed environment.

Blackberry: http://na.blackberry.com/eng/developers/resources/simulators.jspEmulators only. Separate from the dev kit.

Developer Kits (including emulators)iPhone SDK: http://developer.apple.com/devcenter/ios/index.action

Android SDK: http://developer.android.com/sdk/index.html

Nokia SDK: http://www.forum.nokia.com/Library/Tools_and_downloads/Other/Series_40_platform_SDKs/

More info on mobile mobile SDKs (including Palm) :http://blogs.walkerart.org/newmedia/2010/04/23/setting-up-smartphone-emulators-for-testing-mobile-websites/

Other OptionsMost Adobe products includes a tool for testing and developing mobile siteshttp://www.adobe.com/products/creativesuite/devicecentral/

http://www.marketcircle.com/iphoney/



http://na.blackberry.com/eng/developers/resources/simulators.jsp

http://na.blackberry.com/eng/developers/resources/simulators.jsp

http://developer.apple.com/devcenter/ios/index.action

http://developer.apple.com/devcenter/ios/index.action

http://developer.android.com/sdk/index.html

http://developer.android.com/sdk/index.html

http://www.forum.nokia.com/Library/Tools_and_downloads/Other/Series_40_platform_SDKs/



http://blogs.walkerart.org/newmedia/2010/04/23/setting-up-smartphone-emulators-for-testing-mobile-websites/

http://blogs.walkerart.org/newmedia/2010/04/23/setting-up-smartphone-emulators-for-testing-mobile-websites/

http://www.adobe.com/products/creativesuite/devicecentral/




Check Your Web Stats• Web Analytics programs include information on:

– Mobile devices– Mobile Carriers– Browsers– Operating systems

• Google Analytics– Visitors > Mobile

• Information on mobile devices and mobile carriers

– Visitors > Browser Capabilities > Browser & OS• i.e. Safari/Android, Safari/iPhone, etc.

• Other Analytics Programs– Most have similar capabilities– If not, you can run GA in parallel (and should for stat validation anyway, IMHO).

NOTE: Analytics is an art not a science – as the information depends on information reported from many devices, many websites, etc. Use the information to guide further research and to validate decisions.


REMINDERS


Speed is Crucial

• 50% of visitors will wait only 10 seconds or less before abandoning a site.

• 1 – 2 – 3 – 4 – 5 – 6 – 7 – 8 – 9 – 10• You’ve just lost ½ your visitors

...and remember, 50% of them won’t try again.


Keep Page Size Lean

• Keep page size lean – Mobile microsite – Page size of <20k– Mobile optimized - Page size <100 k – (brings back memories of early internet days!)

• Use images with purpose or not at all• Be aware of other included items in page

download


Keep Page Size Lean• Bloat can come from more than just images...

Original reference in http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/


Page Titles

• Mobile browsers display 45 characters• Bookmarks display 25 characters


Problems Users Encounter

• Issues with content and screen size (either too large or small)

• Links/actions don’t work• Overlapping/misplaced text/images• Video/audio doesn’t play• Function buttons are missing• Navigation missing or challenging as created

using flash, javascript and/or images.


No more m.

• m.site.com– Google uses this model

• www.site.mobi• www.site.com/m• www.site.com/mobile

• But most search experts tell you that optimizing your current site and displaying information differently provides the best search engine results.

http://www.site.com/mobile


Note on HTML/XML/Etc

While XML or XHTML offer improved options and faster page rendering for mobile, you can code in HTML and CSS.


Plan for Search

• Mobile search engines give preference to mobile optimized sites.

• Readable filenames• If you use a vendor, be sure your domain is

displayed• Don’t redirect to a page deep within your mobile

siteNOTE: For some time Google rated mobile sites higher

in mobile search rankings. This no longer appears to be the case.


Mobile Search Engine Optimization Best Practices

• Short, keyword-rich title tags containing mobile specific keywords• Text-based content or accessible text equivalent• Pages 20k or less• Links to mobile content• Include the word "mobile" somewhere on the page• Include the phone number in the meta description or in the body of the page• Consider the mobile user experience and create content that a mobile user would

appreciate and promote• Mobile keyword research with Google's Mobile Keyword Tool• semantic markup• include your address, if relevant. This will improve performance for local searches.• use well-formed code• Add a meta robots tag with "noindex, follow" to paginated pages.

- Design4Mobile, SEOhttp://patterns.design4mobile.com/index.php/Search_Engine_Optimization

http://www.informationweek.com/blog/main/archives/2007/04/google_lays_out.html

http://www.brysonmeunier.com/google-releases-mobile-keyword-tool-in-adwords

http://patterns.design4mobile.com/index.php/Search_Engine_Optimization


Focus on Users

• There is very little room for error in mobile• Focus on user needs instead of business

model• Don’t focus on technology – that will change.


Make Your Campaigns Measurable

• Getting buy in from decision-makers requires data. Be sure to plan for that information at the beginning of your mobile efforts.


On the Horizon

• HTML 5 – Hooray!!– Plan for it– And plan for backwards compatibility


RESOURCES

make a mobile web site

Technology

mobile phones

definition of mobile

mobile facemobileaffording

hundreds of mobile browsers

technology term mobile

mobile princetons wordnet

mobilethe word mobile

us mobile phone penetration