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 –
– Still don’t think it is possible?
Take a look at the Smashing Magazines new website; a great example of what can be done –
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
– Flexible Images
A good example and source can be seen here
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.
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
And I find this wiki post on screen resolutions does help – although adobe photoshop also offers device dimension setups.
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
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 –
– jQuery vs ZeptoJS
– Sencha Touch
– jQuery Mobile
– 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.
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
So to do a basic swipe use JS to do the calculation and apply it to CSS to do the animation –
distance = e.touches.pageX – startX;
– 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]
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.
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.