Web

Foundation 5 Interchange – Creating Dynamic Page Content

Syed Fazle Rahman
Share

The Foundation framework isn't new to the industry, but it is a framework that hasn't been explored completely. With its latest version, Foundation 5, it has compelled developers to use it without giving it a second thought. Along with major revamp since Foundation 4, it has brought many innovative and useful tools not implemented by any framework to date. One such tool we will explore in this article is Interchange.

The Foundation 5 framework is included in the list of Best Web Design Frameworks for 2014.

Interchange, as the name suggests, is a feature that helps developers interchange content on different types of devices and screen sizes.

Imagine you have used a Google Maps script to display the current location of your offline store. It looks and works well in the desktop and tablet version of your website. But when it comes to smaller screens on mobile devices, where the speed of your website matters the most, you have think about whether the live Maps script is really the best solution.

Using Interchange you can solve this problem by interchanging the Maps script with a static image of the location on the go. Sounds cool, doesn't it?

My main focus in writing this tutorial is not to solve your Maps problem, but various other similar situations where heavyweight web content can be optimized and replaced on mobile devices and different screen sizes.

Interchange is a JS feature that comes pre-loaded in the Foundation 5 package. If you already have a Foundation 5 environment set up, you can skip the “Setting up” topic below. On the other hand, if you're completely new to Foundation, go through the following section carefully.

Setting up a Foundation 5 Project

Just like any other CSS framework, Foundation 5 also comes with a set of CSS, JS and Font files. All the necessary files needed to run Foundation 5 come zipped from their website, foundation.zurb.com. Go ahead and download the file. Unzip the folder and copy the CSS, JS and IMG folder inside your web application.

Create an index file named index.html and then paste the below code into it.

    <!DOCTYPE html>
    <!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
    <html class="no-js" lang="en" >

    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Foundation 5</title>

      <!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/foundation.css">

      <!-- If you are using the gem version, you need this only -->
      <link rel="stylesheet" href="css/app.css">

      <script src="js/vendor/modernizr.js"></script>

    </head>
    <body>

      <!-- body content here -->

      <script src="js/vendor/jquery.js"></script>
      <script src="js/foundation.min.js"></script>
      <script>
        $(document).foundation();
      </script>
    </body>
    </html>

The above html is a basic recommended markup by Foundation. It has all the correct meta tags and proper linking to necessary files. Make sure all the paths to the static resources (JS, CSS, etc) are properly configured and working, according to your own project.

Foundation 5 uses Normalize and Mordernizr, so make sure they are properly linked as shown above. Here app.css is just the name of a custom CSS file. You can replace it your main CSS file's name.

That’s it. You are all set to launch your first Foundation project.

Understanding Foundation 5 Interchange

Foundation’s Doc states:

Interchange can now pull in HTML partials so you can load different sections of your page for particular media queries.

In simple words, as the size of the browser changes, it gets triggered automatically and loads different content meant for that screen size.

Interchange uses the data-interchange attribute to identify which content to load. It is a custom attribute created by Foundation 5 and intercepted by foundation.intercept.js present inside js/foundation folder.

In this tutorial, we will check out the following demos:

  • Interchanging Maps script with a static map image in smaller screens.
  • Interchanging images.
  • What happens when JavaScript is disabled in the browser? Will Interchange still work? Let’s see.

Starting with the first example:

Interchanging Map type

Situation: Display a dynamic Google Map in Desktop browsers, a larger static map image in tablets and a smaller static image in Mobile devices.

Markup: 

    <div data-interchange="[maps/small.html, (small)], [maps/medium.html, (medium)], [maps/large.html, (large)]">
              <div data-alert class="alert-box secondary radius">
                This is the default content.
                <a href="#" class="close">&times;</a>
              </div>
        </div>

Take a closer look at the value of data-interchange attribute. It takes various rules as its value. Each rule is surrounded by square brackets (the syntax of a JavaScript array) and separated by a comma.

With each rule we have two parameters: the first parameter takes the path to the content and the second parameter specifies the media query, surrounded by parenthesis.

There are seven types of predefined media queries: default, small, medium, large, landscape, portrait and retina.

The last rule that returns true will be used to load the content in the specified section.

Inside each Interchange section, we again have a child section which will be shown in case the content specified in the rule is not available. In our case, the default content is an alert box that says “This is the default content.” with a close button in the right side corner.

Check out the demo page and try resizing your browser and you will see how the Maps section changes its content.

Now let’s see how to make use of Interchange for loading different resolution images.

Interchanging images

Foundation 5’s Interchange can also be used to replace images for different types of browsers. For example, we have an HD version, a medium sized version and smaller version of a same image. Let’s see how to implement this using data-interchange. 

<img data-interchange="[img/space-small.jpg, (small)], [img/space-medium.jpg, (medium)], [img/space-large.jpg, (large)]">

When using Interchange for images, it is recommended not to use src attribute. This is done for 2 reasons. First, the image specified in the src tag is going to be overridden by Foundation’s interchange script anyway and secondly, to prevent two simultaneous browser requests for a same <img> tag.

If you further want to optimize your image for retina displays, you can specify a new rule with media query as “retina”. 

data-interchange="[img/retina.jpg, (retina)]"

You should always specify a default media query to guarantee that your html markup at least has some content in every device.

data-interchange="[img/def.jpg, (default)]"

Overriding default media queries

In case you are not satisfied with the media query standards provided by the framework, you can always specify your own media query. This is easily done by writing a Foundation script. 

    $(document).foundation('interchange', {
      named_queries : {
        ipad_4 : 'only screen and (max-width: 700px)'
      }
    });

Next time, you can use “ipad_4” instead of one of the seven media queries.

Foundation 5’s Interchange in Non-Foundation Project

If you want to use Interchange in your non-foundation project, you need to include three JavaScript files: jQuery, FoundationJS and FoundationInterchangeJS. 

    <script src="js/vendor/jquery.js"></script>
    <script src="js/foundation/foundation.js"></script>
    <script src="js/foundation/foundation.interchange.js"></script>

JavaScript Disabled Case

You can always place a <noscript> tag below every section that uses Interchange Functionality. 

    <img data-interchange="[img/retina.jpg, (retina)]" />
    <noscript><img src="img/default.jpg"></noscript>

The <noscript> tag will only work when JavaScript is disabled in the browser. This feature further guarantees a section with some content.

Conclusion

This was all about how to optimize your HTML page for various types of browsers. I think Foundation’s Interchange script is an essential tool for every project these days. Hence, just making a mobile friendly design is not enough – optimized design is the demand of the hour!

To know more about Foundation framework, you can refer to the following SitePoint articles:

You can also download the source code which I have used for this tutorial and try to experiment with it.

Demo Page