this way, when you are aligning complex graphics you will know what you are facing
All the formatting for the text should go into font tags, you can use: style="font-size:10px" or any value you need for specific sizes.
Always use alt attributes for all your images, even if they are spacers, just set them blank like so: alt=" "
When trying to apply a background color for a cell or a table it’s better to create a 1px by 1px image with the solid color and then just tile it in the background like this background="bg_color_whatever.gif"
 Ok so having that in mind I will show you the email we will develop (click to enlarge):
As you can see is not utterly complicated, it’s 2 column email, all the content will reside on the right, it has a header with the company name, a place for 4 stories (a main story and 3 secondary) and at the bottom we have a simple footer with some links and random information.
You can see it live at: Live Email Example
This is how the email looks like when you outline all the tables.
This is how the email look when table cells (td) are outlined).
This is how the email will look like when you outline all the images.
As you can see images take a decisive role in emails as they give us space, height and width for our content.
Update: I just stumbled across this great article at another Web Development blog, good stuff on it, worth a read.
Big thanks to Cesar Nuñez, Web Developer for the Email Team at avVenta for all of his corrections and recommendations.
Tags: cells, email, font, gmail, hotmail, mail, newsletter, spacer, tables, tutorial, yahoo
Uncategorized
LEOPiC
on July 29th, 2008
Selectors
The last few days I’ve been poking around selectors and doing some demonstrations on what can be done minimizing ID’s and Classes (which is always an ultimate goal for all of my projects) and run into some pleasant (and some not so much) surprises.
The challenge
Style three instances of the same tag with the same content, without using IDs or Classes or any other special identifier.
The Code
The XHTML is pretty straightforward, just 3 ‹p› tags with dummy content on them
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer nis.
Nullam quam. Nunc dictum dui ac mauris. In fringilla, leo eu tempus eleifend,
tellus tellus consequat tortor, ac pulvinar turpis neque ut velit. Mauris
rhoncus odio vel justo. Phasellus non sapien et est pulvinar molestie. In
eu nisl eu ipsum convallis auctor.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer nis.
Nullam quam. Nunc dictum dui ac mauris. In fringilla, leo eu tempus eleifend,
tellus tellus consequat tortor, ac pulvinar turpis neque ut velit. Mauris
rhoncus odio vel justo. Phasellus non sapien et est pulvinar molestie. In
eu nisl eu ipsum convallis auctor.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer nis.
Nullam quam. Nunc dictum dui ac mauris. In fringilla, leo eu tempus eleifend,
tellus tellus consequat tortor, ac pulvinar turpis neque ut velit. Mauris
rhoncus odio vel justo. Phasellus non sapien et est pulvinar molestie. In
eu nisl eu ipsum convallis auctor.</p> Check out how this page looks far.
The CSS is a little bit tricky, but nothing to fear :), let’s take a look:
/* pseudo global reset */
* { margin:0; padding:0;}
/* some global rules for all paragraphs, just some breathing space */
p {
padding:2px;
margin:5px;
}
/* we will tackle the first paragraph here */
p:first-child {
width:30%;
color:#666666;
font-size:16px;
line-height:160%;
color:navy;
font-family:Georgia, "Times New Roman", Times, serif;
}
/* the first letter of the first paragraph */
p:first-child:first-letter {
color:blue;
font-size:32px;
float:left;
margin:3px 5px 0 0;
font-family:Georgia, "Times New Roman", Times, serif;
}
/* now we'll tackle the second paragraph */
p + p {
border:1px solid #CCCCCC;
width:35%;
font-family:"Courier New", Courier, monospace;
border-bottom:2px solid #999999;
border-right:2px solid #999999;
line-height:140%;
font-size:14px;
padding:5px;
}
/* and now the last paragraph */
p + p + p {
border:2px solid red;
width:30%;
text-transform:uppercase;
font-size:120%;
font-size:12px;
}
/* how about sharing the same rule for all of the 3 paragraphs? */
p:first-child, p+p, p+p+p {
float:left;
}
/* sort of experimental rule, not included in
the CSS2.1 recommendation, currently IE7 does
not support it, however Firefox2+, Safari3+ do */
p:last-child {
font-family:Arial, Helvetica, sans-serif;
font-size:9px;
color:red;
float:right;
}Check out the result here
The Result
We succesfully tackled the three paragraphs without using a single identifier, isn’t awesome?! Well, sort of awesome. Not every browser supports all of the selectors we used, but let’s positive and start off with the proof: (click on each image to view a larger version)
Well that looks pretty f’n good, does not it? Firefox 2 manages to digest all of our rules, even the p:last-child one. Let’s go to
Well, it’s 2 out of 2 so far, Safari does a great job too! Let’s go with
Well IE7 makes a decent job rendering our test, it’s just missing the p:last-child, but for now we can live without that one.
-
Well I know DW might not be relevant at all when it comes to rendering, but hey, it’s good to know that it gets some of the stuff right
-
Well I wish we could all go to bed happy knowing that we got new tools under our Web Dev belt to use in our next project, but hey, there is still something missing, right? Well this is not case (at least not for all of us), IE6 rears it’s ugly head and give us NO love at all for our CSS trickery, come on, we knew this was going to happen from the beggining did not we?
The Veredict
Selectors are a powerful CSS tool that is only getting better and better, I recommend you to take a look at the selectors being worked on for the current CSS3 Draft as they are quite appealing and a little bit easier to digest too.
Tags: advanced selectors, CSS, ie6, ie7, mac, rendering, safari, selectors, support, vista, xp
CSS and HTML / XHTML
LEOPiC
on July 20th, 2008
I just stumbled across a very handy link that talks about CSS do’s and dont’s when developing emails, worth taking a look.
As you may (or may not) know when developing emails there are a lot of restrictions and considerations that must be taken and certain rules must be followed.
Examples of this are:
- Emails are developing using tables a good old spacer images in order to achieve consistency through all email clients
- CSS Support is very limited and rather disencouraged as not all of the clients have the same set of rules for CSS.
- Semantic in emails it’s just a unrealistic dream
- Same goes for accesibility
- Javascript o_O ?
I’ll try to put together an email next week and post it here so you guys can see what I’m talking about.
Tags: CSS, css support, email, gmail, hotmail, spacer, tables, yahoo
CSS and HTML / XHTML
LEOPiC
on July 13th, 2008
A few people asked me the other day, which tools I used at work, this is software I recommend and that I’ve been using for a while now and has made my life easier, we’ll begin with:
- Browsers
- Firefox: one of the best browsers available, fast, reliable and standards compliant, regularly use version 3 and use version 2 for testing purposes.
- Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, XHTML, and JavaScript live in any web page.
- Web Developer Toolbar adds a menu and a toolbar with various web developer tools.
- JS View: lists and displays all the external JS & CSS files in a site
- Measure It: draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels.
- WAVE Toolbar: provides a mechanism for running WAVE reports directly within Firefox. It’s a great way to check accesibility right in the browser.
- PixelPerfectPlugin: one of the greatest (and hardest) commitments to customers (when doing Front-End Development) is to match their visual references or compositions as close as possible, called Pixel Perfect Implementations, this great a new extension makes it easier by putting your visual reference on TOP of your developed XHTML.
- Clear Cache Button: need an explanation, super handy.
- CookieSafe: need to debug and are worried that somethings are not working right, well disable your cookies you might be storing something that it’s dragging you.
- Safari: another great browser now it’s even easier to check pages in Safari due to the fact that starting with the beta release of version 3.0 it’s available for PC.
- Internet Explorer:
- Internet Explorer 6 (via VMWare): now there are a few ways when it comes to emulate IE6, if you have Vista it gets even harder as it’s virtually imposible to install IE6 on it, what is the only way to have a real and totally native version of IE6 running on your machine? Get a Virtual Machine and install WinXP (or anything in between).
- Internet Explorer 7 : not really my choice of a browser, but it’s nice to have it around to be able to check any issues that might arise.
- Now for both versions of IE there is tool that mimics Firebug that can come handy, it’s called the Developer Toolbar and it’s always nice to have around.
- The rest :
- Charles: HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP traffic between their machine and the Internet. This includes requests, responses and the HTTP headers (which contain the cookies and caching information). It’s handy when you are working with tracking and stuff like that (yes I know Firebug can check it too, but this is easier).
- BrowserShots: screenshots from several browsers and OS combinations, for free!
Tags: development, firebug, firefox, software, toolbox, web, web developer toolbar
CSS and HTML / XHTML and geek
LEOPiC
on July 12th, 2008
Working with lists can be a real semantic pain if we are not sure of what we are doing or why we are doing it, we are going to quickly go through them and share some best practices.
Ordered Lists (ol)
These are the ones you are looking for when you need a list with special importance or a list of elements that need to be grouped and numbered such as my favourite movies:
<ol>
<li>Big Fish</li>
<li>Philadelphia</li>
<li>NBX</li>
</ol> Will display
- Big Fish
- Philadelphia
- NBX
So basically what we got is a list of items ordered by numbers (this can be easily changed into roman markers, greek markers, alphabetic markers and more) so we got the first list out of the way, remember to use it when you are listing elements that need a specific order.
Unordered Lists (ul)
These are by far the more common type of lists, they are to be used for navigations, grocery lists, footnotes and any other group of common information that need to be listed or arranged, let’s look at the example of a grocery shopping list
<ul>
<li>Apples</li>
<li>Tomatoes</li>
<li>Beer</li>
</ul> Will display
Now we begin to see a pattern right?, all the elements inside these two lists are inside li tags, however the container is the one that changes from UL to OL and that is what makes the difference between each list.
There is one more type of list called the Definition List that deffers from what we’ve seen here so for now and to keep this post from total boredom, I’ll just reffer you to someone who knows a little bit about them.
Okay so the whole purpose of this entry is not to repeat what’s on the W3C Specification but rather to give you some tips while working with lists.
The rare IE (six and seven) bullet position bug
Now this happened to me and to a coworker in a week span so I think that makes safe for us to say that can happen to you, specially when you are working over someone else’s code and have no idea where things are or how they were made.
So what is this bug all about? Let’s take a look:
 Well basically the regular bullets in ul will always sit in the first line of the LI at the top right, however for some reason sometimes IE’s rendering engine will display them at the bottom LEFT of the li, so it will place them at the top left of the last line.
How to get around this? Well a simple image can do the trick, just use a image that mimics your bullet, get rid of the bullet in your list and position it using CSS, something like these:
ul {
list-style:none;
}
ul li {
background:url(urlToYourBullet.gif) 6px left no-repeat;
padding:0 0 0 9px;
}So this will place the bullet of your choice 6px from the top and at the left and mimic the bullet, now remember to give some padding at the left of your li so you don’t go over the image :).
Presto, this is all you need to get rid of that annoying bug and always have maximum control of your lists.
Tags: background, bullet, CSS, dl, html, ie6, ie7, li, list-style, markers, missing, none, ol, ul, xhtml
CSS and HTML / XHTML
LEOPiC
on July 11th, 2008
Unlike most people I won’t go on with a post of how I just created the ultimate method for using transparencies on 24bits PNGs in IE6 I will tell you what works for me:
The problem
IE6 does not properly handle transparencies on PNGs at 24bits, it usually shows a gray/turquoise area where the transparency should go which makes them pretty much obsolete in Web Development if they are not used correctly.
The Solution
There are many ways to go around this problem, last night while working for the brand new Fuel Economy Sitelet for Buick I needed to have a transparent PNG sitting on the page so basically it went a little bit like these:
The CSS
#pngContainer{
width:345px;
height:53px;
background:url('../button.png') top left no-repeat;
}
* html #pngContainer{
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/root/button.png', sizingMethod='crop');
}The HTML
<div id="pngContainer">
<p>Content goes here</p>
</div>So basically what we are doing is setting the PNG as the background of this container and then using a hack for IE6 removing it and then setting it again with the proprietary filter property, sounds simple right? Well it is, just like that you will have a transparent PNG as the background of your container :), full 24bits madness all over you!
Okay so we got that out of the way, but what happens when you NEED a 24 bits PNG to be in a LINK tag?, well for some reason using the good old display:block won’t work in IE6 so there is also a way around that, let’s see it:
The CSS
#pngContainer a {
display:block;
width:345px;
height:53px;
cursor:hand;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/root/button.png');
}
#pngContainer a img {
width:345px;
height:53px;
cursor:hand;
_filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}The HTML
<div id="pngContainer">
<a href="#yourLinkWillGoHere">
<img src="../images/imageRouteGoesHere.png" />
</a>
</div>So basically what we are doing here is relying again on the Microsoft Alpha Loader filter and the Opacity filter, so basically we are putting the image as background for our container using the underscore hack for IE6 only and then inserting it into the a tag for the rest of browsers and then, the final step is to hide it from IE6 using the Opacity filter :), sounds like fun right?
Well it is no fun at all, but it works, so there you go, have a nice weekend.
Important you have to know that the paths used in the filter must be absolute to where the HTML is.
Tags: 24bits, buick, filter, fuel economy, hack, ie6, microsoft, png, transparent, web development
CSS and HTML / XHTML
LEOPiC
on July 2nd, 2008
I just read over at monkey_bits that The WebKit Open Source Project (which in case you don’t know is the core behind Safari) are experimenting with CSS Variables which to some sorts is like using low-level programming to make our life easier or at least more streamlined.
This is how we work now:
1
| body, p, table { color:#F00; background-color:#FFF; } |
This is an example of what we could do with simple CSS Variables:
1
2
3
4
| /* this is where we set our values */
@variables { defaultTextColor: #F00; defaultBgColor: #FFF; }
/* the magic kicks in */
body, p, table { color:var(defaultTextColor); background-color:var(defaultBgColor); } |
Now if you look at the code, you might seem that the version with variables takes up one more line, however and that this might be avoided by just setting a global declaration like
1
| body {color:#F00; background-color:#FFF; } |
However this is a more viable and understandable way of doing it, as we could set say max 4 o 5 colors to be used for the whole site and don’t have to remember their HEX Codes nor their specific values and simply reference the variable. I am still not 100% sold on the idea, mainly because as most things with Safari and mainly Webkit, is not usable until IE6 is deprecated and Microsoft implements this in their browsers.
Tags: Add new tag, background-color, CSS, css3, ie, ie8, konqueror, safari, text color, variables, webkit
CSS
| 
