Tag Archives: webdesign

Web Design : em versus pixel

Posted on by

Last update : June 24, 2014

Because of the wide range of settings and equipment that people might be using to access the web, there is no “best font size”. Font sizes should be specified using relative units like percentage or em since these will allow the user to adjust font sizes up or down to suit their own requirements.

With CSS you can specify font size as a percentage of the font size of a parent element. For example, headings are inside the body of the page. If you don’t set a size for the text in the body, the text of the body will be the size that the reader has chosen as their default size. An ’em’ is equal to the computed value of the ‘font-size’ property of the element on which it is based. The exception is when an ’em’ occurs in the value of the ‘font-size’ property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement.

A default font size of 16 pixels is used for the body if the browsers are configured as follows :

  • Internet Explorer, choose View>Text Size>Medium
  • Opera, choose View>Zoom>100%
  • Firefox, choose View>Text Size>Normal

Some web designers recommend to set the font size in the body to 10 pixels (63%) to allow easier calculations of the em-values (in this case 1.4 em gives a font size of 14 pixels). In the case of embedding elements, this gives no real advantage for the calculations.

em versus pixel

The following table shows the relations between pixels and em’s for different font-sizes, based on a default font size of 16 pixels = 1.0 em.

font-size pixels em
xx-small 9 0,56
x-small 10 0,63
small 13 0,81
medium 16 1,0
large 18 1,13
x-large 24 1,5
xx-large 32 2,0

Google Website Optimizer

Posted on by

Google recently launched the Website Optimizer, a tool that can help you improve the effectiveness of your website by allowing you to test different versions of your site content to determine what will best attract users.

Website Optimizer uses two types of testing: A/B testing and multivariate testing.

An A/B experiment allows you to test the performance of two (or more!) entirely different versions of a page. You can change the content of a page, alter the look and feel, or move around the layout of your alternate pages; there’s plenty of design freedom with A/B testing.

Multivariate tests, on the other hand, allow you to test multiple variables — in this case, sections of a page — simultaneously. For example, you could identify the headline, image, and promo text as parts of your page you’d like to improve, and try out three different versions of each one.

A/B experiments are the simpler version of testing with Website Optimizer. Experiments can run on many webpages of a website.

Website Optimizer needs a Google Analytics Account, because it uses the same powerful tracking technology that is used in Google Analytics to collect experiment data. The performance of experiment pages won’t be impacted, with the possible exception of the very first page-load after you have added the tracking code.

A quick start guide is available at the Google site. Different test strategies are possible (time on page,  conversions, clicking rates, landing pages, …).

Website Optimizer scripts will fail W3C validation because they meet browser requirements which do not strictly adhere to the W3C guidelines. There is no workaround available for these errors.

Web Design : block and inline elements

Posted on by

Block elements take up the full width of the page and are naturally displayed on a new line. Block elements can not be nested within inline elements.

Examples of block elements :

  • <div>
  • <h1> … <h6>
  • <p>
  • <table>
  • <ul>, <ol>, <dl>
  • <li>, <dt>, <dd>
  • <form>

Inline elements only take up as much width as is required to display the element and will not force a new line. A width or height will not displayed on an inline element.

Examples of inline elements :

  • <span>
  • <img>
  • <a>
  • <strong>
  • <em>

With the CSS command “display: inline” block elements can be altered to behave as inline elements. By floating these elements, it will give the appearance of an inline element  but will also allow you to style them as if they were block elements. Therefore width and height can be applied to float’s successfully irrespective of whether the element has a default display of block or inline which is the reason why float’s are used so much in web design.

Web Design : layout’s with rounded corners

Posted on by

last update : 18 August 2011

In the past it was impossible to create any kind of curved shapes using pure HTML. There were three methods to generate layouts with rounded corners :

  • CSS
  • Javascript
  • Images

There were a lot of tutorials available on the net how to create rounded corners with CSS. A simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or javascript was the online tool Spiffy Corners from Greg Johnson.

One of the first creators of CSS layouts with rounded corners was Alessandro Fulciniti. He improved his Nifty Corners technique by adding Javascript.

Both methods didn’t work as expected on elements with fixed height, even if a external wrapper was applied. For this reason I preferred the image method with four corner images. Douglas Livingston‘s demo-page show a simple way how to do it (creative commons license). Another useful tutorial about rounded corners has been published by Trenton Moss, complete overviews of techniques are available at CSSjuice and Smileycat.

With HTML 5 and CSS3, the described techniques have become obsolete. CSS3 supports native rounded corners.