Horizon template for mobile browsers

Registered by Michal Smereczynski

Horizon template for mobile browsers with screen width equal or greater than 320px. It's not about creating mobile app and not about creating template based on responsive layout (like Twitter's Bootstrap). It's about creating template dedicated for mobile browsers, using mobile dedicated javascript framework and mobile layout.

Blueprint information

Status:
Complete
Approver:
Gabriel Hurley
Priority:
Medium
Drafter:
None
Direction:
Approved
Assignee:
None
Definition:
Obsolete
Series goal:
None
Implementation:
Not started
Milestone target:
None
Completed by
Matthias Runge

Related branches

Sprints

Whiteboard

Cyber Cat Team from Poland is starting the project, creating first mockups right now.

[lblanchard 08-16-13] I'd love to take part in the review of these designs. I also have a few questions about the goals around designing for Horizon mobile.

1) Is the goal to have a mobile friendly design? Or an actual native mobile application design. If native, which devices are the target?

2) What are the primary use cases that a user would perform via mobile? Is the plan to limit the functionality in the mobile design?

3) Is the target to be a responsive design so that it would expose more if the user were on a tablet vs. mobile phone? Or is this strictly for mobile phone?

4) Is the vision to extend the current Horizon UI to support multiple screen sizes or build a separate API to support a dedicated mobile app?

5) How important is retina support?

Thanks!!

[mvidori 2013-09-30]
I am currently interested in mobile development, and I want to be a part of this blueprint. Does someone have started something? For the previous questions:

#1 I do not think the purpose of this blueprint is to develop a native app, the needs are to perform some templates for a mobile size screen.

#2 In mobile design we have to rework some workflow and design due to the low amount of space (tables are much difficult to display, we have to make list and a detail view for each row). I think we first have to isolate the main features we want into the mobile webapp. For example, I do not think the mobile UI has to handle the VM creation. So, yes I think we will have to reduce the number of features into the mobile webapp.

#4 Responsive development can be painful, I think a separate part of Horizon must be build dedicated to mobile rendering.

#5 Maybe retina support can be the subject of a dedicated blueprint.

[ygbo 2013-10-04]

#2 Concerning mobile web sites, I noticed that even with 3G+ providers and subscription, sometimes you have a bad reception and need in an emergency to use alternative browsers like OperaMini (which retrieves highly compressed web pages via an intermediate server) in order to have responsive web pages (Sometimes web pages are even totally unresponsive with a normal browser when you have a poor reception). The problem is that such browsers have limited JS support. So the mobile UI should fail gracefully without JS and not be subject to cases like: https://bugs.launchpad.net/horizon/+bug/1226120
Indeed, a major use case for mobile UI is to interact in your cloud for an emergency case, anywhere any place, so whatever the browser.

#4 OpenStack already consists on a set of APIs, but maybe that a high level API (i.e. using http://django-rest-framework.org/ ) designed only for web purpose could be useful. I admit I could be wrong.
Having a single high level API is quite questionable, but it could allow third parties to develop their own Android/IOs/WindowsPhone apps more easily (and bring a wider support and community to both horizon and OpenStack).
It would be web/GUI oriented but would not replace the existing APIs. Currently if someone wants to build a mobile app, he needs to get documentation on the several bricks (nova, keystone, cinder, neutron, etc...) and this can be a stopper for pure GUI designers who do not necessarily catch the intrications behind all the current APIs, and who would probably want or need only simple high level methods which could be commonly used (the high level methods and what they do is really open to debate).
Since nova already has methods which perform a set of high level operations, I really do not know if a special WEB oriented API would be useful. Maybe for adding a single point of entry?

[mvidori 2013-10-15]

A lot of possibilities exist for developing a template for mobile browsers. Here are some recommendations and interrogations.

- I do not think that responsive UI are a good way to develop for mobile browsers, it is tricky to develop and hard to maintain. Moreover the horizon framework is pretty though, I have the intuition that implementing a responsive design into it will result in a dead end. Last but not least bootstrap v3 integration is currently stuck and bootstrap v2 responsive feature are limited.

- A wrapper can be made on the render_to_response method, the user agent is detected and a specific template is rendered if a mobile device is detected. This option is interesting and needs an investigation but I have some restraints. First, we have a strong correlation between the back and the front in Horizon, for the mobile we have to insert hacks in the rendering I am afraid that we will have to face some (euphemism) side effects. Secondly, Horizon does not simply use the Django framework, it used a framework on top of it. This was really handful when there only is one rendering but for mobile ui these components are not adapted. I am sure we can find a way to do this but I prefer to keep things simple.

- The last possible way is to develop a dedicated app, the user agent is detected when the user arrive on the website and a redirection is made. This solution have a lot of pros and cons. The pros are :
    - We do not have to develop all the application at once, we can select the features we need and only develop them.
    - Developers do not have to ask themselves where the mobile implementation has to be done, this is a dedicated area, we have a mobile app and all mobile development go into it.
    - It is the easiest way, totally isolated we can just take the existing features we needs but we do not have to make any integration in it

    There is also a lot of cons:
     - We have to redevelop a lot of things, redundancy will appears (yeah for sure)
     - If a features is needed both side (desktop and mobile) it will need double work.
     - Current architecture does not fit for a second parallel webapp
     - Double amount of everything (urls, class, templates)!

As you can see, I prefer the last solution but if you have some ideas I am interested to debate on them.

An other question can be interesting, it is the amount of javascript a mobile application needs, do we perform a maximum of static content or do we use a javascript framework and only send json datas.

[mvidori 2013-10-29]
Can someone add https://blueprints.launchpad.net/horizon/+spec/horizon-mobile-design in dependencies for this blueprint?

[mvidori 2013-11-04]
A first POC is available in : https://github.com/enovance/horizon-mobile-ui

Here are the choice I have made:

- css framework: purecss (http://purecss.io/), small footprint, do not need to reinvent the wheel, not too intrusive, an elegant grid layout which allow the developer to quickly design. (developed by yahoo)

- css preprocessor: sass (http://sass-lang.com/), provides much features than less, easy and powerful, it was just an easy choice, I hope you will try it.

- js framework: angularjs (http://angularjs.org/), the mobile webapp is pretty simple and could be a good opportunity to improve our skills in javascript MVC framework, angular is now quite stable and provides a lot of useful features. (developed by Google).

- development environment: nodejs with yeoman (http://yeoman.io/), support for sass, angular, grunt tasks, testing. Now in stable version (1.0).

It is just some ideas for the client size. Waiting for your reviews and feedbacks

screenshot available here: https://plus.google.com/106025001790996609876/posts/U5ojkRW5Mby

(?)

Work Items

Work items:
Create first mockups: DONE
Discuss mockups/design: TODO
Create project: TODO
Code project: TODO
Test template: TODO