PC Services

"From Payroll to Body Scanners"

Some PHP Tips and 'Tricks'

Thinking beyond each page and DESIGNING your web site

Bad styling

Styling is not directly related to PHP, HTML, XML, Cascading Style Sheets, etc. but is more about the pages generated that will contain it, so the less you have to rewrite the better!

There are some real problems with usabilty here

• Assuming everyone has same screen size as developer, let the page always fill the window of the browser.
• Setting operations in pixels so screen layout is good on small screen, but impossible to read on the ever growing number of Wide screens. let browser scale pages as much as possible, use percentage measurements as much as possible.
• Setting text size in pixels, when it should be standard defaults (small, normal, large...) or points, as these scale with browser and screen resolution.
• Bad font choice ( size, type, or even colour to background )
  • flowery fonts may look nice but information has to be readable, if it takes too long or is confusing user will give up.
  • using a specific font face name, may work on all your systems, but very few of your site visitors. Use font families and sensible alternatives.
  • don't set font size in pixels, as screen size will affect how readable it is. The larger the screen resolution then the smaller the writing.
  • using browser methods, percentage or ems is scaleable even for those needing to change size to larger or text to speech.
  • use a easily readable font, don't make your fonts like most license key labels where it is hard to recognise differences between characters like the following -

    Character	Description	Other Characters	Description
    8	Eight	B	Upper case 'B'
    8	Eight	6 or 9 or 3	Six or Nine or Three
    C	Upper case 'C'	G	Upper case 'G'
    i	Lower case 'I'	j	Lower case 'J'
    j	Lower case 'J'	g	Lower case 'G'
    g	Lower case 'G'	y	Lower case 'Y'
    q	Lower case 'Q'	g	Lower case 'G'
    1	One	l	Lower case 'L'
    0	Zero	O or D or Q	Upper case 'O' or 'D' or 'Q'
    5	Five	S	Upper case 'S'
    2	Two	Z	Upper case 'Z'
    g	Lower case 'G'	q or y	Lower case 'Q' or 'Y'
    G	Upper case 'G'	C	Upper case 'C'
    i	Lower case 'I'	l	Lower case 'L'
    I	Upper case 'I'	1	One
    j	Lower case 'J'	g	Lower case 'G'
    l	Lower case 'L'	1	One
    l	Lower case 'L'	i	Lower case 'I'
    O	Upper case 'O'	0 or D or Q	Zero or Upper case 'D' or 'Q'
    q	Lower case 'Q'	g or y	Lower case 'G' or 'Y'
    Q	Upper case 'Q'	0 or D or O	Zero or Upper case 'D' or 'O'
    S	Upper case 'S'	5	Five
    y	Lower case 'Y'	g or q	Lower case 'G' or 'Q'
    Z	Upper case 'Z'	2	Two

    
    Some of these characters are confusing on their own where as some are confusing in combinations, e.g. 'Ill' - meaning unwell - in some sans-serif fonts like Arial can be viewed as 'Ill' or '111' depending on size, colour and contrast.

Dare I say it again....

Don't set font size in pixels!