Making The Most Of Mobile

50 %
50 %
Information about Making The Most Of Mobile

Published on December 15, 2008

Author: Suzzicks

Source: slideshare.net

Making the Most of Mobile By: Cindy Krum Rank-Mobile

Making the Most of Mobile

By: Cindy Krum

Rank-Mobile

Overview Observations Many aspects of Mobile Optimization follow Traditional SEO Wisdom An Optimal Mobile Experience = Return Mobile Traffic = Better Results in Mobile Search Engines Device Independence: Traditional sites being viewed on Mobile Technology (Device Independence: http://www.w3.org/2001/di/ )

Many aspects of Mobile Optimization follow Traditional SEO Wisdom

An Optimal Mobile Experience = Return Mobile Traffic = Better Results in Mobile Search Engines

Device Independence: Traditional sites being viewed on Mobile Technology (Device Independence: http://www.w3.org/2001/di/ )

Overview What is Different About Mobile Industry in its Infancy Different Bots/Crawlers Slow Download Speed & Connectivity Issues Very Different Results Pages ( http://searchengineland.com/070920-090609.php )

Industry in its Infancy

Different Bots/Crawlers

Slow Download Speed & Connectivity Issues

Very Different Results Pages ( http://searchengineland.com/070920-090609.php )

 

Overview Outline Development Best Practices SEO Best Practices

Development Best Practices

SEO Best Practices

Development Best Practices

Development Best Practices: Code in XHTML Traditional Browsers are Forgiving - Mobile Browsers are Not Infinite Handset/Browser/View Setting Combinations Possible Rigid Accessibility Standards Make it Ideal

Traditional Browsers are Forgiving - Mobile Browsers are Not

Infinite Handset/Browser/View Setting Combinations Possible

Rigid Accessibility Standards Make it Ideal

Development Best Practices: Use an External CSS External CSS is Ideal for Mobile Separates Content from Design Minimizes Code Decreases Load Time (External vs. Embedded) Ensures Correct Display on Different Screen Resolutions-(Use %’s and relative positioning.) Use the <link> Element to Attach Stylesheets (Some handhelds don't recognize @media or @handheld http://mezzoblue.com/tests/mobile/ )

External CSS is Ideal for Mobile

Separates Content from Design

Minimizes Code

Decreases Load Time (External vs. Embedded)

Ensures Correct Display on Different Screen Resolutions-(Use %’s and relative positioning.)

Use the <link> Element to Attach Stylesheets (Some handhelds don't recognize @media or @handheld http://mezzoblue.com/tests/mobile/ )

Development Best Practices: Have a Mobile Specific CSS Use multiple style sheets: Use a “screen” style sheet for traditional computers, and “handheld” for mobile devices. Use &quot;display: none&quot; to hide elements in either rendering. <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; href=&quot;screen.css&quot;/> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;handheld&quot; href=“handheld.css&quot;/> Caveat: “display:none” Elements can Still Effect Download Speed on Mobile

Use multiple style sheets: Use a “screen” style sheet for traditional computers, and “handheld” for mobile devices.

Use &quot;display: none&quot; to hide elements in either rendering.

<link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; href=&quot;screen.css&quot;/>

<link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;handheld&quot; href=“handheld.css&quot;/>

Caveat: “display:none” Elements can Still Effect Download Speed on Mobile

Development Best Practices: iPhone Optimization Tips iPhone Illustrates the Idea that There is One Web Google Currently has a Separate Search Page for the iPhone: http://www.google.com/uds/samples/iphone/isearch.html iPhone Ignores the ‘handheld’ Media Designation. The iPhoene Metatag: <meta name=”viewport” content=”width=808” /> Tells Mobile Safari that the page was built with the iPhone in mind

iPhone Illustrates the Idea that There is One Web

Google Currently has a Separate Search Page for the iPhone: http://www.google.com/uds/samples/iphone/isearch.html

iPhone Ignores the ‘handheld’ Media Designation.

The iPhoene Metatag: <meta name=”viewport” content=”width=808” /> Tells Mobile Safari that the page was built with the iPhone in mind

 

SEO Best Practices

SEO Best Practices: Quick Wins Follow all Traditional & Local SEO Best Practices Provide Info Relevant to Mobile Users Submit your Site to Mobile Search Engines Don’t Rely on: Embedded Images Objects Scripts Frames Flash Pop-up Windows Mouse-Over Events

Follow all Traditional & Local SEO Best Practices

Provide Info Relevant to Mobile Users

Submit your Site to Mobile Search Engines

Don’t Rely on:

Embedded Images

Objects

Scripts

Frames

Flash

Pop-up Windows

Mouse-Over Events

SEO Best Practices: Testing Test with Mobile Devices & Device Simulators Opera: http://www.opera.com/download/ Skweezer: http://www.skweezer.net/ Google: http://www.google.com/gwt/n Test Transcoded & Non-Transcoded Versions of Your Site Validate your Site with Mobile Code Checkers Mobi Ready: http://mr.dev.mobi/ W3C Mobile Web Best Practice: http://validator.w3.org/mobile/

Test with Mobile Devices & Device Simulators

Opera: http://www.opera.com/download/

Skweezer: http://www.skweezer.net/

Google: http://www.google.com/gwt/n

Test Transcoded & Non-Transcoded Versions of Your Site

Validate your Site with Mobile Code Checkers

Mobi Ready: http://mr.dev.mobi/

W3C Mobile Web Best Practice: http://validator.w3.org/mobile/

SEO Best Practices: Mobile Navigation JavaScript Navigation will Display in it’s Entirety-Not Always a Good User Experience Adjust the Physical Order of Source Content Use Optimized Internal Jump Links Have Mobile Site Map (and Submit it!) Make Phone Numbers & E-mail Addresses Click-able <a href=“tel:3035651100”>303-565-1100</a> <a href=“mailto:cindy.krum@bluemoonworks.com” > cindy.krum@bluemoonworks.com</a>

JavaScript Navigation will Display in it’s Entirety-Not Always a Good User Experience

Adjust the Physical Order of Source Content

Use Optimized Internal Jump Links

Have Mobile Site Map (and Submit it!)

Make Phone Numbers & E-mail Addresses Click-able <a href=“tel:3035651100”>303-565-1100</a> <a href=“mailto:cindy.krum@bluemoonworks.com” > cindy.krum@bluemoonworks.com</a>

 

 

“ So if you’re someone who happens to design things for the web, well, I think you can see that you can either start designing now with mobile viewing in mind — instead of designing exclusively for the un-mobile web — or you can play catch-up later, after you finally get hip.” -Michael Smith, Oreillynet.com You're a Fool to Design only for the Un-Mobile Web, December 22, 2005.

“ So if you’re someone who happens to design things for the web, well, I think you can see that you can either start designing now with mobile viewing in mind — instead of designing exclusively for the un-mobile web — or you can play catch-up later, after you finally get hip.” -Michael Smith, Oreillynet.com You're a Fool to Design only for the Un-Mobile Web, December 22, 2005.

Add a comment

Related presentations

Related pages

Making the Most of Mobile | Mobile | The Apps Show - YouTube

Working on your mobile device may be convenient, but if you're not careful, you'll run out of battery all too soon. Come learn about making the ...
Read more

Making the most of mobile: Fetch’s James Connelly talks ...

It is only after lengthy tenures that most marketing entrepreneurs feel ready to start their own agency. Fetch founder James Connelly took the plunge when ...
Read more

Making the most of Mobile - GpsGate - GPS Tracking your way

Making the most of Mobile There are lots of features in the Mobile plugin that are all designed to help both vehicle operators and fleet managers while ...
Read more

Making the most of mobile | Opinion | Research Live

The industry is approaching a tipping point in terms of mobile use, says Stefan Schäfer. He offers his thoughts on how harnessing mobile technology can ...
Read more

Making the most of mobiles - Livemint

The Telecom Commission plans to use Rs.3,000 crore from the Universal Service Obligation Fund (USOF) to provide mobile connectivity to 56,000 villages ...
Read more

Making the most of Azure Mobile Engagement | Blog ...

Since Azure Mobile Engagement became generally available a few months ago, we have been working hard to improve the service and build exciting new features ...
Read more

Making the Most of Mobile with Chris Ferdinandi

Resources: Free Course on Mobile Strategy; WordPress Theme; Download Full Transcript. Enjoy Driving Participation! If the program is helpful to you, please ...
Read more

Making the most of ‘mobile moments’ to transform the ...

Making the most of ‘mobile moments’ to transform the customer ... mobile moments' and making the most of ... most basic level a ...
Read more

Making the most of mobile: how business continuity and DR ...

Making the most of mobile: how business continuity and DR plans will have to evolve too Print; Details Published: Wednesday, 20 January 2016 19:16
Read more

Making the most of mobile - FT.com - Financial Times

Mobile web is finally the new big thing. We have heard that many times in the past, but now it is true. As well as all the statistics showing that smart ...
Read more