Re: [css-flexbox]

> On Jan 14, 2016, at 15:39, Bruno Racineux <bruno@hexanet.net> wrote:
> 
> On 1/13/16 6:52 PM, "François REMY" <francois.remy.dev@outlook.com> wrote:
> 
>>>> It was decided that, while the problem you raise is a real one, the
>>>> proposed solution was suboptimal. A better solution is to reorder the
>>>> DOM instead of using the 'order' property, as explained in this
>>>> message.
>>>> https://lists.w3.org/Archives/Public/www-style/2015Aug/0347.html
>>> That is sadly a lack of resolution to the problem rather than a solution.
>>> I would like to echo my sentiments and offer a suggestion, in parallel to
>> what
>>> Richard[1] posted today.
>> 
>> I think the whole problem here is that you use flexbox for the layout of
>> items of diverse natures.
>> 
>> Flexbox, in its nature, is tailored for the display of lists of elements,
>> or more globally linear layouts of items of similar natures (toolbars,
>> search
>> bars, ...). I am not sure at all why we introduced the order property for
>> flexbox (though I guess it was to make it more useful to web developers
>> while we waited for better alternatives like grids), but to me this looks
>> like it was a mistake. This property now exists, we cannot remove it, but
>> that doesn't mean that using it is a good idea, nor that we should make
>> updates to make it easier to use for use-cases it should not have
>> attempted to solve in the first place.
> 
> I disagree. IMO reordering fits right into what responsive design needed.
> 
> Tab's words were: "Part of the reason for including 'order';
> at all was to allow authors to order their source in the best, most
> logical way, with the important content up front and the lesser
> content later in the document, and then lay it out in whatever way
> makes the most sense."
> 
> That's precisely what I am using it for in RWD 'orientationChange' context.

The CSSWG is not saying that order should not be used to move things around.

If you have a page like this (UPPER CASE denotes visually attention catching design,
while....... denote low visual contrast):

|----------------------------|
|nav|  TITLE       |Secondary|
|iga|              |info     |
|tio|  MAIN        |         |
|n..|  CONTENT     |         |
|...|              |         |
|----------------------------|

which turns into this on mobile:

|--------------|
|  Title       |
|              |
|  Main        |
|  Content     |
|              |
|--------------|
|secondary info|
|--------------|
|  navigation  |
|--------------|


It's fine to reorder with flexbox. I think they key point is that alought in the desktop
design, the main content doesn't come "first", it is still perceived first by users. It's
a 2d design, and the reading order is not determined by a strict numeric ordering of things,
but by how they look ant what draws attention. The main content is the center, bigger,
with more contrast, etc. So people will look at it first, and then explore around with
their eyes. So even if in numeric order it is not first, in a perceptual sense, it is first.

The mobile design is, however, linear, and people will read it top to bottom.

So the markup should match the mobile ordering, since that's the intended linear
reading order, and the desktop styling should use order to put the main content
(which is first in the DOM) in the middle (which is first in perception),
and move the navigation to its left, where it draws less attention and is seen last.

 - Florian

Received on Thursday, 14 January 2016 10:06:36 UTC