One Rect For All specificaiton

Colin Holgate colinholgate at gmail.com
Wed Nov 25 13:37:15 EST 2015


With showall, all of the content would appear on all screens, and extra content would appear on wider or taller screens (if you have content off the edges of the card area). Although noborder can be used to achieve the same results as showall (by dictating a maximum width or height), it can be very useful if you have a center safe 14:9 area. That way 16:9 users just lose a little bit off the top and bottom, and 4:3 users only lose little off the left and right. With showall, or noborder used in a similar way, you’re having to eat into more of either the height or width.


> On Nov 25, 2015, at 1:32 PM, J. Landman Gay <jacque at hyperactivesw.com> wrote:
> 
> Actually, I think what he's looking for will be in "showAll" mode. The specs he/we need are:
> 
> 1. Ideal stack size for the actual stack file
> 2. Ideal screen ratio
> 3. The "target" area where controls should be located and still be visible on any device
> 4. The "margin" area to consider on larger screens so that background images can be sized to cover the whole screen.
> 
> I wish I could see your example pages, they'd be very useful, but they require Flash and I don't have that installed any more. Several browsers either disallow it entirely or turn it off by default, and I've stopped updating it. :(
> 
> 
> On 11/25/2015 6:33 AM, Colin Holgate wrote:
>> What you’re describing is one variation of solving the problem, and
>> in LiveCode that is what the different full screen modes do. The one
>> you’re showing is the noborder variation, only you’re using it in a
>> way where you are dictating the standard width.
>> 
>> Look at these links I’ve posted before, and resize your browser
>> window in a range of 4:3 to 16:9, you can see what happens to the
>> content in each case.
>> 
>> The two types I use the most are showall and noborder.
>> 
>> http://colin.scienceninja.com/topleftnoscale.html
>> http://colin.scienceninja.com/showall.html
>> http://colin.scienceninja.com/noscale.html
>> http://colin.scienceninja.com/noborder.html
>> http://colin.scienceninja.com/exactfit.html
>> 
>> 
>>> On Nov 24, 2015, at 11:19 PM, Brahmanathaswami <brahma at hindu.org>
>>> wrote:
>>> 
>>> I want to kick off a discussion on target rects for design work.
>>> 
>>> We may have a small team of animators and illustrators start work
>>> on some projects that would eventually find their way into a mobile
>>> app. For these "modules" I would lock it to landscape.
>>> 
>>> For "Agile animation development" (= shorten time from script to
>>> end product, go live, time cycle) I don't want, at least initially
>>> to have this team be burdened with having to create multiple
>>> versions of anything.
>>> 
>>> So I need to give them a spec for, what we typically call in the
>>> printing word "trim size " and "Live Matter safety margins"
>>> 
>>> These would equate to the area that is left after a physical book
>>> is "chopped out" and then another limit which is "by design" for
>>> elements inside that area... 1/4" being a typical minimum for any
>>> type object...
>>> 
>>> with devices, "trim size" equates with "screen size" So here is
>>> what I've dreamed up so far. but we also have a third property of
>>> the spec in this world: full background rect, trim size when same
>>> data is display on 16 X 9  and then the live matter margins.
>>> 
>>> 1) they design in 4 X 3  (if doing comics on paper, then they work
>>> on pad/canvas that is e.g. 12" wide 9" tall (4x3)... -- i.e. the
>>> background art has to fill that entire space.
>>> 
>>> 2) Safety zone/matter (as we way in printing biz...) must fit in
>>> the 16 X 9 rect *inside* that background -- key characters and
>>> important visual elements must all fit inside 16 X 9... so that
>>> there is "dead space" above and below (but filled with imagery like
>>> trees or landscape, textures etc.)
>>> 
>>> 3) Live matter zone/margins then ( how far away things should be
>>> from the edge of the screen) then is  I believe in Googles'
>>> material design spec 40 pixels..for actual objects, text field
>>> "voice balloons" in comics, buttons, info boxes etc... away from
>>> the edge the 16 X 9 rect...
>>> 
>>> if I Open InDesign and ask for a digital publishing document the
>>> default is for iPad.. with 36 margins
>>> 
>>> building on that we ge
>>> 
>>> a) full canvas:  1024p x 768p b) safety zone size:  1024 x 576
>>> (letterboxed top and bottom) c) LIve matter zone: 952p x 504p
>>> 
>>> flip for portrait
>>> 
>>> see:
>>> 
>>> http://wiki.hindu.org/screenshots/SafetySizeGuide.pdf
>>> http://wiki.hindu.org/screenshots/SafetySizeGuide.jpg
>>> 
>>> 
>>> Comments on this thinking  Has anyone already worked this out?
>>> 
>>> 
>>> 
>>> _______________________________________________ use-livecode
>>> mailing list use-livecode at lists.runrev.com Please visit this url to
>>> subscribe, unsubscribe and manage your subscription preferences:
>>> http://lists.runrev.com/mailman/listinfo/use-livecode
>> 
>> 
>> _______________________________________________ use-livecode mailing
>> list use-livecode at lists.runrev.com Please visit this url to
>> subscribe, unsubscribe and manage your subscription preferences:
>> http://lists.runrev.com/mailman/listinfo/use-livecode
>> 
> 
> 
> -- 
> Jacqueline Landman Gay         |     jacque at hyperactivesw.com
> HyperActive Software           |     http://www.hyperactivesw.com
> 
> 
> _______________________________________________
> use-livecode mailing list
> use-livecode at lists.runrev.com
> Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode





More information about the use-livecode mailing list