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 Web Design, Content Strategy, User Experience 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 Web Design, User Experience 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 Web Design, User Experience 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 Web Design, User Experience 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

Designing for Today's Pixels

Posted on Wed, October 03, 2012 in Web Design, User Experience by Kevin Carpenter

I've been doing research into displaying retina-ready images without impacting page load, and I thought it would be beneficial to share this Article. It gets into the details of the problem and offers some good solutions to display high-quality images for all devices. Mo Pixels Mo Problems

Read More

Wireframing Your Website Designs: What It Is And Why It’s Important

Posted on Mon, October 01, 2012 in Web Design, Business Operations, User Experience by Kevin Carpenter


When it comes to establishing a budget for a website, the value of wireframing is usually misunderstood and is the first phase cut out of a tight budget. This is a big mistake as proper wireframing is an essential stage in the strategic design process — good wireframes help you solve complex problems early, tailor your design to your user’s goals, and save you money.

Before we get into the specifics, let’s take a step back and briefly discuss what a wireframe is. Wireframes are the foundation on which to begin building your site; a wireframe determines the site’s...

Read More

The Importance Of The Doctype

Posted on Mon, September 24, 2012 in Web Design by Kevin Carpenter


Per HTML and XHTML standards, a DOCTYPE (short for “document type declaration”) informs the web browser which version of HTML you’re using, and should appear at the very top of every web page. DOCTYPE's are a key component of standards-compliant web pages, plus your code won’t render correctly or validate without them. We found a few useful links on everything you need to know about DOCTYPE's and why they are important — useful information that is worth a read.

Doctypes Overview - A good introduction to DOCTYPE's explaining why use them and where to put them in...

Read More

Quick Tip: Element Selectors in CSS 2.1 & 3

Posted on Thu, February 03, 2011 in Web Design, User Experience by Paul Weinert

With the majority of internet users now using modern, web-standards based browsers (FireFox, Safari, Chrome, IE 8+) us as Web Designers & Developers have a great resource at our disposal: New attribute selectors in CSS 2.1 and CSS 3. These allow us to select adjacent elements, element's parents and many others. My favorite resources to learn more about this are: CSS 2.1 : CSS 3 : Take a look, if you're not using these you're missing out.

Read More

Say Hello to RGBA Color with CSS3

Posted on Wed, March 31, 2010 in Web Design by Paul Weinert

If you're a web designer or front-end developer stop using Hexadecimal colors. RGBA offers your greater flexibility and control to make your designs pop and get you out of PhotoShop. Let's use a bright blue for example. I can define this as #1c0abc in Hexadecimal or as an rgb(28,10,188) RGB value in my CSS.

style="background-color:#1c0abc;" or

style="background-color: rgb(28,10,188);" with RGBA, you can add a fourth value, the "alpha" transparency of the color. 0.0 is 100% transparent. 1 is fully visible.

Above is five stops, with the A value .2-1.0 in .2 increments....

Read More



Tell Us About Your Project