I am developing mobile version of websites and I am interested in following best practices in terms of style guide and specs for iPhone and Android. Is there an official document or a good resources online that I can refer to?
For example, I would like to know how much space should I have in between vertical buttons, what's the recommended minimum size of a font, etc.
Both apple and android have a lot of information. Look at their respective sites:
https://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html
and
http://developer.android.com/design/index.html
These are for native apps, but the html apps should follow the same 'rules'
happy reading.
Related
First, my question might sound like a duplicate, but I have been going through a lot of questions on this forum and haven't found the answer to what I am looking for.
I have an existing web application built using Java, struts2 and jsps. I want the web site to be mobile - friendly. I am not looking at developing native apps right now. I want the mobile-site to have a native-app like appearance. So if a user goes to the browser on a mobile and accesses my site it should have that native look and feel. So I looked at Sencha touch 2 to begin with. I am new to Mobile development and would appreciate help in understanding how to go about evaluating Sencha touch 2 as a viable option. I see from examples that in ST the UI is mostly built using ExtJs javascript.
My questions are the following
Is there a way to port my existing jsps and html to the mobile view , without building them from scratch?
Since the css for the site is currently built for 'screen' media, this will obviously have to be worked out , but does Sencha Touch
provide any functionality of using an existing css and customising it
for a mobile device?
Appreciate your help,
Unfortunately, the answer to your first question is no.
Java/JSP and Javascript are totally different in essence. No convention could be made to convert between these two.
For the second one, SASS/SCSS might be the things you're looking for: http://sass-lang.com/. It's because Sencha Touch components' CSS properties are build through SCSS files. You can take advantage of these. For further ideas, see: http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch
I already have a website with huge database which is good for Desktop browser my site is on Joomla base. Now i want to develop for Smartphone (like iphone, android, nokia) and mobile browsers. So how can i achieve this goal what is the best way of doing this.
Mobile Sites like Yahoo, Youtube i want to developed something like this because i'm new to developing mobile sites so any one can suggest me the right way for developing the mobile version for my current Desktop Site.
Thanks in advance
There are extensions for Joomla that style your site for mobile usage here: http://extensions.joomla.org/extensions/mobile.
It makes sense to test your site using the emulators for iPhone, Android and Symbian at some stage before you release. Each software development kit includes the ability to use the mobile browser.
Note that this is not the whole story. You'll want to consider:
Mobile users have much smaller displays. You'll need to rework your UI to take account of this.
Mobile users have large fingers. You'll need to rework your buttons and links to take account of this.
Mobile users tend to consume content rather than create it. Optimise accordingly.
Searching for data with e.g. traditional search boxes is tricky; you may need to rework to use scrolling through lists.
Above all: test, test, test!
Have a look at http://www.mobilejoomla.com/
I'm looking for the best cross browser compatible swipe script for android, iphone and other touch phones. Has anyone used any of the available frameworks or have you used custom scripts? What is your experience with these?
SenchaTouch
jQTouch
Phone Gap
Unify Project
Any others? I am joining a mobile task force and would like to get more involved in one or more of these communities so I can provide some UI support.
Thanks,
Seth
First of all, let's sort out the apples and oranges.
PhoneGap and Appcelerator Titanium are NOT UI frameworks. They are both Web to Native bridging technologies. They provide JavaScript API's for mobile capabilities like accelerometer, contacts, GPS, telephony, etc. Also, they facilitate the creation of a deployable mobile app (versus a web page)
Sencha Touch, jqTouch, and jQuery Mobile are mobile UI frameworks that provide support for mobile UI concepts, like touch, swipe, transitions, small screen sizes, etc. They can run in a pure web page or be used in conjunction with PhoneGap or Appcelerator Titanium in a mobile app.
I'm not too familiar with the Unify Project, but it seems to be a bundle of PhoneGap plus their own UI framework.
Both Sencha Touch and jQuery Mobile are in early days, but already have some great capabilities and they're moving fast.
SenchaTouch is good, but be aware that it provides no native hardware support, so if you need access to the phone hardware, you will need PhoneGap or equivalent.
I hear good things about jqTouch, but haven't tried is personally.
Another option is Appcelerator. If you need to write an app for mobile devices, it is a really approachable framework. You write javascript code, and their machinery compiles it to the appropriate platform. Note that this is for writing apps that run on a mobile device directly, not for writing apps that run in a browser on a mobile device.
I found jqTouch to be great on top of the PhoneGap technology however you need to understand that all the "good looking" UI kits are built on HTML 5 and so far you'll be disappointed with the HTML 5 support from Android devices. You'd think Google would be on this like ants on syrup but you'd be wrong. The jqTouch works like a dream on almost all iOS based devices and quite poorly on most Android devices.
As for Titanium, it still appears and feels web based and there are no UI styles to my knowledge. This means it "attempts" to look native whereas with PhoneGap and JQT you can get a really nice theme. So if you want "snazy" then go PG and something else. Titanium is far more stable than JQT when you're building for iOS and Android so that is a plus but it would be really nice if they did some kind of theme engine.
note over time this answer will become irrelevant as Android improve their HTML 5 support and those UI frameworks become more stable :)
I've been developing a travel planning site - tripgrep.com - which is built on appengine, GWT and smartgwt, among other technologies. It is still early days, and the site is now working well on my development environment, which is either a windows or mac computer.
However, I am frequently talking up the website to my friends when we are at a bar or other venue, so I am standing there while they try to access the site via an iPhone, Android or Blackberry - I've witnessed all three. It has been painfully obvious that the browser based frontend takes a long time to download on a mobile device. I am pretty sure this is because of the javascript download for SmartGWT.
So, I would like to look at alternatives to SmartGWT.
What I like about SmartGWT is that it has a reasonable look and feel out of the box - I don't need to learn any design or css and it has an office application look. This is considerably better than the GWT built-in widgets, which just get a blue border. The better look-and-feel is why I went with SmartGWT early on. However, the slow load times are killing me on these mobile demos. So now I want a fast loading widget alternative that has good look-and-feel out of the box.
The features I care about are: tabs, good form layout, Google maps API integration, grid data viewing. If those are all available in a library that loads quickly on a mobile device, then that's the library I want.
Your best bet is probably just to use the standard GWT widgets and learn how to style them to your liking. SmartGWT's automatic styling is nice, but as you've noticed, it comes with a price.
Even GWT's standard widgets, which are lighter, could still be trimmed down for maximum speed, so if you're really adventurous you could roll your own light-weight widgets that do only what you need them to do.
You can try mgwt-also called mobile gwt...(available at http://code.google.com/p/mgwt/ )
You could write a wrapper for jqTouch... that would be cool.
Write a seperate View for your model, specifically for either a) mobile devices or b) iPhone speicfically (see "iui" f.ex.). That is the very best way to do it.
With all the different mobile phone browsers and the mobile market being so diverse I'm having a hard time deciding on a way to create a text based online game for mobile phones.
I was thinking about using HTML / CSS / Javascript for front-end and Python CGI for server-side (with a DB).
Now this seems like a very obvious choice... BUT I'm having a hard time finding the "limits" to each one... by that I mean at what point will a popular web browser stop 'supporting' a technology. Like when it comes to HTML I assume you cant use HTML5 features in all popular mobile browsers... or maybe some allow JS but not jQuery... or maybe some don't allow some common CGI features or DOM is weird... I do not know.
I have read a few different tutorials on various mobile web browser development but nothing really helps to answer my question.
So what I'm asking is basically:
What languages/technologies do you recommend for a Text based mobile online multiplayer turn based browser game that will need to dynamically load a lot of info?(front front end to back end)
What are some common limitations between popular mobile web browsers I should look out for? I want to be compatible with all popular mobile web browsers.
One of the things to keep in mind is that there is a plethora of mobile browsers out there (Look here for details). So you are probably better off starting with iphone, android and blackberry and maaaybe opera mini browser support. These browsers have sophisticated java script support and you would be able to provide a good user experience. Later on you can work on supporting other mobile browsers.
Regarding your questions, if you look at these browser specs (and they are readily available on Internet) you will see that you will be able to use quite a bit of web technologies (HTML, CSS, Javascript, etc). That wont be a showstopper for you. Designing for a small screen, and a great user experience on small screens, that will make or break your game.