OUGD504: Designing for Web (Workshop 1)

Web standards, standards to follow when designing for the web. We need to know these limitations to know if our website will fit within these limitations.

Web standards include acronyms, abbreviations. For example: HTML, CSS, XML, PHP.

HTML - Hyper text markup language

XHTML - Extended: HTML

CSS - Cascading style sheets

WYSIWYG - What you see is what you get. (e.g.: Dreamweaver, what you see when making it is what you get)

SEO - Search engine optimisation (Getting websites to end up on Google.)

FTP - File transfer protocole. 

URL - Uniform resource locator

XML } Server side coding languages, mostly for e-commerce.

PHP

UI - User interface (Designers)

UX - User experience (Your reaction to a website)

WWW - World wide web

Typing code has a set standard. Eg: A capital where there is supposed to be a lower case will make it not work.


Limitations, designing for the lowest common denominator.

I'll need to design for someone who's screens not too good. 

One limitation is colour, originally there are only 216 colours that a website can use. These are called Web-safe colours. These colours are reproduced now using HTML where there is a three or six digit code:

Red

#FF0000

#FF0

White

#FFFFFFF

#FFF

Black

#0000000

The combination of RGB is able to produce up to 16 million plus different colours, this is present in Photoshop colour picker where you're able to find the RGB colour codes:

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

The wider range of colours are able to be produced in CSS that aren't available in HTML, If you wanted pure red in CSS you would input: RGB (255, 0, 0). You are able to find the hexadecimal colours in photoshop if you wanted using web-safe colours.

The problem with CSS colours is that it's not consistent, it may look correct on one screen, but on another it might have the possibility to be different on another because some monitors may not be able to support the colours that are present in CSS. This is the reason Hex colours are Web-safe colours over CSS. Whenever you break the rules of web design it has the possibility of it been very inconsistent. (Websites on Awwards for example).

If you're designing towards a target audience who would have a new computer, it generally would be okay to make it using CSS, and web-safe only for a audience who may not.

Web-safe Fonts

For a chosen font to be displayed consistently across different computers, a standard font must be used, this means you can't use custom fonts from places such as Dafont. 

A font-family is needed to be specified, so for example, Helvetica font family, if they didn't have this font Times new roman would be displayed instead. Fonts need to be specified to be there as a back up if Helvetica wasn't there for example Arial, This is called a fall-back option. 


Web safe serif fonts:

Georgia, serif

“Palatino Linotype”, “Book Antiqua”, Palatino, serif

“Times New Roman”, Times, Serif

You need to put in the " " so it knows those are the ones that are specified for your chosen web font.


Web safe sans-serif fonts:

Arial, Helvetica, sans-serif

Tahoma, Geneva, sans-serif

“Trebuchet MS”, Helvetica, sans-serif

Verdana, Geneva, sans-serif

There is also monotype web safe fonts too. 

You can break this web-standard. 

The way you do this is by installing a font to a website, the problem with this is that it breaks the copyright laws of a font. For example installing Futura to a website, you will be illegally distributing that font.

A free font from Dafont is free for personal use, if it was installed to a website, you'd be breaking the law. 

However you can install a font using @font-face, you are able to install fonts to a website, yet you just can't install fonts that don't have a license. 

Font squirrel is better then DaFont for Web-safe fonts. 

Click on Web-font kit on font squirrel.

 But always read the license, JUST in case.

Pixel resolutions, the original computers at CERN originally displayed images at 640 x 480. These are all the resolutions now. Some people still design for the 640 x 480 and thats a problem, because theres so many different resolutions. It's unsolved as a problem.

640 x 480

800 x 600

1024 x 768

1920 x 1080

2880 x 1800 (Macs) 

The current solution at the moment is responsive web design. 

File formats

You have to work with Lossy images on the image, in print you work with Lossless so the images don't lose quality. You have work with lossy images in web so they can compress and adjust to different web resolutions. The main lossy file types are: 

PNG

GIF

PDF

JPEG

72ppi (96ppi / 220ppi) Most people still work with 72ppi because it offers small file size and little visible difference.


Dreamweaver:

This only opens up the once, after that it'll be looking for the root file for the website so it won't be there because i'll be on a different mac. 

We're starting by making a HTML document, it opens up to the simplest website we could possibly make.

Because Dreamweaver is a WYSIWYG, we can view the code and the website as if it was live.

The top line of code isn't needed, for it to work, it's just there for the web standard, so is the line below partly, par the HTML. 

<HTML> 

What this means is that it's html from there onwards.

If there's ever a </HTML> it means that's where ends.

Everything has to be opened and closed, as a web standard.

<head>

Is where web functionality is, if you wanted to put any other coding language you would specify it within the head. It's stuff that won't be shown on the site.

<meta>

Used for keywords, to find it when searched. We don't really need it just for now.

This is the most barebones website.

<title> 

This is the title of the website, it's possible to add favicons here.

<body>

Anything you want in the body is visible on the website. This is where the content goes. 

When working in dreamweaver, everything has to be within one folder, just like indesign. Within indesign you can package, however in dreamweaver, it lacks this function.

When creating a website on here, the files have to be within User work.

Get used to this workflow of being incredibly organised. 

When creating a folder for the work, no spaces, no capitals, and no funky characters.

everything will be inside these two folders, images been the subfolder. 

Then in Dreamweaver, to create a new site: Site > New Site.

The naming here doesn't have to follow conventions.

We save this site in the User-work folder as index.html. Index because this is our homesite and is a universal standard for creating webpages.

Im able to preview by clicking on the globe to see what the website would look like once it goes live on the internet.

EVERY time you make a change to the website, save it. Then view it so you are able to debug before anything becomes a problem.

Because I've just typed in some text, it appears as time new roman plainly.

For next weeks session, attempt to design the front page of the site I want to create. (3 Scamp Examples, with annotations) - Site map, Decide on font, colours. etc.