Mobile Web Development

[Fmdpa]

I've been seeing so much lately about the iPhone, Android, and numerous other mobile devices that are capable of internet connection. What is your advice pertaining to web development for compatibility with mobile phones, etc? Do you have to expound more effort to make an attractive site on a mobile device?

[wirehopper]

If you write the XHTML and CSS very carefully, you should be able to create an architecture that's efficient to maintain.Another good idea would be to offer a subset of the functionality for mobile devices, and then refer visitors to the desktop site for more features.

[ApocalypeX]

I've been seeing so much lately about the iPhone, Android, and numerous other mobile devices that are capable of internet connection. What is your advice pertaining to web development for compatibility with mobile phones, etc? Do you have to expound more effort to make an attractive site on a mobile device?

Clean code that doesn't rely on javascript. There are also things like jqTouch for iphone development.

[Synook]

While perhaps JS should be avoided for maximum compatibility, most modern smartphone web browsers, including Mobile Safari and Chrome Lite, fully support the scripting language. As for the design, remember that mobile users won't have mice, and instead be using touch-screens or trackball/pads to navigate. Also, mobile screens are much smaller than what we are used to on PCs, with far higher pixel densities. In addition, 3G speeds are generally much slower than those attainable with broadband. Therefore, pages should be short and simple, with larger text and buttons.As for JavaScript frameworks, http://www.sencha.com/products/touch/ is another interesting one (edit; from the same people that developed jQTouch, just for a different framework).

[Fmdpa]

If I downloaded and installed a browser such as Opera Mobile, Chrome Lite, or Mobile Safari, would it render pages similarly to as if it was on a real phone? Since I am more familiar with jQuery than with any other JS framework, would that work fine? Also, I've seen a lot of talk about HTML5 and mobile devices. What particular usage of HTML5 improves compatibility with phones, etc.?

[niche]

This is a great discussion, but aren't apps going to compete for eyeball time with traditional web sites even if they've been adapted to mobile devices?

[Fmdpa]

Sure, apps are popular, but what I'm concentrating on now is not mobile devices themselves, but how to make my website mobile compatible. Am I making myself clear?

[niche]

I understand. The solution we're pursuing is simply dumbing our site down. Extended menus turn into more pages, text instead of graphics, etc. However, apps might be the future that may be here sooner than later.

[Fmdpa]

Basically what I was saying is "What do apps have to do with websites?".

[niche]

Apps have absolutely nothing to do with websites except, as I suggested, they substitute for what a website does. Much to my chagrin, the younger people I know use their apps the way I'd expect them to use websites.Nothing lasts forever. I can easily imagine a world where apps displace websites. Adapting a website designed for a large screen is at best a intermediate solution. I'm no fan of this possibility. However, one thing is for sure, the cell phone is the new computer.

[Synook]

Apps have the ability to be more integrated, and bring greater complexity to mobile devices. However, they take longer to develop, are harder to maintain and generally stay more... static than websites. Distribution is also more difficult, as websites are inherently cross-platform and can be accessed by new users in a flash, without any download or installation necessary. Due to the typical usage patterns of mobile phone users, mobile applications are more like websites [than their desktop counterparts], but the two still serve different purposes. One should not disregard mobile-optimised sites, simply because an application can be built instead, and until platform-independence can be worked out, mobile applications will not replace websites.Websites do not have to be, and should not be, "dumbed down", either. The advanced nature of mobile browsers, along with the wide range of interaction methods available on mobile devices, such as touch, means that a truly well-designed mobile application can be just as, or even more complex, than their desktop counterparts, delivering features such as location-aware services in a package that is smoother and easier to interact with.... anyway, you can't install mobile browsers on desktop machines because they are not written for those platforms - you have to use an emulator. You can also use a browser written for desktop machines, along with user-agent impersonation, to achieve a similar effect, however. HTML5 can deliver many features (video, effects) that Flash can, however while many mobile devices do not support Flash the more modern ones have fairly complete HTML5 implementations.

[Fmdpa]

I guess we might as well not go to any extra large measures to please iPhone users, but just write clean, well-structured code and hope for the best...?

However, one thing is for sure, the cell phone is the new computer.

I can see that being true for the average person, but I'm sure that white-collar workers, for one, would still use computers (not that they wouldn't use portable devices in addition to that). Switching to thinking about compatibility again, I know that Adobe has a program bundled with Photoshop CS called Device Central, which is basically a program that simulates what your graphics project would look like a specific devices. Is there an equivalent program to test web pages?

[niche]

Synook those are outstanding points and just what I was hoping to read. I work with some people that champion apps. As I said, I'm not a fan of that point of view, but lacked verbose response until now. Thanks for the reinforcement and pointing out some unfortunate word choice on my part.

[ApocalypeX]

Basically what I was saying is "What do apps have to do with websites?".

Erm this might blow your mind - Get your iPod and go here http://apocalypex.net/iphone/h3 press add to homescreen to install it, then go to your homepage and press it . A prime example. Also Don't bother trying to view it on your PC it will redirect you.

[Fmdpa]

Get your iPod...

What iPod?Would you mind explaining what this is supposed to do?

[ApocalypeX]

What iPod?Would you mind explaining what this is supposed to do?

http://apocalypex.net/iphone/#fragment-2 well I guess you can view the project here then. Its an example of a web app for iphone/itouch/ipad(?) built entirely from CSS, HTML, Javascript (and PHP for the stats generation). A user can "install" it to their ipod and run it like a real app. It grabs your Halo 3 stats.You can build a project/website and also build a web app like this as a bonus to it. It literally takes a few hours to learn how to do it.

[chibineku]

I like the point ApocalypeX makes about running a website like an app. The iPhone lets you create shortcuts to websites and to view and interact with them exactly like apps. On other smartphones there is the intermediate option of creating widgets which are applications written in web languages which are then packaged to run like apps. I have only the slightest experience with them and only on BlackBerry, but they offer more flexibility than normal native apps because you can update the web content and the widget will always deliver the newest content. A big problem with Apple apps distributed normally through iTunes is that if you need to release an update it can take several weeks to get approval, and approval for your update can be rejected on any basis that Apple likes. So users may get very disillusioned and think you don't care to rectify any problems they've stumbled upon. Widgets and websites stored as apps will reflect the newest content always. However, charging for them is more of a gray area. The sponsorship or paid service route is going to be your avenue for revenue (hey, that's pretty good marketing speak) instead of the pay-per-unit distribution of, say, Apple apps. Note that there are books on turning websites into apps in XCode on an Apple Mac, so those of us who are into web dev and scripting can turn our skills to app creation with very little additional learning. An excellent guide is Building iPhone Apps with HTML, CSS, and JavaScript by Jonathan Stark.