Design the website fully before you go near a computer is better as then you know what you are doing when you come to actually making the website.
Web standards and limitations
Made up of acronyms, abbreviation and stuff...
- SEO (search engine optimisation)
- URL (uniform resource locator)
- WWW (world wide web)
- UI (user interface)
- WYSIWYG (what you see is what you get)
Designing for the lowest common denominator!
Web safe colours;
There are 216 colours that you are capable of reproducing consistently.
When colour first arrived on the web computers could only support a maximum of 256 colours on their 8-bit monitors. A list of 216 'Web safe colours' were identified.
These colours were/are reproduced consistently across the web using HTML, specifically a six or where possible three digit hexidecimal code.
The RGB colour mode is capable of reproducing 16 million different colours, significantly more than HEX 216 colours.
- 256 Red
- 256 Green
- 256 Blue
This wider range of colours can now be reproduced using CSS rather than HTML. These colours are identified using the same principles and Photoshop and Illustrator, by specifying the percentage of 255 per RGB.
For example 100% Red
Web safe fonts;
For a chosen font to display consistently across different computers a standard font must be used. Further to this a font-family is chosen giving several "fallback" options to ensure maximum compatibility between browsers and systems. For example is the browser/system does not support the first font it tries the next one listed.
Some common font families:
"Palatino Linotype", "Book Antiqua", Palatino, Serif
"Times New Roman", Serif
Arial, Helvetica, Sans-serif
"Trebuchet MS", Helvetica, Sans-serif
Using speechmarks is crucial for fonts with more than one word, but isn't necessary for single word fonts.
The CSS compatible @font-face allows you to install fonts to a website, meaning the font choice remains consistent regardless of the browser or system.
However using font-face breaches licensing and copyright laws related to specific font foundries.
There are many free font websites which include free licenese usage for @font-face kits including Font Squirrel.
Size, dimension, pixel resolutions;
Designing for the lowest common denominator, computer screens are very powerful, sometimes higher than the quality of a printer.
Apple retina display screens are 221 pixels per inch, therefore it is better than some printers.
- 640 x 480 (1991)
- 800 x 600 (1994-5)
- 1024 x 768 (2000-04)
- 1920 x 1080 (2010 -13)
- 2880 x 1800, 220ppi (now new MacBooks, retina screens)
Work with these kind of file formats, and the colour mode, and spacial resolution. When saving an image on the internet, a file size as small as possible but still make it look good.You can do this by using the correct compression ratios.
Create new HTML
Don't need the top line, so can delete.
Also don't need the xmlns="http://www.w3.org/1999/xhtml" on the second line so can delete.
When naming your images or folders, never use capital letters or spaces.
Name your folder whatever the website is.
Create a sub-folder in the website folder called images.
If you create a style sheet and
CSS doesn't work in the same way (coding) as HTML