December 2016

S M T W T F S
    123
45678910
11121314151617
18192021222324
252627282930 31

Style Credit

Expand Cut Tags

No cut tags

October 24th, 2015

tony_osp: (Default)
Saturday, October 24th, 2015 11:23 am
SmartGarden v1.5 WEB UI is designed first of all for Desktop or Tablet browsing experience. However sometimes it is necessary to open SG UI from a mobile device - such as Phone, for example to start/stop zones when testing sprinklers.

Technically SG v1.5 UI works on mobile, small-screen devices, and most pages resize correctly. Home page is the only one that looks sub-optimal on Mobile screen. I fixed this problem by creating new Mobile Home page optimized for small-screen devices, and added small switcher that automatically selects right type of Home page depending on the browser window size.

The new Mobile Home page looks like this:



It is essentially the same home page, just optimized for small-screen devices. It uses "flow" design, allowing automatic layout re-flow depending on the available screen width. Menu is also removed from the screen to free up space, converted into panel showed on "menu" button click:



On the technical side - supporting mobile devices is actually pretty easy for SmartGarden v1.5 UI, because the UI is written using jQuery Mobile. Just the UI is optimized for Desktop-size use, but it works OK on the mobile devices as well - except Home page, and that part is fixed now.