Design Archives

Oct 17 2012

Twitter Bootstrap Part 3: Design a Responsive Contact Page

Posted by Brock Nunn | 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
Well:: 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!

Oct 08 2012

Top 10 Responsive Design Tips and Tricks

Posted by Brock Nunn | 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.

WinLess (Windows)
Compass.app (Win/Mac)
Fire.app (Win/Mac)
Codekit (Mac)

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 CSS-Tricks.com 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 Dribble.com or Codepen.io 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.

Sep 19 2012

Responsive Design: 15 Free & Awesome Tools

Posted by Brock Nunn | Design, Showcase, Twitter Bootstrap | 2 Comments

Here at Untame, we focus our design and development strategies around a holistic approach to the web, across any web-ready device. After all, web usage on phones and tablets is growing more every day; that’s why a highly responsive internet is so important. We want to deliver great web experiences to as wide a swath of visitors, no matter how they access the web.

Featured below are just a few incredible resources that may just help web designers or developers solve a few tricky responsive design problems.

FitText

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element. FitText provides a responsive solution to text size. No more fussing with 52px headlines on the iPhone version of a website, pretty sweet!

Fitvids

Flash video can be difficult. However with FitVids responsive flash video can become a problem of the distant past. Simply activate a bit of JavaScript and videos will bend to your every need. (A very special thanks to Paravel and Chris Coyier for FitVids and FitText)

Skeleton

Perhaps the single most simple solution to developing a responsive website or project. Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

Twitter Bootstrap

We’ve professed our love for Bootstrap more than a few times on the site. However, did you know that Twitter Bootstrap does not only include the ability to design a fixed width responsive site. Bootstrap also includes a Fluid grid layout designed to fit any screen at all.

Zurb Foundation

To say Zurb is advanced would be like saying that Dr. Neil Degrasse Tyson is only kind of smart. Zurb provides not only a responsive framework in order to layout a design. Zurb also includes just about every Javascript or CSS element that a responsive project may need.

The 1140px Grid System

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.

Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.

Golden Grid System

Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design. If you require a folding grid system. Golden is a great place to get started.

Now 16 columns sounds a bit much for anything other than huge widescreen monitors. This is where the folding, inspired by the DIN paper system and Unigrid, comes in. The 16 columns can be combined, or folded, into 8 columns for tablet-sized screens, and into 4 columns for mobile-sized ones. This way GGS can easily cover any screen sizes from 240 up to 2560 pixels.

Flex Slider

FlexSlider is an awesome, fully responsive jQuery slider plugin that is being cared for by the WooThemes crew. FlexSlider is easy to use. Even better, FlexSlider provides or hardware accelerated touch feedback where available.

Nivo Slider

The go-to slider for web developers and designers around the world is now fully responsive. It very simply just does not get any more simple than Nivo.

Style Tiles

Often responsive design simply does not mean exacting PhotoShop design placement. Styletiles provides a method in which a designers can communicate the “atmosphere” of a design.

Semantic grid system

If you are a LESS or SASS user, then you might want to take a long look at the Semantic Grid System. Tired of using unsightly layout classes throughout html markup? Semantic provides for pre-processed methods in which to apply relevant styles to semantic elements.

Spritepad

Being responsible about responsive design can mean cutting down on download times at every corner. A great way to cut down on HTTP requests is to place commonly used images within a sprite image. Spritepad makes it easy to create a sprite and even helps provide the relevant CSS code to render your sprite correctly.

Responsive Images

The Filament Group is at it again, delivering on a quick and simple method in which to query the relevant pixel density of a device and serve up a perfect image.

Retina.js

When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.

TinyNav.js

TinyNav.js is a tiny jQuery plugin (362 bytes minified and gzipped) that converts <ul> and <ol> navigations to a select dropdowns for small screen. It also automatically selects the current page and adds selected=”selected” for that item.

As you can see, the responsive web is growing every day. Choosing the correct tools can make a web crafter’s job a whole lot easier. Take a look at a few of the resources above and let us know what your favorites are in the comments below.

Sep 18 2012

Start Writing Better CSS with LESS

Posted by Brock Nunn | 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

: 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

: 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.

<nav>
<ul>
	<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>
</ul>
</nav>

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

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

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!

Sep 12 2012

15 Incredible Sites Built With Twitter Bootstrap

Posted by Brock Nunn | Design, Showcase, Twitter Bootstrap | 2 Comments

Here at Untame we have a special place in our hearts that is only filled by one thing – responsive design and smart design (okay, okay: two things). Twitter Bootstrap is a flexible front end framework that provides developers and designers an incredible set of tools that they can wield in as large or as small a capacity as needed. In any number of uses, there are tons of great sites that benefit from the Twitter Bootstrap framework and we want to highlight just a few!

The Pink League

Improvely

Discoursehq

leanix

CodrSpace

BreweryDB

Opencooks

NoteSurf

Resource Guru

Gusta

Cup Trek

Bagel Hint

Percentage Calculator

Sweet Soundtrack

NameVine

Well there you are! As you may be able to see purely from these examples, Twitter Bootstrap is no one-trick pony. One of the things that makes Bootstrap so simple to use and beneficial to designers and developers is its ability to become modular. Want to use just the javascript plugins that Bootstrap offers and could not care less about the grid based framework? No problem! Just head over to the Customize page on the Bootstrap site and weave a web of awesomeness baked fresh just for you.

Just can’t get enough of Twitter Bootstrap on Untame? Check out a few of our recent posts.

Aug 09 2012

Twitter Bootstrap: Build A Stunning Two Column Blog

Posted by Brock Nunn | 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.

Aug 06 2012

20 Incredibly Beautiful Free Google Fonts

Posted by Brock Nunn | Design, Showcase | No Comments

When you decide to start the process of creating the right design for your latest web projects, you want to make sure that it has a little something special to help it stand out from the crowd. If you find yourself at a loss for how to achieve a little extra “pop”, don’t fret; you are in luck! Today we are going to be showing you some beautiful fonts that can make your site sparkle.

Traditionally, web designers have been relegated to using only a few “web-safe” fonts in their designs, however a trend that is only growing has come about offering the ability for designers to access web-fonts. Webfonts allow designers to use fonts that are no installed on the viewers computer by accessing them via a remote server.

Google web fonts is an absolutely free service that provides a unique user interface wherein a designer can surf through an ever growing library of fonts and choose one that matches their design direction perfectly. At Untame, we love and use Google web fonts all of the time, and thus, we put together a collection of a few of our very favorites.

Antic Slab

Berkshire Swash

Eagle Lake

Economica

Ewert

Kaushan Script

Londrina Sketch

Krona One

Lovers Quarrel

Russo One

Arvo

Josefin Slab

Bitter

Open Sans

Oswald

PT Sans Narrow

Raleway

Rock Salt

Syncopate

Ubuntu

Seems pretty easy right? Give Google web fonts a try, I think you will find that by simply adjusting the type on your web pages web fonts can help your site stand out from the rest. Adding web fonts to your site is also easier than ever before, if you haven’t already, check out the helpful video above for more instructions. Do you have a favorite free font that we didn’t cover? Let us know in the comments below!

Category Archives: Design