OUGD504 - Studio Brief 2 - Web Design - Workshop 1

Workshop 1:

Web standards and limitations.
Layout.
Setup.
Basic coding.

Web standards:

Acronyms, Abbreviations & stuff

Limitations:

Designing for the lowest common denominator.

Resolutions (Standard screen resolution is 96ppi Retina display is 221ppi)

Image/file sizes.

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 = #FF000, #FF0

White = #FFFFFFF, #FFF

Black = #0000000, #000

There are actually just under 17 million colours in RGB but these can't be as consistent as the 2126 web safe colours.

This wider range of colours can be reproduced with CSS rather than HTML. These colours are identified using the same as Photoshop and Illustrator, by specifying a 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 tried the next font is listed.

Georgia, serif

"Palatino Linotype", "Book Antiqua", serif

Helvetica, Arial, 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 license usage for @font-face kits including Font Squirrel.

Size, dimension and pixel resolution:

640 x 480

800 x 600

1024 x 768

1920 x 1080

2990 x 1800

File formats:

You must work with a Lossy file format.

PNG, GIF, PDF, JPEG

72/96/221ppi

RGB

Lossy

Compressed.

Using Dreamweaver:

Upon opening Dreamweaver, you can select which kind of document you want to create.

The original document template can be stripped down to the following as parts of it aren't necessary.

The open and close tag of <html> </html> means that the language we are using is Hyper Text Markup Language.

Anything in the head tag <head> are functions to make the website work which aren't visible on the site.

Meta tags <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> Are for search engine optimisation. This wont be used for my website so this can be removed to simplify it even further.

The title tag <title> within the head tag is for the actual website name, this can also be used for favicons.

When working on Dreamweaver at University. The project must be produced in the user work folder, once it is done for that session, it must be copied onto the desktop before logging off and then when returning, move back into user work and repeat.

Everything to do with the website must be saved into a root folder.

When saving, the homepage MUST be called index.

Always work with a browser (Google Chrome because widely used) open and keep checking things are working.

In regards to styling, this document must be a css named stylesheet.css. This can be linked to all of the pages in the website.

Things to go in this would be things such as fonts and colours.

To do this, the body must be opened with a squiggly bracket and the command should be chosen, for this I have chosen font family and then Comic Sans to be a bit of a knob.

This is then closed with a semi colon and a closed bracket beneath it.

After saving this document as a stylesheet, it must be linked by clicking the link button in the properties bar on the right and selecting the style sheet.