Jun 18 2006

Should you redesign your site for Firefox?

While most web users rely on Internet Explorer when surfing the net, it might also be a good idea to redesign your site for Mozilla’s Firefox browser. Why? For one thing, more than 140 million people have downloaded Firefox to date, and 40 million to 50 million use it on a daily basis, according to Mozilla.

All Fired Up


Jun 16 2006

Make sure your web designer understands web accessibility standards.

The 25 European Commission member states and nine accession countries have all signed up for a plan that could make accessibility in e-procurement mandatory.

The 34 countries all signed an agreement in Riga, Latvia, on Wednesday, committing themselves to the “Internet for all” action plan, designed to ensure that the most Web-disadvantaged groups can get online.

The EC has now pledged to increase broadband coverage across the continent to 90 percent by 2010. Rural areas are still underserved, according to the Commission, with about 60 percent penetration. Urban areas fare better and are already at the 90 percent mark.

The EC has also committed to putting new measures in place to halve exclusion rates in skills and digital literacy by 2010.

Web accessibility soon mandatory in Europe? | CNET News.com

Blogged with Flock


Jun 15 2006

HTML Emails

Should you use CSS or (horror of horrors) tables? And what do you do when images are ‘blocked’?HTML email – you either love it or you hate it. Some love the simplicity of text-only emails, while others praise the flexibility and good looks of HTML. But it doesn’t really matter whether you love it or hate it because sooner or later a client will ask you to design one of those ‘pretty looking email thingies’ for their own customers, and then what do you do?

Vitamin Features » HTML Emails – Taming the Beast


Jun 15 2006

CSS3.info

CSS3 is the new kid in the stylesheet family. It offers exciting new possibilities to create an impact with your designs, allows you to use more diverse style sheets for a variety of occasions and lots more.

Everything you should know about CSS3 – CSS3.info


Jun 13 2006

CSS Disected

Let’s take a look at the CSS for EmptyCache.com. As you can see this is a rather simple site, so this should be a rather simple intro to people learning CSS.

First, we’re going to take a look at the file secondary.css. When designing most of our sites we create several CSS files. The first named “primary.css” contains the basic styles for headers, links, fonts, forms, and table. Creating a standard primary CSS file is useful because you don’t need to start from scratch everytime you create a new website. You can compare this primary CSS file to the Normal document template in Word. So it’s a good starting place for any new website.

The secondary CSS file is where we hold most of the site specific styles for handling layout and images.

We layout our divs as such:

Container
Header
Middle
Footer

First up…Container

#container {
width:760px;
margin:100px auto 0 auto;
padding:0;
background:transparent url(../images/css_middle.gif) top left repeat-y;
}

Line 1: We are setting the width to 760px (which is a good width that works for resolutions of 800 x600 or higher)
Line 2: 100px sets the container 100px from the top. Auto for the left and right margins, causes the container to be centered horizontally, and 0 sets the bottom margin to 0.
Line 3: Padding is the space we leave within the container box. This is set to 0 because we don’t want any padding since the container is only used for positioning of the other objects.
Line 4: Finally we have the background. First we set the background color to transparent so that the background color set for the body shows through. Next we set a background image that repeats on the y-axis and is aligned to the top left of the container. If you take a look at the image you’ll notice that it is just a thin sliver of the background. Because this repeats, we only have to load a small image, thus keeping the page size small. Why are we using an image and not a color? Because the image includes the shadowing that appears along the edges of the container. (This is done using “outer glow” in Photoshop)

Next…Header

The header DIV is placed inside of Container:

 #header {
height:145px;
background:transparent url(../images/css_header.gif) top left no-repeat;
}  

Ok, the header applies the “cityscape” image to our page.
First we need to set the height of the header to the same height as out image, otherwise the header will collapse because there is no text in the header to keep it open. This would prevent our image from being displayed.

Next we set the image file, but this time we don’t want it to repeat.

Middle…

#middle {
margin:3px 8px 0 9px;
overflow:hidden;
width:743px;
border-bottom: 1px solid #ccc;
}

Because the container background image is 760px wide and includes shadows along the edges, I want the middle content to stay within the boundaries of the container image. So I set the left and right margins to 9px and 8px respectively. Because of this the width needs to be smaller by the same amount (17px total). We need to include the width because we’ve included the line:

overflow:hidden;

Overflow is used to make sure that the middle expands to fit its contents specifically when the contents include a table. Without the overflow property tables tend to flow outside of their containing box.

Finally, the Footer...

#footer {
clear:both;
padding:5px 0 15px 14px;
text-align:center;
background:transparent url(../images/css_footer.gif) bottom left no-repeat;
font-size:.75em; } 

You should already recognize most of what is going on here from our previous examples. The only new tag is: clear:both This tag is used because there is the possibility that our middle section above may later contain floats (this is common in multi-columned layouts). Clearing both floats ensures that the footer tag will always appear at the bottom regardless of the column lengths.

That's all for now. Hope you learned a lil something. Later we'll address the rest of the styles, including links, fonts, and lists.