How to Make a Two Column Website Layout Mobile-Friendly

Designing Multi-Column Sites that Work on a Smartphone


How to Make a Two Column Website Layout Mobile-Friendly

by Christopher Heng, thesitewizard.com

For most sites, a two-column design does not fare too well in the narrow confines of a smartphone screen, and no wonder, since such a layout is usually chosen to optimize the horizontal space available on the average computer monitor. In view of this, when displayed on a mobile device, websites created with the responsive web design philosophy are often provided with a special cascading style sheet ("CSS") that rearranges the columns so that a mobile user can still use the site comfortably. This article shows you how this can be done.

Preliminaries

Your Existing Two-Column CSS Code Doesn't Matter (Much)

There are myriad ways to create a two column design with CSS, even when we confine ourselves to using only DIV blocks (and not other HTML elements). For example, the Two Column and Two Column with Header and Footer demos from the article How to Design a Two Column Layout uses the float property to create the columns, while thesitewizard.com itself uses absolute positioning to accomplish the same thing. And those are definitely not the only ways. In fact, an earlier version of that 2 column layout article used yet another method (also with floats). And that doesn't even take into account the possibility of using relative positioning to do the job. And so on. CSS is very flexible.

In spite of this, the task of making your site mobile-ready depends more on your web page's HTML structure than your existing CSS.

The First Type of HTML Structure: Content First

Let's take a look at one arrangement of the HTML code of many 2-column websites:

<div id="container">
  <div id="content">Content here</div>
  <div id="navbar">Navigation</div>
</div>

In this arrangement, the DIV block containing the real content of the website (#content) comes first, while the code for the side or navigation column (#navbar) comes later. This is essentially the same order used by thesitewizard.com for its pages, as well as the 2-column layout demo.

If you think about it, this HTML page, as it stands, is already mobile-ready. The only thing interfering with its mobile-friendliness is your desktop CSS code that arranges the DIV blocks into columns. Without that code messing with your page, a smartphone will simply display everything in the HTML order, with the content DIV block first, followed by the navigation column. For most sites, this is what you want, since people visit a website for its content, and only when they are done with it, do they need to use the navigation menu.

In other words, for those of you with this type of structure, the solution is incredibly simple.

<link rel="stylesheet" type="text/css" media="all" href="all.css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 630px)" href="two-cols.css">

In the above example, the CSS code common to all devices is placed in the all.css file. It may, for example, contain code that sets the background colour ("color" in US English), fonts used, etc. The code that creates the 2 column effect is placed in the two-cols.css file, which is only applied when the screen has a minimum width of 630 pixels. (Note that 630 is an arbitrary number that I picked for this tutorial. Please see the previous chapter, if you don't know what width to use.)

For those who prefer to put everything in a single file, here is the same thing collected together in one style sheet:

/* for all devices (until the @media block) */
body {
  font-family: Arial, Helvetica, sans-serif ;
}
@media only screen and (min-width: 630px) {
  /* only for screens wider or equal to 630 pixels */
  /* code from https://www.thesitewizard.com/css/design-2-column-layout.shtml */
  #content {
    float: right ;
    width: 80% ;
  }
  #navbar {
    float: right;
    width: 20%;
  }
}

The above code happens to use the CSS described in my two column tutorial to create the columns, but you can always substitute your own 2-column code in its place.

What if you have a header and footer div block like in the Two Column with Header and Footer Layout Demo? In such a case, on a mobile device, the header block will be displayed first, followed by your content, the navigation column and finally the footer. If you have put sensible things in those blocks, like your logo or page title in the header and copyright notice in the footer, then everything should still be in a logical and useful order for your smartphone visitors. You can see it for yourself by viewing the demo in either a mobile phone or with your desktop browser window resized to (say) 320 pixels wide.

Browser Compatibility: When you code your CSS this way, what do people who use old web browsers see? By "old browsers", I mean versions of browsers that do not implement the media queries facility.

My demos put the two column code in a different place. Here's the code from the demo, distilled to contain only the portions relevant to this tutorial and collected together into one style sheet with added comments:

/* for all window widths */
#content {
  float: right ;
  width: 80% ;
}
#navbar {
  float: right;
  width: 20%;
}
@media only screen and (max-width: 629px) {
  /* for widths less than or equal to 629 pixels */
  #content {
    float: none ;
    width: 100% ;
  }
  #navbar {
    float: none ;
    width: 100% ;
  }
}

Since the two column code is not enclosed within a set of media queries conditions, it applies at the start to all browsers. Then, when a mobile browser encounters the media queries section, it will apply the additional rules in that section. Since the #content and #navbar div blocks are already floated out of the document flow by that time, thanks to the earlier two column code, the new rules have to undo everything. It does this by setting float: none to undo float: right, and width: 100% to reverse the width settings of 80% and 20%.

The effect of writing the CSS rules in this way is to affect browser compatibility thus:

If old desktop browsers don't matter to you, I think the first method is easier to understand and maintain. You don't have to worry every time you add a rule to your style sheet, whether you need to reverse it in your mobile CSS. Of course, if you are willing to use JavaScript (as mentioned in chapter 1), you can have the best of both worlds, and have even the old desktop browsers display your ideal layout. But as I said, these old browsers are probably near extinction these days, and it may not be worth your time and effort to code for them. However, you should check your web statistics to be sure, just in case your site's browser usage is drastically different from mine.

The Second Type of HTML Structure and How to Move a DIV Block Ignoring HTML Order

What if your HTML is arranged as follows?

<div id="container">
  <div id="navbar">Navigation</div>
  <div id="content">Content here</div>
</div>

In such a case, you don't want the mobile layout to follow the HTML order, since the first thing a visitor will see is the navigation menu rather than the content. You need some way to move the second DIV block so that it is presented before the first one.

The trouble is that in order to solve this easily, you will need to use the new flexible box CSS facilities (or "flex box" / "flexbox" as it is commonly known) which are only reliably implemented in modern browsers. And when I say modern browsers, I mean versions that are even newer than the list I specified for media queries support. For example, my simple flexbox demo web page requires at least the following browser versions:

Without CSS flexbox, I imagine that you will have to compute the height of your content DIV block so that you can move your navigation block to a spot after it ends using absolute positioning. This is probably not practical for most sites, since you cannot then just add new content as and when you want, otherwise the height will change. I suppose another way is to simply let mobile users see the navigation menu first before your content.

For those willing to use the new CSS flex box facilities, you will be surprised how easy it is to move DIV blocks around and create multi-column sites with it, compared to the traditional CSS way of doing things. It is, after all, designed for that purpose.

Below is the CSS code from the demo page, with all the irrelevant bits removed, and some things rearranged and added to make things easier to understand for tutorial purposes. For the same reason, I have also put all the CSS code together in one style sheet here, even though the demo site uses media queries in the <link> tags.

@media all and (min-width: 630px) {
  /* two column code */
  #container {
    display: flex ;
    align-items: stretch ;
    flex-flow: row wrap ;
  }
  #navbar {
    order: 1 ;
    width: 20%;
  }
  #content {
    order: 2 ;
    width: 80% ;
  }
}
@media all and (max-width: 629px) {
  /* one column code */
  #container {
    display: flex ;
    align-items: stretch ;
    flex-flow: column wrap ;
  }
  #navbar {
    order: 2 ;
    width: 100%;
  }
  #content {
    order: 1 ;
    width: 100% ;
  }
}

Let's dissect the code.

To create the two column site, I set the containing DIV block to use display: flex instead of the default display: block. This allows us to set the order of the child DIV blocks, that is, the DIV blocks enclosed within #container. The flex-flow: row rule instructs the browser to arrange #navbar and #content horizontally next to each other. The order in which those blocks are arranged is specified by order: 1 for #navbar, since I want the side column on the left, and order: 2 for #content. The wrap portion of the flex-flow rule merely says it is to wrap blocks that cannot fit so that it goes below. However, wrapping isn't actually needed here since the total widths of the two blocks equal 100%.

On resolutions below 630 pixels, I set flex-flow: column, arranging the enclosed DIV blocks vertically instead of horizontally. Since I want #content to come first in such a case, I give it order: 1, and set the other block to order: 2. Yes, it's that simple: you set the order of the blocks by simply giving it a numerical value. And 1 comes before 2, which comes before 3, and so on.

There's another facility that I use from the flexbox family of rules: align-items: stretch. Notice that the navigation column in the flex box demo has the same height as the content one in the two column mode, even though I did not pad that column with blank lines nor did I use some ugly CSS hack to accomplish it. This align-items: stretch rule causes the browser to stretch the block so that the heights of the child DIVs are equal in flex-flow: row mode, and the widths are equal in flex-flow: column mode.

In case you're wondering how this is different from the non-flexbox CSS code I use for thesitewizard.com itself (or even the non-flexbox two column layout demo), realise that the two columns on all of thesitewizard.com's pages are actually uneven. On most pages, the navigation column is shorter than the content column. I disguise this fact by giving both columns the same background colour. The two columns in the flexbox demo, however, are actually of equal height, and I can add content to either column with impunity without worrying that their heights will ever become unequal since the browser will adjust both columns automatically so that they are the same.

However, as I said, the ease and simplicity of arranging blocks on the screen with flexbox comes with a price: compatibility. Of course, whether this is an issue depends on the demographics of your website.

For those who have lots of visitors with old browsers, you can improve the situation by using flexbox only in your code for mobile phone users. That is, instead of using the flexible box CSS to lay out your two column website for desktop users, stick to your current CSS code. Only use flexbox in the smartphone portion, enclosed by media queries conditions.

Other HTML Structure: 3 Column Layout, Multiple Blocks and Sections, etc

As you may have guessed, flexbox can be used to re-order your blocks in any number of different website designs, from 3 column layouts to even more unusual ones involving multiple blocks placed all over the shop. The blocks can be hoisted out of its HTML order to any position you like, making modification for the small screens of a mobile device relatively simple.

Next Chapter

In the next chapter, I will address the issue of getting your website images (pictures) to fit on mobile devices.

Copyright © 2016-2017 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Make a Two Column Website Layout Mobile-Friendly





Home
Donate
Contact
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.