Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From \$16.50/m

# Hi-Performance Web Design with Data URIs

Difficulty:IntermediateLength:LongLanguages:

We recently covered the The What, Why and How of Data URIs in Web Design on Webdesigntuts+, where we looked into some of the possibilities of using data URIs for performance-friendly interface designs.

In today's Premium tutorial, we're going to be taking some of the theory covered in the introductory article, building upon some of the examples used to develop a fully realized user interface. Just to keep things interesting, we'll also be making our design responsive and we'll be using the Dribbble API and jQuery to pull in some images from the Envato Dribbble feed.

There's a lot to cover, so let's get started!

## Before We Get Started

As I've already mentioned, this tutorial builds upon the The What, Why and How of Data URIs in Web Design tutorial. Even if your knowledge of Data URIs is already solid, I highly recommend that you read this article before getting started here. I'll be using some of the code from the exercises in the initial article to save time, so I'll be asking you to jump back to the original article at a couple of points.

Secondly, we'll be relying heavily on data URIs in this project to give you lots of practice in using this technique. Whether or not I'd actually use data URIs this heavily in production is debatable (especially if supporting <IE7), so just remember that data URIs are simply another tool in your toolbox and these techniques are not necessarily a silver bullet for every situation.

Finally, this project is tested in the latest releases of Webkit, Firefox and Internet Explorer. You can safely assume that this interface won't be fully functional in IE7 and below (although fallbacks could easily be applied to support old IE releases, if required). Further, I'll be referring to -webkit and generic prefixes for CSS3 elements in the tutorial, but the source files will contain all vendor prefixes.

## A Two Minute Review of Data URIs

Before we get cracking, let's take a (very) quick refresher on what the data URI scheme is and why it can be a good alternative to serve elements to the browser that traditionally can drain resources and slow performance.

• Data URIs are a way of encoding binary data into an ASCII text string that modern browsers can read and render.
• Data URIs are often used to replace image files, but any binary data can be encoded, including SVG, multimedia, fonts and more.
• The primary benefit of using Data URIs is to reduce the amount of HTTP requests required to load the page in the browser window. Simply put, each additional HTTP requests (usually) negatively impacts overall site performance.
• Data URIs are around 33% larger than a standard filetype (e.g. a JPG image), but with compression and gzipping, this amount is often reduced to under 5%. This additional file size is not normally a large problem, but is good to bear in mind when choosing the best technique to include assets into a design.
• Data URIs are long, non-sensical and do not look very pretty at all, making markup and stylesheets difficult to read, navigate and maintain. It's a good idea to use code folding in your text editor liberally!

## Plan of Attack

There will be three separate phases of this tutorial, that we'll tackle in the following order:

1. Design the 'full-width' site using reference images in HTML and CSS.
2. Pull in images from the Dribbble API and the jribbble jQuery plugin
3. Add in media queries to make the site responsive at smaller viewports.

Okay! Enough talk! Let's get coding!

## Step 1: Initial Markup

For our design, we're going to be starting with the latest HTML5 Boilerplate as a starting point. We're not going to be using all of the features of the boilerplate in the project (for example the modernizer script or analytics), however its a good idea to leave it 'as is' in the initial stages and return later in the project to pare down any features that we didn't end up using (or probably won't use in the future, either).

Create a new index.html file in a directory that also contains a css and js folder.

In the <body> of the document, add in a <header>, a featured content <div> and a <footer>. We'll be fleshing these out as we go on.

Next, let's reset our CSS using Eric Myers CSS Reset and add in a few base layout styles:

Everything here should be fairly straightforward, with the exception of the universal application of the border-box box model. Here, instead of using the standard box model where the padding, margin and border is added separately to the defined width of the element, the defined width is the total width of the element, comprising of padding, margin and border.

This approach is popular for fluid layouts and many of the popular frameworks use the border-box model, including Twitter Bootstrap and Zurb Foundation as it makes working with percentages dead easy. Need equal width columns with gutters between each? Easy. Just apply the boder-box model and set the column to 33.333% — with no need to separately calculate the padding and margins.

Of course, there's not much to see so far, this is just our canvas!

## Step 2: Define a Simple Fluid Grid

If you take a look at the demo, you'll see that the featured content is going to be laid out in three equal-width columns. Behind the scenes, these columns sit inside a <div> with a class of <class="row"> that sets a centered content area with a max-width of 1024px.

So that we can proceed smoothly with the rest of our project, let's define this simple grid in our CSS (adapted in part from Zurb Foundation 3.1):

Let me clarify a couple of points in this block of code before we move on. Firstly, you'll see that we've applied a min-width of 767px to the row. This means that when viewed on viewports smaller than this width, any child elements (i.e. .row .three) will stop scaling to prevent the featured content items becoming too small. We'll be returing to our media queries to give the browser additional instructions for when the viewport is smaller than 767px wide a little later in the tutorial.

Secondly, because we know that every row will contain floated child elements, we will need to clear all floats after the closing row div tag. In this project, I've applied the clearfix hack to the row:after pseudo element. If you intend to build this project out, and you may need additional clearfixes, just append the .row:after rule with an additional class of .clearfix:after.

## Step 3: Define Typography and Icon Fonts

While we haven't come across any font use as yet, I prefer to establish my typography towards the top of the stylesheet (although there's nothing stopping you from tackling this later). So that we can swing straight into the design without backtracking, let's set all the base rules for our typography and icon fonts now.

For our custom, base64 encoded icon font, we'll be using the excellent IcoMoon app to generate our icon font set and the required CSS. For a complete walkthrough with screenshots, refer to the Data URI tutorial.

To summarize, using the IcoMoon app, create the following icon font:

• Select a custom set that includes the 'heart', 'eye', 'comment' and 'magnifying glass' icons from the Broccolidry family.
• Change the Baseline setting to 10%
• Under the 'More Settings', change the font name to 'customFont'
• Tick the checkbox against 'Base64 Encode & Embed Fonts in CSS'

Download the font, open the main stylesheet and copy the CSS across to the project's style.css file.

Along with some additional font styling, your Typography section of your stylesheet will contain the following code:

For a more detailed explanation of the syntax of this code, its usage and the old IE fix, refer to the intial Data URI tutorial.

Now that we've set all of our groundwork including a basic fluid grid and a base64 encoded custom icon font, let's start moving through each section and giving our basic markup some much needed polish.

## Step 4: Give The Body a Repeating Background

In the first tutorial, we created a Data URI from a small image from Subtle Patterns that will be perfect for our site's background. Take this base64 encoded image and add it to the <body> element of our page as a repeating background-image.

Flesh out the body rule with the following CSS, taken from the earlier steps in this tutorial:

Great! We now have a sweet looking background tile that repeats on both the y and x axes over the entire document.

## Step 5: Markup and Style the Site Header

Hop back into your markup and add the following HTML in the <header> section:

Next, let's style our header background with a plaid background that is rendered using repeating linear gradients:

This background is a modification of a technique that was employed in a recent Webdesigntuts+ article. For more information, refer to The What, Where and How of Textures in Webdesign.

Next, let's add our .svg logo which you can download from the resources section of this tutorial.

You'll note that I've referenced the logo as an external .svg file within the HTML markup (with the additional HTTP request) for a completely scalable vector solution. For true image free design, you could also use the .svg file directly in the HTML itself. To read how best to do this, refer to Getting Started With Scalable Vector Graphics (SVG).

## Step 6: Style a Simple Footer

We're going to break our logical flow just for a moment and take care of the styling of the (very simple) footer, since the bulk of the coming steps are going to be focused on creating the content items, and I want to make sure that we maintain momentum through this section. Add the following markup to your HTML:

The styling as follows:

With that done, let's return to look at the focal point of the design, the featured content items.

## Step 7: Featured Content Items

In the next phase of the tutorial, we'll be pulling images from Dribbble using jQuery and the Dribbble API. For now, we are just going to use a placeholder image and set the general style of the images themselves.

It's important to note that our markup will be changing to accommodate the jQuery plugin very soon, so don't get too attached to the following markup! With that said, if you don't want to pull resources from an external site and serve your own static assets, this is the code that you'll be using.

We'll design the interface to be able to be extended to accommodate as many images as required just by replicating the entire <figure> element. We will start by creating a single <figure> element and then replicating it five more times to create two rows of three images.

In your HTML, add in the base markup for the featured content image panels directly under the </header> tag:

Summing up what we've done here, we've created three columns of equal width (33.3333%). Inside each column, we've created:

• a <figure> element that houses the image,
• an anchored link that will take us to additional content (i.e. Dribbble)
• a span element within the link that will define our magnifying glass icon
• a image tag with no set source (we'll populate this with jQuery in the next steps)
• an unordered list of icon fonts for 'comments', 'views' and 'likes', that have been given some arbitrary number values.

Because the placement/flow of the images is not critical to the overall document structure, the HTML5 <figure> element is the perfect wrapper for the <img> element.

Moving on to the styling of the content items, we'll start by adding a margin to the bottom of the content item rows and then style the <figure> element. The <figure> consists of one element and two pseudo-elements to give the effect of a stacked deck of images.

To create a interface that better responds to changing browser window sizes, both horizontally and vertically, we'll use percentages to measure the width and height of the element wherever we can.

The code required to style the figure elements and the image stack effect is as follows:

We should now have a nice stack effect that scales nicely when the browser window is resized from full-width down to 767px.

## Step 8: Create Placeholder Images

Next, let's style our the actual image itself. In the next stage of the tutorial, we'll be populating this area with assets directly from Dribbble, but for now, we'll add in a placeholder image (a gray Envato logo) which will ensure that our <figure> element doesn't collapse upon itself while images are being loaded. Additionally, the placeholder image will also keep the design functioning if there are ever any problems with fetching the content from Dribbble in the future (although we will want to keep the default broken image icon present to give some feedback to the user that there should be an image).

For the placeholder image, I've converted a 291px x 218px .jpg image (contained in the source files) into a Data URI using the Web Semantics Data URI tool.

After copying the base64 encoded string from the tool's output panel, we can complete the styling for the image element:

By giving the image a width of 100% and a max height of 218px, we are ensuring that the images maintain their aspect ratio while scaling down relative to the <figure> element as the browser window is resized. There are more sophisticated approaches to responsive media, but this super-simple approach will work just fine for this application.

For a quick sanity check, this is what you should have so far for the first <figure> element:

## Step 9: Style the 'View More' Link

When each of the images is hovered over, a semi-transparent overlay will appear on top of the image, along with a magnifying glass, that we'll be creating with our icon font.

First, let's quickly review the markup for the view more link:

We'll be styling a block level anchor link that contains a 100% width and 100% height span with has a class of icon-search which will hook into our icon font CSS that we've already established.

The code for the link looks like this:

Next, we'll add in pseudo-classes to style the link on :hover and :active:

You'll note that for the sizing and positioning of the view-more link, percentages are used by default. This approach allows the view-more link to scale and maintain a nice ratio as the browser window is resized.

Also, you'll note that a transition is fired on the a.viewmore link itself. While this doesn't do anything by itself, it allows the link to fade out when the user hovers and then moves off the element.

The CSS for the magnifying glass span is established through the use of two separate classes, large-icon and icon-search. The code for the first class is as follows (which I've included in the 'Typography' section of the stylesheet):

And we've already established the CSS for the icon-search earlier in the tutorial using the generated code from the IcoMoon app. Just to refresh your memory, however, here's the relevant code that will serve up the unstyled magnifying icon icon:

It's important to note that we've tried to seperate the presentation and the styling of the icon as much as possible (infact, this is what I've tried to apply liberally throughout the entire design). This is a small project, but if we wanted to expand the scope of the interface and reuse the magnifying glass icon somewhere else in the design, this object-orientated approach will reduce the complexity of changing the styling of the icon.

## Step 10: Style the Comments/Like/View List

All that's left to do now is to style our icon-group with the appropriate icon fonts.

Let's just remind ourselves about the markup for this part of the project. Each content item has the following unordered list:

You'll note that while we've used a class name for our magnifying glass icon in the previous step, we're using the data-icon approach for this list. There's no particular reason for using this approach over the class based application — it's just a good opportunity to use the alternative execution of icon fonts. You'll see that we've used the Unicode given to us by the IcoMoon app to define the appropriate icon. Let's style the list itself first:

The first section of the code above positions the <ul> element, while the styling for the list items floats them to the right, displays the element inline and sets some parent-level styling. Next, we'll style the list-item and list-number elements:

And with that, we've styled our first featured content element with some cool CSS3 and two different implementations of icon fonts. Here's our final content-item piece, shown with the view-more link in a hovered state:

At this point, if we were to keep the interface static (i.e. not pull in assets through the Dribbble API), we could simply copy and paste the content-items code block as many times as required and reference an appropriate image file. Since we're doing something a little different in the coming steps, however, we're going to leave our markup as is (for the moment), before talking about the next steps and — gulp — break apart all of our work so far.

## Step 11: Introducing the Dribbble API and the Jribbble Plugin

For the next steps of the tutorial, we are going to be populating our featured-content items with shots taken directly from Dribbble by way of the Dribbble API.

The API allows us to take content directly from the application via HTTP, with responses returned as JSON. At the time of writing, the API doesn't require a key and has a fairly liberal non-commercial license with a few restrictions, so is perfect for our application.

If you've never tackled an API before, don't worry. We're going to be using the Jribbble jQuery plugin to help request a shot via an ID and slot it into the DOM with our custom layout that we've already designed. As I've mentioned already, we'll be requesting individual shots (for the purpose of the project we'll be taking six shots from the Envato Dribbble account) via the Jribbble plugin and the Dribbble API.

As you'd expect, along with individual shots, Jribbble also allows you to request a range of parameters including:

• Get a shot
• Get the comments of a shot
• Get the rebbbounds of a shot
• Get a list of shots by the list name
• Get a list of a player's shots
• Get a list of shots a player is following
• Get a list of shots a player likes
• Get the profile details of a player
• Get the followers of a player
• Get the players a player is following
• Get the draftees of a player

I'm not going to spend any time today going over the plugin or the API in any significant detail, but if you wanted to expand the scope of this tutorial and explore some of the possibilities of Jribbble, I encourage you to read the documentation to learn more. For now, head over to the lab and download Jribbble and save it into a new root-level directory called 'js'.

## Step 12: Link Up The Scripts

The first thing that we'll need to do to get Jribbble working is to hook up the relevant scripts. The plugin is jQuery dependent, so to get our plugin to work, we need:

• the latest distribution of jQuery,
• the Jribbble code,
• a file called js/jribbble.shots.js which will be the home for all of the functions required to call the the Dribbble shots.

At the bottom of your HTML file, between the </footer> and </body>tags, add the following code:

## Step 13: Get a Shot

The basic structure of the Jribbble 'Get a Shot' parameter is pretty simple:

Plug in a shot ID from Dribbble and the following data will be snagged by the plugin:

• The shot itself (400px x 300px)
• The shot title
• The player
• Views
• Likes
• Rebounds

Let's take a look at the demonstration function used on the Jribbble page to see how this information is requested and inserted into the DOM:

This is should be fairly straight forward, even if you're not a jQuery wizard. What the plugin is going to be looking for is an element with the ID of "shotById" and will then insert the the shot, views, likes, comments and so on into the DOM with the following markup:

Obviously, this won't work (as is) for our existing HTML markup that we've already created in the previous steps. To make sure that our hard work isn't destroyed, we're going to need to cannibalize our markup and make some changes to the base code in our js/jribbble.shots.js file.

## Step 14: Shake Up the Markup

The first thing that I'd recommend is to take the existing content-items markup that we've already created, duplicate it and comment it out, to make sure that we have a reference point for the following steps. Next, overwrite the non-commented HTML with the following code:

As you can see, we've really pared down the markup in our index file. We'll be getting jQuery to fill in the blanks in the next step.

## Step 15: Create a New Function

To call the shot and populate our <figure> element with some data, we need to create a new function in our newly created js/jribbble.shots/js file. Our new function looks like this:

As you'll no doubt notice, this chunk of code will look pretty familiar to our old markup. The function will now perform the following steps whenever the document is ready:

• Take the shot with the ID of '332826' from Dribbble
• Look for an element with an id of 'Shot1'
• Populate the link contained with the shot URL from Dribbble
• Serve up the image location into the child <img>source
• Create three <li> elements within the <ul>
• Insert relevant <span> elements to create the icons and count figures.

The good news here is that because we've been careful with our class names throughout the project, we don't need to make any changes to the CSS. And with that, we've finished our first featured content item using the Envato Dribbble shot with the ID of 332826.

## Step 16: Fill in the Gaps

Up to this point, we've been working with just one featured content item, although we've created some placeholder markup for an additional five featured content items. Now's the time to fill in the blanks and get this design looking like a proper interface! This process is dead easy. Simply copy the featured content item from the last step and duplicate it five times, changing the ID for each. This part of the index.html file looks like this:

Next, we need to create functions for each of the featured content items. In your js/jribbble.shots.js file, duplicate the function from the last step as required, changing the shot ID and the element ID for each. Our final script is as follows:

As a quick note, if you were really focused on reducing HTTP requests down to a bare minimum, you could easily house each of these functions in <script> tags within your HTML. I've chosen not to do this today to make the separation between the HTML and the Javascript easier to understand.

If you've followed along closely, your main content section of the site will look like this (scaled down in size):

Great work! Take a moment to grab a coffee and a break before we start on the last part of the project... turning the interface responsive.

## Step 18: Plan out the Responsive Design

Since we're desigining in-browser, we don't have the benefit of referring to a mockup for small viewport display. Before we get ahead of ourselves, it's a good idea to plan out the general direction of the media queries and set up some basic responsive infrastructure.

Here are the key features our design will have at smaller viewports:

• The content items will change from spanning three-across to two across for viewports between 480px and 767px
• The content items will stack on top of each other for viewports <480px (i.e. mobile view).
• The interface navigation will drop under the logo, taking up 100% of the width of the viewport when under 767px
• Margins between items will be tweaked as required.

As you can see, this is a pretty simple game plan, and can be achieved in just two media queries.

Under the Media Queries section of your stylesheet, create the following two media queries:

There's loads of ways that we could approach our navigation menu in responsive contexts, but for today we'll be keeping things quick, basic and non-javascript dependent.

In the first media query (under 767px) created in the previous step, add in the following code:

This simple block of code moves the navigation under the main header, changes its width to 100% and adds some basic styling.

## Step 20: Change the Layout of the Featured Content Items

Referring back to our responsive mini-plan, between 480px and 767px, the featured content items will display two-wide, and under 480px will display one-wide, stacked on top of each other.

First, we'll expand our first media query to create a two-wide featured content item display.

Next, add the following rules to the second media query to manage viewports narrower than 480px:

## Step 21: Tweak Margins and Spacing

Finally, all we need to do to complete our design is to tweak some of the margins to ensure that we maintain sensible margins between elements.

In our <767px media query, add the following rules:

And in our <480px media query, the following rules:

Maintaining our margins in percentages whenever possible allows our interface to look good at practically any viewport size, not just a set of pre-determined breakpoints.

Take a moment to clean up your code, make sure that everything is ordered logically and step back and appreciate all of your hard work. We're finished!

## Conclusion

If you've followed along through this entire tutorial, you'll now be armed with a range of smart techniques to boost the performance of your sites and all the tools that you'll need to encode images and icon fonts into base64 encoded data URIs.

Bear in mind that data URIs aren't always the best choice for every situation and discretion needs to be used when deciding whether encoding your site's assets is the best solution, and it's important to balance reduced HTTP requests with file size and code maintainability and readability. Used well, data URIs are an invaluable tool in your webdesign toolbox.

I hope you've enjoyed this tutorial as much as I've enjoyed bringing it to you!