ailon's DevBlog: Development related stuff in my life

Web Designers

4/15/2008 11:19:19 AM

It's time for some bitching and whining.

Some time ago I had a meeting with potential client who has ordered site design from a well known local ad agency and wanted my company to program the eshop. He showed me printed mockups of the site which were quite nice visually.

Later, as we talked further, he emailed me the same mockups in jpeg. I've noticed that content part of the site (a static width design) was 1300+ pixels wide. I informed the client that this is way too wide for a site and asked to make the design fit into 960 pixels. A couple of weeks later I've received new mockups where all that was done was the whole design proportionally resized to fit into 960 pixels.

When I pointed out that in some elements font sizes became unacceptably small (one button had text on it with 4px high font!) I got a few emails from the ad agency's project manager and then a call from a higher executive who in quite arrogant way tried to convince me that I can't make these judgements from JPG mockups but I have to get their magnificent CorelDraw file and everything will be fine. To my note that 4 pixels is 4 pixels and it's not enough for the text to be readable no matter how crisp it is, he responded with typical print designer gibberish talking about centimeters, 72 DPI, 150 DPI and other crap that has totally no relevance in web/screen design. He also noted that client has signed out on the design when they demonstrated it to him in their office (most likely on a shiny Apple's 30" screen with 500% zoom). I understood that I have no chance to convince these people to admit that they know nothing about web (after all they are well known ad agency!) and listen to my free advice. So I decided just to make a mockup web site with the design and show it to the client so he sees it in "field" conditions. We'll see how it goes.

After the conversation I was curious to find the origin of the 72 DPI tale so I googled it and found a perfect article - "Say No to 72 dpi" - which should be mandatory to every print designer before he or she is allowed to do anything for the web or screen. I suggest you read it even if you have a good idea what pixel is. It's hilarious. And definitely bookmark it so you can send it if you ever have a conversation like mine. After all since the web is total mainstream these days more and more people start designing web sites and print designers are leading the pack since the already know everything about design. And definitely more than those arrogant programmers!

Bonus design tip: Did you know that you can change black-gray-white-greenish site template to black-gray-white-bluish by simply swapping B and G values in RGB colors? :) This is what I did to convert the theme of my personal blog to this one.

kick it on DotNetKicks.com

Tags: , ,

Converting HTML font sizes to pixels

3/7/2008 11:40:12 AM

When you create a custom ASP.NET control most of the times you inherit it from WebControl class or one of it's derivatives. Among other properties WebControl has a Font property of FontInfo type which in turn has a Size property of FontUnit type. Users can set the yourControl.Font.Size to any HTML/CSS compatible value from 12pt to 1.2em to x-large.

This is all fine while your control outputs plain HTML. But at this moment I'm working on a controls which use Flash controls as their output and Flash knows nothing about font sizes in points let alone x-small & co. (at least I was told so by my flash developer colleague). So what I needed was a way to convert all the reasonable FontUnit values to some more or less equivalent pixel sizes. So after some experiments I came up with this FontSizeConverter class with only one static method to convert FontUnit to pixels.

Keep in mind that this is only a raw approximation and doesn't pretend to be completely correct and universal solution. Em and Percentage values use 16px as base.

public class FontSizeConverter
{
    public static int ToPixels(FontUnit unitSize)
    {
        int result = 16;

        if (unitSize.Type != FontSize.NotSet && unitSize.Type != FontSize.AsUnit)
        {
            // size in x-small, etc
            switch (unitSize.Type)
            {
                case FontSize.XXSmall:
                    result = 9;
                    break;
                case FontSize.XSmall:
                    result = 10;
                    break;
                case FontSize.Smaller:
                case FontSize.Small:
                    result = 13;
                    break;
                case FontSize.Medium:
                    result = 16;
                    break;
                case FontSize.Large:
                case FontSize.Larger:
                    result = 18;
                    break;
                case FontSize.XLarge:
                    result = 24;
                    break;
                case FontSize.XXLarge:
                    result = 32;
                    break;
                default:
                    result = 16;
                    break;
            }
        }
        else if (unitSize.Type == FontSize.AsUnit)
        {
            switch (unitSize.Unit.Type)
            {
                case UnitType.Pixel:
                    result = (int)Math.Round(unitSize.Unit.Value);
                    break;
                case UnitType.Point:
                    result = (int)Math.Round(unitSize.Unit.Value*1.33);
                    break;
                case UnitType.Em:
                    result = (int)Math.Round(unitSize.Unit.Value * 16);
                    break;
                case UnitType.Percentage:
                    result = (int)Math.Round(unitSize.Unit.Value * 16 / 100);
                    break;
                default:
                    // other types are not supported. just return the medium
                    result = 16;
                    break;
            }
        }

        return result;
    }
}
kick it on DotNetKicks.com

Tags: , ,

Consolas

10/8/2007 8:10:08 PM

consolas I'm very slow on customizing my environment. I can do things the hard way for months before I force myself to make a small tweak that makes life much easier. No wonder I used Visual Studio (and PSPad for that matter) with default "Courier New" font and didn't even know that Vista comes with a special monospace, ClearType fine-tuned font family called Consolas. You can download it for XP, too.

Hopefully this will make the long development hours ahead a little bit easier on my eyes.

You can find samples and download links for other popular "developer fonts" through this article.

Tags: , , ,

Copyright © 2003 - 2017 Alan Mendelevich
Powered by BlogEngine.NET 2.5.0.6