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">×</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.
Frequently Asked Questions about Foundation 5 Interchange
What is the main purpose of Foundation 5 Interchange?
Foundation 5 Interchange is a powerful tool that allows developers to load different HTML content based on the size of the user’s screen. This is particularly useful for creating responsive websites that adapt to different devices, such as desktops, tablets, and smartphones. By using Interchange, you can ensure that your website delivers an optimal user experience across all devices, improving its overall performance and usability.
How does Foundation 5 Interchange work?
Foundation 5 Interchange works by using media queries to determine the size of the user’s screen. Based on this information, it then loads the appropriate HTML content. This means that you can create different versions of your website’s content for different devices, and Interchange will automatically load the correct version based on the user’s screen size.
How do I implement Foundation 5 Interchange in my website?
To implement Foundation 5 Interchange in your website, you need to include the Interchange script in your HTML file. Then, you can use the data-interchange attribute in your HTML tags to specify the different versions of your content. For example, you might have one version for small screens, one for medium screens, and one for large screens. Each version should be specified as a path to an HTML file, followed by a media query.
Can I use Foundation 5 Interchange with images?
Yes, you can use Foundation 5 Interchange with images. This is particularly useful for loading different versions of an image based on the user’s screen size. For example, you might have a high-resolution version of an image for large screens, and a lower-resolution version for small screens. By using Interchange, you can ensure that users only download the version of the image that is appropriate for their device, improving your website’s performance.
What are the benefits of using Foundation 5 Interchange?
There are several benefits to using Foundation 5 Interchange. First, it allows you to create responsive websites that adapt to different devices, improving their usability. Second, it can improve your website’s performance by ensuring that users only download the content that is appropriate for their device. Finally, it can help you to create a more consistent user experience across all devices, as you can tailor your content to the specific needs of each device.
Can I use Foundation 5 Interchange with other Foundation components?
Yes, you can use Foundation 5 Interchange with other Foundation components. In fact, Interchange is designed to work seamlessly with the rest of the Foundation framework. This means that you can use it alongside other Foundation components to create complex, responsive websites.
How do I customize the media queries used by Foundation 5 Interchange?
You can customize the media queries used by Foundation 5 Interchange by modifying the settings in the Foundation configuration file. This allows you to define your own breakpoints for different screen sizes, giving you more control over how your content is displayed on different devices.
Can I use Foundation 5 Interchange with JavaScript?
Yes, you can use Foundation 5 Interchange with JavaScript. In fact, Interchange is a JavaScript plugin, and it provides a number of JavaScript events and methods that you can use to further customize its behavior.
What are the limitations of Foundation 5 Interchange?
While Foundation 5 Interchange is a powerful tool, it does have some limitations. For example, it cannot dynamically load content based on factors other than screen size, such as the user’s bandwidth or device capabilities. Additionally, while it can improve your website’s performance by loading smaller versions of content on smaller devices, it cannot prevent large files from being downloaded on these devices entirely.
How do I troubleshoot issues with Foundation 5 Interchange?
If you’re having issues with Foundation 5 Interchange, there are several steps you can take to troubleshoot. First, make sure that you’ve included the Interchange script in your HTML file. Second, check your HTML tags to ensure that you’ve correctly used the data-interchange attribute. Finally, check your media queries to ensure that they’re correctly defined. If you’re still having issues, you may want to consult the Foundation documentation or seek help from the Foundation community.
Syed Fazle RahmanWeb Designer with over 6 years of experience, including user experience and front end development. Currently, CEO and Co-Founder of Hashnode, a network of software developers. Has published two books: Jump Start Bootstrap and Jump Start Foundation for SitePoint Premium.
