CSS zealot and user experience maniac
At MeYou Health we’ve send out a lot of email as part of our Daily Challenge. One of the things we struggle with is design constancy from browser to browser and with images turned on and off. While our emails are far from perfect, we’re learning and always trying to improve the experience. Here are a few tips we’ve discovered:
As many of you know, I left Iron Mountain in November to join a new start-up in South Boston called MeYou Health. Since then, we’ve built a really solid core team and are jamming everyday on creating fun user experiences for the Web and mobile devices designed to help people improve their well-being.
Spoiler Alert: Here are a few products in the works that will be available soon.
Small daily activities that wil lead to big healthy outcomes.
An iPhone application that alows you to virtually climb the world’s greatest heights.
A Facebook game that connects you with your friends through small daily actions designed to improve your well-being.
Real time tracking and analysis of the collective well-being of the Twitter community.
Monday is a big day. We’re opening the private beta registration. We’ll allow friends, family and other interested geeks a sneak peak at our Daily Challenge application. We’re even working on a contest to reward one lucky private beta user for helping us out (stay tuned for that)
Last night I received a real brain twister of a question from @ganarce on my Twitter page. He wanted to know if there was a way to align data within a table using a decimal point “.”. Seemed like a fairly routine type of formatting (invoices, data etc.). Without massaging the data ahead of time to all have the same number of characters before or after the decimal point.
I went to the W3C to for an explanation on horizontal alignment. Ah ha! there it was. Easy enough:
col align=”char” char=”.”
Previously I wrote about how to shorten your CSS rules with padding and margin. Here are two other ways of reducing your rules and making your stylesheets less cluttered.
If you have a container with a border that is one pixel wide, black and is the same for all four sides you can write it like this:
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
Or you can shorten the rule by writing it like this:
border: solid 1px #000;
Since all the values are shared for all four edges it is much easier to write the rule for all four at once.
You may have also noticed that I shortened the hex value for the color from #000000 to just #000. Hexadecimal colors are written using six numbers or letters to declare the color. The 1st and 2nd are the red value. the 3rd and 4th are the green value and the 5th and 6th are the blue value. If the character is the same within these pairs then you can just write the one value and omit it’s identical twin.
CSS offers the ability to shorten your code in a few instances to make it more tidy and easy to maintain. Here’s an example of how to shorten your margin and padding rules.
Is exactly the same as this rule using shorthand:
padding: 12px 3px 6px 9px;
Notice two things: First, there is no punctuation delimiter between the values just a space. Second, the order you place the values matters. Imagine a clock, starting at the top (12:00) is your first value followed by 3:00, 6:00 and 9:00. Each of these positions are how you determine where the padding/margin gets applied.
Relative position is one of the most understood of all the CSS positions. Once you understand how it is supposed to be rendered it can be a powerful design tool for your more complex layouts.
To understand relative positioning first we need to take a look at static positioning. By default elements are positioned statically. Static elements flow normally within the document one after another based on the order of your markup. Here is a visual example of a statically positioned div with the id of “mydiv”.
Here’s the code:
Static position will ignore any top, bottom, left or right declarations. Normally you would never need to write a rule like this since static is the default value unless you are trying to override another rule.
Relative position is “relative” to the space the element would normally occupy. The element can be moved in the layout by using top, bottom, left or right.
Here’s the code:
This rule tells “mydiv” to move -75 pixels from it’s left position, and 20 pixels from it’s top position.
Notice that the area where the div was positioned statically still maintains it’s space within the layout. Hope that clears things up!
In just about every job there are philosophies people follow when they approach their work. It occurred to me that developers fall into the same categories as the our friends the Three Little Pigs.
This little pig loves to get stuff out fast. He hates structure, documentation and often works best by himself. He puts off any re-factoring and leaves a mess for future developers to clean up but on the surface appears fun and fast. Executives love this guy.
This little pig understands time constraints as well as the value of delivering some quality. It pains him to let product out the door with less quality but knows the business needs to focus on time to market. He builds for scale but not to the moon. His code is generally clean. He believes in light documentation for future little pigs who follow.
This little pig needs to have everything done “the right way” (whether or not he truly understands what that means is irrelevant). Everything needs to be designed and documented before he’ll start anything. He believes in preparing everything for scale. (even without evidence the product will need to scale). He’s often late with his projects but the final product is very high quality.
So what kind of pig are you?
At work I was assigned the task of evaluating the major libraries and selecting one for our web applications. I spent some time reviewing the major players and decided to switch from script.aculo.us to Jquery for the following reasons:
1. CSS syntax – Jquery uses the same syntax as CSS to identify elements within the DOM
3. Microsoft – It seems more and more apparent that Microsoft is hooking their cart to Jquery. Since we’re a .Net shop it was an easier sell than the others.
4. Support – There is a thriving community with examples, tutorials and forums for answering questions.