Great Advice for Understanding most Users

Posted on Fri, December 20, 2013 in User Interface, Web Design by Alum

Do you ever have a hard time explaining UI and UX to clients or coworkers? We came across this video the other day and found it humorous and helpful in explaining the sometimes counter intuitive design decisions that get made to make our sites user friendly.

Read More

4 Tips To Faster Loading Google Fonts

Posted on Fri, December 20, 2013 in Identity Design, User Interface, Web Design by Kevin Carpenter

Load Google Fonts First Before CSS Place the Google import code such that it loads first directly after the html HEAD tag, EVEN before loading the CSS file. This ensures the fonts load before the CSS so there isn't any unexpected "jumping" of when the font finally loads. This is actually becoming very common in sites that I have seen recently. Use Link Format There are 3 ways in which you can load Google Fonts – @import, link rel and javascript. The link rel tag will allow you to place the code on the html and load it the fastest before the CSS file. Here is an example:

Read More

4 Trends of The Adapting Web

Posted on Mon, October 21, 2013 in User Interface, Web Design by Kevin Carpenter

As 2013 draws to an end, the web design and development world has changed a lot. Here are some trends that I predict will continue to become more and more popular in the year 2014.<br>

Responsive Design for Every Display

Responsive web design has been around for several years now, but it really came alive in the last year. We’ve seen more widespread adoption of adaptive, fluid approached websites.

Every major site  has converted to a fully responsive design which looks good on all devices, not just mobile phones and desktop computers.

Read More

List of Awesome Bootstrap Plugins

Posted on Tue, October 08, 2013 in User Interface, Web Design by Kevin Carpenter

It seems like everyday that i stumble across a new useful plugin that enhances the web project that i am currently working on. However, what use are plugins if they are difficult to work with or do not directly fit into to your existing websites' templates or framework? To ease the pain, i have put together a few plugins that all play nicely with Twitter's Bootstrap foundation for seamless transition into your website.


A combobox plugin that works with twitter bootstrap. Transforms a select box into a autoselecting combobox, pretty neat. Link: ...

Read More

Vertical Accordion Menu

Posted on Wed, June 05, 2013 in Greatest Hits, User Interface, Web Design by Kevin Carpenter

Vertical menu’s have recently become the newest rave in the Web industry. They are responsive, save space, and look great on any device.

Let’s get things started by putting in place our HTML and add the underlying structure to the menu:

Vertical Navigation Menu: CSS3 Coded

<div id="wrapper"> <ul class="menu"> <li class="item1"><a href="#">Friends <span>340</span></a></li>
li class="item2"><a href="#">Videos <span>147</span></a></li>
li class="item3"><a href="#">Galleries <span>340</span></a></li>
li class="item4"><a href="#">Podcasts <span>222</span></a></li>
li class="item5"><...

Read More

Email Inputs

Posted on Fri, May 10, 2013 in User Interface, Web Design by Kevin Carpenter

When we apply a type of “email” to form inputs, we can instruct the browser to only allow strings that conform to a valid email address structure. This makes us that much closer to built-in form validation and we don't have to write JavaScript validators. We can’t 100% rely on this just yet, for browser support reasons. In older browsers that do not comply with the “email” type, they’ll simply fall back to a regular textbox. Please note that all current browsers are a bit picky when it comes to which elements and attributes they do and do not support. For example, Opera supports...

Read More

Using The < nav > Element in HTML5

Posted on Wed, May 08, 2013 in User Interface, Web Design by Kevin Carpenter

With the addition of the nav element in HTML5 there is much confusion as to when to use it. The HTML5 specification definition is the following:

"The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. Not all groups of links on a page need to be in a nav element only sections that consist of major navigation blocks are appropriate for the nav element. In particular, it is common for footers to have a list of links to various key parts of a site, but the footer element is more appropriate in such cases, and no nav...

Read More

Quick Tip: CSS3 Cheat Sheet

Posted on Wed, November 28, 2012 in User Interface, Web Design by Kevin Carpenter

If you don’t have it already, do yourself a favor and print this CSS3 cheat sheet. It has a complete listing of all the properties, selectors types and allowed values in the current CSS3 specification from the W3C. Each property is provided in a section matching it with the section (module) that it is most actively associated within the W3C specification. Next to each property is a listing of the values that that property takes (normal text shows named values it accepts and italics shows value types it will accept).  A very handy tool to have around — download link is below.
Link: CSS3...

Read More

Quick Tip: Meter Tag In HTML5

Posted on Mon, November 12, 2012 in User Interface, Web Design by Kevin Carpenter

The HTML meter tag is used for indicating a scalar measurement within a known range, or a fractional value. The measure is shown as a progress bar.

Also known as a gauge, usage could include displaying disk usage, the amount raised during fundraising activities, or the relevance of a search query result.

It is important to note that the meter element is used to represent a range. It is not appropriate to use this element for representing a single number (such as how many children someone has) unless there is a known maximum number.

Here is how to use it.

li><meter min=...

Read More

Using Multiple Backgrounds Images In CSS3

Posted on Mon, November 05, 2012 in User Interface, Web Design by Kevin Carpenter

Before CSS3, using more than one image as a background was not easily done. The effect had to be emulated using one of the many tricks available, such as adding boxes containing images that imitated borders or adjusting styles for several elements. CSS3 comes with some very interesting properties to manage backgrounds in its Backgrounds and Borders Module, including multiple backgrounds and background image size.

Multiple Backgrounds

We can specify multiple background images for box elements using a list on the individual background properties.

The following example has two background...

Read More



Tell Us About Your Project

Invalid phone number