ubuntu-phone team mailing list archive

[Cos64 <cos64@xxxxxxxxxxxxx>]

On 18.06.2015 10:52, Sebastien Bacher wrote:
> Hey there,
> 
> (I hope some of the designers are on this list ;-)
> 
> I've been reading the design blog entries about the grid system [1] [2]
> and I'm trying to make sense of what is described.
> 
> The guidelines say that a panel should be 40/50/90 gus. What happens if
> I'm using an application in "window mode" on a desktop and that its
> width is 70gu, does it mean I should have 2 panels having respective
> widths of 50gu and then 20gu?
> 
> That feels weird, if you take an example of an application listing
> messages on the left and content on the right you get less space for the
> content than for the titles.
> 
> You can imagine a similar example on a tablet in landscape mode. Taking
> the blog example of a landscape of 90gu, the layout should be 40/50, but
> what if my left panel is a list of short labels and I would only need
> 20gu to display them, does it mean I should use 40 anyway and waste the
> space on the right of the layout for the actual content?
> 
> 
> Did I understand the guideline correct or am I overlooking something there?
> 
> Cheers,
> Sebastien Bacher
> 
> 
> [1]
> http://design.canonical.com/2015/05/to-converge-onto-mobile-tablet-and-desktop-think-grid-units/
> [2] http://design.canonical.com/2015/06/the-grid-system-in-detail/
> 
> 
> 
> 

Hi,

Could someone help me understand some things about this grid system?

I read the Resolution Independence article [1] and understood that a
grid unit is a fixed number of pixels, depending on the device.
Then I found this thread mentioning the two blog articles [2] [3]. One
of them says that for Aquaris E4.5 it's recommended to use a width of 40
units, while for Meizu MX4 50 units are preferred.
The tutorial [4] uses 100 (but I understand it's for desktop and only an
example).
The Ubuntu UI Toolkit [5] uses a width of 120.

My question is: how can I make sure my UI looks good on any device? If I
use 50 units, it won't fit on Aquaris E4.5. If I use 40, there will be
wasted space on tablets. Is it possible to make 3 layouts for the same
view (one for 40, one for 50 and one for 90)? Maybe something similar to
Android [6]?

I tried to

    import QtQuick.Window 2.2

and to declare

    width: Math.min(Screen.width, units.gu(50))

but I doubt that's the way to go (I also ran into some trouble with the
screen size not being immediately available).

Ciao,
Cos

[1]:
https://developer.ubuntu.com/api/qml/current/UbuntuUserInterfaceToolkit.resolution-independence/
[2]:
http://design.canonical.com/2015/05/to-converge-onto-mobile-tablet-and-desktop-think-grid-units/
[3]: http://design.canonical.com/2015/06/the-grid-system-in-detail/
[4]:
https://developer.ubuntu.com/en/apps/qml/tutorials/building-your-first-qml-app/
[5]:
http://bazaar.launchpad.net/~ubuntu-sdk-team/ubuntu-ui-toolkit/trunk/view/head:/examples/ubuntu-ui-toolkit-gallery/ubuntu-ui-toolkit-gallery.qml
[6]: https://developer.android.com/guide/practices/screens_support.html