Ted Firebug is your friend. Go have a look at qz.com and then inspect the elements with firebug. Change to responsive view and continue looking while you change the screen sizes.
css @media is key. Also have a look at http://jquerymobile.com/. This interface is "mobile first", but can be adapted to "mobile also". http://www.jquery4u.com is really useful with lots of tutorials. The big problem for me is bandwidth on mobile devices. The @media tricks mostly involve hiding certain "not completely necessary" elements. However, they are still sent to the browser consuming bandwidth. This bit of javascript worked for me in a specialized situation (I am adapting it for use in a more mainline application). There are others on this forum who don't like these javascript tricks, but it works and in my view especially useful for bandwidth constrained devices. //Also times the round trip time of the Ajax call sendScreenWidthToServer(screen.width); if (screen.width < 800) { document.location = "/mobile/control/calc"; } Skip -----Original Message----- From: Ted Byers [mailto:[email protected]] Sent: Thursday, January 24, 2013 6:44 AM To: [email protected] Subject: Re: OFBiz / BigFish: New client is hooked! Hi Nick, On Thu, Jan 24, 2013 at 9:02 AM, Nick Rosser <[email protected]> wrote: > > Or the fact that all the styling is delegated to the CSS? We've gone to > great pains to allow styling in the CSS with no back-end code changes. So > far it's working! And don't forget our "small device / mobile" solution uses > a responsive CSS approach, check out The notion of making a web application flexible enough to display well, and remain useful, on any device whether a smart phone or desktop with a huge monitor, is something I am beginning to examine. Can you recommend some online resources for studying how to use CSS to do this? Being a programmer, my first thought on making my web apps adapt their interfaces to the device on which they're displayed was to use some fo the new features in HTML5 to learn what the device is, and then programmatically (using Javascript on the client side and perl or Java or C++ on the server side) adapt the interface to available screen realestate. I know little about CSS and have in the past limited myself to either having a colleague, who is a CSS guru, revise our CSS files, or writing my own inline CSS; and thus only with my web apps where the server side code is implemented in Perl (I don't think I ever used CSS with a JSP/JSF application). I am thus intrigued by the notion that you can do this sort of thing without programmatic changes by using the right CSS. I guess, a related question involves how, or whether, this sort of practice can be used with jQuery. Cheers Ted
