Dan Olsavsky's Blog

An Important Choice to Make

2010-04-16T16:33:00.002-06:00

I recently read an intriguing article about web browser wars in the March 8th edition of Business Week. In the article they reference http://www.whatbrowser.org, a Google owned (yet neutral) website that advocates “Browser Awareness”. I would advise that you to take a moment to check it out and see what you’re missing, unless you’re already using Chrome or FireFox (yes I’m biased). More importantly, the article describes an interesting concept... Some European countries now require PC manufacturers to allow the end-user to choose which browser they want to use. In other words, if IE is set as the default browser Windows will prompt the user to choose a different browser or keep IE as the default. This initiative derives from an antitrust settlement involving Microsoft and while it is only exclusive to the EU, don’t be surprised to see it in the States. Furthermore, I wouldn’t be surprised to see something similar happen to Mac (Safari is to Mac as IE is to PC). With the recent passing of IE6 and the rise of Google’s Chrome the browser wars are far from over, but you won’t find me switching sides! I applaud Business Week for shedding some light on the subject.

Interview

2009-03-04T07:39:00.005-07:00

I was recently asked to do an interview about Web Design for an online magazine. I completed the interview and it was published last night. Check it out, I’m the second interview in the news slider on the home page @ http://spicywebdesigners.com/ or you can go directly to the interview by clicking here.

Thanks,

Dan Olsavsky
Front-End Developer in Denver, Colorado

Vote 4 Me

2009-02-26T10:11:00.018-07:00

My website is featured on 21 CSS Web Design galleries. This is HUGE! Please vote for me at;

http://www.cssdrive.com/
http://www.cssdrive.com/index.php/main/galleryitem/dan_olsavsky/

http://www.csszone.org/
http://www.csszone.org/2009/02/26/dan-olsavsky/

http://www.cssbased.com/
http://www.cssbased.com/showcase/4877/dan-olsavsky

http://www.cssstar.com
http://www.cssstar.com/2009/03/02/dan-olsavskycom/

http://www.fantasticss.com/
http://www.fantasticss.com/web-and-graphic-design/dan-olsavsky/

http://www.thecssgallerylist.com
http://www.thecssgallerylist.com/dan-olsavskycom/

http://www.cssenvy.com/
http://www.cssenvy.com/dan-olsavskycom/

http://www.csskid.com/
http://www.csskid.com/portfolio/dan-olsavskycom/

http://www.mysexycss.com/
http://www.mysexycss.com/web-design/dan-olsavsky/

http://www.mostinspired.com/
http://www.mostinspired.com/sites/view/cfc959c5fc2b25a10380a123db297974

http://www.cssloggia.com/
http://www.cssloggia.com/2009/03/04/dan-olsavsky/

http://www.cssshowcases.com/
http://www.cssshowcases.com/web-designs/dan-olsavsky.htm

http://www.cssorgy.com
http://www.cssorgy.com/dan-olsavsky-1149

http://www.cssmoon.com/
http://www.cssmoon.com/?p=1684

http://www.csschick.com
http://www.csschick.com/3989_dan%C2%A0olsavsky/

http://gallery.we6design.com/
http://gallery.we6design.com/2009/03/website-development-by-dan-olsavsky.html

http://www.wooki.es/
http://www.wooki.es/archives/dan-olsavsky

http://www.quandtnet.de/
http://www.quandtnet.de/sites/portfolio/2009/dan-olsavsky/

http://www.mabucplus.com/
http://www.mabucplus.com/comments?id=903

http://www.csszhan.com/

http://www.imyike.com/

Additional listings;

http://www.ninjafreelancing.com/
http://www.freelancedesigners.com/dir/webdesign/CO_denver.html
http://newfreelancedesigners.blogspot.com/
http://technorati.com/tag/freelancers
http://inezha.com/p/8075699/item513?hl=en
http://twitter.com/cssbased?page=2

In addition, I have had over 1,300 hits in the past 3 days. Thank you everybody, much appreciated!

Thanks again,
Dan Olsavsky
Web Designer / Web Developer in Denver, Colorado

Typography

2009-02-23T15:01:00.000-07:00

Typography, implemented correctly, is one of the most important design elements on a website. This article reveals many of the modern techniques that are being used recurrently:

http://www.webdesignerdepot.com/2009/04/101-examples-of-text-treatments-on-the-web/

I am intrigued by the background shapes (#2) because occasionally I will have text that will blend in with a background. It frustrates the heck out of me when this happens, especially if the text is layered on top of an image. Often times I will add an outer glow or a stroke but that style is getting old and I can’t use CSS to replicate the effect. I specifically like the technique used by DesignPhunk. The text clearly stands out and is easy to read while the transparency effect is still preserved.

Flash Tip

2009-02-23T09:29:00.004-07:00

Many of you may know this already, but perhaps some don’t …so I thought I would share. When you are saving images out for Flash Development, I suggest not compressing or optimizing the images. Why you ask? Because Flash is compressing the photos when you render the .SWF. There is a very large degradation of quality when you compress the images in Photoshop and then again in Flash (i.e. you are compressing something that is already compressed, therefore causing mass pixelation).

Hope that helps!

Thanks,
Dan Olsavsky
Web Designer / Web Developer in Denver, Colorado

New Website

2009-02-13T01:44:00.001-07:00

It's finally here! I just launched my new site this evening. Drop me a line and let me know what you think.

IE8

2008-07-01T15:51:00.002-06:00

FFx3 is due to "flip the switch" sometime in November (the public release was on June 17th) and IE8 is scheduled to be released in Q4 of this year. Rumor has it that MS wants to release IE8 the same time Mozilla forces the FFx3 update. The bottom line is they will both be out and possibly widely used by the end of the year.

Dean Hachamovitch, General Manager of Microsoft’s Internet Explorer, has released a statement that IE8 is going to Support Standards Mode by default. Many websites may display improperly in IE8 by default because many of us are used to programming for XHTML Transitional (instead of Strict), or in other words, we hack/tweak a lot of website so that they will work in IE6. Read, http://blogs.msdn.com/ie/archive/2008/03/03/microsoft-s-interoperability-principles-and-ie8.aspx for more.

Furthermore, IE8 is not supporting all of the CSS3 functionalities and although MS claims IE8 will fully support CSS2.1, it doesn’t (at least for now). This is an issue that we should all be discussing now because it will affect a lot of websites in the near future. For example: http://www.microsoft.com/windows/products/winfamily/ie/ie8/default.mspx, I know of several sites that I created that use this technique, that I will now have to make significant changes to for IE8 (in some instances this includes the design).

More IE8/CSS2.1 testing literature can be found here!

As one web developer says “At some point standards has to give way to usability.”, lol …try telling MS that! Standards Mode is here! This isn’t going to be a huge barrier for many of us, just a series of speed bumps. In fact, this will be a great opportunity for developers to make money. I foresee myself having to create a new style sheet for a lot of my sites, let’s hope it’s that simple.

Whats wrong in my IE8?

I am composing a list of things that IE8 doesn’t like. These aren’t all things that we need to go ape $h!t over yet as IE8 is still beta, but be aware, were only a few months away.

* IE8 doesn’t work with Multiple IE’s, IE6 or a stand-alone versions of IE7… so don’t install it yet if you plan on testing in older versions of IE

* IE8 doesn’t render anchor tags properly if you are using the CSS property display:block with background images (i.e. image sprites).

* There is an option in IE8 to render the page as if it were displaying in IE7… but it doesn’t quite work yet.

* The in-line attribute “border” must be done in CSS or the border will still show

* The in-line attribute “align” is giving me display problems, again, you may have to define this in your style sheet

* If you have an anchor tag wrapping around aH1-H6(etc), it will not display properly. Apparently, Heading tags can’t be links.

* Target=”_blank” is not working for me

* There are some issues with liquid layouts (it doesn’t seem to like percentages for widths on more than one column)

Some of these problems may be fixed but the Standards will stay the same.

Photoshop CS3 Features - Image Editing

2008-01-25T10:33:00.000-07:00

"Photoshop CS3 Features - Image Editing" by Dan Olsavsky

You will notice that on your main Photoshop CS3 toolbar, Adobe has removed the magic wand tool and replaced it with the Quick Selection Tool. Adobe has recognized that the ability to isolate an object and remove it from its background is quite often a pain staking "project". Photoshop CS3 introduces the Quick Selection tool as a solution.

The Quick Selection tool is much more versatile and intuitive than the magic wand tool. For instance, it is quite easy to use; you simply paint over the area that you would like to be selected and that’s it. There is no need to hold down the shift key to make multiple selections and if you have accidentally selected a bit too much, you can press the Alt key and paint with the tool to deselect areas (think eraser tool). The quality of the selection has improved too, leaving no pixel behind (my attempt at humor).

Once you have made your selection with the Quick Selection tool, you can press the Q key to go in to Quick Mask mode. Quick Mask mode will show you the non-selected areas in red, which will help you identify areas that you may need to clean up a bit. I find this tool especially helpful when I need to cut out such things as the spaces in-between strands of hair.

Once you have your selection exactly the way you want it, you can use the new Refine Edge tool (select/refine edge) to feather the edge of a selection so it will look natural. The Refine Edge tool includes it’s own dialog box (Control + Alt + R) in which you can control several parameters of the selection. FYI, I used to go to select/contract 1px then, select/inverse and then selection/feather 1px... so this will surely save some time.

Especially Useful links:

http://livedocs.adobe.com/en_US/Photoshop/10.0/help.html?content=WSFD9BA8C5-31BA-4fec-81F3-CF04EE5295FC.html

http://livedocs.adobe.com/en_US/Photoshop/10.0/help.html?content=WS9C5407FF-2787-400b-9930-FF44266E9168.html

http://www.photoshopsupport.com/tutorials/adorama/changing-colors-selectively.html

"Photoshop CS3 Features - Image Editing" by Dan Olsavsky

New Inspiration

2008-01-15T08:33:00.001-07:00

There are many similar modern design characteristics among the sites in which I am reviewing this month. I will try to identify what they all are in my critiques.

http://www.caferouge.co.uk/

pros:

beautiful textures
nice layering techniques, it adds a lot of dimension
rich colors invoke emotions
well themed, this helps sell the brand
simple navigation
2 tone background with a pattern
the graphics are very well done (i like locations.php, it's engaging)
nice dropdown concept, this helps me find my way

cons:

takes too long to load pages

http://www.stonebriar.org/

pros:

index tab at top both looks good and functions well, I can find whatever I want with out scrolling at all.
great layering techniques, it adds a lot of dimension
simple navigation
2 tone background with a pattern
Flash banner in combination with the color palette invokes emotions

cons:

the rounded element (containing the service times) seems a bit out of place or perhaps just not consistent with the feel of the rest of the site... i believe this to be because it is rounded
i feel the same way about the "this week..." graphic at the bottom of the page on the blue bar. I would loose the rounded part.
i would also re-shape the background elements in the right hand column...I guess I am really not digging the curves, especially because they are curving in different directions than the other curved elements on the site. It's never a good idea to mix and match horizontal and vertical ANYTHING...unless it's a pattern. I often see this same mistake when using gradients.

Using Multiple Style Sheets (for multiple browsers)

2008-01-10T10:13:00.000-07:00

Star HTML hack...
(where ie specific "root" selectors all began)

Star html is not valid mark-up, therefore it wont work in new browsers... for example, IE7 does not apply rules that use this hack, therefore, you still need to create a new style sheet. Microsoft is discontinuing support of the Star-HTML hack in strict and standard mode so that there will be fewer problems for coders. Furthermore, You should never hack a CSS document if the hack is not valid!

"Update January 2007 IE7 has been out for a few months now, and it ignores the Star-HTML hack just like non-IE browsers. Therefore the hack is now considered to be a filter hack for IE6 and below. Since those old browsers will not change in the future, this "less-than-IE7" filter hack is very safe to use, and allows easy forking of CSS rules between IE6 and IE7 in a single stylesheet."

" So what happens when we start to match child selectors in IE 7? Well, it makes a big mess because we now match more rules not meant to be used from within IE and then those are merged with IE only rules. Because of the merge styles that were never meant to be combined end up changing the layout of the page away from what the author originally intended when they designed their cross browser matrix and testing patterns. "

Example

The star-html technique does not validate

*html #container {
background: url(../images/ie-bkgd.gif) left top repeat-y;
}

Why Use Multiple Style Sheets?

It helps keep your default external style sheet from getting too lengthy.
It is also quite easy to determine what style sheet controls a specific browser (if you name it appropriately).
Easiest and most consistent way to manage browser inconsistencies of a web page
You can use CSS3 for browsers that support it (use all available CSS selectors)
Several HTML editing tools are now equipped with ways to manage multiple style sheets (ie Dremweaver)

There are certain browsers that we have to code for but do not have any reliable means to detect and work around consistently. I have found that it is much easier to develop your CSS code for a highly standards-compliant browser like Firefox first, then create a style sheet for workarounds, to make your code work on IE.

If you write your main style sheet with styles that are coded in a non-standard way to deal with IE bugs first, you will wind up having to rewrite everything when Microsoft fixes the bugs. I found that using the multiple style sheet technique is quite useful and has the least number of side effects.

Conditional Comments For IE (goes in the head of your document)





<![if IE 6]>
<link rel="stylesheet" type="text/css" href="screen-ie6.css" />
<![endif]>

Importing Multiple Styles

<style type="text/css"></style>

Great Articles
http://virtuelvis.com/archives/2004/02/css-ie-only
http://www.positioniseverything.net/articles/cc-plus.html
http://www.quirksmode.org/css/condcom.html
http://www.456bereastreet.com/archive/200510/stop_using_css_hacks_now/
http://www.brucelawson.co.uk/index.php/2005/future-proof-your-css-with-conditional-comments/

A Non-JavaScript, Repeating .PNG Fix - That Works!

2008-01-09T09:25:00.000-07:00

I was looking for a non JavaScript way to use .png's with ie6... however there was a catch, it had to repeat. I found this code and I added it to a site... and it works (*wipes sweat from forehead)!!! The code goes in your CSS so you don't have to edit the HTML, add the .htc file to your root directory.

Note: The first selector triggers the .htc behavior

.fixpng, img {
behavior: url(../iepngfix.htc);
}

#columnContainer {
background-image: url(../images/content-bg.png);
behavior: url(../iepngfix.htc);
background-repeat: repeat;
}

Read how Bob edited this code so that the .png's will repeat (brilliant):
http://bjorkoy.com/past/2007/4/8/the_easiest_way_to_png/

If your not familiar with .htc files, you can read about them here: http://msdn2.microsoft.com/en-us/library/ms531018(VS.85).aspx.

So... you noticed that ie6 is trying to adjust the gamma on the .png!
Well, youre an observant little developer arent you! You can strip the GAMMA information out of the .png file using TweakPNG (Windows only):
http://entropymine.com/jason/tweakpng/

The directions for TweakPNG:
http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=153#7

For those of you who prefer to use JavaScript
Here is the jQuery version of this, however, I don't know it's limitations;
http://campbellsdigitalsoup.co.uk/about/png-fix

- Dan Olsavsky

CSS and SEO

2007-12-05T22:10:00.000-07:00

This is a great technique for how to structure your code for search engine optimization. I use absolute positioning so that I can put certain divs higher in the code... so they are read first by the spiders.

Brief overview:

On the left, how the HTML appears on the page, from top to bottom (most important to least important).
on the right, how the divs are positioned (0,0 [x,y] is top)

div=content, position-top=30
div=text-links, position-top=10
div=top-navigation, position-top=20
div=side-navigation, position-top=40
div=header, position-top=0
div=contact-form, position-top=50
div=calls-to-action, position-top=60
div=flash, position-top=10

- The content and links are most important so they are higher on the page in the code.
- The Flash is the least important, because it cant be optimized, so it is at the bottom but, is positioned to be at the top of the page.

- Dan Olsavsky

CSS Rollovers for Top Navigations

2007-11-08T10:16:00.000-07:00

This is an oldie but a goodie. This is a good foundation for those whom would like to take the next step and add rounded corners via CSS.

The Objective.

Create a SEO friendly top navigation using CSS to control image rollovers.

The HTML.

<ul>
<li><a href="#"><span>home</span></a></li>
<li><a href="#"><span>about</span></a></li>
<li><a href="#"><span>this</span></a></li>
<li><a href="#"><span>that</span></a></li>
<li><a href="#" class="ninetytwo"><span>the other</span></a></li>
</ul>

The CSS.

(note: i have added a class to control the width of the end list item. This came about because I have one list item that is smaller than the rest. I changed the color of the list item so you can see which one I am referring to.)

/* global selectors */
ul {
margin: 0px;
padding: 0px;
list-style-type: none;
width: 463px;
height: 45px;
}
ul li{
float: left;
}
ul li a span{
display:block;
margin: 10px 0px 0px 0px;
text-align: center;
}
/* 93 px wide nav elements */
ul li a{
margin: 0px;
padding: 0px;
list-style-type: none;
float: left;
height: 45px;
width: 93px;
background-color: #eee;
}
ul li a:hover{
margin: 0px;
padding: 0px;
list-style-type: none;
float: left;
height: 45px;
width: 93px;
background-color: #aaa;
}
/* 92 px wide nav elements */
ul li a.ninetytwo{
margin: 0px;
padding: 0px;
list-style-type: none;
float: left;
height: 45px;
width: 92px;
background-color: #000;
}
ul li a:hover.ninetytwo{
margin: 0px;
padding: 0px;
list-style-type: none;
float: left;
height: 45px;
width: 92px;
background-color: #ccc;
}

The Rest.

Change the background colors to background images.

The Example.

http://danolsavsky.com/css-top-nav-rollover.html

Understanding and Troubleshooting CSS, HTML and JavaScript

2007-11-08T09:36:00.000-07:00

Here are a few tips, more to come...

Resources

Troubleshooting

Reference these Websites:

http://24ways.org/2005/avoiding-css-hacks-for-internet-explorer

http://www.webdevout.net/css-hacks

http://www.cssplay.co.uk/boxes/minwidth.html

Validate your CSS/(X)HTML

http://validator.w3.org/

CSS/(X)HTML

Use background colors on block level elements

Use the !important declaration to correct cascading errors

Check that your styles are cascading correctly

make a new style sheet(s)

global

forms

screen

Use firefox web developer tools

firebug

web developers toolkit

measure it

Margin vs. Padding

margin defines the white space around an HTML element's border

while padding refers to the white space within the border

Padding will add to the width of an element

Block vs. Inline

Block - Takes up the full width available, with a new line before and after (display:block;)
- div, h1 ... h6, p, ul, ol, dl, li, dt, dd, table, blockquote, pre, form

Inline - Takes up only as much width as it needs, and does not force new lines. Margin-top/bottom or padding-top/bottom values are ignored. Cant change the width in IE. (display:inline;)

span, a, strong, em, img, br, input, abbr, acronym

ul, p, h1, h2, h3, h4, h5, h6, blockquote, form, label, ul, ol, dl and fieldset tags have default padding

When block doesnt accept the values for your margin or padding, try adding a span tag to fix the problem.

strip div's

Remove all padding and margin

* {
padding:0;
margin:0;
}

Browsers have slightly different defaults for heading sizing and margins.

Create a style sheet for ie

Add an ie conditional comment

Internet Explorer's misinterpretation of the CSS box model means the border and padding are included in the width of the content, as opposed to added on

You CAN use percentages and pixels

Try using position: relative on floated elements if your backgound images are dissappearing

Min height and Min width dont work in IE...use two divs, an outer div that controls the percentage width AND the minimum width, and an inner div which holds the content. The outer div has a width equal to the percentage width and a right (or left) border equal to the minimum width.

CSS ID vs. Class

Standards specify that any given id name can only be referenced once within a page or document. From our experience, IDs are most commonly used correctly in CSS layouts. This makes sense because there are usually only one menu per page, one banner, and usually only one content pane.

Use IDs when there is only one occurrence per page. Use classes when there are one or more occurrences per page

You can use multiple classes to style an HTML element but you can only use one ID when styling an HTML element. This means that class selectors have a wider range of applications.

IDs have higher specificity than classes

There may be times when a declaration conflicts with another declaration. These conflicts are resolved using the Cascade Rules. In simple terms, if a class selector and ID selector were to be in conflict, the ID selector would be chosen.

Global selectors will over-ride anyhting that is cascaded below them (regardless)

One liners, if you can out all of your variables on one line, do so. It minimizes the code and can help prevent browser errors (in older browsers).

JavaScript

Re-order your JavaScript

make sure your JavaScripts variables are defined after the function

General

Dont use deprocated tags

- Dan Olsavsky

PNG Fix w/jQuery

2007-10-22T12:31:00.000-06:00

http://jquery.andreaseberhard.de/pngFix/

Adding the Cursor Pointer to Submit Buttons

2007-10-22T12:27:00.000-06:00

Add the cursor:pointer to your submit button using CSS

input.submit {
cursor:pointer;
}

Embedding Google Maps

2007-10-22T10:14:00.000-06:00

The Objective.

This tutorial will show you how to embed a Google Map in to a website. You will need to create a Google account if you do not have one already. I broke the process down in to five simple steps and included a link to a working example.

The Header.

Insert the following tags in the <head> of your document. Then, edit the Google API key below (key=GoogleAPIkey).

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAoMOJatw3uyEScB50Mr77zxTbBjeJC5OepS89rel7GdJxD1-WLRS2pZIcAM7oxTtSFl3u5DcA6NQK3w" type="text/javascript"></script>
<script language="JavaScript" src="maps.js"></script>
<link href="map.css" rel="stylesheet" type="text/css" />

The Body Tag.

Replace Body Tag with the following code:

<body onload="load()" onunload="GUnload()">

The HTML.

Insert the map <div> where ever you would like your map to be displayed

<div id="map"></div>

The JavaScript

Save the JavaScript below as "maps.js", modify, then go to Geocoder to get the new GPoint Coordinates. NOTE: You can now click the "Link to this page" hotlink on Google Maps, to find the coordinates. Simply copy and paste from the line of HTML code.

function load() {
if (GBrowserIsCompatible()) {
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
var map = new GMap(document.getElementById("map"));
var point = new GPoint(-104.924927, 39.861263);
var point2 = new GPoint(-105.208168, 39.786906);

var html = '<br /><b>Dan Olsavsky</b><br />Denver, CO';
html += '<form action="http://maps.google.com/maps" method="get" target="_blank">';
html += '<i>Directions to here from</i>: <br />';
html += '<input type="text" name="saddr" value="" size="25"><br />';
html += '<input type="hidden" name="daddr" value="Denver, CO" />';
html += '<input type="hidden" name="hl" value="en">';
html += '<input type="submit" value="Directions"/></form>';

var htm2 = '<br /><b>Dan Olsavsky</b><br />Golden, CO';
htm2 += '<form action="http://maps.google.com/maps" method="get" target="_blank">';
htm2 += '<i>Directions to here from</i>: <br />';
htm2 += '<input type="text" name="saddr" value="" size="25"><br />';
htm2 += '<input type="hidden" name="daddr" value="Golden, CO" />';
htm2 += '<input type="hidden" name="h2" value="en">';
htm2 += '<input type="submit" value="Directions"/></form>';

//Create Marker
var marker = new createMarker(point, html);
var marker2 = new createMarker(point2, htm2);

//Edit Controls
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(point, 9);

//Add Overlay
map.addOverlay(marker);
map.addOverlay(marker2);

//Add info window
marker.openInfoWindowHtml(html);
marker.openInfoWindowHtml(html2);

}
}

The CSS
Create a style sheet named "map.css" and create a selector for the map id.

/* Google Map CSS */
#map {
width:400px;
height:400px;
}

The Example.

http://danolsavsky.com/map.html

Help.

Google Maps Wiki

Advanced

http://www.econym.demon.co.uk/googlemaps/index.htm

CSS Roll-Over Submit Buttons

2007-10-16T10:12:00.001-06:00

The CSS.
Note: These are the styles for an image-roll over . You can just as easily use background colors.

#contact input.submit {
background: url(../images/qc-submit-btn.jpg) 0px 0px;
height: 53px;
width: 144px;
display: block;
border: none;
}
#contact :hover input.submit {
background-position: -144px 0px;
}
#contact:active input.submit {
background-position: -288px 0px;
}

The HTML.

<a onclick="document.getelementbyid('formid').submit"><input type="submit" class="submit" name="" value="" /></a>

-Dan Olsavsky

CSS Image Roll-Overs

2007-10-16T09:53:00.000-06:00

CSS Image Roll-overs.

By combining the four states of a button (normal, hover, active and visited) in to one image, the image roll-over happens quicker and requires less load time. In addition, the images are cached in to the temporary browser memory so they dont have to be re-loaded on to each page of the web site. (see CSS Sprites)

EXAMPLE:

The Image.

The CSS.

#button p a{
background-image: url(../images/button.jpg);
display: block;
height: 42px;
width: 107px;
background-position: 0px 0px;
}
#button p :hover{
background-position: -107px 0px;
}
#button p :active{
background-position: -214px 0px;
}

The HTML.

<div id="button">
<p><a href="read-more.html"></a></p>
</div>

Drop Down Menus Over Flash

2007-10-11T08:49:00.000-06:00

If you would like your drop down menus to display over any Flash elements on your page then this is for you.

1. Add the following parameter to the OBJECT tag:

<param name="wmode" value="transparent">

2. Add the following parameter to the EMBED tag:

wmode="transparent"

3. Add "z-index: 0;" via CSS to your DIV

Here is an example. I am using JavaScript here to avoid the active x control bug in ie6 and to keep my HTML code cleaner.



<script type="text/javascript" src="functions.js"></script>



<div id="mast" class="”flashContent”">
<script type="text/javascript">flash();</script>
</div>

// Save a new JavaScript file as "functions.js" – then add the JavaScript for your movie (note: it is all on one line and must remain this way)

function flash() {
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" id="flash" align="middle" height="PIXELS" width="PIXELS"><param name="allowScriptAccess" value="sameDomain"><param name="movie" value="multimedia/FILENAME.swf"><param name="quality" value="high"><param name="wmode" value="transparent"><embed src="multimedia/FILENAME.swf" wmode="transparent" quality="high" bgcolor="#ffffff" name="flash" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" align="middle" height="PIXELS" width="PIXELS"></embed></object>');
}

/* CSS for class=”flashContent” */

.flashMovie {
z-index: 0;
}

Team Building Exercise

2007-10-11T08:25:00.000-06:00

Team Building Exercise - "Win Lose or Draw"

Object:

Be the first team to make 6 correct guesses from sketched picture clues.

Rules:

Divide players into two teams. The first team selects a Sketcher; all other first team players are then the Guessers. As one team sketches and guesses an idiom, the opposing team watches — play alternates between teams with each new idiom to be sketched.

Rotate the role of Sketcher on a team so that all team members have the opportunity to be Sketcher. Each time your team must draw a new idiom, select a new member of your team to be the Sketcher.

Playing The Game :

1. You need a timer, pad, pencil and clues (idioms)

2. I will keep the time and score

3. The Sketcher secretly looks at the provided idiom and sketches the phrase

4. I will then set the timer to one min. and the Sketcher draws a picture clue (or clues) of the idiom.

Sketching Rules:

• No letters, words or numbers can be drawn. Symbols are acceptable. If part of a name or phrase is guessed correctly, you may write that word next to your sketch.

• Never speak while sketching — but you may gesture to indicate whether the guess is close or off-track!

5. As the Sketcher sketches, the Sketcher’s teammates start shouting out what they think is being drawn. Players can guess as many times as they want.

6. The Scoring:

If the Sketcher’s team guesses correctly before time is up, the Sketcher’s team gets one point. It is now the opposing team’s turn to sketch and guess.

If the Sketcher’s team does not guess correctly within one min, they do not win the point. The opposing team then gets ten seconds to make ONE guess to win the point.

• If the opposing team guesses correctly, they win the point. It is then their turn to sketch and guess a new name idiom.

• If the opposing team does not guess correctly, no one wins the point. It is now the opposing team’s turn to sketch and guess a new idiom.

The Prize:

Each member of the winning team will receive a $5 gift certificate to Amazon.com

FYI, I posted this after the game. Here are the idioms that I used;

A Picture Paints a Thousand Words
Put your money where your mouth is
Blind leading the blind
Back Seat Driver
Caught With Your Pants Down
Elvis has left the building
Woke up on the wrong side of the bed
High Five
Kick The Bucket
Chicken with its head cut off
Money is the Root of All Evil
Pedal to the metal
Raining Cats and Dogs

SEO FYI

2007-09-28T12:35:00.000-06:00

Adding a sitemap to the bottom of your pages does in fact aide in SEO. There are a few reasons why; the search engine spiders can find other pages on the site easier, every page of the site can be accessed easier (for the user) and most importantly more text links equals more title tags (which are one of the most important factors in achieving high search engine rankings). More keywords = better results and this is a clean technique (I.e. not stuffing).

- Dan Olsavsky

P1S Lecture - Using The Whole Screen

2007-09-26T13:39:00.002-06:00

Objective:
-Discuss a new/different solution to layouts
-Liquid Layouts
-Maximizing the screen resolution.
-Ability to add more graphics
-Background : how I got to this
-Examples: where i saw this applied

Background:

- http://www.w3schools.com/browsers/browsers_display.asp

-Browser stats
-80% audience is 1280 x 1024 or larger
-1280 x 1024 majority

- http://cameronmoll.com/

-Author of CSS Mastery
-Web Designer/Developer & Public Speaker
-Troy, please buy if you can
-The book
-http://www.amazon.com/exec/obidos/ASIN/1590596145/authenticbore-20

Examples:

http://tuscany.cssmastery.com/

-example from book
-utilizing the entire screen at different resolutions
-Using percentages insted of pixels
-can use a combination of both

http://www.adobe.com/devnet/dreamweaver/articles/multiple_layouts.html

-same technique
-see samples
-templates
-multiple templates, one style sheet (new in cs3)
-CSS layouts in CS3 (starter pages)

http://www.dynamicdrive.com/style/layouts/category/C13/

- Dan Olsavsky

P1S Lecture (interactive) - Contact Forms

2007-09-26T13:39:00.001-06:00

Objectives:

Design exercise
- Brainstorm to stimulate creative behavior
- Help improve Visual communication w/in the department (to suggest an improvement visually)
- To get everybody involved in the meeting (i.e. No napping... please sleep at home)
- Sharpen your design skill, practice makes perfect
View a gallery of contact forms
Critique one of our own forms
Sketch out some ideas on how to improve the form
Share the thumbnails w/each other

Contact Form Gallery:

http://www.free-css-templates.com/webdesign/contact-forms-showcase/
"It's funny how many of those sites you recognize immediately only by their contact forms" <- This is a very powerful statement.

Critique contact form on:

http://www.smileandshareit.com/

Sketch & Share:

Each designer is to draw 2-3 thumbnails in their sketchbook. These thumbnails will illustrate the changes based on the critique (and your own creativity).
We will then pass our sketchbooks around (to the right) to see all of the brilliant ideas that we have.

- Dan Olsavsky

P1S Lecture - Breadcrumb Navigations

2007-09-26T13:38:00.001-06:00

Breadcrumb navigations
Why?
What?
How?
Examples
Articles

Why?Tell Me Where I Am
-Whenever a user is navigating inside a website with more than 1 sub-level of navigation, it's critical to show them where in the site structure they are.
-This should be accomplished with headlines, sub-headers (when necessary) and breadcrumbs (e.g. Home > Category > Sub-cat > Product).

-The first documented usage of breadcrumbs on a notable webpage was on the homepage of Yahoo.com. The technique was pioneered through a UI study conducted by Matthew Rivard in 1997.

What?

Path
-Path breadcrumbs are dynamic and show the path that the user has taken to arrive at a page.

Location
-Location breadcrumbs are static and show where the page is located in the website hierarchy.

Attribute
-Attribute breadcrumbs give information that categorizes the current page.

How?

JavaScript
- http://www.webmonkey.com/webmonkey/05/52/index0a_page3.html?tw=programming
- http://duvinci.com/projects/javascript/crumbs/

- http://www.olemiss.edu/depts/research/publications/orspit/breadcrumb_howto/index.html
- http://www.olemiss.edu/depts/research/publications/orspit/breadcrumb_howto/BreadCrumbs.js

- http://www.evolt.org/article/Breadcrumbs_in_Javascript/17/15480/

Examples

- http://ils.unc.edu/~aery/inls181/final/examples.html
- http://www.burton.com/Gear/Default.aspx#/mens/jackets/burton/productDetail/70910/B8237101

- http://www.page1samples.com/breadcrumbs/

Articles
- http://psychology.wichita.edu/surl/usabilitynews/52/breadcrumb.htm
- http://www.webdesignpractices.com/navigation/breadcrumb.html

- Dan Olsavsky