Thursday, 14 November 2013

Making a Wicket web site to look good on Android phone

I wanted my Wicket application to look good on an Android phone. Delving into this task I found two important things:

In many cases you will not be able to show all the information. For me, it was ok to use css media query to have a different css for Android phone. I had to tweak with fonts size and hide some markups.

Inside my html I added the viewport metadata:

<meta name="viewport" content="width=device-width,initial-scale=1"/>  

and I entered my two style sheets:

<!-- for all screens -->
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />

<!--  for Android phone 480px wide or less -->
<link rel="stylesheet" href="css/min-styles.css" type="text/css" 
      media="only screen and (max-width: 480px)"/>    

All the tweaks were added to min-styles.css file.

Modal Windows are a big pain to use. I had to make them show near the top with fixed position like:
 
 .wicket-modal {
        position: fixed !important;
        top:5% !important;
}

Without this, on Webkit browser if you scroll down to click some link which opens a modal, you even won't be able to see the modal (depends on how much scrolling you need). A modal cannot be dragged independently on screen.  So I guess, if you can avoid modals, then do it. If you cannot avoid them, then keep them as small as possible.

No comments:

Post a Comment