Fishbowl have now been working on mobile solutions for the WebCenter stack for a good 2 to 3 years creating both native and web mobile applications & sites – in this post I won’t be covering the upcomming ADF Mobile or the old ADF Mobile Client but instead I’ll be giving you some tips and tricks from my experience of developing for mobile devices using web technologies.
Screen Resolutions & Orientation
Whether you are designing for Blackberry or the latest iPad3 supporting screen resolution comes into play. A term that is now widely used is responsive or adaptive design – where the users environment, screen size , platform and orientation are supported by one template. Clients have been asking for this support for years and although its not easy it has been made easier with CSS3 and the fact that the majority of mobile browsers now use the same browser engine “webkit”.
A great resource and starting point would be here –
http://www.alistapart.com/articles/responsive-web-design
Using fluid grids (liquid layout), flexible images, breakpoints, media queries and a touch of javascript are the key elements to getting started with multiple mobile device support.
– Still don’t think it is possible?
Take a look at the Smashing Magazines new website; a great example of what can be done –
http://coding.smashingmagazine.com/
Resize your browser and see the magic of responsive design!
Anyone still stuck in the dark ages and still using tables to manage layouts needs to go on a refresher course! I would recommend you read CSS Mastery Advanced Web Standards Solutions.
– Fluid Grids / Liquid Layouts
Allows the ability for the site to scale containing DOM elements like <div> tags. based on the width of the site aswell as allowing these elements to automatically wrap down if there is no longer any space for the grid column element to sit.
Here is an example from the 960 fluid grid system
http://www.designinfluences.com/fluid960gs/
– Flexible Images
Generally this is just setting the image as a width of 100% and allowing the containing DOM to manage the size of the image as it scales down or up. Another option is to use javascript to define the image to download based off the screen resolution – so the user isn’t downloading a large heavy image that is not required –
A good example and source can be seen here
https://github.com/filamentgroup/Responsive-Images
On a side note I have found it is better to load images into divs with css with mobile devices than it is to use the <img> tag especially when working with transformations, sliding animations etc.
– Breakpoints
As you work with your design even with using a fluid grid you will find that your site just doesn’t look right in certain resolutions a breakpoint is where you define how the template should be altered and this is generally done with CSS Media Queries; more complex design will use javascript to handle this. (but I think if your using javascript then your really hacking the design to make it work and you will have trouble with future support especially if your working with a content management system.)
These breakpoints will generally reflect the resolution you are trying to support – 240px, 320px, 480px, 640px, 800px, 960px, 1024px This is not definitive, just a guide. As devices do change and manufactures compete to have the best resolutions.
You can see the mobile screen size trends here
http://sender11.typepad.com/sender11/2008/04/mobile-screen-s.html
And I find this wiki post on screen resolutions does help – although adobe photoshop also offers device dimension setups.
http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density
If your not using the webdeveloper toolbar with firefox then you can use http://responsivepx.com/ that allows you to define the dimensions and see how your site works.
– CSS3 Media Queries
CSS media queries have been around for some time now with CSS2.1 but now with CSS3 we can define the styles that are used based off the following additional queries max-width, device-width, orientation and color.
This is great because we dont need to hack in some javascript as was the way in the past.
So now I can have a global stylesheet that imports and handles the liquid layout, colours, fonts. And have additional style sheets that are enabled based on the query and apply required transformations for the breakpoints this is handled on the fly; so if I rotate the screen I can load in a style if I resize the screen I can load in another style and make the site adaptive.
– Viewport Resizing
One of the first issues I came across when developing a mobile application was the automatic resizing of elements – this is very handy when viewing a webpage but when your designing an app for a mobile device you dont generally want the buttons and graphics to scale down and use the pinch event to zoom in so you can click on the item. You’ll also have this issue when developing a native app with phonegap.
So the solution is to add the following to the <head>
<meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0″ />
Setting the initial scale to 1.0 will overide the default resize property allowing you to create a set of fixed graphics for each breakpoint or use of flexible images. Here is how you would support the multiple screen densities –
<link rel=”stylesheet” media=”screen and (-webkit-device-pixel-ratio: 1.5)” href=”hdpi.css” />
<link rel=”stylesheet” media=”screen and (-webkit-device-pixel-ratio: 1.0)” href=”mdpi.css” />
<link rel=”stylesheet” media=”screen and (-webkit-device-pixel-ratio: 0.75)” href=”ldpi.css” />
Another option would be to prevent resizing on screen densities using the following:
<meta name=”viewport” content=”target-densitydpi=device-dpi, width=device-width” />
More info on this can be found here –
http://developer.android.com/guide/webapps/targeting.html#ViewportDensity
Picking the right javascript framework
– jQuery vs ZeptoJS
Ok, so jQuery is not really a mobile javascript framework but you can still use it; I haven’t had any major issues although it is a little heavy weight. If your a big fan and user of jQuery I would recommend ZeptoJS which has a jQuery compatible syntax and is also highly optimised for mobile devices as well as having touch event support like tap and swipe. I would recommend you use these frameworks if your designing your app from the ground up and creating your own interface.
– Sencha Touch
I’m a big fan of EXTJS and have been working with it for years – so I gave Sencha Touch a go expecting greatness from this mobile framework. Unfortunately and this may of changed with its latest release I found it to be too heavy for mobile and much better for tablets. Whats good is it handles all the hard work and cross device compatibilities; from the interface, touch charts and touch events you supply the javascript object and add a few parameters and your ready its very quick and easy to develop with if your a programmer and not a designer.
– jQuery Mobile
Very much like Sencha Touch it will create all the UI for you. You supply the html add a few html5 data attributes and JQM will do the rest skin and supply the functionality around your app. I found it to be more responsive than Sencha and lightweight for all the mobile devices I had access to. Infact my first mobile application – Mobile Integration Suite for WebCenter Content was created with jQuery Mobile leveraging the WebDav services via javascript. If you know your html and want to create a quick mobile application this is probably the best framework out there for you.
– The others
There are a number of others Wink, DynamicX, iUI etc but for me I found the above options to be the best for mobile development.
Tips
– Scrollbars
Scrollbars are interesting when developing for mobile you cannot have multiple scrollbars only one which is featured on the containing browser viewport.. so if you have a <div> with overflow as scroll and a fixed height with content within it that is bigger than the height a scroll bar would display in desktop browsers in mobile this is not true. To get around this a javascript method is required I believe there are three scrollbars methods available unfortunately I can only remember the common one now – iScroll 4. This allows you to put in multiple Android, iOS looking scrollbars into your app. Unfortunately myself and another team member have found a number of issues using this – it’s good for the basic stuff but you’ll find if you have too much DOM or form elements then it gets buggy. So a colleague actually wrote his own, its smaller and far better so if you know your javascript and CSS3 transformations I’d write your own but if not use iScroll its a good starting point to get your app working with multiple scrollable areas..
Alternatively you can apply the following to your DOM element -webkit-overflow-scrolling:touch;
It’s not as smooth but its a quick simple way to get scrolling to work.
– CSS3 Animations
If you can always use CSS3 transitions to handle animations I have found them to be far better on mobile devices than using javascript to handle animations like sliding. Also make sure to use translate3D as this is hardware accelerated giving you more CPU to handle the javascript.
So to do a basic swipe use JS to do the calculation and apply it to CSS to do the animation –
distance = e.touches[0].pageX – startX;
‘translate3d(‘+distance+’px,0px,0px)’
– CSS3 Gradients
Although it seems like a good idea and is part of CSS3 if your working with mobile use graphics over CSS gradients you’ll see a big performance boost!
I think the same is with opacity use a png over the css opacity although dont quote me on this one.
– Guesture Events
Do not use guesture events unless you are only developing for iOS IMPORTANT guesture events are not supported on any other mobile device. [gesturestart, gesturechange, gestureend]
– Testing javascript method performance across device
Do not use json.parse when on Android browser it is unbelievably slow! To do testing and time evaluation of methods I use jsperf.com and accessed methods I believed to be slowing down my application on multiple devices – jsperf is a great site to help you track down possible issues.
– Optimise, Optimise, Optimise
As with any site optimisation of your code is important! Although it is more important on mobile devices as these have less resources to play with. Once your happy with your code run it through Douglas Crockfords JSLint application it will help to optimise your code – you dont need to fix all the issues but use it as a guide.
– Touch Events
For information on available touch event use the apple site it’s a great resource but just keep in mind it’s design for iOS and may not work in Android.
– LocalStorage vs SqlLite
If your not storing much data use localStorage it is faster than sqlLite; and the performance and interaction of your app and the data held with be far superior. If you have ever used noSql or MongoDB think of storing your data in object orientated structure using object notation.
Final Words
I haven’t gone into too much detail but I hope the links, advice and tips I’ve provided help you to role out awesome mobile applications or sites.
Next post will either be around creating a responsive template for Portal or an intro to the WebCenter REST API.
