Building Fluid Designs

Fluid Layouts

As we discussed already that one of the first challenges of developing for

mobile devices is the screen. As mobile developers, we need to design pages
that can adapt across various screen sizes and scenarios. This will prepare
you for building fluid layouts, designs that can adapt across different screen
sizes. And hopefully we'll break the bad habits of designing to the fixed page.
Blog Layout
Now, if you resize this window, nothing really changes. Nothing adjusts other
than the amount of margin space. It's really a fixed width layout. Now, let's
take a look at this on the phone. Now here, I get a very different version of a
blog. It fits well on the phone, but I'm only getting this because blog is running
on Wordpress.
Blog Layout

And, Wordpress is configured to give a totally different version to phones. But, that's not actually
what I want. Because I really want to have a shared layout between the two.

Let's take a look at this on a intermediate device. My seven inch Android tablet. Now here, what I'm
getting is essentially the desktop version. I can still scroll through the site but you can tell all the text
is pretty small. Although interestingly, if I rotate to landscape mode, it adapts.
Blog Layout

Now why does it do that? Well it turns out it's our old friend viewport. There's now viewport set in this
page. So, what does that mean? Does layout happen if the device flipped? Or does layout happen at
the magic 980 pixel width and then get rescaled to fit on the screen?
Digging Around
So if we dig around the page with the developer tools, we'd see a lot of pixel
widths. Including the main content of the page, which is inside this page
element. And you'll notice it has a width set in pixels. If I turn it off, well, the
page is still not working properly. But at least we've started.

Instead of this fixed code let's use a different technique, Fluid Layout. Fluid
Layout means I should stop fixing all those widths in absolute terms like pixels
or points and start thinking in terms of areas of screen real estate.
Percentages of the widths, for example, and sizes based on the initial font or
Em units.
Fixed Viewport Width
With all this complexity, you might ask, why don't I just set the viewport width
to 760 pixels? The width of that column of text I showed you in the Dev tools,
and call it a day. Is it because that would be too easy? Or because, then my
site would scale the same layout across all devices? Or because the fonts
would be wrong in some way?

Well, the answer isn't because this would be too easy there really is a good
reason for why you don't want to set viewport width to a fixed size. Namely
that then your site would scale the same layout across all devices, you'd get
the same layout of text and images on a four inch cell phone as you do on a
ten inch tablet. And of course this means the fonts would be are consistent
size with that layout. You'd get the same size fonts rescaled on to a four inch
phone as you would on a ten inch tablet. And fundamentally this would result
in a poor user experience across mobile devices.
Fixed Viewport Width
Well, the answer isn't because this would be too easy there really is a good
reason for why you don't want to set viewport width to a fixed size. Namely
that then your site would scale the same layout across all devices, you'd get
the same layout of text and images on a four inch cell phone as you do on a
ten inch tablet. And of course this means the fonts would be are consistent
size with that layout. You'd get the same size fonts rescaled on to a four inch
phone as you would on a ten inch tablet. And fundamentally this would result
in a poor user experience across mobile devices.
Set Viewport Width

So let’s go fix my page. Now the first thing we need to do in order to make a mobile friendly page, is
to set the viewport. The mobile browser needs to know that this webpage knows how to format itself
on devices with varying width. It doesn’t need the mobile browser to pretend that it’s a desktop
screen with a given width. Once you set the viewport correctly, it will be able to resize properly and
lay out properly. So what should my viewport meta say?
Set Viewport Width

That's right, you need to set the width to device width, and optionally, you can set the initial scale to
one if you want, to help avoid some iOS device formatting issues.
Making it Fluid
So now that you know how to support the view port meta, lets poke around in
the developer tools to see what we need to do to fix this page. Now, the
biggest problem here is that the page has a fixed column width. If I resize the
window, you'll notice the column of text doesn't actually change size, just
margin position. As we mouse around the elements inside the dev tools, we
can pretty quickly find, the first offending element.

This page element here actually has a width set on it. Let's disable that and
see what happens. Well, it certainly changed things, but I don't think that it
actually improved things very much. Let's keep digging inside the content and
see what we can find.
Making it Fluid

You will find a rapper element having a width of 100% already. Which is good. It means that it's not
preventing us from resizing. But this content element does have a width set in pixels. Let's disable
that. Now as we resize the page our content is fine but the sidebar is appearing and disappearing.
Sure enough, it has a width set.
If we set its width as a percentage also, now we're resizing a little bit better. So now let's go back up
to the page, and let's try giving it a width but let's give it a width in view port units instead, now our
only remaining problem seems to be that the header is actually not resizing as we want it to let's go
take a look at the header image again.
Making it Fluid
The image has a max width set, but not just a width. So, let's set its width. And
now, everything seems to be resizing well. Now, this isn't perfect, but all that I
really wanted to get at was that as you try to transition pages from fixed layout
to fluid layout, The core things to look for, are fixed pixel sizes and lack of
percentage resize.
Use Fluid Layouts
So there's really two rules for building fluid layouts. Use percentages or
viewport units, something that'll size as you resize the window. And then, test
while you're resizing the window. Let's take a look at how this worked out on
the mobile device. We went from this layout without any changes to my blog.
To this layout, definitely an improvement. I don't have to scroll left or right to
see everything on the screen. And, you may notice the font size is actually a
bit larger now. The font size was always set in M units, although it's actually
still a bit small for a mobile device. So, we should probably bump that up. Just
take a look on the tablet.
Use Fluid Layouts

In the tablet layout, you will get a definite improvement. This is actually a pretty readable experience.
And, even when you rotate the screen, you end up with a nice reformatting. All this is really just a
long winded way of saying, be sure to create fluid layouts. Be sure to reflow to use all the space on
the screen and take advantage of every bit you can. And be sure you adapt to different screens as
well. One tool that makes reflow a lot easier, particularly across very different screen sizes, is the
new flex box layout in CSS. This new tool lets you stack elements in flexible rows or columns.
FlexBox Intro
FlexBox has been kicking around for a couple of years now, but it's gone
through some pretty major revisions during that time.

It's just recently shipped in iOS 7, and it's been shipping in Android for a little
while, but you should test your FlexBox layouts thoroughly, across browsers.
This may be a little too bleeding edge for you, but, let's take a look.

We're going to walk through an interactive demo, talking you through each
feature in FlexBox, as you change the page, live, in the developer tools.
FlexBox Compatibility

Okay, that was a ton of detail. Really I recommend you, just sketch out your design, and then party
on it with FlexBox.

Flex Box is super powerful, and it's really super easy to use. Incidentally, I did mention, Flex Box is
still making its way into all the browsers out there. So, there are some Flex Box polyfills out there,
that can help you, like Flexy.
Fluid to Responsive Design
So these tools give us the ability to build designs that are fluid. But as it
turns out, that's not enough. As you may have noticed as you went
through this lesson, the experience of re-flow from a very small window
size to a very large window size is not really a great one for the user. Now
that you know how to build fluid designs, you need to learn to adapt those
designs to radically different scenarios, like a four inch phone screen, and
a 30 inch desktop screen.