Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
14th April 2014

Faster responsive design with Foundation 5

Don’t hide content from desktop to mobile devices, use the Interchange feature to only load the content required by the device

Faster responsive design with Foundation 5

DOWNLOAD TUTORIAL FILES

Ever noticed when creating a responsive site that if you have a huge image for desktop, it is far too big for mobile? Of course you have – and you’ve probably even tried to find a solution. There are some out there but by and large they require a lot of work. Foundation is a responsive framework and with the new release of Foundation 5, we have access to a new module called Interchange.

Interchange lets the designer specify which content is viewed on different screens. It doesn’t turn <div> tags on and off, instead it checks the device width with a media query and using AJAX it loads the right content for that device – it doesn’t just work on images either.

This is a significant improvement over hiding desktop content, as doing that forces mobiles to still download the content, using extra bandwidth and precious memory. Now you can apply Interchange to a <div> tag and load in external HTML snippets that will populate that tag for you – this is known as HTML partials. This is probably the easiest way to create truly responsive content that doesn’t force mobile to have a bloated desktop experience shrunk to the device.

Starting the project

From the resource CD, copy the Start Folder to your htdocs/web folder of your local server, such as W/L/MAMP. Open the file ‘index.html’ in a code editor and add the code as shown below to the head section of the page. This links up the Foundation stylesheet with the Modernizr library, which identifies which HTML5 elements are supported by the browser.

>pre>001 <link rel=”stylesheet” href=”css/        foundation.css” />002     <script src=”js/modernizr.js”></script>

Link up Foundation

Now scroll to the bottom of the document and add the following script tags before the closing body tag. This links up both the jQuery and Foundation library to the document. The last script tag starts Foundation, enabling the Interchange options to work properly on our webpage.

001 <script src="js/jquery.js"></script>
002     <script src="js/foundation.min.js"></    script>    
003     <script>        
004      $(document).foundation();         
005     </script>

Add the video

We are going to add some video to a desktop browser but substitute this with an image for smaller-screen devices. Add the code below after the ‘start video’ comment in the body of the document. As you can see, it loads different HTML content for the different-sized devices into this part of the document. In the next few steps we’ll create those external pages.

001 <div>
002 <div data-interchange="[v-default.    html, (small)], [v-medium.html, (medium)],
003 [v-large.html, (large)]">
004      </div>
005     </div>

Video for desktop browsing

Create a new HTML page and make sure it is empty of all tags – we don’t need body and HTML tags as they will be added to our existing page. Now input the code as shown below, which adds the stylesheet for the content we’ll be adding. We’re making our video 100 per cent wide with a height of 600px.

001 <style>
002 #vid {
003     width: 100%;
004      height: 600px;
005         overflow: hidden;
006 }

Style the video

Here we are adding in the CSS for the video tag itself, so that the video fits the size we want it to. Notice that we also close the style tag down at this point. We could also put these styles inside a master stylesheet on our main page if we wanted to, but this example shows how styles can be added dynamically.

001 video{
002         min-width:100%;
003         min-height:600px;
004         width:auto;
005         height:auto;
006     }
007 </style>

Add the HTML5 video

Directly after the stylesheet we add the following code, which is for an HTML5 video with options for MP4, WebM and Ogg Theora video in order to cover all the major browsers. We set this video to play automatically and then to loop. Now save this page as ‘v-large.html’ in the same folder as the index page.

001 <div id="vid">
002     <video autoplay loop>            
003         <source src="header.mp4" type="video/    mp4">
004         <source src="header.webm" type="video/    webm">
005            <source src="header.ogv" type="video/    ogg">
006        </video>
007    </div>

Medium screens

If you view your index page now over an HTTP connection on a local server you will see the video load in and play. Because we haven’t created the smaller pages yet it will not change for lower screen widths, so again create another new HTML page and add the following code as the only code on the page.

001 <img src="img/vid-medium.jpg">

Create the default image

Save the last page as ‘v-medium.html’ and create another new HTML page. Here we add the code as shown below and then save this page as ‘v-default.html’. Now if you refresh your browser you can resize this and see the different images load depending on the size of screen.

001 <img src="img/vid-default.jpg">

Switch the images

Images can easily be switched inline. To switch content we use the data-Interchange HTML5 parameter. Inside here information is passed to the JavaScript so that the appropriate image can be loaded into the page. Add this code after the horizontal rule under the ‘Welcome’ title.

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

Default image view

The next code that we add directly below the last step is a no script tag, so if JavaScript is disabled for any reason, this will be the image loaded here. We’ve added the smallest image to the page because if there’s no JavaScript, the user will likely want a low rendering of the page.

001 <noscript><img src="img/space-small.jpg"></noscript>
002        <hr>
003

Readable text

Test the page in the browser now and you will see the video and image are responsive – but rather than just downsizing, they actually change to a lower bandwidth for the smaller-screen devices. Now let’s add a little space between the heading tag and the video. Go back into your code and add the ‘spacer’ class to the row as shown below.

001 <div>

Style the link

Now move to the head section of the document and we’ll add in the style tags and the spacer class, just to give the heading a little more space from the video or image that is loaded. Save and view this in the browser again to see the changes take effect.

001 <style>
002    .spacer{ padding-top: 40px;}

Responding map

In the document, scroll down through the body until you come to the comment for the ‘map panel’. Add the following code just below that comment. Here we are going to load either a Google map for the large-screen display or just a small image for the reduced screen size.

001 <div>
002        <div>
003            <div data-interchange="[default.html,     (small)], [medium.html, (medium)], [large.html, (large)]">

Close the <div>s

All we are going to do here is close those three <div> tags and save our document. Create a new HTML document as we are going to add our Google Map into here. Head over to maps.google.co.uk and copy the embed options of your chosen map, as we will need this for our design very shortly.

Style the map

We will style the map up first, so in the new HTML document make sure there are no other tags in there, such as a head section or body section. Then, add the following code in as shown. This is going to style up the <div> tag surrounding the map so that it is the full width of space available and 400px high.

001 <style type="text/css">
002        #map {
003        width: 100%;    
004        height: 400px;
005     }
006    </style>

Add the map

Now we will add the map inside a <div> with the id of ‘map’. So, paste in the code we copied from Google Maps in Step 14. We will need to make some changes though; change the width to 100 per cent and height to 400 as shown. Also you might want to get rid of the text to view a larger map, but that’s down to your preference.

001 <div id="map">
002    <iframe width="100%" height="400"     frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.    ca/?ie=UTF8&amp;ll=43.447946,-79.624382&amp;spn    =0.445663,0.467606&amp;t=m&amp;z=11&amp;output=    embed"></iframe>
003    </div>

Medium map

Save the HTML page as ‘large.html’ and create another new HTML page. This one is going to be much simpler and have a static image display instead of the live Google Map. It’s also a good idea to add the address as text in here as well, as that will be more useful. Make sure you save this page as ‘medium.html’.

001 <img src="img/map-medium.jpg">

Small map

Create another new HTML page and add only the code shown below. Now save this page as ‘default.html’. Go back to your browser and refresh the page. You will now see all of your map details on the screen. You will need to replace the map images with your own map screenshot.

001 //code// <img src="img/map-small.jpg">
002 

Create YouTube content

Move to the comment ‘YouTube Panel’ and add the following code after that comment. This is going to create an Interchange section for YouTube video content on the page. Notice that we are calling the same file for both small and medium displays. Save the current page after adding this code as it is now finished.

001 <div>
002        <div>
003        <hr>
004    <div data-interchange=" [yt-medium.html,     (small)],  [yt-medium.html, (medium)],  [yt-    large.html, (large)]">
005        </div>
006      </div>
007     </div>

Grab some content

Head to YouTube and grab the embed code for a video in there. Now return to your code editor and create a new HTML page. Make sure there are no other tags in the HTML page and add in the flex-video tag as shown in the code snippet below. Now paste in the embed code. Save the page as ‘yt-large.html’.

001 <div class=”flex-video”>
002 <iframe width=”560” height=”315” src=”//www.youtube.com/embed/FBmkFYym9hE” frameborder=”0” allowfullscreen></iframe>
003 <div class=”flex-video”>

 Alternate video content

Now create a new HTML page (last one, we promise!) and instead of the video we are going to add in a title and description of the video to inform the user about the information presented. This means that smaller screen devices will still get the content but in a different format –
as text instead of video.

001 <h3>What we do</h3>
002    <p>Description Goes Here…</p>    
003 

Final step

Finally save this document as ‘yt-medium.html’. Go back to your browser and refresh the page. You should see all the content swapping in and out depending on your page size and obviously on smaller devices you are saving bandwidth for the user, giving them optimised page content.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://eezy.com/ Shawn Rubel

      Gotta love Foundation, loving each and every update of it, and of course, the second of it too!