Add an XS layout/breakpoint

wheresrhys commented 9 years ago

At 600px it's still feasible to have plenty of UI elements which take up half the width (e.g., next article cards), whereas at 240px it becomes very impractical. I think o-grid should give developers a built in breakpoint at about 400px to be able to define a layout for very small screens.

@danskinner @kaelig

danskinner commented 9 years ago

I think that makes sense - distinguish between larger-screened handsets and older, smaller ones.

kaelig commented 9 years ago

I just had a few thoughts about how we could do breakpoints / layouts in a mobile-first fashion. See below what I came up with.

What you suggest (XS), would be the default "no media query" layout.
Then, the S layout would start kicking in at 370px
The M layout kicks in at 610px
And so on…
The max width of the layout is 1330px (unless you're in an old browser)

Also, I'd like to base the layout sizes on round column widths because it makes it easier to provide a robust fallback for older browsers when width is in round values (otherwise IE will have rounding errors and that can cause layout issues):

    S:  370px,  // 20px columns
    M:  610px,  // 40px columns
    L:  850px,  // 60px columns
    XL: 1090px  // 80px columns

Do you think that would work?

Sass configuration

/// Number of columns
///
/// @type Number (unitless)
$o-grid-columns: 12 !default;

/// Gutter size in pixels
///
/// @type Number
$o-grid-gutter: 10px !default;

/// Minimum width in pixels
///
/// @type Number
$o-grid-min-width: 240px !default;

/// Maximum width in pixels
///
/// @type Number
$o-grid-max-width: 1330px !default;

/// Layouts
///
/// @type Map
$o-grid-layouts: (
    S:  370px,  // 20px columns
    M:  610px,  // 40px columns
    L:  850px,  // 60px columns
    XL: 1090px  // 80px columns
) !default;

kaelig commented 9 years ago

Breakpoints are now:

$o-grid-layouts: (
    S:  _oGridWidth($column-width: 30px), // 490px
    M:  _oGridWidth($column-width: 50px), // 730px
    L:  _oGridWidth($column-width: 70px), // 970px
    XL: _oGridWidth($column-width: 90px)  // 1210px
) !default;

In a sense, XS is the default breakpoint (240-490px).

wheresrhys commented 9 years ago

Just been looking at this again. Can S kick in at the smaller value suggested initially of 370px? There is a big difference between devices of width 240px (which I think is still the minimum width grid will go to?) and 490px - to not offer a breakpoint inbetween leaves this issue barely addressed. @simonwilliamsFT @kaelig

PS - sorry for raising this so late in the day, only just picked up on the breakpoint change

kaelig commented 9 years ago

@wheresrhys Thanks for looking at it. The range of things than can happen in between 240px and 490px is endless, and requires some fine-tuning to be done well. The breakpoints are "global layout sizes", which doesn't exclude more a granular approach with tweakpoints in between two breakpoints.

For argument's sake, let's say there is an element that needs to be floated when the viewport reaches 337px wide. It would be possible to use Sass MQ mq(337px) or oGridRespondTo(337px) (or even a simple media query, but I'd recommend to stick with the mixins mq and oGridRespondTo).

.my-element {
  // default rules

  @include mq(337px) {
     // tweaks
    @include oGridColumn(1/2);
  }
}

Feel free to have a look at the "Final Thoughts" of this article: http://www.sitepoint.com/breakpoints-tweakpoints-sass/ where @hugogiraudel explains how to create component-specific and project-specific media query wrappers for Sass MQ.

wheresrhys commented 9 years ago

I agree that fine-tuning can, and should, be done on a product level, but I still think it would be more useful for the difference between breakpoints to be smaller between say XS and S compared to between L and XL.... a mildly logarithmic progression would be better I think.

At present the difference between each pair of adjacent breakpoints is roughly 240px, but this makes the implicit assumption that adding 240px to the width has a constant impact/utility regardless of what the original width was. It fails to acknowledge that adding 240px to 240px doubles the width, whereas adding 240px to 970px only adds 1/5th. It's difficult to quantify/argue for but it is important

It's o-grid's job to standardise on useful default breakpoints and I don't think the S breakpoint is as useful as it could be. We may well end up hacking in a smaller breakpoint for use across next. See below - 2 cols would work at the second width but not at the first.

kaelig commented 9 years ago

I see what you mean, could it work for you to add a breakpoint, using variable $o-grid-layouts?

// Add the "Next Small" tweakpoint
$o-grid-layouts: map-merge((NS: 370px), $o-grid-layouts);

AlbertoElias commented 9 years ago

But why isn't the default S layout up to discussion?

wheresrhys commented 9 years ago

That would work for us yes - what a wonderfully flexible grid you've made!

I still think the constant 240px interval between the default breakpoints isn't optimal for targeting handheld devices though. We could, I presume, overwrite all the breakpoints to whichever values we want?

wheresrhys commented 9 years ago

@AlbertoElias well said comrade :)

kaelig commented 9 years ago

I agree that between XS and S breakpoints, there is a lot of room for layout changes.

Here is a breakdown of my views on the new breakpoints and why they exist:

XS (240px-489px)

We make sure the content is readable but let's be honest, it won't be very usable, which is probably fine for now, as watches with a browsers and really old phones aren't a concern.

Why no global breakpoints in between?

Too many possibilities: there's a lot of room for layout changes in that range, which I think are hard to sum up with a potential "370px" breakpoint, because precision is needed and products will still need to introduce other tweakpoints (maybe one component at 320px, and another component at 390px, these things need to be precisely set with designers).
Product decisions: depending on your audience and gathered data, a product can decide to micro-optimise with tweakpoints. The Origami team doesn't have this luxury (no data or user testing at the moment), so having a simplified "one mobile breakpoint to rule them all" should make development and design easier and less costly. Feel free to debate this point, this is an opinion, not a fact.

S (490px-729px)

Probably the layout that should get the less love and focus because I assume this is the smaller part of our audience.

Small screens, also called big phones :)
It's an actual break from extra small screens
Again, a lot of room for tweakpoints.

M (730px-969px)

768px is iPad portrait
a range of tablet devices

L (970px-1209px)

Serves easily two big and very different parts of our audience:

IE8 (in fixed layout, set at 970px)
1024px is iPad landscape

XL (1210px)

Most computer screens today, we might add another breakpoint after that one later, but for now it's already a pretty big scope for designers to think about.

Does that help? I think a lack of communication on my side led to a misunderstanding, and hopefully this breakdown helps conveying this message: feel free to add tweakpoints!

kaelig commented 9 years ago

As discussed last week, a product can add their own layouts and tweak the default breakpoints.

The Next FT is experimenting with a XS breakpoint, which might become part of the default set later on. Closing this, as it's no longer an issue.

Financial-Times / o-grid