Theme themes

Theme development follows fashions similar to the clothing industry. Themes designed for big desktop screens waste space equivalent to to the 1980s big hair, big teeth, big dress with lots of ruffles style. Now we need sports skin slick themes for the small screens on handhelds, smartphones, netbooks, and Web connected microwave ovens. Unfortunately many professional Web theme suppliers are trying to sell their 1980s Dallas themes slightly trimmed to an Olivia Newton-John Physical style.

Width

Tablet computers, including the iPad (which lacks a keyboard), have a 1000 pixels of width. Take out space for the operating system borders and web browser borders, you end up with 980 or 960 pixels available for your Web page. Your professional web theme supplier then wants you to waste another 20 pixels on a useless border plus more on margins and padding within the theme. instead of 950 pixels of information, you can easily be squeezed down to 800 or 700 pixels.

Advertisers used to demand 200 pixels then 250 and now want 300 before the separation from their junk. You end up allocating 330 pixels of space to keep their blinking distracting acts of stupidity away from your content. now you are down to less than 500 pixels for your content.

Height

Vertical is desperately short on most new computers because the computers use short wide screens designed to save the manufacturers money and sold to consumers on the basis that the smaller screens make movie watching better.

Web browsers and operating systems are still hopelessly out of date with their big borders top and bottom plus the endless menu bars. Windows has almost always offered the option of moving the top bar to the side with some versions of windows making the change more difficult or less reliable. Ubuntu Linux, using Gnome 2, now does the same as windows. The newer Unity and Gnome 3 user interfaces offer flexibility but in some cases the Linux distributions forget to include that part of the user interface than lets you change the options.

Some screens let you switch to vertical mode then you run out of width. Our eyes make better use of landscape than portrait. If you do switch to portrait mode on a small screen, the decreased with often makes the menu bars wrap around to extra lines and you lose most of the vertical space you thought you would gain.

Themes need to trim the vertical wastage as much as the horizontal.

Margins

10 pixels is a popular setting for margins. 12 pixels is a popular setting for font size. The best margin is usually half or two thirds of the font size. Half of 12 is 6. Two thirds of 12 is 8. Clearly 10 pixels is a waste. start reducing those margins.

Many margins are not needed because they surround something that already has a separation. Remove margins that duplicate other separators.

em, not px

Set your margins and everything else to em, not px. The CSS setting .content { font-size: 10px; } sets the font size to 12 pixels for items of class content. The CSS setting .content { margin: 10px; } sets the margin to 10 pixels for items of class content. The better approach for the margins is .content { margin: 0.8em; } to set the margin to a size proportional to the font. When you change the font size, the margin changes for fit.

.content { margin: 0.5em; } is a better setting for times when the margin separates items with different background colours because the colours provide stronger separation than the margin. .content { margin: 0.7em; } is enough separation where there is no background colour change.

Font size

* { font-size: 100%; } is the best font size setting. Let the visitors use whatever they prefer in their Web browsers. Leaving the size out works in most browsers. One old version of Internet Explorer needs the 100% setting to force it to the right default.

The font size can varied varied in a number of ways. This paragraph has style="font-size: medium;", which is the default style.

This paragraph has style="font-size: inherit;" and should get the regular font size specified for this part of the page.

This paragraph has style="font-size: smaller;" and should be slightly smaller, about 20% smaller, than the regular text.

This paragraph has style="font-size: larger;" and should be slightly larger, about 20% larger, than the regular text.

This paragraph has style="font-size: small;" and should be slightly smaller, about 20% smaller, than the regular text.

This paragraph has style="font-size: large;" and should be slightly larger, about 20% larger, than the regular text.

This paragraph has style="font-size: x-small;" and should be significantly smaller, about 50% smaller, than the regular text.

This paragraph has style="font-size: x-large;" and should be significantly larger, about 50% larger, than the regular text.

This paragraph has style="font-size: xx-small;" and should be very small compared to regular text.

This paragraph has style="font-size: xx-large;" and should be very large compared to regular text.

This paragraph has style="font-size: 70%;" and shows the size set as a percentage of the regular size.

This paragraph has style="font-size: 130%;" and shows the size set as a percentage of the regular size.

This paragraph has style="font-size: 20px;" and shows the size set as an absolute number of pixels. The size you see will vary depending on the size of the pixels in your screen.

The following two lines use style="font-size: 8px;" and style="font-size: 5px;" to test very small sizes.

This paragraph has style="font-size: 8px;" and shows the size set as an absolute number of pixels.

This paragraph has style="font-size: 5px;" and shows the size set as an absolute number of pixels.

This paragraph has style="font-size: 0.5cm;" and shows the size set as an absolute number of centimetres.

The absolute size refers to the height, not the width. The size you see depends on how accurately your operating system and Web browser can estimate the pixel spacing on your screen. The size depends on what level of zoom you use. The size will vary with effects applied by other CSS. Try measuring the height of the next paragraph of text from the top of the T and Wto the bottom of the g or y, whichever is lower. Measure the | and (.

TgWy| (style="font-size: 2cm;")

Colour

First, lets satisfy Google and America. Color. We have the American spelling in the paragraph so Google can find it.

Colour provides a better visual indicator than size. Font size indicates the relative importance of headings inside text. Size can indicate the difference between regular text and sidebars or summaries but is not very good unless you use a significant difference then one block of text becomes unreadable on a small screen. Colour lets you separate text without moving away from the ideal font size. This paragraph has a background colour slightly different to the other paragraphs.

Small changes in colour work on most screens while trivial changes disappear at the limits of cheap LCD screens. Colours are usually specified in the form #aabbcc. White is #ffffff. A change from #ffffff to #ffffee will show up on most screens while the change from #ffffff to #fffffe will be too small and look the same on most LCD.

Colour changes can be easier to understand using the decimal form of rgb(255, 255, 255). A change of 1 in a colour is too small to register. Cheap screens need a change of 10 to see a difference. The reason has to do with the number of bits needed to represent a colour. The range of 0 to 255 requires 8 bits of colour change and most LCD screens cannot handle 8 bits. Every sentence in this paragraph has a background one step away from the previous background. Can you see any difference?

Many LCD screens can handle 6 bits of colour but only near the middle of the range. 6 bit colour requires a change of at least 4 to register a change on the screen. Changing from rgb(255, 255, 100) to rgb(255, 255, 104) will produce a change on the screen because it is in the optimum range of the LCD crystals.

Changing from rgb(255, 255, 255) to rgb(255, 255, 251) does not produce a difference because the change is at one end of the LCD crystal stretch. You have to make the change bigger. The same happens at the black end. Small changes from black to charcoal do not register on most screens. This paragraph starts at black on the first sentence then every other sentence in this paragraph has a background 10 steps away from the previous background. Can you see all the differences between sentences? Or this one? This should have a lighter blue background.

Colour blind

If you change only one component of a colour, people with colour perception problems may not see the difference. The might be insensitive to one or two of the primary colours, red, green, or blue. When you change a colour to indicate a change of meaning, change at least two of the colour components.

A rare group are insensitive to all colour and see only monochrome. You can test what they see on the screen by adjusting your monitor to have no colour contrast. Try printing the screen on a monochrome printer. Finding some colour blind people to test your screen is the best solution and you need to find at least one of each type plus they need to be at the extreme end of the range for their type.

See more at Colour blindness.

Borders

Theme developers started with too many borders. Now they use too few, everything is based on lots of white space. Borders are good for isolating inserts without wasting a lot of space on a big margin. Examples include summaries that are not tables. There is an example block to the right with a fine border.

Tables tend to have their own borders. Summaries do not. Summaries can be as simple as a paragraph of text with a small heading. If it is inserted in the regular text, telling the difference is difficult. A change of font usually works for a quote but not a summary. A colour difference works well when the colour is used the same way everywhere. Colour differences can be annoying when you have big colour differences or lots of different colours for different types of information. A border helps reduce the colour variation.

Text shadow

This paragraph has style="text-shadow: 0 0 3px #cccccc;" and shows another effect that works on modern Web browsers. This effect makes text harder to read and should not be used on large blocks of text.

This paragraph has style="text-shadow: 2px 0 3px #cccccc;".

This paragraph has style="text-shadow: 0 2px 3px #cccccc;".

This paragraph has style="text-shadow: 2px 2px 3px #cccccc;".

This paragraph has style="text-shadow: 2px 2px 5px #cccccc;".

Conclusion

You can make text stand out in many ways without wasting screen space on big margins. Just resist the temptation to use them all at the same time.