Yesterday, I talked some about how Bootstrap 3 has changed and how that might impact you as you explore migrating. Today I want to talk very briefly about some of the experiences I’ve had with the revision to my layout on my site.

Go With the Flow

In most cases, when you set out to make a gridded, responsive layout with Bootstrap, you are rewarded with a very natural collapsing of the layout that flows well into a reduced structure. For example, let’s consider an individual “post row” on my site:

A simple post row.

The way this is laid out is actually like this:

+-------------------------+
|         TITLE           |
+-------------------------+
| DATE | SUMMARY | MORE-> |
+-------------------------+

If we collapse it for mobile, this is what we’re presented with:

Stack-em up.

Which, as you can probably guess, lays out like this:

+---------+
| TITLE   |
+---------+
| DATE    |
+---------+
| SUMMARY |
+---------+
| MORE->  |
+---------+

It’s “tall”, but it’s making the most effective use of the space without removing any elements, and overall, I’m fairly happy with the end result. But what if this doesn’t work? Well, you have a few options:

  • Hide It - If it’s an optional element, you can just get rid of it at certain media levels. I’ll show this below.
  • Swap It - Similarly, if it is better served in a different construct, you can deliver both, but flip which is visible based on different viewport size levels.
  • Re-order It - Bootstrap has a (somewhat poorly documented) feature called Column Ordering that may not be totally obvious at initial grasp, but allows you to adjust the order of elements when they share a column, but not when they get wrapped onto separate rows.

Hiding in Practice

So I mentioned that my site uses hiding. I actually use it in two places, and you can see it in action simply by resizing your desktop browser.

The first is the big blue “more” buttons on the home page. If you look, you’ll see that I have a well-aligned row of buttons under the three most recent posts:

Big Blue Buttons

Unfortunately, to ensure that the more buttons share a visual row, I’m using the poor man’s way out, and simply using separate rows in Bootstrap:

+-----------------------------------+
| ARTICLE 1 | ARTICLE 2 | ARTICLE 3 |
+-----------------------------------+
|  MORE 1   |  MORE 2   |  MORE 3   |
+-----------------------------------+

This looks great, and since Bootstrap always uses consistent span sizes, it’s no layout issue whatsover. However, when we get into re-flowing this for mobile, we’ll quickly see the problem:

+-----------+
| ARTICLE 1 |
+-----------+
| ARTICLE 2 |
+-----------+
| ARTICLE 3 |
+-----------+
|  MORE 1   |
+-----------+
|  MORE 2   |
+-----------+
|  MORE 3   |
+-----------+

Whoops! Now we have three stacked more buttons completely out of place!

(Incidentally the equal height columns in CSS is a notorious problem, and has many potential “solutions”, none of which I really wanted to deal with. Here are a few examples).

In my case those buttons add nothing unique (article navigation is delivered via title), and in fact take up a ton of space on the mobile layout that is entirely unnecessary. So all I do in this case is simply disable them from showing unless you’re on a desktop-worthy screen size.

<div class="col-lg-4 visible-lg">
	<a href="..." class="btn btn-large btn-block btn-primary">MORE &arr;</a>
</div>
Bye-Bye Buttons

Now, you could just as easily have another element that was “visible-sm”, and only showed up when on mobile, but since the title is already clickable, it seemed unnecessary to me.

The other part of my layout that is only visible on desktop is the large majority of the navigation. In fact, much of the navigation is largely reproduced on other pages anyway (like my about page) and things like atom feed links are far less likely to be useful on a mobile device; so they are left out.

Lots of links
Only what is necessary.

Re-Order

I don’t have a particular case that shows off the column reordering, but you can certainly experience it via the Bootstrap documentation linked to above. My example with the buttons would not be solved by this since they had to be in different rows on the desktop to get the ensured “clearfix” benefits of a new row.

Summary

I’ve only scratched the surface with Bootstrap 3’s responsive layouts, and am certainly not digging into particularly elegant designs; simply hacking at mine until it works. That said, the amount of “work” on my part to get a good mobile layout was actually quite minimal.

Categories: journal | Tags: bootstrap site css | Permalink
blog comments powered by Disqus