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

Designing for Today's Pixels

Posted on Wed, October 03, 2012 in User Interface, Web Design 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 Business Strategy, User Interface, Web Design by Kevin Carpenter

Wireframing

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

The DOCTYPE tag

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 User Interface, Web Design 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 : http://www.456bereastreet.com/archive/200509/css_21_selectors_part_1/ CSS 3 : http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/ Take a look, if you're not using these you're missing out.

Read More

Topics

Authors

Tell Us About Your Project

Invalid phone number