Design Shack

Quick Tip: Creating Swirly Vectors Using Illustrator

Sat, 21 Nov 2009 12:11:16 -0800

An illustrator video quick tip tutorial on how to create swirly vectors in illustrator.

10 Must Have Hacks for WordPress Development

Sat, 21 Nov 2009 12:07:58 -0800

Ten wordpress code hacks that you can add to your arsenal that will not only save you a lot of time, but they will also set your themes apart from others who don’t come pre built with these types of features.

View Post

Zen Coding: A Speedy Way to Write HTML/CSS Code

Sat, 21 Nov 2009 12:05:20 -0800

In this post we present a new speedy way of writing HTML code using CSS-like selector syntax — a handy set of tools for high-speed HTML and CSS coding

View Post

CSS Design: Boco

Sat, 21 Nov 2009 00:00:00 -0800

View boco.me/ at Design Shack

CSS Design: Actvise

Sat, 21 Nov 2009 00:00:00 -0800

View actvise.ro/ at Design Shack

Create a Beautiful CSS Menu

Fri, 20 Nov 2009 09:14:14 -0800

Today we’re going to create a working horizontal CSS menu from scratch. We’ll be using transparent PNGs (sorry outdated browser users) to create a glossy horizontal bar, the color of which can easily be changed using only CSS. Before we get started, check out what we’ll be building in the live demo.

Creating the PSD

The Photoshop work for the menu is quite minimal and should only take you a few minutes. I’ve broken it up into five super easy steps.

Solid Bar

Create a new RGB file in Photoshop and draw a 45 pixel high colored bar (I used #4d4e50) all the way across your canvas.

Gradient

Next grab your gradient tool and make sure it’s set to a gradient that starts at black and ends at transparent. Starting at the bottom, stretch the gradient vertically over your gray bar.

Gloss

Make a white stripe that aligns with the top of your gray bar but only extends half the vertical distance. Set the opacity of this stripe to 7%.

Stripes

Make two more white stripes, this time only a few pixels high and inset them slightly from the top and bottom of the gray bar.

Saving

Believe it or not, that’s about all we need! Before you save the PNG turn off the original color bar layer. This is so we can change the color within our CSS. Also note that we don’t need the entire image as we’ll be setting it to repeat horizontally. Just crop off a small vertical sliver and go to “Save for Web & Devices” to save your PNG.

The HTML

I’ll assume a basic understanding of HTML and CSS here. I’ll try to be as descriptive as possible without explaining everything line by line.

The Empty HTML

We’ll start with a simple, blank HTML page.


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>DesignShack CSS Menu</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
 
</body>
</html>

Container

Now we’ll add a container div that will hold the navigation menu div.

<body>
<div id="container"> <div id="navMenu"> </div>
</div>
</body>

Menu Structure

To finish off our HTML, throw in an unordered list containing span items for Home, About, Services, Work and Contact. This will be the basis for our menu items. We’ll insert the background and style this list all in CSS.

	<div id="navMenu"> <ul> <li><a href=""><span>Home</span></a></li> <li><a href=""><span>About</span></a></li> <li><a href=""><span>Services</span></a></li> <li><a href=""><span>Work</span></a></li> <li><a href=""><span>Contact</span></a></li> </ul> </div>

The CSS

The CSS will contain the bulk of the work. All we’ve done so far is create a list of links so your page should look like this:

Background Color

The first thing we’ll do is tint the background a bit to break up the boring white background. Just add the following snippet to the body.

body { background-color: #cdcfd0;
}

Basic Container Styling

To get started on styling the container, set the position to relative and the height 45 pixels (which is the height of our Photoshop graphic). Then set color and background to white and the width to 100% so it stretches all the way across the window.

#container {
position:relative;
height:45px;
color:#ffffff;
background:#ffffff;
width:100%;
}

This code should result in a mess in your preview. Don’t worry, that’s exactly how it should look at this point!

Adding and Styling the Image

Now we’ll get into the stuff that’ll make it look like a menu! This time we’ll target the navMenu div containing the links. Once again, set your position to relative and height to 45px. We won’t add any text at this stage but go ahead and set the font-size to 17px. Next I set the background color and image with a single line of code. Notice that the color (#4d4e50) is the color of our original color bar in Photoshop. This setting is the key to the flexibility of this menu. Changing this value will change the color of the navigation menu, making it super easy to customize. After setting a color, throw in the background image and set it to repeat on the x axis.

#navMenu {
position:relative;
height:45px;
font-size:17px;
background:#4d4e50 url(images/background.png) repeat-x bottom left;
padding:0 0 0 50px;
}

Now if you preview the page you should see a slick and shiny menu bar! Experiment with changing that color value to see how the image retains its gloss while changing colors.

Addressing the Links

Next we’ll add a big chunk of CSS to the unordered list to start getting our links into position. For the general unordered list section, set the margin and padding to 0, the list style to none, the width to auto and the float to left. Then style the list items contained in the unordered list (li). Again we float left but note this time we set display to “block” and our margins to 0 1px.

#navMenu ul{
margin:0;
padding:0;
list-style-type:none;
width:auto;
float:left;
}
 
#navMenu ul li {
display:block;
float:left;
margin:0 1px;
}

Take a look at your page in Safari. The list items should be lining up horizontally now.

Styling the Text

Now target the link items (a) in the menu. Set the display to block, the float to left, the height to 45px and the color to white. To eliminate the link underline, set the text-decoration to none. Finally, to space out the links a little set the padding to 0 0 0 30px (clockwise: top 0, right 0, bottom 0, left 30).

#navMenu ul li a {
display:block;
float:left;
color:#ffffff;
text-decoration:none;
padding:0 0 0 30px;
height:45px;
}

The text should look closer to where we want it now, but it’s still a bit off.

This time target the unordered list, list item, link span items (targeting gets a little crazy). Notice I’ve added more padding to line things up better and set a height and float. Next we see a bit of code that I borrowed from Chris Coyier at CSS-Tricks that gives us a really nice font for the menu. Essentially, HelveticaNeue-Light is our preferred choice here so those viewers that have it installed will see it. Those who don’t will simply revert to the next font inline until their browser finds an installed option. In the words of Chris “Might as well use the nicest Helvetica you can…”

#navMenu ul li a span {
padding:12px 30px 0 0;
height:21px;
float:left;
font-weight: 100;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica,
Arial, "Lucida Grande", sans-serif;}

Now our menu text is beautifully styled and in place!

Adding Hover Effects

Our final step is to add some nice hover effects so you can easily see which option you are about to select. We’ll target the links on hover with our first snippet and the spans on hover on our second. Notice under “background” I inserted the same background image as we are using for the menu bar itself. This is so our hover option retains the nice glossy look. However, this time I set the background color to a darker gray. This provides the differentiation in our hover effect.

#navMenu ul li a:hover {
color:#fff;
background:#2d2d2e url(images/background2.png) repeat-x bottom left;
}
 
#navMenu ul li a:hover span {
display:block;
width:auto;
cursor:pointer;
}

Voila! Now we have a beautifully shiny CSS menu with a nice rollover effect.

Changing the color

The bad news is that browsers without PNG support won’t display this properly at all. The good news is, for browsers that do support PNGs (you know, the 21st century browsers), this setup makes it crazy easy to completely change the look of the menu with only two CSS color value tweaks!

Just find the two places in your CSS where the background image appears (once for the bar and once for the rollover) and change the preceding colors. Look what happens if we create another menu and substitute #3d359a for the main color and #5749e7 for the hover color.

Conclusion

I hope you’ve learned a thing or two about CSS and have been inspired to experiment with transparency for the sake of flexibility. You can easily create this same effect using JPGs, but it would take more images and would require you to create new images in Photoshop every time you wanted to change the color.

Create Light Effects Using These 1000+ Fractal Art

Fri, 20 Nov 2009 06:48:09 -0800

Check out this amazing set of free graphics and brushes to help you achieve stunning lighting effects.

View Post

10 Blogs to Help You Become a Photography Expert

Fri, 20 Nov 2009 06:46:43 -0800

Chances are, if you’re a designer, you love photography. Follow these 10 blogs to polish up your skill set.

View Post

How To: Designing a Mobile Website

Fri, 20 Nov 2009 06:44:23 -0800

Learn the dos and don’ts of good mobile web design.

View Post

CSS Design: David Appleyard

Fri, 20 Nov 2009 00:00:00 -0800

View davidappleyard.net at Design Shack

CSS Design: All Creatives

Fri, 20 Nov 2009 00:00:00 -0800

View allcreatives.net/ at Design Shack

14 Free Mac Apps for Web Designers on a Budget

Thu, 19 Nov 2009 06:52:41 -0800

Fill your applications folder with helpful software that will streamline your workflow without affecting your wallet.

View Post

Introduction to HTML5, Microformats and CSS3

Thu, 19 Nov 2009 06:50:58 -0800

A screencast that discusses the basics of HTML 5 technology and CSS3 styling techniques.

View Post

80+ Ridiculously Rad Social Networking Icons

Thu, 19 Nov 2009 06:49:31 -0800

An amazing collection of free icons. You should grab them immediately.

View Post

12 Accessibility Pitfalls to Avoid

Wed, 18 Nov 2009 10:22:09 -0800

Usability isn’t an exact science. What one visitor considers helpful another considers annoying. Despite this uncertainty and complexity, you should always strive to make your site as accessible as possible to the people you’re trying to reach. You’ll find that a little bit of catering to the special needs of a minority of users can drastically improve the function of your site for all users. Here’s our list of twelve accessibility pitfalls to avoid along with some examples showcasing sites that either excel or fail miserably in these areas.

Captchas

Web developers sure seem to love captchas, but users can’t stand them. Grant it, they’re not all bad but most of them are either impossible to read or unnecessarily complicated like the one above. Another important issue is that captchas often represent a serious roadblock for the vision-impaired. If you absolutely must use a captcha, make sure most humans can read/understand it and have options in place for those users who are unable to see it.

Not Using “alt” Attributes on Images

It’s definitely a good practice to always insert a helpful bit of alt text for the images on your site. This way users who are unable to view your images are represented with a text equivalent. Note that not all browsers treat the alt attribute the same way. Because of this many developers confuse the purpose of alt and title, mistakingly thinking that images with an alt attribute should display a tool tip. In reality, the title attribute is what should display a tip on mouse over (see the Smashing Magazine example above).

Using Pop Ups for Content

Most modern browsers ensure that your content will be blocked if it comes in the form of a pop up. This means you’re running the risk of losing several possible users who simply move on when they realize that your site isn’t compatible with their setup. Only the most dedicated visitors will investigate the problem in your help pages to discover how to solve the problem.

Improper Labels on Forms

Visit Mint.com (shown above) and check out their sign up form. Notice that you can select a specific field whether you click on the field itself or on the attached label. This is because the Mint developers are using the label element properly. The lesson here is that simply labeling your forms with plain text isn’t enough. Instead, you should always use the label element to maximize usability. This not only provides easy-to-select fields, but also ensure that screen readers and auto-fill functions work properly with your forms.

Unrecognizable Links

The screenshot above shows a section of the homepage of Tutorial 9. Notice that you can instantly differentiate between the text that contains a link and the text that doesn’t. Popular ways to create link differentiation include color contrast, underlines, and rollover effects. Notice that Tutorial 9 actually employs all three methods! This dramatically increases usability because users can clearly see where to click if they wish to access more content.

Vague Link Text

Consider the following examples:

1. To visit our CSS Gallery, click here.
2. Be sure to stop by our CSS Gallery!

As you scan a page, your eyes are likely to focus on differentiated links more than the rest of the text because they stand out. The first example may seem like a good way to go because the call to action “click here” is what catches your eye. However, without properly reading the entire sentence, “click here” doesn’t inspire action because the user isn’t sure where it leads. In contrast, the second link can be instantly recognized and understood as a path to a CSS gallery, regardless of whether or not the user has read the content before it.

Cluttered Content and Insufficient Spacing

The site above is really more of a parody than a proper example, but it gets the point across and was far too funny not to include. Put simply, don’t crunch your content together or include an outlandish amount of pictures or text (news stories and blog posts are exceptions). Small business owners just getting started on the web almost always fall prey to this mistake and include paragraph after paragraph of information that no one will ever read. Like it or not, the web is a visual beast. The information on your page should be clearly organized and easily understood within seconds.

Changing Font Size Shouldn’t Break Layout

Not everyone on the web is a 19 year old with 20/20 vision. Many users, young and old, have to increase their default text size to make a page more readable. Check out what happens to Fox News (and several other popular news sites) when you increase the font size. The layout is completely destroyed: the navigation links all run together, buttons are miles from their associated text and the ads running down the right side have disappeared completely. This sort of oversight can alienate a large portion of visitors.

Poor Contrast Between Text and Background

These guys may be toting their design skills but they’ve ruined their credibility by doing so with a graphic that’s nigh upon impossible to read. I understand that sometimes clients require you to use a stock photo with zero copy space, but it’s your job as a designer to figure out how to integrate easily readable text with the image. Use bold type, strokes, drop shadows, color bars and anything else you can think of to differentiate your message from its background.

Overuse of Flash

Don’t misinterpret this as a Flash bashing mantra. Flash has brought the web to a level of richness that can make a developer’s wildest dreams come true. I am just as prone to being sucked in by an amazing and unique flash site as the next guy. However, use extreme caution when integrating Flash so much into your website that it won’t function without it.

Make sure you carefully consider the reason behind the site’s existence and your target market for the site. If you want to build an online application or eye candy for visitors, Flash may be the way to go. But if your target market is the general public, an all Flash site could be a bad idea for a number of reasons. The first is usability, Flash-based site developers can often be so obsessed with making something pretty that zero thought is put into whether a user can actually figure out how to use the site or not. I’ve noticed that big name ad agencies tend to follow this trend by making beautiful websites that can take minutes to figure out how to use. Another reason to avoid Flash is that many users are so annoyed by Flash that they disable it completely. Finally, always consider whether it’s acceptable to sacrifice mobile visitors. Many smartphones like the iPhone don’t yet support flash and are therefore shutout of many mainstream websites.

Complicated Drop Down Menus

There’s a fine line between a helpful menu and an overloaded mess and the developers at Microsoft are flirting with it. On one hand, they are providing users with easy access to their full line of products. On the other hand, they’re throwing a ton more content at users than they are used to in a simple drop down menu. This might be acceptable if clicking the “all products” button took you to a dedicated page containing the list of products, but that’s not the case (clicking only closes the menu). Spend a minute on their site and you’ll see that nearly all of the navigation menus are crammed full of small (arguably hard to read), monotonous links.

The point is that over populating menus usually springs from an attempt to increase usability while in reality resulting in decreased usability due to the inordinate amount of information that must be sifted through to get where you want to go.

Conclusion

So there you have it, twelve easy ways to make your site friendlier to the masses. I hope this article has helped you spot a few ways you can start improving the accessibility of your designs. Let us know what you think of these tips. Feel free to completely disagree on any or all of them and be sure to let us know about all the little things that bug you regarding accessibility.