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

Using the :nth child selector in CSS3

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

There is a CSS selector called nth-child. If you put simply a number in the parentheses, it will match only that number element. For example, here is how to select only the 3rd element: The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent.

ul li:nth-child(3

This selects the 3rd element in a list of related elements and changes its color. nth-child also accepts two keywords in the parentheses spot: even and odd. Those should be pretty obvious. "Even" selects even numbered elements, like the 2nd, 4th, 6th, etc. "Odd"...

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

Quick Tip: How to use the HTML5 Video Tag

Posted on Tue, November 06, 2012 in Web Design by Kevin Carpenter

Until now, there has not been a standard for showing a video/movie on a web page without a third-party video plugin like Flash, Silverlight or Quicktime. The control attribute on the video tag also optionally adds video controls to the player (play, pause, volume, etc).

It is a good idea to always include width and height attributes. If height and width are set, the space required for the video is reserved when the page is loaded. Without these attributes, the browser does not know the size of the video, and cannot reserve the appropriate space to it. The effect will be that the page...

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

Modern Block Quote Styles with CSS3

Posted on Mon, October 29, 2012 in Web Design by Kevin Carpenter

Found an great article specifically on modern block quote styles in CSS3, but has quiet a few other interesting tips. The article provides a couple helpful demonstrations regarding the border radius attribute in CSS3, showcasing the ability to "draw" shapes and inset photos into circular borders. The tutorial also provides unique ways of transforming text to fit CSS created shapes and backgrounds. Definitely worth a read. Modern Block Quote Styles

Read More

Layout and Content Considerations for Responsive Web Design

Posted on Fri, October 26, 2012 in User Interface, Web Design by Kevin Carpenter

Grid systems are a key component of graphic design, but they’ve almost always been designed for canvases with fixed dimensions. Today, the web we’re designing for has no fixed dimensions, it’s a medium that can shape-shift to better suit its device—a medium capable of displaying a simple layout on a smartphone, a portrait optimized site on a tablet, or a full-fledged website on a computer. We can now tailor designs for the device, thus providing our users with better experiences wherever they are at.

As the spectrum of possible resolutions get wider, focusing our attention on one...

Read More

Design Websites With A Grid System

Posted on Thu, October 25, 2012 in User Interface, Web Design by Kevin Carpenter

When you first begin a web design project where do you start? Color scheme? Fonts? Probably not. Most of us start with a sketch outline of the site’s structure. A big part of this structure lies in the grid – a vertical set of guidelines that help determine shape, placement of items and overall structure of each website. Grids are a tool for visual problem solving — they create layout boundaries: known relationships and constraints that define an environment wherein a design can occur. There are a variety of grid-based structures. Most commonly, a grid is made of multiple columns and...

Read More

Favicons: Dont Forget About Retina Displays!

Posted on Fri, October 12, 2012 in User Interface, Web Design by Kevin Carpenter

Make sure your favicons don't look blurry on retina and other high-DPI displays. This article provides a good summary of how to design and built favicons for retina displays. Retina Favicons

Read More

Designing For Device Orientation

Posted on Mon, October 08, 2012 in User Interface, Web Design by Kevin Carpenter

With the addition of an accelerometer being a common feature in our smart devices, it has allowed us to view applications and websites in new ways. This capability provides opportunities to create better, more in depth user experiences because it offers an additional layout with a simple turn of a device, without the press of a button. However, designing for device orientation requires careful thinking. It is important that the experience is transparent and that the functionality is understandable. For example, it is very confusing to the user when a device switches from landscape to...

Read More

Tell Us About Your Project

Invalid phone number