ubuntu-phone team mailing list archive

[Calum K Pringle <calum.pringle@xxxxxxxxxxxxx>]

Hey guys,

We are working on getting some guidance for this up on the app design guides site soon as it's clearly a big piece in the process for designing our apps! Essentially, consider your app a touch app, which can scale (the 'how' depends on the context), to different screen sizes.

As an introduction, your app needs to handle all aspect ratios for handling different devices and orientations (and remember a phone app automatically fits in the side stage, with a flexible height either 'fixed' with space below, or stretched to the full height available). 

So there are two main things to think about for an app to scale across screen sizes and shapes;

Design a responsive layout

Position UI components relatively
Reflow content based on space available, for example increase / decrease the number of rows and columns of content
Design for responsive content
Consider showing more or less content, for example

An app in the side stage with a list of content will show more content than when it is on the phone
An app on the tablet might show more information than on the phone
An app where the content is larger than what fits in view, might consider showing more or less content depending on shape and orientation (e.g. a map)
Or, show the same content, for example

An app on the phone simply scales up on the tablet
A fixed height app on the phone, will maintain a fixed height in the side stage

For handling screen sizes and densities, also for asset creation, please refer to resolution independence.
We are working on this right now, so let us know any other ideas / problems you're coming across!

Cheers,
Calum


On 24 Feb 2013, at 12:09, Matt Richardson wrote:

> 
> On 24/02/13 11:51, Dalius wrote:
>> Hi,
>> 
>> I would advice to preview Ubuntu Phone presentations video. The idea is that apps not necessary should be full screen on tablet. While I would agree that some apps (e.g. calendar, mail) should reuse full estate, while others can be the same on phone and tablet.
>> 
> 
> I absolutely agree. For example (in a matter close to your heart), on anything larger than a phone, the calculator should never be used fullscreen. However, for apps such as email, the full screen real estate should be used by default, certainly on up to 10" screens and potentially even larger.
> 
> The question is that for such apps, shouldn't we try to reuse the same backend (as Petko suggested) and load different UI's? This would enable switching between phones/tablets/desktop via a "pick up where you left off" system or by docking (as demonstrated in the preview video).
> 
> The other question is that if we have a design for such apps, should we submit it as separate phone and tablet designs, or as a single design indicating how to switch between.
> 
> Thanks,
> Matt
> 
>> Regards,
>> Dalius
>> 
>> 
>> On Sun, Feb 24, 2013 at 1:45 PM, Petko <pditchev@xxxxxxxxx> wrote:
>> I'm also very curious on that matter . Are there some specs on how to change app behaviour or is the current style just to rewrite the apps for a phone/tablet/desktop factor . The latter seems suboptimal . It would be great to have 3 GUIs for the same app backend (you download the same app, but it loads differently under different form factors) , but as far as I know everyone's pushing QML for writing the full apps , so there's no abstraction between GUI<->engine .
>> 
>> Petko
>> 
>> 
>> -- 
>> Mailing list: https://launchpad.net/~ubuntu-phone
>> Post to     : ubuntu-phone@xxxxxxxxxxxxxxxxxxx
>> Unsubscribe : https://launchpad.net/~ubuntu-phone
>> More help   : https://help.launchpad.net/ListHelp
>> 
>> 
>> 
> 
> -- 
> Mailing list: https://launchpad.net/~ubuntu-phone
> Post to     : ubuntu-phone@xxxxxxxxxxxxxxxxxxx
> Unsubscribe : https://launchpad.net/~ubuntu-phone
> More help   : https://help.launchpad.net/ListHelp