CDN Archives - Untame

Top 10 Responsive Design Tips and Tricks

Posted by | Design, Showcase, Tutorial, Twitter Bootstrap | No Comments

Responsive design is changing how we view the web, literally! Whether you are getting started with responsive design or are a seasoned responsive pro we have a few tips that just might help with your next mobile project.

Choose A Great Framework

When beginning a responsive design, it is important to start with the selection of a solid foundation. Since the framework will inherently inform many design elements, you will want to carefully consider your needs. Will you choose a bare bones framework like Skeleton? Or does the scope of the project that you are working on require something with a bit more meat to it like Twitter Bootstrap or Zurb Foundation?

If you would like to know more about Bootstrap and Skeleton we have covered them several times in the past.

Minify Your Scripts & Stylesheets

It’s not rocket science but it is very easy to forget. Do you want your pages to perform to their maximum potential? Yes? Then get started with minifying your CSS & JavaScript.

Minification (also minimisation or minimization), in computer programming languages and especially JavaScript, is the process of removing all unnecessary characters from source code, without changing its functionality. These unnecessary characters usually include white space characters, new line characters, comments, and sometimes block delimiters, which are used to add readability to the code but are not required for it to execute.

Every website a user visits is downloaded in some form to their local computer. So, if you were downloading a large amount of files from a site, wouldn’t it be preferable if the content providers were to place all of those files into a single zip file? Minification essentially does the same thing, cutting out everything except for what is absolutely necessary. So be kind! Minify!

Squish Your Images

A majority of the time, the culprit for large download times is the ever-giant image size. So, why do we need to take care of image sizes? The very same reason that we minify CSS and Javascript. It is only to the benefit of our server and our users if, as a rule, we serve up the smallest file sizes possible that still serve to preserve the integrity of our vision.

Original size: 2.0mb

New size: 161kb … Which would you rather download on your phone?

Consider a Preprocessor

We have talked about CSS preprocessors in the past, and if you have not tried them yet, then please do yourself a favor and give a preprocessor a shot today! Once you begin to preprocess styles, not only will you have access to amazing mixins and in-stylesheet calculations but also automatic organizing and minification of your stylesheets.

Want to get started working with a preprocessor? It doesn’t matter if you use a Windows PC or a Mac, here are some helpful tools to get you started.

Develop For Mobile First

Perhaps you have caught on to the general theme of this responsive design roundup. So much of what constitutes responsive design can really be summed up in responsible design. Bob Dylan said that “the times, they are a’changing” and he was right! Mobile ready websites are no longer a luxury. If a brand wants to engage with its customers or if a restaurant wants to attract new clients on their night out, a consumer better be able to engage them from his or her phone!

Mobile-first design would dictate that the design of your site no longer has much to do with the layout of your site. Mobile-first design would suggest that a web designer must look to communicate a brand image through the use of color, graphics, fonts and design elements first. So, don’t think of the phone or tablet as a hindrance to your artistic brilliance. Start designing on the phone first, then with every iteration simply enjoy the extra canvas that larger screens allow for.

Get Testing

Does your site look great on the desktop, and pretty rad on your iPhone? Congratulations! However, I suggest that designers and developers take a look at the other screen sizes just in case. Not only can new electronics be cool, but they are also useful for testing! So go for it, grab that Kindle Fire or Nexus 7 that you have been eyeing.

Ensure Touch Friendliness

If you are using an awesome jQuery slider within your responsive design, it may be a good idea to double check that it is touch friendly. After all, having to mash around for little nav points on a slideshow is never fun. Engage your customers by integrating touch friendly elements.

Use A CDN (For Free)

Content delivery networks help to serve up files to your viewers in a responsive way that is likely closer to them than any single server company that you may host with. What’s better? Often, a good CDN will take care of image optimization and CSS/JS minification automatically for you.

Learn more about why we use CDNs by checking out these posts:

Use FitVids or FitText If Applicable

If you also serve up a bunch of videos on your site then maybe video size has become a problem. It can be hard to deal with video on responsive sites, especially since exact device widths can be unpredictable. We can fix that! The very kind folks over at Paravel and have created a few simple and lightweight scripts that will take care of large videos or even giant text for any screen that you can think of!

Be Inspired!

Responsive design is really cool! There are thousands of designers and developers that are learning how to morph their workflow to compensate for all of the new requirements that should be taken into consideration. So, take a look around! Check out cool sites like or and see how other pros are doing it! It is certainly cool to be inspired by the work of others and find ways to contribute as well.

Twitter Bootstrap: How to Load Sites Faster With BootstrapCDN

Posted by | Tutorial, Twitter Bootstrap | 3 Comments

Hello and welcome again to our ongoing series focusing on Twitter Bootstrap. By now we have covered in detail what Bootstrap is as well as how to design a unique and responsive homepage using the front end framework.

Today, let’s take some time to talk about a great new way to access bootstrap for any of your projects. Content Delivery Networks play an important role for the global web. Instead of downloading website files from a single hosted location, a CDN allows for users to quickly access site files from a large distributed system of servers deployed across multiple data centers around the world. This type of distribution leads provides for easier access to common files, increased security for your site as well as speed.

Twitter Bootstrap is already a great front end framework and it is increasing in popularity among web developers and designers. So it starts to make sense that we begin treating bootstrap like some of its CDN hosted bretheren like jQuery, jQuery UI, Dojo and more. So the very cool people at NetDNA decided to do us all a favor and provide a Twitter BootstrapCDN platform.

Using BootstrapCDN developers and designers can access the vital Bootstrap CSS, JavaScript and image files over a high-powered CDN that even includes SSL access.

To get going, simply link up your CSS files in the same way you normally would in the hea of your document like this.

It is a good idea to link up a local stylesheet after the BootstrapCDN link in order to provide a semantic method of modifying incoming bootstrap styles.

<link rel="stylesheet" href="" />

Then, in the foot of your document simply link up the JavaScript portion of bootstrap like this.

<script src=""></script>

Now that we have successfully linked the CDN files to our head and foot areas of a webpage. Let’s discuss a bit more about why it is a good idea to obtain common files from a Content Delivery Network like NetDNA or Cloudflare.

The advantage of using files hosted on a CDN include:

  1. It increases the parallelism available.
    (Most browsers will only download 3 or 4 files at a time from any given site.)
  2. It increases the chance that there will be a cache-hit.
    (As more sites follow this practice, more users already have the file ready.)
  3. It ensures that the payload will be as small as possible.
    (CDN providers can pre-compress the file in a wide array of formats (like GZIP or DEFLATE). This makes the time-to-download very small, because it is super compressed and it isn’t compressed on the fly.)
  4. It reduces the amount of bandwidth used by your server.
    (CDN providers are basically offering free bandwidth.)
  5. It ensures that the user will get a geographically close response.
    (CDN providers have servers all over the world, further decreasing the latency.)
  6. (Optional) They will automatically keep your scripts up to date.
    (If you like to “fly by the seat of your pants,” you can always use the latest version of any script that they offer. These could fix security holes, but generally just break your stuff.)

Credit: John Gietzan

Start getting that extra little performance boost by using the CDN versions of Bootstrap and other common files.

How to Set Up Cloudflare with WordPress

Posted by | Tutorial, WordPress | 4 Comments

Cloudflare is a dynamic content delivery network that you can easily get up and running on your domain for free! If you have not already read through part 1 of our series, please take the time to do so before you start on part 2.

Today, we will examine how to easily get started using Cloudflare with WordPress. Initially, it was considered best practice to pair the WP Super Cache plugin with Cloudflare, and if the situation is correct, this could still be the case. However, for small business sites and blogs we really just need to ensure that Cloudflare works properly without much interest for in-depth server or code configurations. Luckily, Cloudflare has created a native WordPress plugin that will fit perfectly within our needs. If you need help understanding how to install a WordPress plugin, go check out our post on installing a WordPress slider plugin for a general overview.

First, navigate into your WordPress dashboard to the plugins overview page. Next select “Add New” found at the top of your view. Search for “Cloudflare” and select install on the correct plugin. (Likely the first plugin on the list but to make sure, the image above leads directly to the plugin on the WordPress repository.)

Configure Cloudflare

Now that you have installed the plugin, find the settings page for the plugin. Likely, the link to the plugin setting page will be located in your WordPress left hand sidebar, within the “Plugins” sub-menu.

While, we are on the subject, I would like to be clear as to how the Cloudflare WordPress plugin will directly benefit your WordPress site.

CloudFlare has developed the plugin for WordPress. By using the CloudFlare WordPress Plugin, you receive:

  1. Correct IP Address information for comments posted to your site
  2. Better protection as spammers from your WordPress blog get reported to CloudFlare
  3. Optimization of your server database (optional)

This plugin helps your published content play nicely with the Cloudflare service and helps you take the steps necessary to optimize your site. To do this you will have access to the Cloudflare Database optimizer and development mode toggle directly within your WordPress Dashboard.

Connect With Cloudflare

Access your Cloudflare account dashboard by going to the “My Account” tab while signed in to the service. You will need to have two pieces of information to connect the WordPress plugin.

  1. Cloudflare API Key
  2. Cloudflare API Email

Once you have retrieved each piece of info, enter them all into the appropriate fields within the Cloudflare plugin page on WordPress. Once complete, click “update options” and ensure that the connection is successful.

Congratulations! You have successfully integrated the Cloudflare service with your WordPress powered site. Pretty easy right? Next we will take a look at further integration with plugins like WP Super Cache to fully unleash the speed beast.

Go Faster: How To Speed Up Your Website With CloudFlare CDN

Posted by | WordPress | 2 Comments

Are you using a shared hosting server? Maybe you have wanted your site to run a whole lot faster, but you’re not quite ready to take the financial plunge of VPS or a dedicated server. Well, we have great news! There is a free way to significantly speed up your website or blog without having to dig deep into your wallet. Let’s get going!

What is Cloudflare?

CloudFlare protects and accelerates any website online. Once your website is a part of the CloudFlare community, its web traffic is routed through their intelligent global network. CloudFlare automatically optimizes the delivery of webpages so your visitors get the fastest page load times and best performance. They also block threats and limit abusive bots and crawlers from wasting your bandwidth and server resources. The result: CloudFlare-powered websites see a significant improvement in performance and a decrease in spam and other attacks.”

On average, a website on CloudFlare loads twice as fast for its visitors, sees 65% fewer requests and saves 60% of bandwidth. That is a pretty big improvement over simply relying on your shared host to serve up your content. And guess what, the baseline plan that CloudFlare provides is absolutely FREE… (As in Free beer Free (cool huh?))

Set up your new CloudFlare account:

Getting going with Cloudflare is easy, but first things first. Head over to the Cloudflare website and click Sign Up in the top navigation menu. Next, fill out your account details. After you fill out your details we are ready to put the pedal down to the floor! Once you create your account you will be led to the next screen wherein you can add your first web site (or as many as you would like… go nuts!).

After you add your website, Cloudflare will begin the scanning process by gathering the appropriate DNS records. Check through the list that is displayed and make sure that your records are correct.

Next, you will configure your individual domain settings. Here, select your Cloudflare plan, choose your performance settings and adjust the security. Now this is the part that I can’t quite tell you exactly what to do as your mileage may vary depending on your site’s requirements.

You’re All Done! (For Now)

Once you have successfully set up your domain on Cloudflare there is not much more to do than just sit back and watch as day after day your content is served up to more visitors, faster than ever!

Why Speed Matters

According to national surveys done by, if your website is slow to load you may be losing revenue and possibly customer loyalty. A recent study found that 78% of online consumers went to a competitor’s site due to poor performance at peak times. According to the study, nearly half of web users expect a site to load up in a matter of two seconds or less. If the site does not load quickly, visitors are statistically more likely to navigate elsewhere after three seconds. Moreover, according the the survey, 79% of web shoppers who have trouble with web site performance say they won’t return to the site to buy again and around 44% of them would tell a friend if they had a poor experience shopping online. Speed matters.

With CloudFlare CDN, you can make a significant speed improvement on the cheap. In a future post we will show you how to integrate the super speed of CloudFlare and power it up even more by pairing it with one of our favorite WordPress plugins.

Start planning your project today. Get Started