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 -- Mailing list: https://launchpad.net/~ubuntu-phone Post to : ubuntu-phone@lists.launchpad.net Unsubscribe : https://launchpad.net/~ubuntu-phone More help : https://help.launchpad.net/ListHelp