Category Archives: Tutorial

Twitter Bootstrap Part 3: Design a Responsive Contact Page

Posted by | Design, Tutorial, Twitter Bootstrap | 4 Comments

Twitter Bootstrap is a cutting-edge front end framework designed to make the lives of developers and designers a little easier, as it provides a semantic and responsive starting point for real world projects. Today we are going to take a bit of time to focus on a very real world project, the always important contact page. Contact pages should be simple and easy for a visitor to understand. Therefore, we make use of good visual hierarchy practices to add both balance and flow to the page.

If you are new to Bootstrap, it may be a good idea to get an understanding of what Bootstrap is and how you can use it, as featured in part 1 and part 2 of our series.

Check Out The Whole Series!
Twitter Bootstrap Part 1: What is Bootstrap Anyway?
Twitter Bootstrap Part 2: Design a Responsive Homepage
Twitter Bootstrap Part 3: Design a Responsive Contact Page

View The Demo

Let’s Get Started

Let’s take a look at what we will be building today.

Download the Source

The idea is rather simple. We begin using the Bootstrap Hero Unit to anchor the page and convey our initial message and purpose of the page. Next, we split the page into two sections, offering a Bootstrap powered contact form in the left hand side, while we offer our embedded google map on the right hand side.

Bing maps work just as well, if preferred. Simply use the same technique as featured in the video.

Our “Contact Us” page is filled with bootstrap functionality:

Hero Unit:
A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.
Bootstrap Forms:
Individual form controls receive styling, but without any required base class on the < form > or large changes in markup. This results in stacked, left-aligned labels on top of form controls. Bootstrap doesn’t supply form functionality as much as it nearly perfects the User Experience or UX. Valuable hover states and built in validation are a huge help when coding a site.
Bootstrap icons:
140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons. If you need a bit more functionality you could also use the incredible Icon Fonts provided by Font Awesome
Control padding and rounded corners with two optional modifier classes (“well-large and well-small”).
Bootstrap Buttons:
Button styles can be applied to anything with the .btn class applied. However, typically you’ll want to apply these to only “a” and “<button>” elements for best rendering

Thanks for checking out our tutorial on how to get the most out of Bootstrap for your website. We have some exciting Bootstrap-related projects coming up here at Untame so stay tuned for future updates!

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.

Start Writing Better CSS with LESS

Posted by | Design, Tutorial | No Comments

The web is evolving. That within itself is such a simple statement, yet the uphill climb can seem horrifying even for some of the most experienced web designers and developers working today! Here at Untame, we take pride in putting out not only high quality work, but delivering that work to our clients quickly. However, when a developer or designer finds themselves working quickly, there is always a danger of work becoming sloppy. Luckily for us, the web community is always delivering new and innovative ways to refine the web crafting process.

Using preprocessors can be a very good idea. Tools like LESS and SASS have a natural ability to keep your code nice an tidy. Better yet, once you are done coding your site, popular LESS and SASS compilers often offer a automatic minification feature! Cool, Huh?

What is Less?

“LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (Chrome, Safari, Firefox) and server-side, with Node.js and Rhino.”


Variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code.



Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments, as seen in the example below.


Nested Rules

Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.


Functions & Operations

Are some elements in your style sheet proportional to other elements? Operations let you add, subtract, divide and multiply property values and colors, giving you the power to create complex relationships between properties. Functions map one-to-one with JavaScript code, allowing you to manipulate values however you want.


Let’s Talk Nesting

CSS is the tool we use to style the web. However, writing plain CSS can become tedious over time as you might find yourself performing the same tasks, or circleing back to do something that you had forgotten. For instance, when creating navigation menus my code may look a little something like this.

	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Portfolio</a></li>
	<li><a href="#">Blog</a></li>
	<li><a href="#">Connect</a></li>

Now, to style this, one might float each line item left. Then in order to provide spacing, could use CSS to make the “a” tags to display as block, then add padding or margin to ensure that each anchor tag is well spaced apart. Often, this is a great way to approach a navagational style. However, what if you require that both your first and last line items have no padding on their left or right sides respectivly in order to perhaps align your navigation to other elements on the page.

Usually, this would lead to a designer moving back through the CSS and making these adjustments in a correct, but semi-redundant way.

nav ul {
	width: 960px;
nav ul li {
	float: left;
nav ul li a {
	padding: 10px 25px;
	text-decoration: none;
nav ul li a:hover {
	text-decoration: underline;
nav ul li:first-child a{
	padding-left: 0px;
nav ul li:last-child a{
	padding-right: 0px;

Though the code above may seem nice and tidy, when it comes to a giant large scale website it may become burdensome to dip back into the same CSS pool over and over again. CSS pre-processors such as Less and SASS make this task a very simple one using the idea of simple nesting.

nav {
	ul {
		width: 960px;
		li {
			float: left;

			&first-child a {padding-left: 0px;}
			&:last-child a {padding-right: 0px;}
			a {
				padding: 10px 25px;
				text-decoration: none;
				&:hover {text-decoration: underline;}

Though it may not seem like much, once you learn the idea of nesting selectors within your LESS markup, remembering to style those pesky elements becomes a thing of the past. Moreover using a css pre-processor like LESS also makes it easier for web developers to produce more production ready files for the web. Modern LESS compilers like Codekit on the Mac and Winless for the PC offer automatic minification of CSS so you can be sure that your stylesheet is tiny and quick to download.

Choose your Weapon


Winless is very simply a LESS based gui for Windows users. Simple and intuitive Winless offers an easy solution for the Windows developer looking to get started with LESS quickly


Codekit may be one of the premier web-crafting tools available for the Mac. Need to compile LESS, SASS, HAML or just about anything else? No problem! Codekit has you covered. As an added bonus CodeKit also includes a few incredible build tools that automatically optimize your images for the web.

Hopefully this post will get you started with CSS preprocessors. I promise that with time your workflow will be changed forever. Using a few of these tools you’ll be faster and more effective than ever before!

Twitter Bootstrap: Build A Stunning Two Column Blog

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

Hi there, and welcome to the latest in our series of posts covering Twitter Bootstrap. So far we have given a proper introduction to the framework, shown you how to create a responsive homepage and made that even faster with BootstrapCDN.

Today, we will expand on the idea of building pages with Bootstrap that you can use within your own projects. The Bootstrap framework provides for a giant amount of productivity to be completed within a relativly short period of time. Today’s tutorial will cover nested columns in more depth, and provide you with a great beginning point for a 100% responsive blog style layout!


View The Demo | Download the Files

One of the core concepts to understand when laying out a page using Bootstrap is the idea of nesting divs using “rows.”  Essentially, we are trying to declare an outer container wherein we can safely nest our inner divs. In this case, we are doing it with posts and widgets but you could use this technique for just about anything. 

Nesting divs within containers is a very easy concept, yet it’s also easy to overlook. Just remember; when beginning a new area that will contain subsequent divs, you will need to use a row to ensure proper alignment. The use of rows provides for a rather brilliant alternative to the standard practice of using “Alpha” and “Omega” classes when designing within a grid.

Building incredible layouts with Twitter Bootstrap is easy and efficient. Once you have mastered a few of the simple techniques provided by the Bootstrap framework, just about any layout is within reach. As you can see, it only took about eight minutes to create a fully functional markup of a great looking blog page. If you would like to take a gander at the code or demo just check the links above.

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.

Twitter Bootstrap Part 2: Design a Responsive Homepage

Posted by | Tutorial | 2 Comments

Twitter Bootstrap is a cutting edge front end framework designed to make the lives of developers and designers a little easier, as it provides a semantic and responsive starting point for real world projects. Today we are going to take a bit of time to focus on a very real world project, the single page site or splash page. We have already covered a bit of design theory in our “Z” design post, and we will be using many of the same techniques.

If you are new to Bootstrap, it may be a good idea to get an understanding of what Bootstrap is and how you can use it, as featured in our part 1 of our series.

Check Out The Whole Series!
Twitter Bootstrap Part 1: What is Bootstrap Anyway?
Twitter Bootstrap Part 2: Design a Responsive Homepage
Twitter Bootstrap: Build A Stunning Two Column Blog
Twitter Bootstrap Part 3: Design a Responsive Contact Page

View The Demo

Let’s Get Started

Let’s take a look at what we will be building today.

Here, we have what is considered a fairly “best practice” example of a “Z” design layout homepage. As such, our image features the Bootstrap navigation bar, a featured content carousel or slider, a standard call to action with an accented button color as well as three columns of content.

We should take note at this point that in no way is this a set-in-stone required layout for your next project. Inherently, this is the real beauty of using a front end framework. Would you like to achieve a different layout? Go for it, with a little bit of math (including the ability to count to twelve) you can achieve any number of layouts.

Take it From the Top:

In this tutorial, I am going to assume that you have already read through our first post about the framework, downloaded it and unzipped it to somewhere easy like your desktop. Now, you are going to need a text editor so that we can manipulate the HTML/CSS and JavaScript. Depending on your platform, there are many great free programs to choose from. However, I have come to enjoy the excellent Sublime Text 2.

Set Up The Navigation

The Navigation portion of our site is relativly easy to integrate. However, one should take note that the default navigation style included with Bootstrap is “Fixed” to the top of your page. This allows for the navbar to stay within the view of users as they navigate your site.

The Slider

Call To Action

Footer & Finishing Up

I hope you have enjoyed this tutorial. Twitter Bootstrap is a fantastic tool that will allow for faster development and more user satisfaction in any project. Do you have a web design or development question for us? Drop us a note on our contact page, and we will get back with you as soon as possible.

Web Design: The Z Layout

Posted by | Tutorial | No Comments

Let’s take just a minute and think. Why do we create web sites at all? The web is a vast ecosystem of resources that span a near limitless level of purposes. However, one thing that almost each and every site has in common is its desire to spark something in its visitors. Take a look at some of your favorite sites, I bet that you will find some pretty common patterns to the way that each site lays its content out. This is for good reason, over the years designers, developers, ad agencies and more have performed studies called usability tests. Usability tests exist to inform content creators on how users interact with specific pieces of design. By in large, usability centers itself around the idea of encouraging a user to take action! So, through understanding gathered by these tests a few “best practices” have been shared amongst designers that tend to encourage users to do exactly that. This is where the “Z” layout comes in.

What is the Z Layout?

Take a look at the figure above. The Z layout is a design understanding that attempts to get ahead of the user, abstracting any distraction and presenting encouraged action as quickly as possible. Let’s walk though the steps of anticipated interaction a user will have with a site properly laid out in this manner.

  • Step 1: Brand or Logo Recognition
  • Step 2: Relevant Links Related to the Page, Company or Product
  • Step 3: Information gathering – What is the immediate benefit of this product or service?
  • Step 4: Action – Allow for the visitor to take immediate action related to the product being shown.

How about I prove it to you? Let’s take a look at a few popular sites that maintain a “Z” layout.



Facebook (a smallish social network… these guys just might make it!)

Take notice, in each of these pages the layout has been customized for users to follow the steps of “Z” in an organized and logical progression. There are some cases, such as news sites, that the “Z” layout may not be totally appropriate. However, if you are creating a website wherein you want to encourage your users to take action, then this design method is a proven way to encourage visitors to convert to customers.

The Z method is so usable due to its inherent practicality. Think about it; when you read a book, do you start at the bottom of the page and work your way to the top? This design layout takes advantage of the way that we have been taught since childhood to interact with content, and if it isn’t broken there is no reason to fix it.

Thanks for taking the time to read through this article on web design theory. We sincerely hope that it will help to inform you in your web design or development journey. We would love to design an incredible website for you or your company. Do you need to increase conversions? Get in touch with us and we will help create a custom solution specific to your needs.

Visual Form Builder: Easily Create a Custom Contact Form

Posted by | Tutorial, WordPress | No Comments

By now we have covered several ways in which WordPress Plugins can make your life easier by adding elements to your WordPress site without requiring you to be a web design master. Now, I will be the first to admit to you, forms are frustrating. Web forms can be tricky to build, difficult to validate properly and even harder to make sure that relevant information gets to the site owner when needed. This is why there are so many web form building tools that you can pay for like WooFoo, Gravity Forms and so many more. Today, I present a form building tool that can integrate highly functional forms with a simple drag and drop interface: Visual Form Builder.

Step 1, Getting Started: Install Visual Form Builder

Just like any other WordPress plugin from the repository, VFB is easy to install. Check out the video below

Step 2: Create The Form (Or Forms)

Now that we have Visual Form Builder installed on our site, we can begin creating awesome forms that our users will be able to interact with. To begin, create your first form by giving it a name for example “Contact Form”.

Next, you will notice that VFB has already taken the liberty to create a few important fields for you. Unless you are more than confidant with web forms, it is a good idea to just leave these areas alone. Now we can begin adding fields at our leisure.

To add fields, begin clicking on the fields that you would like to use found in the left hand column of your screen. Even better yet, check out the video below!

Step 3: Place The Form

So, if you watched the video above, you are already ahead of the game and could probably teach this section yourself! However, if you are not the video type then you will find that installing your VFB form is incredibly easy. On the left hand side of the Visual Form Builder settings page, you will find a section titled “Form Output.” Herein, there is a shortcode that we will copy (ctrl+c or command+c). Next, simply navigate to the desired page where your shiny new form will call its home, and paste the shortcode into the editor (note: make sure the editor is in “Visual” mode). Next, click “View Page” to see your contact form rendered in all of its brilliance.

There! Wasn’t that easy? With plugins like Visual Form Builder, adding great functionality to your WordPress site can be easy and, dare I say, a little fun. If you have any questions about installing plugins or setting up your WordPress site let us know. Until next time, adios!

Would you like to see your plugin on Untame? Let us know what your plugin is and why it is awesome and we may post a featured tutorial soon!

Weekly RoundUp: 10 Great Web Design Learning Resources

Posted by | News, Tutorial | No Comments

So… You want to learn how to design your own websites on the internet, but don’t know exactly where to start? Let me tell you, I was in the same position that you are in years ago, and I know how important it is to get started with learning the right things in a good order. So that is what we are going to do today. Below you will find a few of the great resources to get you off and going in the right direction.

What You Need To Learn:

Don’t Panic! The world wide web is vast to say the very least. Before you know it you might come across blog posts, forum threads and entire books pointing you in one direction or another. However, the best way to get into this pool is to simply dip your toe in ever so gently. Let’s talk bottom line, the goal is to be able to put a page with some text and who knows, maybe even a few pictures on the internet. In order to do that you really only need to know a few things…

Put It On The Page: Basic HTML

HTML is the base of all web efforts. HTML tells the browser what content it should display on any given page.  Remember: HTML Controls the Content.

“HyperText Markup language: a set of standards, a variety of SGML, used to tag the elements of a hypertext document. It is the standard protocol for formatting and displaying documents on the World Wide Web.”

30 Days to Learn HTML & CSS (Free)

Perhaps one of the best and most comprehensive video series on the subject. I only wish that I had something like this to follow along with while I was first learning web design

W3 Schools HTML Tutorial (Free)

A still relevant standby. The W3 schools, while not always the subject of praise from the web development community can always be counted on for quality “best practice” information.

HTML & CSS – The VERY Basics (Free)

Chris Coyier is in many ways an “OG” as it pertains to web design and development tutorials and this one is no different. Follow along with Chris as he leads you step by step in understanding the basics.


Make It Pretty: CSS

CSS or Cascading Style Sheets allow for a designer to alter the appearance of the HTML placed on a given site. A CSS document will usually be called something like “Style.css” and linked to at some point at the top of an HTML document.

Remember: CSS is for colors, layout and more. However CSS does not control content.

30 Days to Learn HTML & CSS (Free)

As stated above, this tutorial is simply one of the best out there, and the CSS tips are no different!

W3 Schools: CSS Tutorial (Free)

Need help learning CSS? W3 Schools have your back. Also you may want to bookmark their page as it will be an instrumental reference for everyday questions about web design.

CSS From Noob To Ninja (Premium)

The first premium tutorial on our list, and for good reason. Noob to Ninja covers just about every nook and cranny there is in basic CSS. Once through this course you will be ready to jump into just about any CSS environment.

Give it A Place To Stay:

You have done it, if you have followed the tutorials found above then you have likely created a basic web page, styled it and are ready to put it on the web. The only thing you need now is a place to put it and a way to upload your content.


FileZilla (Free & Awesome)

It is an industry standard for a reason. FileZilla is absolutely free and incredible. Chances are, FileZilla is installed on nearly every single web designer or developers computer right now.

Transmit by Panic (Premium + MAC Only)

You need to transfer files. Maybe to an FTP or SFTP server. You need Transmit, the #1 Mac OS X


A Place to Call Home:


HostDime provides quality and reliable managed web hosting, reseller hosting, dedicated servers, and shared hosting for clients around the Globe.


Site5 offers speedy hosting at incredible rates. Simply upload your shiny new documents and you will be up and running in no time!

Start planning your project today. Get Started