Answer:

The clear property specifies which sides of an element where other floating elements are not allowed. Basically it tells the browser – we don’t allow floats next to this property. So lets say for instance: you’re floating two columns left and then you have a box below them that you want to break the float (in other words not sit next to the floated items above), you’ll want to clear the float so that the bottom element inserts itself after the other two columns instead of showing up on the right hand side of the floated columns (as it would normally since the other two elements are floated).

The CSS would look like this:

<style type="text/css">

#sidebar {float: left; width: 100px;}
#main-content {float: left; width: 300px;}
#footer {clear: left;}

</style>

And the code in the body would look like:

<div id="sidebar">

<p>This column is the sidebar - it's floated left</p>

</div>

<div id="main-content">

<p>This column is the main content - it's floated left</p>

</div>

<div id="footer">

<p>This is the footer, it's clear:left so it displays below the floated elements and does not allow the standard "wrap" where it would display to the right of the left floated elements above.</p>

</div>

Take this bit of code and toss it into an HTML editor, play around with it by removing the clear property and adding it again. Or, if you want to play with an in page editor check out this quick clear tutorial by QuackIt.

Hi. What I’d like to do is rebrand certain parts on a web page based on user input. For example, I’ll have a form that says “enter your user ID”, and based on what they enter certain parts on the page will be rebranded with their user ID.

Here is an example of what I mean:

http://www.getmoremomentum.com/jv/

Half way down the page this person has a form that says “brand tools”. And once you enter your affiliate link, all “tools” get branded with your affiliate link.

I’d like to do something similar.

Thanks,
Max

Max,

This particular feature is what you would call a “quick link generator” and it’s linked up to an affiliate marketing contact management software. The particular software is called Infusionsoft. Basically this software creates a database of all the inputs and if someone ever comes in on that URL they’ll assign the sale to the right affiliate. I know all of this because when you look at the base of the “affiliate url”:

https://aim.infusionsoft.com/go/instantlifestyle/XXXXX

You’ll notice Infusionsoft is actually in the URL string.

Hope this helps!

Answer:

Great question, I was waiting for someone to ask this one!

@font-face

@font-face was first introduced back in the CSS 2 specification back in 1998, however overall browser support has limited its use. @font-face has appeared again in the draft of CSS 3, so it’s come back up in the “main stream” as a way to maybe use fonts other than those that are considered “web safe”. The only trick is that browsers aren’t all on the same page regarding what or how to support this css construct. (Are we surprised? Hardly.) But, here’s how it works:

Step 1. You declare the @font-face construct, tell it what to name the “font-family” and supplement a URL for the font file. Currently, different types of browsers support different types of font file formats, so be sure to check before implementing this.

@font-face {
    font-family: 'MemphisMedium';
    src: url('fonts/memphism-webfont.eot');
    src: url('fonts/memphism-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/memphism-webfont.woff') format('woff'),
         url('fonts/memphism-webfont.ttf') format('truetype'),
         url('fonts/memphism-webfont.svg#MemphisMedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

Step 2. Once you’ve declared the font fine in the @font-face construct you can call it in any css id or class just like any other font family.

h1 {font-family: 'MemphisMedium', Helvetica, Arial, Sans-Serif; font-size: 2.9em; font-weight: normal; color: #ffffe2;}

While @font-face is cool and is AWESOME to use, you do need to make sure that you have legal rights to use the font online.

Cufon

Cufon is a javascript text replacement that basically takes a font, renders EACH character in the replaced string with it’s color, size, and weight information, and then puts it out where the replaced text area was. Sounds confusing right?

Cufon actually makes it way easier than past methods like sIFR. I have used sIFR many times and while it’s very customizable it’s VERY hard to pick up and use without a strong knowledge of css, flash and some use of sIFR before. However, Cufon is way easier, way less confusing, in fact the first time I used it, I was like, “This is it?” So here’s how Cufon to get it to work:

Step 1. Download the base javascript file, then put it on your server with your other javascript files (I keep mine in a folder called js). This is the basic javascript information Cufon needs to have to work, so it’s really important you put that in there.

Step 2. Generate your font using Cufon’s font generator. Browse for the font file you want to use (Currently only TrueType (TTF), OpenType (OTF), Printer Font Binary (PFB) and PostScript fonts are supported.), agree that you have the rights to use the font file (there’s a check box at the end of the browse box and again at the bottom of the page), and select the characters you’d like the font generator to include, I usually do Uppercase, Lowercase, Numerals, Punctuation, WordPress Punctuation, Basic Latin and Latin-1 Supplement. Check out the full unicode chart if you really want to get anal about what you’re putting into your font generator. But the ones I have listed up there should more than suffice for most web copy and symbols.  Besides these items everything else on the generator form is optional so you can skim right by it or read it and pick and choose if you like.

Step 3. The font generator will give you another javascript file, this also goes in your js directory (or where ever it is you put things like that)

Step 4. Put in a call. Javascript call that is. In your code place a call to the base Cufon script, the font generator script and then make a function call to replace the particular elements, classes or ids you’d like Cufon to replace the font of. In this example, it’s the heading 1 elements.

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<script src="js/cufon-yui.js" type="text/javascript"></script>
		<script src="js/Vegur_300.font.js" type="text/javascript"></script>
		<script type="text/javascript">
			Cufon.replace('h1');
		</script>
	</head>
	<body>
		<h1>This text will be shown in Vegur.</h1>
	</body>

Step 5. Fix IE. Oh you knew IE would have to throw a wrench in there somewhere, didn’t ya? Place this little snippet of code at the bottom right before then end closing tag and any other additional end scripts such as Google Analytics. This will fix any flickering or loading delay issues in IE.

<script type="text/javascript"> Cufon.now(); </script>
</body>

And You’re done! YAAY so pretty! For more detailed directions such as using multiple fonts, etc check out the Cufon Usage section.

Bonus Tip:

Don’t over-do Cufon, it’s not designed to be used a ton for large blocks of copy and things like that, use a web-safe font for those types of things, but at least you can get pretty headers and callouts to be sexy… it’s a start, right? If you do, you could have extreme load times where people don’t want to stick around, so just don’t over-do it.

When designing and building a website you should always have the core functionality at the helm driving how you design and develop to get the user from the front page to the end of the desired reaction. To do this, you not only need to know what you want the user to do, but how users interact with the web.

Usability of a website or web application depends on five factors:

• Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
• Efficiency: Once users have learned the design, how quickly can they perform tasks?
• Memorability: When users return to the design after a period of not using it, how easily can they re establish proficiency?
• Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
• Satisfaction: How pleasant is it to use the design?

You can determine what minimum screen resolution by checking your analytics to see what your users prefer when browsing your website. The standard  minimum screen resolution used by most web designers is currently 1024 pixel x 768 pixel, but larger screen resolutions are becoming more popular in mass.

However, you have to take into account scroll bars, tool bars, status bars, etc from the browsing screen. This means the actual size of your PSD will be smaller than the full screen resolution. So for instance, if you’re designing for the standard of 1024 pixel x 768 pixel then your actual canvas area on your Photoshop document should be 960 pixels wide and at least 565 pixels (the above the fold area) to fit in a browser correctly.

The answer is…**opens up the white envelope, fumbles, nervous laugh as she opens the winners card** … “maybe”.

I know I know – anti-climatic at best, evil at the worst, but true all the same.

Cater to Your Users

So, if the answer is “maybe”, when do you know when you should and when you shouldn’t? The answer is simple. Check your web analytics, if over 15% of your web traffic is using Internet Explorer 6 then you’re still catering to IE6 because you WANT to cater to your audience.

What if I don’t know?

If you don’t know what your user base is using as a browser I would still say to test for core functionality and usability and don’t sweat the minor design details such as rounded corners etc. As long as the user can use the website properly they’ll be none the wiser that they’re missing some small design detail. As a funny man once said, “Don’t worry about cross-browser testing for IE6 too much because the rest of the internet probably looks like shit for them too.”

Some benefits of styling mouse overs are:

• adds “movement” to an otherwise flat design
• helps the user know they have moved over an area that they can interact with
• adds a touch of design element that doesn’t have to be existing all the time
• can create a delightful “Easter egg” moment when the user interacts with the element

Take for instance, the icons that appear over each menu item on the navigation of Design Made Better, each help explain the action or information the user is going to find on the next page, not to mention they’re super cute.

Great, now how do I get them into my flat PSD file?

You can do this by simply creating a new layer (or layer group to keep everything tidy) in your photoshop document and styling that layer as you would like to see the mouse over when the user interacts with the trigger area.

Bonus Tip!

Use the word “mouseover” or even simply “over” in addition to the original layer name in your new mouse over layer name to tell quickly which layers are the mouse overs and which are the originals.

Really handy if you’re handing your designs to someone else to implement, but can also help you remember what’s what in a complicated file.

Generally, wireframes are a helpful way to illustrate to designers what elements are required on the layout, how the information architect has determined to be their importance on the page and the order in which these elements should be seen by the user for best website usability.

website wireframe and final web design for Design Made Better

Now, you may be thinking, “Well that takes all the fun out of it!” Sure, I suppose you could think of it that way, OR you could think of it as “An efficient way to ensure your layout is as effective as possible.” or “YAAY! Now I just have to make it look good!” Usually wireframes don’t ULTIMATELY dictate element placement on the page, however they do usually shed some pretty good light on how they would like the users eye to go first by using size and color information shown on the wireframe.

In addition, wireframes are a great way to show clients what you’re thinking about designing before spending a long time on a design, just for them to end up moving elements around again and again and again, each time you’re having to go into Photoshop and make each revision so the client can “see” what you’re suggesting. Wireframes offer a quick, simple solution to the visual flow of a page and lay the foundation for your final design.

Bonus Tip!

When designing from a wireframe, you should always check your final design to make sure it has all the elements that are shown on the wireframe.

Also, be very careful not to design any additional functionality that wasn’t on the wireframe into a design without consulting your team first, as these “added features” could cause serious scope creep.

• visual impairment
• physical impairment
• auditory impairment
• mental impairment

Currently, accessibility seems to be a “it’d be nice if…” feature of websites. However, it’s actually a bigger deal than most businesses, designers, or developers think. Worldwide, 750 million people have a disability and three out of every 10 families are touched by a disability. In the United States, one in five people have some kind of disability and one in 10 has a severe disability.

Oh no! I feel horrible I’m leaving all those people out!

You’re not alone, in a usability study performed on 200 websites around the world, over 80% of websites are not performing at an W3C A accessibility level. Which means we have a ways to go before the internet is accessible to everyone.

What if I don’t care about those people?

Accessibility is still important, even if you don’t think those users are. (Shame on you by the way for thinking that, you mean person you!)

If you’re working with government or federally funded websites such as colleges, it’s actually against the law to not comply with Section 508 Accessibility Standards. Since June 2001, U. S. federal Web sites must comply with Section 508 of the Rehabilitation Act (29 U.S.C. §794.d).

Also, this is becoming more of a mainstream issue since 2006 when Target was sued for it’s non-compliance of Section 508 Accessibility Standards. So, if you want to work for any of those big name brands or legally conscious business people accessibility is important to you too.

There’s actually a great web-safe font list that you can use when selecting which fonts to use on your web design project.