One Rect For All specificaiton

Fri Jan 1 15:10:36 EST 2016

@Colin:  Update on this thread: I have tried this exactly as you have defined it using the numbers you gave. It awesome

on preopenstack
  set the fullscreenmode of this stack to “noBorder”
end preopenstack

works perfectly!

Caveat: if developing on iPhone 16X9 at 14X 9 canvas (card rect) the bottom tab bar will “ride up” on the iPad.  I guess we have to implement for both the top and bottom bars, dynamic positioning. Right?

-----------

I have transferred these dimension to inches/decimal and created a template on US Letter for our designers and animators and script writers who are creating story boards. This will give them the template they need to work in…So this is a big step forward

BUT: and this is an old caveat in our design world, even for print media:

I have set my  stack to 1400 x 900 as you suggested… created and “internal” graphic at 1200 X 788 centered on the screen and then went to work building everything in side that area with a lovely stack background image. Save this as standalone and then run on my iPhone 6 + and and iPad.. wow… works perfectly.

BUT I created buttons that are way too small. also that 1400X 900 pixel stack doesn’t fit easily even on my 15” Macbook Pro. So working on a 30” cinema display has advantages for dealing with multiple apps, but it will always blindside us with design. I have this problem already with some of the team here developing things in Illustrator and they are working way, way to big on their screens and when we go to print (e.g. some designer working in a 4” space in illustrator on something that will have to be printed on a business card) or to mobile, we frequently lose time (and the associated gorilla dust in meetings) when that thing is simply way, way too small for production.

My first instinct it so scrap the idea of 1400 X 900 stacks as a design environment and translate this to the *real* iPhone 6+ rect and then chop off the stack by X number of pixels left and right to get from 16 X 9 to 14 X (

OR I can translate Googles and Apples mandated spec (e.g. icons on the bottom tab bar are ideally 40 px tall)  to larger sizes and continue to work in a bigger card rect.

So, I guess what I’m asking here is, for those who are doing a lot of mobile… how do you handle this problem/challenge? What size space do you like to work in and if you do, and if you have already translated the mobile device spec sizes for the status/Nav/Tab bars… to your larger size… can you share this here?

and do you like fullScreenmode  exactFit? or NoBorder?

On December 14, 2015 at 6:07:41 AM<http://airmail.calendar/2015-12-14%2006:07:41%20HST>, Brahmanathaswami (brahma at hindu.org<mailto:brahma at hindu.org>) wrote:

Here are some real numbers:

The complete card could be 1400x900.

On a 16:9 device you would see all of the 1400 width, and 788 pixels of the height.

On a 4:3 device you would see all of the 900 height, and 1200 of the width.

So, you would have the important things within the central 1200 of the width, and the central 788 of the height. You can now be sure that the important content will appear on all devices between 16:9 and 4:3. The things that are outside of that 1200x788 area will spill off the edges of the device screen.

BTW, you don’t have to take care of every device size, LiveCode will scale the above example size to whatever size the device is. So just pick a card size that is comfortable to work on.

About splash screens, with the requirement to include iPhone6, 6 Plus, and maybe even iPad Pro screens, a detailed splash screen could take as much as 20 MB of the app size. What I’ve started to do is use a flat color, that matches the background color of the title screen. Doing that means that the 9 different splash screens take a total of under 200k of space. If that’s not interesting enough try just having a flat screen with your logo in middle, that shouldn’t be too bad file size wise.

Svasti Astu! Be Well

Brahmanathaswami
www.himalayanacademy.com<http://www.himalayanacademy.com>

Get the Gurudeva.app here:

http://www.himalayanacademy.com/apps/gurudeva