In the past I’ve done this as part of my deployment process, but recently I’ve come across a tool called SquishIt. Which basically is a wrapper for YUI Compressor (you can easily replace it with your compressor of choice). It is dead simple to use, you simply add a reference to SquishIt.Framework.dll in your project, and replace your old CSS and JavaScript links and script tags with code like this.

<%= Bundle.Css()
          .Add("~/Styles/screen.css")
          .Add("~/Styles/print.css")
          .Add("~/Styles/mobile.css")
          .Render("~/Styles/combined-#.css")%>
 
<%= Bundle.JavaScript()
          .Add("~/Scripts/belatedPNG-0.0.8a-min.js")
          .Add("~/Scripts/ie6.js")
          .Render("~/Scripts/ie6combined-#.js") %>

Using a fluent interface makes it easy to add more file references, ending with the Render method that takes a parameter for where to store the combined and minimized file.

It is very easy to toggle SquishIt on and off. Simply set debug=”true” in your web.config file to turn it off and render CSS and JavaScript files as normal, great for when you need to debug your code. Set debug=”false” to enable compression and bundling again.

Best part is that it only took me 2 minutes to setup and add to my current project! Works like a charm so far .Related Posts:

• Adding CSS and JavaScript files dynamically to your ASP.NET page
• Part 8: Preparing for launch – Create an EPiServer site from scratch
• EPiServer web controls: NewsList
• EPiServer web controls: PageList
• EPiServer code walkthrough #1 – 404 handler

You have quite a few different measuring units to use in CSS for use with the font-size property (em, ex, px, in, cm, mm, pt, pc, %). We can group these lengths into two groups.

Relative lenghts

• em: the ‘font-size’ of the relevant font
• ex: the ‘x-height’ of the relevant font
• px: pixels, relative to the viewing device (resolution and pixel density)

Absolute lengths

• in: inches — 1 inch is equal to 2.54 centimeters.
• cm: centimeters
• mm: millimeters
• pt: points — the points used by CSS 2.1 are equal to 1/72nd of an inch.
• pc: picas — 1 pica is equal to 12 points.

Percentage values are always relative to a length or other value.

To be honest I only use four of these units. I use points (pt) in my print stylesheet, and px, em and % for my screen stylesheet.

Pixels

When using pixels for your font size you don’t have much to think about, 12px is 12px in every browser. What can be a problem, and what is the main reason that organizations like the W3C advice against using pixels for font size measurement, is the lack of support in browsers like Internet Explorer 6 when changing the browser’s default font size. The reason for this is that most browsers used to use text scaling for this, only enlarging the text on the page. However the newest versions of all the major browsers now use page zooming instead. What this does is increase (or decrease) all the elements on the page, not just the text, by zooming.

Lack of support for page zooming in Internet Explorer 6 can be a problem. If it is you should consider using ems and percent, which all browsers support. You can use ems/percent either for all browsers or by using a conditional comment stylesheet for Internet Explorer 6 and using pixels for the rest. I personally have started using pixels again, simple because it saves me a ton of work, and is much more reliable for measurement than using % and ems.

Ems and percent

If your audience still consists of a lot of Internet Explorer 6 users, you might want to stick with using ems or % for measurement. The rule to follow here is target ÷ context = result.

Example

If we give body a font size of 100% (roughly around 16px in most browsers), we can use that as the context. So if we want 12px in font size for normal text, and 20px for headings, this then becomes the target.

• 12 ÷ 16 = 0,75
• 20 ÷ 16 = 1,25

body {
    font-size: 100%;
}
p {
    font-size: .75em;
}
 
h1 {
    font-size: 1.25em;
}

If we’d used pixels we would have something like this.

p {
    font-size: 12px;
}
 
h1 {
    font-size: 20px;
}

Okay, say we have some text inside our paragraphs that we want to be 13px. The target becomes 13px, but the context changes, instead of using the body as the context, the paragraph becomes the context. So we get 13 ÷ 12 = 1,0833.

p strong {
    font-size: 1.0833em;
}

By using the target ÷ context = result rule, everything comes down to maths .

Here is the live example with ems and percent and here with pixels.

So, what are you using?Related Posts:

• Font resizing and printing with jQuery
• CSS tricks – part 1
• EPiServer File Manager and File Summary
• Transparent PNGs
• Adding CSS and JavaScript files dynamically to your ASP.NET page

Especially in recent years, after the launch of the iPhone, accessing online information through a mobile device has become more common. This is something that is going to increase even more in the next few years.

Below I’ve listed some resources for creating a mobile version of a web site that I hope you’ll find useful.

Mobify

Mobify is a free online service that lets you convert an existing web site into a mobile version. This is done by selecting the content you wish to display for mobile users, customizing it by changing the display order and tweaking the CSS. The last step is to publish it by creating an url and adding a little JavaScript to your page.

Check out How to implement a mobile version of your blog in three simple steps for a quick introduction.

Mobify is quick and easy way to great a mobile version, but you cannot change the HTML code and you’re stuck with the options the service offers. It can sometimes be better to create a mobile version from scratch.

Update 05.10.2009

Igor Faletski, founder of Mobify, was kind enough to send me an email explaining the use of HTML blocks to add more static content. While this is a great feature I still miss the ability to update my existing markup and easily see what classes and ids that the mobile version uses. Now I have to test and tweak a little before I get the right id or class when changing my CSS.

Creating a mobile version with ASP.NET

Although services like Mobify are great, sometimes you need full control. On mobify.me it says that Mobify supports over 4500+ different mobile devices. This is a lot of different devices to support! Fortunately there is an open source project on CodePlex that has done most of the work for us. It is called Mobile Device Browser File and consists of a browser file with information about what the different mobile devices support (Java, JavaScript, Images, Flash etc). This project is pretty active with new devices added all the time.

You simply download the browser file and add it to your projects App_Browser folder. After you’ve done that you’ll be able to use Request.Browser["IsMobileDevice"] to detect if the device accessing your page is actually a mobile device. There are also 64 other capabilities that offers a lot of different detection functionality. You can for instance check if the device supports Flash, JavaScript, Color, CSS background images etc.

If you’re using ASP.NET MVC check out Scott Hanselman’s post about how he implemented this with Nerd Dinner.

If you’re using ASP.NET web forms there are a couple of approaches you could take. You could use a different master page for the mobile version by adding some detection code to your base page and switching the master pages in the Init method. Or you could register a custom HttpModule that redirects the user to a different page if it is a mobile device.

Recently I stumbled over another library to detect the mobile device, it is called 51Degrees.mobi. Here is the article that describes how to use it.

iPhone

Apple iPhone uses the Safari browser as its default browser. The great thing about that is that CSS3 stuff like border-radius, multiple background images, canvas and more are supported.

If you like to simply target iPhone users you can do so by simply adding a custom stylesheet with this code.

<link media="only screen and (max-device-width: 480px)" 
    href="iPhone.css" type="text/css" rel="stylesheet" />

For more information I recommend reading A List Aparts Put Your Content in My Pocket and checking out the iPhone Dev Center.

WordPress

For WordPress you have a nice plugin called WPtouch, that will help you easily add a mobile view for iPhone, iPod, Android, Storm and Pre. You just need to install and activate the plugin, and you’re ready! You can easily customize it to your needs as well.

Other resources

More and more resources are being added each day. Below are some I’ve bookmarked and that have helped me in the past.

• Quirksmode great set of mobile tests
• Mobify easily turn an existing site into a mobile view
• Cameron Molls book about mobile web design
• Mobile Device Browser File
• W3C Mobile Web Initiative
• W3C Mobile Web Application Best Practices
• Test your website for mobile compatibility

Related Posts:

• ASP.NET web forms and jQuery Thickbox plugin
• Part 1: Setting up the development environment – Create an EPiServer site from scratch
• Part 8: Preparing for launch – Create an EPiServer site from scratch
• Introduction – Create an EPiServer site from scratch
• Creating a simple image gallery with EPiServer

Always visible vertical scrollbar

When you have a fixed width centered web site open you’ve probably noticed that the page sometimes jumps a little. This is because the vertical scrollbar only is visible if the content is longer than the viewport, if no vertical scrollbar is visible in the browser. To always have the vertical scrollbar visible you can use the CSS hack below.

html {
    overflow-y: scroll;	
}

CSS reset styles

To make our lives as web developers easier we have a few css reset style rules which will help make things more consistent across browsers. It started out with simply setting the padding and margin of all elements to 0 with this CSS code.

* {
    margin: 0;
    padding: 0;
}

Though this caused a few problems with form elements. After a few years of using the technique above I started using a CSS reset stylesheet.

• Eric Meyer’s CSS Reset
• YUI Reset CSS

100% min-height

#wrapper {
    min-height: 600px;
    background-color: #000;
}
* html #wrapper {
    height: 600px;
}

Internet Explorer 6 has problems understanding the min-height property. Therefor I use the star selector hack to target IE6 and set the height property (IE6 uses the height property the same way as min-height, so if the content is bigger the page will still grow, like with min-height).

More information about the min-height property

Star selector hack

Applying * html {selector here} will only target Internet Explorer 5.5 and 6. Which makes this a nice way to still use valid CSS and only target those two browsers. Like in the min-height example above.

More information: Workarounds and Filters

Internet Explorer 6 double margin bug

When setting the float property to either left or right and having a margin set in the same direction as the float (either margin-left or margin-right) will give IE6 users twice the margin.

#sidebar {
    float: left;
    margin-left: 10px;
}

This will give IE6 users a left margin of 20px. Fortunately it is easy to fix. Simply add the display property and set it to inline.

#sidebar {  
    float: left;
    margin-left: 10px;
    display: inline;
}

This has no negative effect on other browsers. Also, when floating inline elements (a, span, em, etc), the element automatically becomes the same as when using display:block.

More on floats

• Step by Step CSS float tutorial
• Floating and clearing

hasLayout in Internet Explorer

“Layout” is an IE/Win proprietary concept that determines how elements draw and bound their content, interact with and relate to other elements, and react on and transmit application/user events.

This quality can be irreversibly triggered by some CSS properties. Some HTML elements have “layout” by default.

Microsoft developers decided that elements should be able to acquire a “property” (in an object-oriented programming sense) they referred to as hasLayout, which is set to true when this rendering concept takes effect.

Source: satzansatz.de

I mostly come across this when I have no width or height applied. Like in the code below.

#wrapper {
    overflow: hidden;
}
#sidebar {
    float: left;
    width: 200px;
}
#content {
    float: left;
    width: 600px;
}

Overflow: hidden will clear the floats in all browsers except for in IE6. I could fix this by giving #wrapper a width or by floating it. But that is not always possible. Instead I can use the star selector and give IE6 a height of 1% to just trigger hasLayout.

#wrapper {
    overflow: hidden;
}
* html #wrapper {
    height: 1%;
}
#sidebar {
    float: left;
    width: 200px;
}
#content {
    float: left;
    width: 600px;
}

More information on hasLayout

• satzansatz.de
• The Internet Explorer hasLayout Property

Displaying a pointer cursor for button, label and select elements

I always add this code when I start a new project.

input[type=submit], button, label, select { 
    cursor: pointer; 
}

Just to make it easier for users to see where they can click.

Related Posts:

• Guide to font sizing with CSS
• Flash and Flash Video EPiServer Dynamic Content
• Part 5: Creating the search page – Create an EPiServer site from scratch
• Part 4: Creating the standard page – Create an EPiServer site from scratch
• Better breadcrumb trail