Customizing HTML lists

I decided to change the ordered <ol> and unordered <ul> lists on the A2D web site to use a custom style based on one of the List-a-matic styles. The CSS I created looks like this:

.article-list {
padding: 1px 1px 1px 40px;
margin: 0px 0px 20px 100px;
background-color: #cccccc;
color: #ffffff;
border: 1px solid #cccccc;
}
.article-list li {
border-left: 2px solid #4c4c4c;
list-style: lower-alpha;
background-color: #ffffff;
color: #663300;
padding-left: 5px;
padding-bottom: 3px;
}


Wouldn't you know that IE 7 does not display these correctly, but Safari and Firefox show the list as the example image above. Back to debugging IE problems. The problem required a little investigation but isolating the <ul> and then removing and adding CSS style changes until the problem was located. In IE you must add the style padding-left: 40px to allow room for the custom list style lower case alpha characters!

JavaScript dialogs

I found an extremely useful JavaScript library called Prototype Window which is built on top of Prototype and Scriptaculous. I really like how easy it is to customize and add different skins to the dialogs. I am using this for the dialog that explains how I created the A2D logo. Creating a dialog is easy as this:

var dialog = new Window('modal_window', {className: 'dialog', top:logo_top, left:logo_left, width:logo_width, height:logo_height, zIndex:150, opacity:1, resizable: true});
dialog.setContent('logo_creation');
dialog.show(true);


CSS tricks

Today I have been using a couple of very nice CSS tricks in my recent contracts, so I re-created them from scratch on the Attentive 2 Design web site:

• Rounded corners using Javascript without images. What I really wanted to do was add a dark burnt orange border around my definition box on my home page, but when I tried to do so the
  
Rico.Corner.round('a2d_description', {corners:'all', color:'#4c4c4c', border:'#ffa500', bgColor:'#ffffff', blend:'#ffa500', compact:false});

  


• Setting transparency using CSS that works in Safari, Firefox and IE - I used this for dialogs - click on the A2D logo and a description comes up in a dialog.
  
opacity: 0.5; /* ------> Mac: Safari */
-moz-opacity: 0.5; /* -----> Firefox */
filter:alpha(opacity=50); /* ---> IE */

  


• Creating a box punch is a standard printer technique, but I like the effect so I added it to the same dialog that explains how I created the A2D logo. The CSS to enable this was very simple:
  
div#punch_logo {
background-color: white;
float: left;
text-align: center;
border: 1px solid black;
border-width: 0px 1px 1px 0px;
margin: -1px 1em 0.5em -1px;
padding-left: 3px;
}

  Where the HTML looks like this:
  
<div id="punch_logo"><img src="images/a2d.png"></div>

  


• Drop shadow for text, which I used for the © copright notice at the bottom on the A2D pages. The CSS is very complicate because of browser issues, but I like the code that works in Safari:
  
text-shadow: #4c4c4c 3px 3px 3px; /* color, horizontal offset, vertical offset, blur */

  


• Dynamic Drive ToolTip II is a nice example of how to create custom tool-tips, hover help, balloon help or whatever you would like to call it. It is used for the A2D logo and for the drawn arches within the toolbar.
  

Bollywood Movies

Today was a monumental day as my wife and I went to an Indian movie at the local movie theater which shows Indian movies. I say that because sometimes you can actually see an Indian movie distributed in the USA at a regular movie theater but that is rare. It was fun for me as I remember watching an Indian movie on the TV every Thursday night when I worked in Saudi Arabia and that was definitely entertaining. We try to rent an Indian movie every week from Blockbuster on-line, but the really good ones are always on a long waiting list. The movie we saw today was called Guru. I don't want this to be a movie review, but this is the kind of Indian movie I want to watch. It makes you laugh, cry and want to dance all in 3 hours - amazing entertainment.

Streaming Audio with MP3

Today was MP3 streaming audio day. I had the task of copying 2 conference audio CDs to a remote web server and then add access to them thru a streaming audio server. Besides waiting for the files to transfer, most of the day was spent trying to figure out how to get the files to stream. I tried the simple approach of having links to the MP3 files, but that forced a download of the file. Then after many googlizer searches, I finally found the help I needed in a custom Flash audio player at boutell.com. I like the allowed customization as I created a playlist type XML file for each CD and that was all there was too it - only 8 hours later!

PHP changes

I have been using PHP to maintain a couple of web sites for years and I just moved to another web hosting provider and now I am in the middle of changing every one of my PHP scripts. I am using a freeware PHP bulletin board that just stopped working. I check into it and find out that it was assumed every where that a form posting data would set global variables for every form element. For instance, if I have a form element of <input type="text" name="email"> then the function that read that would have a statement of "global $email". I ended up switching all of the globals to use a syntax of $_REQUEST['email'] and now it is all working, well almost. In that same forum code I have a login that is saved to a cookie and that is not working. It used $SCRIPT_URL but that does not work. Who knows how long that will take to figure out? I go to the friend who has never let me down PHP Documentation. The best thing about it is the comments added by users that often has sample code...

email subscriptions

I am currently subscribed to 2 different email groups.

One is discuss@ixda.org, where I am currently receiving around 50 emails per day on the new Apple iPhone. Normally I receive around 10-20 a day on some hot topic as it seems like someone always has something to say. This group is for Interaction Designers.

The other is agile-usability@yahoogroups.com, where people talk about trying to integrate traditional up-front design into agile development methods. I like the term Just-In-Time-Design as it describes what takes place. I have experienced this first hand on a project I worked on for 6 months last year. It was definitely hard to get used to as I wanted to observe users and run usability tests, but instead I had to give in to the fact that the design was getting better every week and sometimes daily instead of trying to create the perfect app up front from user observations and tests. I really like the quick iterations and putting something in front of users as soon as possible. I don't like the lack of time thinking about design as it always seems like I am rushing into a decision. But the app does get better over time...