I recently did the Chris Coyier tutorial from the css-tricks.com weblog #38: Basics & Tips on Designing for the iPhone. Needless to say I got very excited and suggested to a guy that I do some code monkey work for that we could now offer iPhone websites to his clients. He said cool, but what about other mobile devices? good question. So what is the low down on designing websites for Android, Blackberry, WindowsMobile, etc? Are people bothering with the other platforms? Thanks.
Recent Webkit and Opera:
For iPhone Safari, Opera Mobile, and Webkit on Android development are similar (but not identical), and development for those is quite simple.
You can rely on CSS2.1 and JavaScript+DOM (but be careful with UI events). You might get away with serving your regular website with just few changes to stylesheets.
The trick is in serving of these stylesheets. Don't use User-Agent string.
Because some mobile browsers read handheld media, and some insist on screen styles and pretend to have 960px-wide screen (iPhone :/), you'll need to serve mobile stylesheet with both:
<link media="handheld" ...>
<link media="screen and max-device-width:480px" ...>
The latter is CSS3 Media Query – very useful and works with other mobile browsers too (you can use it in stylesheets with #media {}).
Don't rely on :hover or onmouseover because these events don't work on touch screens.
onclick is delayed, mousemove may not work. Custom DHTML widgets (dropdowns, sliders) and drag'n'drop won't work on touchscreens, unless you use touch events (which thankfully all newest browsers adopted).
Viewport
In addition to Apple's proprietary (and IMHO inflexible and violating separation between markup and layout) <meta name=viewport> have a look at CSS3 #viewport, which currently is supported in latest Opera as #-o-viewport and hopefully others will follow.
Simulators/Emulators
To test page in Opera Mobile, get the simulator (or just older desktop version and choose View → Small Screen).
Opera Mini is special, as CSS is re-formatted a bit and DHTML is executed on server-side, which doesn't always give results you'd expect. There's simulator available.
Android
You need Android SDK, fiddle with commandline to launch its clunky UI, download bunch of packages, create virtual device with dozen of irrelevant obscure settings, have patience for this monster to load and turn computer's fans into a quadcopter, and then you can sss..sss..slooowlyyyy test in the "Browser" (my Intel i5 is too slow to simulate Galaxy Tab - browser "stops responding" even before I finish typing URL)
It's easier to get a phone/tablet with Android and test on a real device (but avoid Samsung's Player "iPod" equivalent, as it's rubbish with obsolete software).
Android browser is really painful for anyone who doesn't love Linux way of doing things — just to read JS console you need to fiddle with remote debug connections and log filtering on commandline.
Firefox Mobile (previously Fennec)
There's simulator available (links for "Windows / Mac OS X / Linux" below mobile downloads are not the desktop version, but mobile-for-desktop-OS).
Simulator is very basic, Mobile Firefox itself is IMHO really good, e.g. overflow:scroll works great, while on WebKit-based browsers overflow implementation varies between very unintuitive and totally broken.
Pocket IE:
PIE for Windows Mobile < 7 is not the same engine as IE on Windows. It's mostly as primitive and buggy as IE4 was, but (barely) supports some surprisingly advanced properties like display:table.
It reads both handheld and screen stylesheets at the same time, violating the standard and shooting itself in the foot. If you're going to suppot PIE, then put link to handheld stylesheet last and reverse/override all the rules from screen styles in it.
Anyway, it's dead and it's hard to get an emulator.
Windows Phone 7 currently ships with IE7-alike, and Microsoft promised something of IE9 level later.
New (minority) BlackBerry
The latest WebKit-based BlackBerry browser is quite good, you can treat it as 1st-class citizen (see WebKits comparison linked at the top).
Currently most popular BlackBerry & OpenWave, Blazer, etc.:
Before the BB OS6, it's a nightmare. Only basic HTML works. CSS works on some models, but is primitive and broken. JavaScript works only on some models and it's incredibly slow and lacking (forget about even basic DHTML).
There's free BB simulator available from RIM (annoying registration required). If you're unlucky, it'll launch properly once and then you'll have to completely reinstall it :)
The same thing is with hundreds of other mobile browsers on low-end phones (powered by likes of OpenWave, which has decent simulator) . You'll have to prepare 1-column basic HTML stripped down website for them.
Google Wireless Transcoder
Even if you create nifty (X)HTML optimized for every mobile device out there, users of Google Mobile Search will never see it!
Instead, every page will be proxied through "Wireless Transcoder" which brutally chops the code, stripping all stylesheets and scripts (regardless whether browser supports them or not), and even <font> :(
Related
I'm planning web application and considering silverlight as development platform. Will it help to solve browser compatibility issues? The app intended to be used on desktops only (no mobile).
Yes, it will solve browser compatibility issues, and could work on both Mac OS and Windows with the very same code.
The only drawback is that, the first time your user connect to your application, he will need to download the Silverlight plugin.
Awesome you would say? Well, unfortunately some people that probably never try to do something like image processing or advanced line of business application in a browser decide that plugins are not so cool and that you would be able to do the same thing with the magic power of HTML5.
We are still waiting to have the same possibility in HTML5 that we have in Silverlight or Flash, but plugins are already dead. At least as long as no big compay want to push them again.
So, my advice would be: don't start a project in Silverlight. You will have problems, even if you do not target mobile. For example it becomes harder and harder to find compatible good tools (like ReSharper, NCrunch, or even just a decent unit testing library). And in further release of Windows and Mac OS, it will probably not be supported at all (IE for Windows RT already does not support Silverlight).
Sorry man, Silverlight is dead, you arrive after the battle.
If your developing your application for an Intranet, I would say Silverlight is an excellent choice.
If you are developing for the Internet, use an HTML based language
So I have a website and I mean to make 2 version of it, the desktop version (with full features) and mobile version (simplification of the desktop version). I'm using media query in CSS to adjust the style. It works well in native browser. When I open my web using native browser it will show the mobile version style. But somehow when I open my web using Opera Mini, it keeps showing the desktop version instead.
I have googled it and didn't found any clue. Any idea how does it happen?
Thanks!
I finally found what's wrong with it. Turns out I was stupidly using #media screen only and Opera Mini doesn't seem handle it well. I've googled it for hours. Someone said actually Opera Mini supports #media screen but other people said that the right media property for Opera Mini is #media handheld. Well, I tried to play safe by simply changing it to #media all. And it works!
There are a number of reasons why Opera Mini is showing the desktop version of the site. The most likely is that your website is not properly detecting Opera Mini as a mobile site and is not returning the correct content. If you're using some plugin or other piece of software that is automatically handling the routing of desktop vs. mobile for you, that might be the culprit. Also, it's possible that this is happening by design, because of how Opera Mini works.
Opera Mini runs web content through Opera's own proxy servers and attempts to 'optimize' the content before delivering it to the user. That is, content is rendered first on the proxy server and then delivered to the device. This of course creates all kinds of complications for someone who is trying to deliver a consistent mobile web experience to their users. Fortunately, Opera provides a development guide to help give you a better sense of what's going on and how to cope with it.
Opera Mini is, in my experience, a very difficult browser to work with. At the Wikimedia Foundation, we server a very limited Wikipedia (and sibling project) experience when we detect someone's using Opera Mini.
You should definitely read through the opera mini development guide and make sure that any device detection you're doing is correctly recognizing opera mini as a mobile browser. If you're just using media queries, you may either want to reconsider a more robust approach to mobile detection, or adjust your design accordingly to work for opera mini. Good luck!
Looking if Fennec supports Addons compatibility in Mobile Platforsm like iOs for iphone, Android or Windows.
Also looking forward for guidelines to develop extensions development to use it in Fennec for mobile platforms.
Yes, Fennec supports add-ons. In general, you develop you add-on just like for the desktop Firefox: How do I write a Firefox Addon?
There are currently two Fennec variants around. The "old" one uses a XUL-based user interface and multiple processes. Here is a good entry point if you are looking for documentation.
The "new" one uses a native Android user interface - it will soon replace the XUL-based variant on the mobile phones, tablets should follow a bit later. It uses a single process like the desktop Firefox. There is very little documentation at the moment, it's mostly this text.
I am willing to develop a mobile application. I wish to have something working for android, windows mobile, symbian and blackberry.
Which is the best way to do that?
I had read here:
You could aim to wrap the sections of
the platform specific APIs (iPhone SDK
etc.) that you use with your own
interfaces. In doing so you are
effectively hiding the platform
specific libraries and making your
design and code easier to manage when
dealing with differences in the
platforms.
I was hoping there exists a framework that does this for me, but it doesn't exist or I didn't find any.
I feel that sort of things will make my code harder to maintain and perhaps it's better to have one version for each platform.
Anyone with experience in the field?
Another links of interest:
most-promising-mobile-platforms
long-term-potential-of-iphone-windows-mobile-development-platforms
Does Java not count (in various guises)
Java on Symbian
Java for Windows Mobile
Java on Blackberry
Android Java Virtual Machine
It should be simpler to manage API differences in a consistent language/runtime platform where capabilities can be assessed in-code ... and configurations of code made at build-time.
As much as I dislike Java, it is fairly ubiquitous. As for the iPhone ... apart from it being much hyped and locked down ... you can get Java to run on jail-broken phones ...
What happened to Apple's open and friendly appearance? The cynic-inside knows the answer ;)
You might want to look into PhoneGap (http://phonegap.com/). From their own description page:
PhoneGap is an open source development tool for building fast, easy mobile apps with JavaScript.
If you’re a web developer who wants to build mobile applications in HTML and JavaScript while still taking advantage of the core features in the iPhone, Android and Blackberry SDKs, PhoneGap is for you.
In addition to using JavaScript, it supports JavaScript acccess to native controls and features of the phones (GPS, accelerometers etc...).
There really isn't any magic bullet that I'm aware of. Even within just the Blackberry platform, there are tons of different devices with different capabilities, screen resolutions, etc. And that's just from one, single manufacturer; Symbian and Windows Mobile are likely even worse.
The answer is likely that you should focus on relatively new and consistent platforms (accordingly with very few and all pretty much similar devices), like Android and iPhone OS, if you really want to reduce your code forking and maximize your audience.
My advice will almost certainly change within a few years when there are nine different iPhone OS devices and two dozen Android platforms.
The first question to ask yourself is if you need a native application, if you do not then designing a mobile web site solution should give you the most cross compatibility, failing that I would make a iPhone and J2ME solution (the J2ME can then be ported for Android relatively easily) for the greatest coverage of users
Or investigate Movilizer. Supports iOS, Android, WinPhone, WinMobile, Desktop PCs, embedded devices, ... and many more. It uses a design once run anywhere approach.
http://www.movilizer.com
try out different cross platform dev tools,
Developing cross platform mobile application
I need to develop some programs for mobile devices but haven't decided the platform to build upon. I'm looking for Palm or Pocket PC devices that have Touch screen and Wi-Fi connection and are cheep because I'll need to buy several of them.
I don't really need camera, mp3 players, video players, pdf readers or anything else since the apps are going to be simple data collection to feed via wireless to a server database.
I'm proficient with C and C#. I could learn Java if I had to.
What devices do you recommend? Linux devices maybe?
PS: Changed the title because I don't want a flamewar between platforms. Please, don't answer with Windows Mobile sucks/rules. I'm looking for devices instead.
Thanks
Windows Mobile
It supports C#, and Visual Studio comes with the mobile SDK. So if you know C# you probably already have the tools you need. And in spite of the iPhone/iPodTouch buzz, the Windows Mobile deployment is still 10X greater.
In order of preference
Neo Freerunner
Maemo & the N800 (cheap)
Beagleboard
If you are comfortable with Visual Studio then programming for windows mobile is extremely easy. The SDK for mobile comes with emulators for all the latest and popular versions of windows mobile- and you can even debug on teh device itself using a USB cable.
On windows mobile you have a choice: Develop a .Net application or develop native (likely MFC based). Either one gives you a great development environment.
As far as iPhone development goes- you would need an apple computer to install and use iPhone SDK- and you can't run an iPhone app on your phone. You would have to go through the process of getting it registered with iTunes for you to install your own apps on your own phone!
When I first started playing with mobile development I had a few questions:
Can I develop using my favorite IDE- Visual Studio. Will it be as easy as developing a desktop app: yes.
Will I be able to access the internet from my application without 'unlocking' or in some other way enabling the phone that was not intended by the service provider? yes.
Will I be able to access device specific functionality such as GPS easily? Is there good support for doing so within the API? Yes.
You should probably target the Windows Mobile platform. The Palm platform is rather archaic and no longer widely used. The development environment is also rather spartan, while Microsoft has full IDEs available for Windows Mobile development. You might also consider the iPhone/iPod touch platform - I have a feeling the number of devices will multiply at an exponential rate and I've heard that developing applications is much easier due to the completeness of the system stack.
You should probably at least evaluate the Apple iPod Touch. It certainly meets your basic "touch screen + WiFi" spec, and your users presumably won't object to all the the other nice features that will come along for the ride.
I don't know what your cutoff for "cheap" is, but $299 for the base model seems pretty reasonable for a high-quality touch screen and WiFi in a pocketable device.
Windows Mobile and CE used to suck, really, really badly. These days however it's definitely passable and worth checking out, especially if you code C#.
Just remember that it is the baby brother of the full framework and has nowhere near enough toys and throws a lot of NotImplementedExceptions. :)
Blackberry publishes its SDK on its web site. Its apps run J2ME, so with some Java experience it shouldn't be too difficult to get started. They also give you an emulator. Disclaimer: I have no experience in writing Blackberry apps, but I looked into it once.
I would not recommend a PalmOS based handset. I have written code for PalmOS and it's about as painful as writing raw Win32 code in C. Since Palm has switched its high end handsets to Windows Mobile, PalmOS will just remain stagnant and only run on the slower, less capable hardware.
If I were to write a mobile app, I'd agree that Windows Mobile is worth checking out.
It all depends on the users who you are targeting at, If you are looking for a wide market then you should be fine with J2ME/Blackberry . However most of them lack the touchscreen and wifi features ( The HTC range of phones [WIFI/TouchScreen/Windows Mobile] have a JVM built with it),so it would work on most of the Windows devices also.
If you are making a more niche product, moving with the current buzz 'iphone' will be good . Windows Mobile is also worth checking out
The best option here would be the Neo Freerunner, with that device you can build a dedicated unit were every aspect is made especially for you're needs. The Freerunner is WiFi enabled, and has a touch interface. If you use the Qt SDK, a lot of the work is already done for you. It comes complete with emulator, as a Live linux cd. You can run in a WM, such as wmplayer. Everything is included.
I'm not gonna lie, it will take tweaking. But the final product would be really nice and intuitive.
Looking at Windows Mobile devices, your requirement of touchscreen pretty much sets your pricing at the higher end of the spectrum. You'll get those things you say you don't need just because of that.
Here's expansys's selection of touchscreens.
Mobdeal is a handy one too as that effectively filters all phones by features.
I've developed against the HTC TYTN 2, HTC Touch Diamond and randomly a PSION Teklogix Ikon
There's generally very little difference between these models, some manufacturers have SDKs that can help sometimes.
I think your cheapest option will probably be something like getting HTC TYTN 2s on ebay. They're pretty old now (hence cheap) but have Wifi, camera, touchscreen, qwerty keypad all the things you seem to be after.
you can target iPhone "touch" platform with Apple's iPhone SDK. the development environment requires a Mac, but you can get the entire IDE + tool chain + excellent debugging and profiling tools for free. And the free documentation is top notch.
As a registered iPhone developer, it is free (no cost) to target the simulator, which is sufficient for most learning and development you'll likely need to up front.
To target the actual hardware device (and up to and including release/selling your app on the Apple's AppStore) is only $99/yr. If you got an iPod Touch for your hardware target, most of the SDK applies and you are not tied into a service contract for an iPhone.
iPhone app development environment is in Objective-C, but it is a really productive, object-oriented environment so do not concerned that that may be a language you are unfamiliar with.
If you decide that your mobile app(s) would be better suited as webapps, the iPhone/iPod touch platform again is an industry leader in this space, and you have the additional benefit or being able to target other mobile platforms (and not necessarily be tied to one mobile SDK).