PC Services

"From Payroll to Body Scanners"

Established 1994

Some PHP Tips and 'Tricks'

Thinking beyond each page and DESIGNING your web site

Tel: 0118 946 3634
Email

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. This is especially true of script fonts (ones that like like handwriting), you cannot guarantee which one at all is on the site visitors' browsers.
  • 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, point and ems are scaleable even for those needing to change size to larger or text to speech.
  • use text flowing methods so users can Zoom page easily if they need to for larger text.
  • 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!

More details on Bad Layout page.