Top Banner
Flexbox Zoe Mickley Gillenwater @zomigi Responsive Day Out June 2015 Inspiration Responsive
42

Responsive Flexbox Inspiration (Responsive Day Out)

Aug 02, 2015

Download

Design

Zoe Gillenwater
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Responsive Flexbox Inspiration (Responsive Day Out)

Flexbox Zoe Mickley Gillenwater @zomigi Responsive Day Out

June 2015

Inspiration

Responsive

Page 2: Responsive Flexbox Inspiration (Responsive Day Out)

I work for

Page 3: Responsive Flexbox Inspiration (Responsive Day Out)
Page 4: Responsive Flexbox Inspiration (Responsive Day Out)
Page 5: Responsive Flexbox Inspiration (Responsive Day Out)
Page 6: Responsive Flexbox Inspiration (Responsive Day Out)
Page 7: Responsive Flexbox Inspiration (Responsive Day Out)

674,000+ properties�42 languages�54 currencies

Page 8: Responsive Flexbox Inspiration (Responsive Day Out)

Content extremes on Booking.com Shortest property name: 2 characters

Longest property name: 109 characters

Page 9: Responsive Flexbox Inspiration (Responsive Day Out)

How big do I make this thing?

Page 10: Responsive Flexbox Inspiration (Responsive Day Out)

%�em/rem�vw/vh

Page 11: Responsive Flexbox Inspiration (Responsive Day Out)

Relative units of measurement are your best guess at the

ideal, but they’re still a guess.

Page 12: Responsive Flexbox Inspiration (Responsive Day Out)

Flexbox gets us closer to the ideal, because it lets us design

without units.

Page 13: Responsive Flexbox Inspiration (Responsive Day Out)

Example: a responsive form from http://jobs.theguardian.com/

Page 14: Responsive Flexbox Inspiration (Responsive Day Out)

My copy of that form Same floats, same percentage widths

Page 15: Responsive Flexbox Inspiration (Responsive Day Out)

The trouble with explicit sizing Since the select and button are sized by a percentage, not sized automatically by their content, this can happen:

Box too small for its content Box too big for its content

Page 16: Responsive Flexbox Inspiration (Responsive Day Out)

Use the flex property instead Tells browser starting size (including content size) and whether item can grow or shrink

width: 33.333% flex: auto

Fill up remaining space

width: 16.666% flex: none

Size to content exactly

Page 17: Responsive Flexbox Inspiration (Responsive Day Out)

Form fields are a pain in the butt The fields and button don’t all match each other exactly in height

Page 18: Responsive Flexbox Inspiration (Responsive Day Out)

Fix alignment with flexbox Turn each field wrapper into flex container so field inside will stretch to match height of its line:

.flexbox .jobs-form_field-wrapper { display: flex; align-items: stretch; /* default */ width: auto; }

Fields misaligned without flexbox Fields match height due to align-items

Page 19: Responsive Flexbox Inspiration (Responsive Day Out)

Smarter sizing

Non-flexbox

Flexbox enhanced

Page 20: Responsive Flexbox Inspiration (Responsive Day Out)

Content-driven breakpoints aren’t perfect.

Page 21: Responsive Flexbox Inspiration (Responsive Day Out)

Automatic breakpoint with flexbox Booking’s responsive customer service form doesn’t use any media queries

http://www.booking.com/content/cs.html

Page 22: Responsive Flexbox Inspiration (Responsive Day Out)

All of the CSS for those 2 layouts form.cs-message { display: flex; flex-flow: row wrap; margin-right: -10px; } input.cs-message__text { flex: 1 0 40%; width: 43%; float: left; margin-right: 10px; padding: 8px 10px; }

1 property creates 2 responsive layouts, both always full width

Page 23: Responsive Flexbox Inspiration (Responsive Day Out)

Taking advantage of variable space Task: add a message about low availability of the room price shown: “We have only X left on our site!”

How about right here in this lovely big gap?

Page 24: Responsive Flexbox Inspiration (Responsive Day Out)

Taking advantage of variable space Problem: the gap is not always big enough to hold a sentence of text

Page 25: Responsive Flexbox Inspiration (Responsive Day Out)

Taking advantage of variable space Solution: use flexbox to place text beside price when space allows; otherwise, it can wrap below price

Page 26: Responsive Flexbox Inspiration (Responsive Day Out)

Taking advantage of variable space Non-flexbox Flexbox enhanced

Page 27: Responsive Flexbox Inspiration (Responsive Day Out)

Improved wrapping Non-flexbox Flexbox enhanced

Page 28: Responsive Flexbox Inspiration (Responsive Day Out)

Flexbox with float fallback .iw_mini_details_wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; } .iw_mini_review_score_wrapper { float: left; } .iw_mini_price_wrapper { float: right; }

Flexbox properties on container override floating automatically in supporting browsers

Floating gets used by old browsers

Page 29: Responsive Flexbox Inspiration (Responsive Day Out)

Improved wrapping in RWD layout

Page 30: Responsive Flexbox Inspiration (Responsive Day Out)

Improved wrapping in RWD layout With float or text-align With flex or justify-content

Page 31: Responsive Flexbox Inspiration (Responsive Day Out)

These examples don’t look wrong or broken without flexbox. �

�Flexbox just enhances their sizing

and spacing to look better.

Page 32: Responsive Flexbox Inspiration (Responsive Day Out)

Flexbox can also enhance visual ordering.

Page 33: Responsive Flexbox Inspiration (Responsive Day Out)

Reordering mobile content

In RWD, narrow-view (mobile) stacking order doesn’t always match needed HTML order for wide-view (desktop) layout

Keep HTML order needed for desktop and use flexbox order property only on mobile, since browser support is better and layout is simpler there

Problem Solution

Page 34: Responsive Flexbox Inspiration (Responsive Day Out)

Example: moving a photo on mobile

Page 35: Responsive Flexbox Inspiration (Responsive Day Out)

Example: moving a photo on mobile Flexbox enhanced Non-flexbox

Page 36: Responsive Flexbox Inspiration (Responsive Day Out)

Reorder for good, not evil.

Page 37: Responsive Flexbox Inspiration (Responsive Day Out)

Reordering on The Guardian Stacking order you see when narrow is the HTML order, unchanged

1

2

3

4

5

6

Page 38: Responsive Flexbox Inspiration (Responsive Day Out)

Reordering on The Guardian Reordered using flexbox when wide

1 2 3

4 5 6

flex-direction: row-reverse

flex-direction: row-reverse

Page 39: Responsive Flexbox Inspiration (Responsive Day Out)

Flexbox requires a mental shift in how you think about and

approach layout.

Page 40: Responsive Flexbox Inspiration (Responsive Day Out)

RWD is not binary.�Responsiveness is a continuum.�

�Flexbox can help make your site

more responsive.

Page 41: Responsive Flexbox Inspiration (Responsive Day Out)

Flexbox is not ALL or NOTHING

Page 42: Responsive Flexbox Inspiration (Responsive Day Out)

Thanks!

Zoe Mickley Gillenwater @zomigi [email protected] zomigi.com | stunningcss3.com | flexiblewebbook.com

Photo credits: “oh.my.goshk” by Abulic Monkey and “A Cone Undone” by patersor on Flickr.