Studio Brief 3 - Designing for Web Workshop

This Session:
Web Standards & Limitations
Layouts
Setup
Basic Coding

Acronyms, Abbreviations
URL  (Uniform Resource Locator)
GIF  (Graphical Interchange Format)
CSS  (Cascading Style Sheets)          
WYSIWIG  (What you see is what you get)
HTML  (Hyper Text Markup Language)
HTTP  (Hyper Text Transfer Protocol)
HTTPS  (Hyper Text Transfer Protocol Secure)
DNS  (Domain Name System)
SQL  (Structured Query Language)
PHP  (Personal Home Page)
FTP  (File Transfer Protocol)
SEO  (Search engine optimisation)
UI  (User Interface)
UX  (User Experience)
WWW  (World Wide Web)

There are not separate pages for products whilst you search for them on sites like Amazon
When searching for a product it doesn't come up with individual pages, it brigs up a page that is linking to a database, which then shows the items. ASCII & PHP are the type of communication between database & website, which is advanced coding.

Limitations
Web safe colours
There are 216 colours that are web safe
When colour first arrived computers could only support 256 colours on 8-bit monitors.
From this 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 #FFFFFF #FFF                  Black #000000 #000

You should never start designing on dreamweaver. The design decisions should be done before getting on the computer otherwise things will start to go wrong.

RGB colour mode is capable of reproducing 16 million different colours, significantly more than HEX 216 colours. 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

A wider range of colours can now be reproduced using CSS rather than HTML. These colour are identified using the same principles and Photoshop & Illustrator, by specifying the percentage of 255 per RGB.

for example 100% red would be
rgb (255,0,0)

When creating a website you have to choose web safe colours because not all computers have the same specifications. This means that your limited somewhat, especially when designing for a brand, it complies to logo design too. A brand needs consistency with its visual aesthetic, the logo colour needs to remain the same. As every company/brand has a website their logo colour also needs to be web safe. Coca cola red is web safe as well as the Asda green colour. Brands had to adapt because of the web safe colours and a lot of them did in the 90s when the internet began to pick up.

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 if the browser/system does not support the first font it tries the next one listed.

e.g
use avenir
if not univers
if not helvetica
if not any sans serif.
but most websites default to Times.

Common font families
Georgia, serif
"Palatino Linotype", "book Antiqua", Palatino Serif
Speech marks are used to group them, so it sees it as one font.

Sans-serif fonts
Helvetica Neue, Helvetica, Arial, sans-serif
in order of preference for the fonts you want to be shown on the website
Need to choose more than one as that font might not be there

CSS font-face
CSS compatible @font-face allows you to install fonts to a website, meaning the font choice remains consistent regardless of the browser 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.
Although you can make 7 changes to any font and create your own.

There are more options with CSS whereas HTML is very limited. HTML works on everything whereas CSS doesn't

Size, Dimension, Pixel resolution
640x480
800x600
1024x768
1920x1080
2880x1800 (220ppi)

File Formats
PNG - Transparency
GIF - Animations
PDF - Multi-page documents
JPEG - Photographs, Images

Working with 72ppi?
Although computers now days can support higher ppi, such as 96ppi or 220ppi.
People still work with 72ppi because of the older computers and mainly because of the file size. When uploading to the internet you want it to be smaller, so it loads up instantaneously so when someone loads up the website it appears straight away and so it doesn't take up much of the users bandwidth too.

Lossy - Allow you to Compress the file
Loseless - For print, allows full quality

Scamp
It's important to do rough sketches for when delivering ideas to clients and before making websites.
Saves a lot of time, better than using up time on photoshop and dreamweaver. Wasted time if client doesn't like the ideas.
Protecting yourself
If they end up not liking the website, that you have implemented they still need to pay you for your time you have put in.


User Work
Have to use the user work for dreamweaver, other files will not work.
When naming the root folder you should use no more than 8 characters, so it doesn't cause confusion.
Usually would be the clients name (e.g, apple,epson)

Set up dreamweaver to work with the root folder.
Every file has to be within the same folder, otherwise when opening the document up again everything won't be there. Drag the root folder onto the server and then the websites live.

Creating new html  page
> SITE > NEW SITE > HTML

Then this appears. A new fresh html page with only 10 lines of code.

The home page should be saved as index because home is an english word whereas the internet is a global thing. Whilst saving you don't delete file extension obviously, otherwise it will not recognise it and wont work/respond when opening it agin.

<!doctype html>    

theres only one of these, its there to tell you what type of document it is

<html> </html>

this open bracket html ,

when theres an open bracket tag, there must be a closed tag somewhere afterwards.

<head> </head>

tag What goes in this tag is anything that influences/affects the functionality of the website. Such as the titles and the meta tags. Such as CSS or Javascript, you need to tell the web browser that your using it, so it goes into the head tag. 

<body> & </body>

Anything that is visual; Paragraphs of text, logos, images have to go in between the open and closed body tags.

entering text in body tag

default font and font size is used as I haven't altered anything yet.

index.html

>about.html

>contact.html

>gallery.html

>shop.html

Helvetica,12pt ; if this was needed on every page, it would have to be entered manually on each page.

However all the aesthetics and design decisions can be implemented into one section using css.

A stylesheet is used for the aesthetics using css, which makes it much more efficient when designing your website. (stylesheet.css)

*/ note */

Notes are there to help you remember/know what you are doing whilst coding

They are also remain there when publishing the website, often used to tell who created the website and designed the code. 

Selecting font family and fallback fonts in css

Changing the text to sans serif fonts, when completing this my website font should appear as helvetica

Linking the stylesheet to html

To link the stylesheet select the + plus sign in the sources tab on the right and click on attach existing css file. 

When importing the stylesheet you have to select link and not import, otherwise you would just be copying the code from the stylesheet. 

After the stylesheet has been linked and the dreamweaver file is saved, the font will change to helevetica.

Wireframe container

creating the container for the website using <div id