Tuesday, 22 October 2013

Design for Web: Web Standards

(Design for Web)

Web standards

acronyms, abbreviations ....

HTML
XHTML
CSS
API
WYSIWYG
MIME
SQL
MYSQL
SEO (search engine optimization)
FTP
URL (uniform resource locator)
XML
PHP
ASP
JSP
CGI
AJAX
DNS
GIF
HTTP
HTTPS
UI (user interface)
UX (user experience)
WWW

Limitations, or...
designing for the lowest common denominator

web safe colors
Originally web could only support a maximum of 256 coloud on thier 8-bit monitors.
A list of 216 colors that are 'web safe'
These colors were/are reproduced consitently across the web using HTML , specifically a six or where possibble a three digit hexadecimal code.

Red
FF0000
FF0

White
FFFFFF
FFF

Black
000000
000


RGB (CSS)
256 shades of red
256 shades of green
256 shades of blue

256 x 256 x 256 = 16,777,216

The RGB colour mode is capable of reproducing 16 million different colours, significantly more than HEX 216 colours. And so you can use theese but it is not guranteed they will always look the same across different screens.

These colours are identified using the same priniciples of PS and IL, by specyfying the percentage of 255 per RGB

for example 100% Red is:
(255,0,0) 

web safe fonts

(HTML)
For fonts to be consistent across 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.

Has to be already installed on the users computer for it to appear on their screen on web.

1.Serif Fonts

Georgia, serif
"Palatino Linotype", "Book Antiqua", Palatino, serif

2.Sans Serif

3. Monospace fonts

(If the font is longer than one word you have to put speech marks around them)
(If you don't include them they won't work)

CSS font-face
You can install the font to the website so it can be used anywhere.
However using font-face breaches, licensing and copyright laws related ti specific font foundaries.
So if it is installed on the site people can download it for free and this is illegal. You are distributing it. You need to read the license first.

There are many free font websites which include license usage e.g. fontsquirrel 

(webfont kit)
Download OTF (has the license)

size,dimension, pixel resolution

640 x 480
800 x 600 
1024 x 768
1920 x 1080
2880 x 1800 (220 ppi) (new macbook pros - retina displays e.c.t.)

file formats 

lossy file format
compressed

PNG
GIF
PDF
JPEG

72 ppi - (96 ppi, or 221 ppi (now) )
RGB

you want the file size to be small but you don't want to compromise on the quality

 














No comments:

Post a Comment