I am trying to create a Mobile version of my website. It is an online application, but I would like to make a mobile version through the web format.
So if they visit, www.example.com it takes them to the mobile version. (Which it does currently). But the problem that I am having is creating a nice user friendly interface between the multiple devices, ie: BlackBerry, Android, iPhone. And I am sure this is near impossible to get the same. But I would like some similarities.
Is there any form of template that I can start from? I have noticed that it is better to use "EM" font-sizes verses any other to create a more stable consistency.
I really enjoy this layout of TweetDeck
I like the layout of the buttons along the bottom. Is there anything I can do to create this consistency? Do I create this in my browser at 100%, or do I need to detect the width of the browser FIRST and then create the UI?
You really should look at some of the mobile javascript libraries. They do all of the hard work for you and you just have to deal with the API that they present. Here are a few that I have found in my own research:
Sencha Touch - http://www.sencha.com/products/touch/
JQTouch for JQuery folks - http://www.jqtouch.com/
And if you are a .NET component person - http://www.componentone.com/SuperProducts/StudioiPhone/
Related
I am creating a mobile site and was thinking jQuery Mobile would be the right platform. However, in getting through the requirements it seems what's needed is CSS for styling - nothing extreme, HTML forms with some dynamic elements (i.e. select option 1 and some things change), and some AJAX for grabbing data.
Do I need jQuery Mobile to make sure a site with that simple of an architecture is uber-cross browser compatible? I'd like to hit iPhone 3 & 4, Blackberry, and Android. Don't have to worry about tablets or the like, this is strictly mobile phone. We'll show the desktop site to everyone else.
jQuery Mobile is actually more about using mobile (mostly ios) type components, and gesture support. Yes, it helps to create a consistent cross-browser experience, but you don't need it to have your site show up correctly in various browsers. For that, you really just need to make sure all your code is valid, and that you're not using css (or other) hacks.
I am considering developing an Iphone/Android application but I want the information on it to be live and uniform between platforms... Therefore it seemed logical to me to make it web based. I would however like to be able to achieve certain non web based functions such as adding events to the calendar and gps locations on the the mapping sortware.
My questions are:
Can I make a web based
application that does not visually
show in a browser?
Can I add additional functions that
are not natively available in a
browser e.g <a href="#"
title="adddate:110911"/>Add to
Calendar</a>
Would it be a lot of work to make
such an app as the majority is web
based (I mostly progam in PHP so
coding for Android and Iphone will
take me some time to get my head
around).
All of the questions are for both Iphone and Android.
Thanks
I would recommend using a cross platform solution like phonegap (with UI sencha touch on top of it).
You can have an app that is a thin shell over the system browser, and exposes the non-Web bits of functionality to the contained HTML via JavaScript interfaces. You will still need two different codebases for iPhone and Android, but the essense of the app will be still webby.
There's no way to manage the system calendar from Web apps neither on iPhone nor on Android, AFAIK.
I'm trying to list Web features (HTML, CSS, Javascript, APIs)
that can be used for mobile web pages, things we don't usually
use on Desktop browsers.
So far, I have:
geolocation
orientation
viewport (width, scale)
touch-events
tap-highlight-color
map and youtube links open in a dedicated app
tel: links support
specific keyboard layout depending on the form (type=number, email, ...)
What do I miss here?
The question would be: "If I am a Desktop Web developer, what should I consider to build a mobile version of my website?"
Actually, a lot of these are already in the HTML5 standard. They are not, in fact, Android/iPhone specific.
For example, the following are part of the HTML5 spec:
Geolocation: already implemented in Gecko (Firefox) and Webkit (Safari/Chrome)
Viewport: accessible using Javascript
Number/email/phone number-specific fields: implemented in part by several browsers
Your major concern when dealing with mobile versions of your site (assuming you mean touch-enabled smartphone) is the size of your icons/buttons/text/controls/etc. Anything else, including multi-touch, is simply an extra.
As for other extras, you could consider using something like JQTouch (http://www.jqtouch.com/) to provide a more "native" look and feel on the mobile client. JQTouch provides things like native animations, AJAX interface, specialized buttons/toggles/text fields, and themes that make iPhone web apps look better. It should also work on Android, since its browser is also based on Webkit.
For more information on iPhone/Android web frameworks, see http://distractable.net/coding/iphone-android-web-application-frameworks/.
I'm beginning the process of learning the ins and outs of developing sites for mobile web browsers. Are there any good resources/communities online that discuss mobile specific site development issues?
My initial understanding is that to cover different phones you need to build one site that is enabled for browsers with the webkit engine (iphone, android, etc.) and another more basic site for other older browsers, is this assumption correct?
Also what does developing for webkit mean exactly? How is it different than just using javascript/css/html? Is it the same except that you limit yourself to webkit specific functions and css? I looked on the webkit site, but it didn't explain it in those terms.
Are there any other snafus I need to watch out for when developing for mobile browsers?
Your assumption is correct, you will need to develop multiple versions of your site targeted at different browser types.
Webkit is the engine used by Safari (mobile Safari), Chrome, and Andriod Browser (mobile Chrome?) you can use standard Javascript, XHTML, and CSS, the main thing, is making your site "fat-finger-friendly" since these devices are all driven by touch screens.
What I mean by "fat-finger-friendly" is that you have large links/buttons that are easy to hit with your finger, most mobile browsers are good at approximating which link you intended to touch, but if you have alot of stuff jammed together, it frequently gusses wrong.
Another consiteration is screen size, and thus the width/height of your site.
The best illustration I have of this is from Ars Technica -- checkout their site in your desktop browser, then check out their site in your mobile browser. Its a very slick version of the site. (http://www.arstechnica.com/)
Webkit is rendering engine designed to allow web browsers to render web pages. It provides the set of classes to display the web content in windows and implement different features which are provided by browser (such as links, fwd/backward etc).
You don't need to build the different sites for different rendering engines such as webkit. Designing of mobile web site should consider the screen size and how different components look/behave in different rendering engines.
Look at this question for more details of how to build the mobile friendly site.
If you want to support older browsers, then you should have multiple sites. But take a look at mobile browser stats first to decide if it's worth it. If you just want to make your existing website work for iPhone/Android or other phones with A-grade browsers, then you can customize with a mobile friendly CSS (for small screens). But to get good performance on mobile devices on slow/unreliable connections, you probably need to have a separate stripped down html.
Apple has a very good guide to help you optimize your site for iPhone. Most of it will also work on modern mobile browsers:
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Peter Paul Koch has done an excellent research on different mobile browsers. He has several articles, but this one is a good start:
http://www.quirksmode.org/mobile/browsers.html
Like Nate Bross mentioned, you should optimize for touch devices. Unfortunately it's very difficult to know if a device has touch or not, since there is no media query for it. You can do user agent sniffing for some devices, but I don't recommend it. More discussion here: Optimize website for touch devices
For the moment, I detect touch events (with an exception for Chrome). If this returns true, I inject a touch CSS. A bit nasty, but the other options are worse:
function() {
if( /Chrome/i.test(navigator.userAgent) ) {
return false;
}
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
}
You specifically asked for sites for mobile web browsers, but you might also check out the possibilities of creating a mobile web app. It looks like an iPhone app (or Android for that matter), but it's built with the help of HTML5. You can do pretty slick animations with the CSS3 in the webkit image, and iPhone also has meta tags to hide the Safari navigation toolbars. Users can then bookmark your page to their home screen, and it will work just like a normal iPhone app. Of course you're limited to the browser and it's performance. But you can create multiplatform apps :) HTML5 + JS is the only multi-mobile-platform language Steve Jobs approves, and with the help of PhoneGap you can even get it into the AppStore!
If web-app sounds interesting you should check out jQTouch, jQuery CSS Transition plugin and of course Building iPhone apps with HTML, CSS and JavaScript by Jonathan Stark.
If your site is pretty simple (just content delivery) I'd suggest a service like mobify: http://mobify.me/
A lot of big publications use it, and I have too. In fact, Ars Technica (which Nate Bross pointed to in an earlier reply) uses this service to display their mobile content.
You have control over style, and that's about it, so if your site is more complex it might not be for you. Otherwise, it's a good service. You can have a mobile site up almost as quickly as it takes for the DNS for your mobile site's address to update.
I disagree that you need to build multiple versions of a Web site.
One simple HTML5 Web site will work across all mobile browsers and desktop browsers too.
The beauty of the latest developments of HTML5 is that you could use new Iphone/Android features like Geolocation, and older browsers will simply ignore the JS code if you carefully put it within try catch statements.
For "fat finger" type problems you can serve a different CSS which makes buttons bigger if you really must. Good browsers should make default buttons easy to press in any case.
Keep it simple and you won't have to see these fragmented & costly device dependent approaches. Write HTML5 by hand and use a validator. Good luck!
I'm looking to create a mobile version of our website/web app. What's a good way to provide the best, most fully featured version.
Part of the reason for creating it is instead of an iPhone app, so I'd like to offer an iPhone web app that takes full advantage of the iPhone's version of WebKit (so CSS animations, being able to rely on good javascript support etc). However, I'd also like the site to work well on other smart phones as well as more basic mobile phones as well.
Do I create two sites (Mobile WebKit and basic mobile web) and redirect based on User Agent? Can I create one site that degrades well? What are the possibilities, and how do other people handle it?
Also: are mobile web simulators worth a damn? I have an iPhone, so can test easily on that. If I want to test on Blackberry/Palm Pre do I really need a device or are there reliable simulators?
These are some of the iPhone specific libraries that provide a native look and feel on webkit:
iUi
jQTouch
Sencha Touch
iWebkit
Getting it to work on most phones will definitely be an issue with most libraries as they are built around with the iPhone's screen size (320x480) in mind.
To get a wider coverage of devices including Android and J2ME phones, checkout Yahoo Blueprint. It's a markup language that translates for various platforms and devices.
You could either get the mobile view based on User Agent by dynamically switching the stylesheet on your server when spitting the page. This is not a recommended approach though for heavy-duty pages as you will still be sending huge chunks of data that would not be rendered. Alternatively, if you have a clear separation of your views, you can templatize the view based on User Agent and/or other parameters. This has the advantage of keeping your controller logic in one place with only changing views. You could use the above libraries for iPhone/iPod Touch and switch to a simpler mobile version for other smartphones or tweak it as you want.
Creating a separate mobile version of the site can be painstakingly difficult to maintain when changes arise.
The iPhone and Android simulators are as close as it gets to the real deal. The iPhone won't let you do stuff like make calls on the simulator for obvious reasons, but the Android provides mock implementations for basically everything on the device.