Mobile Devices Resources

Mittineague · February 4, 2011, 6:09am

TABLE OF CONTENTS
GETTING STARTED - ANDROID DEVELOPMENT
DEVELOPMENT FRAMEWORKS
DESIGN - CSS - DETECTION
EMULATORS
GEO LOCATION
CONVERTING
EMBEDDING
SitePoint
MISCELLANEOUS
Contributors

GETTING STARTED - ANDROID DEVELOPMENT

How about starting here
Smartphone Browser Landscape - A List Apart

Then work your way down the list of topics on the left. It is very in depth and easy to follow. Just one thing to note when doing it, if you add acitivities to your package, you must manually insert them into the manifest.xml file.
Application Fundamentals - Android Developers

Here are a few other links you can also look at when done reading that:
android 10 - www.android10.org
Android Development Community | Android Tutorials - www.anddev.org

DEVELOPMENT FRAMEWORKS

The Only Open Source Mobile Framework That Supports 6 Platforms - PhoneGap
Titanium is Native - appcelerator
Best tools for mobile application development - JavaWorld
Windows Mobile Developer Center

DESIGN - CSS - DETECTION

My current feeling is that it’s better—in general—to work with one site that all devices can use in some way, but that may not suit all sites.

Have a look at this challenging slideshow before you decide how to go about designing for mobile. It’s a bit controversial, and maybe a bit experimental, but it’s great food for thought:
Rethinking the Mobile Web by Yiibu - slideshare

UI Guidelines for mobile and tablet web app design - Mobile Web Programming

Mobile Web - W3C

This seems to be a well respected book by one of the rock stars:
Mobile Web Design - (by Cameron Moll)

EMULATORS

I use online tools to validate my sites and it has built in emulators:
mobiReady

See the links at the bottom of this page…
Firefox Mobile System Requirements - Mozilla
Unfortunately, Firefox Mobile is available on so few devices, it’s hardly worth testing. Hopefully, that’ll change.

behold my ultimate list of various mobile devices you can test on:
Download the Android SDK - Android Developers
Android Emulator - Android Developers
BlackBerry Simulators - BlackBerry
Emulator - dotMobi
iBBDemo2 - Cross Platform iPad and iPhone Simulator - Blackbaud labs
NetFront™ Browser SDK - ACCESS
Nokia Mobile Browser Simulator 4.0 - Forum.Nokia
No More Openwave SDKs? - Wap Review
Opera Mini Simulator - Opera Software
Core Downloads for Windows Mobile - Windows Mobile Developer Center
What more could you want? That list covers every major mobile browsing platform
I wrote an article on mobile best practices and the list at the base of the article is even bigger than this one with plenty more devices to test on
Links at the base:
Mobile Web Design: Best Practices - Six Revisions

MobiOne is awesome -
MobiOne - genuitec

(1) Emulators are rubbish, don’t use them. Buy or borrow a real device. I bought a Windows Mobile 6.1 from eBay for £20, an Andorid for £100 and a Blackberry 4.6 for £100 (and all are excellent quality devices in good condition - I even use the Android as my own phone now).

Key point: you must buy all devices with Wi-Fi, don’t bother connecting with 3G for testing as too much hassle / swopping sim cards etc.

(2) iPad testing: buy an iPod Touch series 1 (Wi-Fi) off eBay, can’t be very expensive. I find if it works on this then it’ll work on all the other Apple devices after it (iPhone 1-4 / iPad etc). That said, I actually do test on a real iPad though.

Maybe you can borrow an iPod Touch or iPhone from somebody? Most people I know have one.

(3) here are emulators for Bolt and Opera Mobile to add to your list:
Demo - Bolt Browser
Opera Mobile emulator - Opera Developer Network

Microsoft have a Windows Phone 7 emulator available for developers - I think this might be the one:
Windows Phone Developer Tools RTW - Microsoft Download Center
The emulator should have everything Windows Phone 7 has by default, including Internet Explorer.

You probably want to use the real blackberry emulators from RIMM
Smartphone Simulators - BlackBerry
the linked demo is just an app that fakes mobile browsers. They come with a manual that should let help you using it.

The following site has a nice table containing emulators for various platforms:
Mobile Emulators & Simulators: The Ultimate Guide - Mobile Web Programming

GEO LOCATION

Google Latitude API for developers - Google

Check out
Prox1m1ty Made S1mple - En1gmaEngine

CONVERTING

10 Ways to Create a Mobile Friendly WordPress Site - iphone-more-fun

EMBEDDING

This video explains the best way to go about it (h.264 with a Flash fall-back):
Quick Tip: HTML5 Video with a Fallback to Flash - Nettuts

“If you’re using a plug-in to embed audio or video in a webpage, you can use the HTML5 <audio> and <video> tags to deliver audio and video content in Safari on iPad and iPhone. These tags work seamlessly with HTTP Live Streaming, and it is easy to structure your HTML to fall back to plug-in content in browsers that don’t support these elements. For more information on using HTML5 <audio> and <video> tags, see the Safari Guide to HTML5 Audio and Video, and the HTMLMediaElement, HTMLVideoElement, and HTMLAudioElement class references in the Safari DOM Extensions Reference.”
Preparing Your Web Content for iPad - Safari Reference Library
HTML Video Example - Safari Reference Library

SitePoint

CSS > Media Queries - iPhone Vs iPhone 4
CSS > device specific stylesheet
Adapting an Interface for Touch Devices.
Designing for the Mobile Web

MISCELLANEOUS

a meeting I went to where a speaker spoke about mobile apps with HTML5.
Bijeenkomst bij E-sites op - (Meeting at E-sites) fronteers
he linked to
App Stores - Distimo

ideally we’d be able to create cross platform apps that are essentially web apps, but from what I’ve seen so far with regards to client demand for mobile development, the vast majority of them are looking for presence within an app store and an icon on the phone desktop (and ‘add favourite->add to home’ isn’t sufficient for them) even when the app spec is just a glorified web view.

I’ve been loath to expend substantial effort on learning obj-c for what is essentially only one output, particularly in light of Apple’s fairly obtuse and unpredictable shifting of goalposts. Because cross platform mobile frameworks or IDE’s generally reuse existing web skills or at least make the effort more worthwhile in other areas, these make a lot more sense to me. Recent sales growth for android phones is extremely high, so to be able to output for it using the same codebase is definitely worthwhile in my view.

Some other frameworks/IDEs other than phonegap that are worth checking out (mostly commercial) are appcelerator titanium, rhomobile, openplug elips, unity3d and ansca corona.
App Inventor - Google Labs

I do not really think fragmentation is much of an issue
The only thing to really contend with is screen size. As iPhone also has some degree of fragmentation, as appz are not backwards compatiable or even forwards compatable in some cases. But yes, iOS is easier to manage, as android devices also might have some extra hardware in, which is not in all devices
Android fragmentation: something to fear? - ars technica

Have a good resource that you think should be added?
Please contact a member of the Programming Team and it will be seriously considered.

m19_5_11 · March 23, 2011, 3:35pm

Hi all,
I’m wading through adding mobile friendliness for the first time. As I’ve done a tone of research I’ve found conflicting information, and sometimes helpful tips. So I’m putting some observations here in case it might help someone else. Please comment/correct…

The sites I’m working on are all WordPress sites.

WordPress requires XHTML.

doctype fun The mobiReady emulator gets rave reviews, however it tells me to use xhtml-mp and evidently does not read WP’s lang declaration correctly (says it isn’t UTF-8 when it is )

but on these forums (which I assume is more correct) it’s stated the xhtml-mp is not helpful:

(June 26, 2010) - "The initial intent of the mobile profile was to produce a reduced version of a website for those devices (as the upgrade from WML) however it’s totally obsolete now (and few mobile devices support it) as all mobile browsers support HTML completely. "

more:

Choosing a DOCTYPE for your mobile site | Manufactured Environments

“Some sites use just a standard XHTML DOCTYPE. That works fine for most browsers, but in the case of mobile browsers such as the iPhone’s Mobile Safari, the browser will display the site as a standard web page. That is, if you’re use a regular XHTML DOCTYPE on a mobile site, the iPhone looks at the page not as a targeted mobile page but simply as just a regular web page.”

mobiReady apparently does not pick up on the mobile style sheet, and then complains about display declarations which are actually display:none. It also says I have big images which aren’t there in the mobile version.
This is a very helpful guide:
Mobile Web Developer

This was helpful, also:

The 5-Minute CSS Mobile Makeover

mimetype
From this forum: #8 post
http://www.sitepoint.com/forums/developing-mobile-devices-340/doctype-we-use-mobile-sites-use-unicode-charectors-688399.html

"Question:
All Windows Mobiles and iPhones accept this:
<meta http-equiv=“Content-Type” content=“application/vnd.wap.xhtml+xml; charset=UTF-8” />
Answer: It’s not about the extension you use, it’s about the code and the MIME type which describes the file format type. You can use whatever you like, just be sure that the content-type meta tag accurately describes the format you are using. Just beware that if you’re using proper XHTML rather than HTML (such as application/xhtml+xml) then you will encounter some serious issues of browser compatibility with Internet Explorer Mobile as like Trident (desktop), it isn’t compatible. "
Make phone numbers clickable (click to dial) for easy use by mobile visitors:
How To Build A Mobile Website - Smashing Magazine

StevenHu · April 11, 2012, 3:22pm

iPhone Dev Log PhoneGap/Cordova Crib Sheet (Usually updated Fridays)