OUGD504: Studio Brief 2 - Design for Web // Workshop 01

Web standards and limitations
Layout
Setup
Basic coding

Web Standards (Acronyms, Abbreviations & Stuff)

HTML - Hyper Text markup language
XHTML - Extended Hyper Text Markup Language
CSS - Cascading style sheets
WYSIWYG - What you see is what you get
SEO - Search Engine Optimisation
FTP - File Transfer Protocol
URL - Uniform resource locator
XML/PPP
UI - User Interface
UX - User Experience
WWW - World Wide Web

Limitations (or, Designing for the lowest common denominator)

Web safe colours - 216 colours
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 a three digit hexadecimal code.
Red
#FF0000
#FF0
White
#FFFFFFF
#FFF
Black
#0000000
#000
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 values from
0 to 255 (256 unique shades for each value)
Red 256 x Green 256 x Blue 256 = 16,777,216
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 would be: RGB(255, 0, 0)
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:
Serif Fonts
Georgia, serif
“Palatino Linotype”, “Book Antiqua”, Palatino, serif
“Times New Roman”, Times, Serif
Sans-Serif Fonts
Arial, Helvetica, sans-serif
Tahoma, Geneva, sans-serif
“Trebuchet MS”, Helvetica, sans-serif
Verdana, Geneva, sans-serif
CSS font-face - 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 licenses' usage for @font-face kits including Font Squirrel.
Size, dimension, pixel resolution (not to be confused with DPI or PPI)
640 x 480
800 x 600
1024 x 768
1920 x 1080
2880 x 1800 (220ppi)
File Formats
PNG
GIF
PDF
JPEG
~
72ppi? (SInce 1995 they've been 96ppi and now, with retina display, displays are 220)
RGB
~
Lossy
Compressed

For next week, create 3 separate designs, which you would like your wbesite to look like. With fonts, etc.