Design for Web Workshop

Web standards and limitations, acronyms and abbreviations 

Layout

Setup

Basic coding

Limitations 

Web safe colours - 50 Shades of fray or 216 colours. when colour first arrived web computers could only support maximum of 256 colours on their 8-bit monitors. a list of 216 'web safe colours' were identified. 
These colours can be consistently reproduced across the web sung HTML, specifically a six or where possible a three digit hexadecimal code.


Red
#FF0000
#FF0

White
#FFFFFFF
#FFF

The RGB colour mode is capable of reproducing 16 million different colours, significantly more than HEX 216 colours.

The combination of Red, Green and Blue value from 0 to 256 x Green 256 x Blue 256 = 16,777,216

CSS gives you more colours than HTMl. Specify the percentage of 255 per RGB

100% red would be, RGB(255,0,0)

The full RGB colour range would only work on very new computers, you have to pick your target audience carefully in order to work out where to use RGB colours or Web Safe colours.

Web Safe Fonts - If you had a modern font that isn't web safe it will change the font to Times. You need to specify a font family, so there's a fall back and maximum compatibility. It will go through a series of fonts thats similar rather than straight to Times.

Double barrelled name needs to be in speech marks to group as one typeface.

Arial, Helvetica, sans-serif

With CSS you can install a font on the server, for it work across any computer. Called Font Face, it breaches licensing and copyright laws. Font has to be free to use and free to distribute.

Font Squirrel

Size, dimension pixel resolution 

640 x 480
800 x 600
1024 x 786 - start working here
1920 x 1080
2880 x 1800 (220ppi) - capable of working at this size

Needs to be able to work at the smallest size and then go up and adapted. 

File Format

PNG
GIF
PDF
JPEG
The four most common to encounter.

Resolution has changed, 72ppi is outdated but used a lot still to keep the file size down, computers are capable of 96ppi and macs 220ppi.

Lossy 
Compressed

Dreamweaver

In order to create something you have to create a folder on your desktop for all the work to be saved into, so that nothing is lost. 

This is what the Dreamweaver page looks like when the website has nothing on it, you have to put information in the open body bracket. 

This is the style sheet which is CSS which is more efficient and an easier way to code. 

Through the coding we can change the typeface size colour and position of the page. I liked this session a lot and interesting to learn something I haven't done before.