When developing mobile apps using PhoneGap for smartphones and tablets, how to reuse most of the UI code? The reason why I am asking is the UI layout for smartphones apps and tablets will need to be different due to the difference in their screen sizes.
I would really like to know what your recommendation is so that I can take as much advantage of using PhoneGap as possible. Thank you for your guidance in advance.
Framework I am considering to use are:
PhoneGap
jQuery Mobile
Backbone.js
While We deal with the UI design in hybrid applications in Phonegap, using css techniques is a simple and good option. I have some links to share with you, which is worth reading and will be helpful in solving your problem,
link 1 : Mobile Web Design: Tips & Techniques
link 2 : Liquid layouts the easy way
link 3 : The 5-Minute CSS Mobile Makeover
Hope, these links will help you.
I would detect the useragent, and then display the correct UI depending on the device. I do this in my jQuery Mobile app (although I don't use PhoneGap) with PHP.
Related
I got a requirement! I would like to convert Normal Web Sites for Mobile Web Sites.
Actually I want a on premise software recommendation that has the capability to do the same as www.dudamobile.com for example.
Kind regards.
(Sorry for my English)
one of the things you could do is implent the Bootstrap CSS Framework (or any other CSS Framework), to style the website more mobile freindly.
Alot of CSS Frameworks are made to auto-adjust more freindly to native mobile browsers and other mobile browsers, and work for various screen sizes.
see: http://getbootstrap.com/css/#overview-mobile
I am developing a page that needs to be able to view on a mobile platform. What resolution should be the standard for this? I live in Norway, and there are mostly iPhones and HTC-phones on the market here.
Any ideas?
If you want to accommodate more than just iPhone and HTC resolutions, I would consider incorporating responsive design into your site. Google also recommends it.
I have created one HTML5 mobile web app and tested in different devices like iphone,ipad,android phones and tablets.How I can optimize the size and resolution for this app in all these different devices?
You could use CSS media queries to optimize your web app for different screen sizes rather than optimizing it for different devices.
Responsive Web Design is what you want. The Responsive Web Design article on MDN is good introduction and includes links to many other helpful articles.
Okay I got some good advice for Mobile Detection but still having an issue with themed tablets as the icons will be larger for a tablet view then a mobile device. I'm using jQueryMobile as the framework and it does detect the iPad (And I'm sure other tablets are on the way), but how can I detect if it's a tablet or mobile device? would I just go with the screen size?
If that's the case than what's the largest screen size for a mobile device or the smallest screen for a tablet?
is there a better way?
jQuery Mobile adds classes to the body tag which allows you to create a single CSS for all the devices.
See here: http://jquerymobile.com/demos/1.0a3/#docs/api/mediahelpers.html
update
As of beta2 helpers will be deprecated and set for removal. You should take a look at media queries which were used to put these classes in there anyway.
I'd suggest using media queries and targeting a different CSS stylesheet.
Have you ever considered a device detection library like wurfl, tera-wurfl or the proprietary deviceAtlas?
Have you considered the benefits of server side detection? OpenDDR offers .NET and Java libraries, licensed under LGPL.
You can have a look at http://www.openddr.org
We are starting to develop using Formfactor detection libraries such as FormfactorJS - note, I created this.
The theory being using the same semantic HTML, you can specialize your CSS and Javascript using for a given class of device (smartphone, tablet, desktop etc) whilst also being cognizant of responsive design to individual device profile using Media Queries.
I'm building a small site for a company, and would like to build a version optimised for smartphones with full internet browsers (iPhone/Android etc).
I'm leaning towards media queries, because this is supported by webkit which most of these seem to use.
Is this the best? If so, what media query would be the best?
I'm leaning towards:
#media (max-device-width: 480px)
If your site can adjust everything you need via CSS you should be good.
Keep in mind the things that differ in the mobile web:
Overall width/height is much smaller
Font-sizes are typically made bigger for readability
Flash isn't supported across many devices (cough iphone)
Strip anything that isn't needed don't waste bandwidth on things mobile users don't care about
add mobile-friendly attributes to phone #'s for easy dialing
That said, once you get into it you may find that you really want/need to provide a different "View" for the mobile users... e.g. redirecting them from example.com to m.example.com and altering the content on the page dramatically. If you are using an MVC-like framework you should be able to make a set of simplified views for your pages that are optimized for mobile devices.
Example sites (Desktop vs. Mobile vs. Touch-optimized)
Digg: Full | Mobile
Yahoo: Full | Mobile
Facebook: Full | Mobile | Touch
For touch phones, create a jQTouch version.
For keyboard phones just make a stylesheet optimized for small screens.
For the iPhone and Android, I wouldn’t bother as they both have fully functioning web broswers. (Unless the site is Flash, iPhone only.)
You should be able to target any device you want with a custom CSS file, for stuff like a Blackberry etc.