Through this workshop, we'll be looking at the following:
- Web standards and limitations
- Layout
- Setup
- Basic Coding
Web standards are governed by acronyms, abbreviations, etc...
HTML: hyper text markup language
XHTML: extended text markup language
CSS: cascading style sheets
WYSIWYG: what you see is what you get (a description of the application you use to design, eg Dreamweaver)
SEO: search engine optimisation
FTP: file transfer protocol (how you transfer a website to the internet so that it's live)
URL: uniform resource locator
XML, PHP, ASP: (languages to communicate with a database and transfer information, eg ebay)
WWW: world wide web
GIF: graphics interchange format
UI: user interface (modern name for a web designer is a user interface designer)
UX: user experience
✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿
To make sure a website works correctly across all systems, you have to work to a standard format of coding.
Thinking about the limitations or designing for the lowest common denominator...
- size in terms of the physical screen size
- size in terms of the file sizes that you upload
- colour
- fonts
Colour
50 shades of Gray, or 216 colours. Quite a limited colour palette that you're making up.
These 216 colours are called web safe colours. These colours are reproduced consistently across the web using HTML, specifically a six or where possible a three digit hexadecimal code, for example:
Red
#FF0000 or #FF0
White
#FFFFFFF
#FFF
Black
#0000000
#000
There are 16,777,216 colours that are reproducible in RGB. The combination of Red, Green and Blue values from 0 to 255. There are 256 tones of red, 256 of blue and 256 of green, so to find the full colour range: 256 x 256 x 256
CSS allows you to identify RGB colour modes. This wider range of colours are identified using the same principles of Photoshop and Illustrator, by specifying the percentage of 255 per RGB.
For example, 100% Red would be:
rgb(255, 0, 0)
100% Green would be:
rgb(0, 255, 0)
The original 216 colours means that your website will be consistent over every computer, but you can work in CSS if you don't want to be limited in colour.
✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿
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, if the browser/system does not support the first font it tries the next one listed.
Some common font families, and how to write them:
Serif Font:
"Times New Roman", Times, Serif
(this means use Times New Roman, if it isn't there, use Times, if they don't have Times, use any serif font)
"Palatino Linotype", "Book Antiqua", Palatino, Serif
Georgia, Serif
Above is how HTML would be written for the font to be used. If the font name is more than one word, you need to put " around it.
Sans-Serif Fonts:
Arial, Helvetica, sans-serif
Tahoma, Geneva, sans-serif
"Trebuchet MS", Helvetica, sans-serif
Verdana, Geneva, sans-serif
If you want to break the rules of web safe fonts in terms of using different fonts, it is capable. To be able to do this, you have to install the font to the website using the CSS compatible @font-face. However, this breaches and breaks all licensing and copyright laws for fonts related to specific font foundries. There are many free font websites which include free license usage for @font-face kits including Font Squirrel.
You wouldn't be able to install a font like Helvetica, without paying an extortionate license fee.
If you make your own font, then it's fine. You can do what you want with it! But be careful when installing other fonts to websites, as you could breach laws as you are distributing a font.
On Font Squirrel you can find fonts which can be downloaded and installed to websites using the button 'webfont kit'.
✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿
Size, Dimension, Pixel Resolution
640 x 480
800 x 600
1024 x 768
1920 x 1080
2880 x 1800 (220ppi)
Until the internet is super quick, we can't create images at the largest of screen sizes, as the files are just too big to download and interact with.
✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿✿
File Formats
PNG
GIF
PDF
JPEG
You have to work with Lossy file formats for web, as the images need to be compressed in terms of file size so that they load up as quickly as possible.
Computer displays are all currently 96ppi or higher, but designers don't like change so still work with images at 72ppi.
FOR THE NEXT SESSION:
Bring 3 potential web designs for your summer brief website of the home page. Draw them up or mock them up on Illustrator if you feel the need to, but it's fine to have scamps. Rough sketch in black and white, talk about fonts you might use or colours, but you don't need to add colour at this stage.
Every single thing that is going to be a part of the website is going to be contained within the root folder. Never use uppercase letters or spaces for your Root Folder.
Create a sub folder in the root folder called 'images'.
Create your site name. Generally call it the same as your Root Folder, but you can call it whatever you want. Also, choose your site folder (the root folder you created earlier)
At the moment, the title of this web page is called Untitled Document. Change it to your name...
BASIC CODE:
<html> - The "open HTML" tag. From this point onwards, we will be talking in HTML.
</html> - "close HTML"
<head> - "open head" tag. Anything which increases the functionality of the website, but isn't actually visible will be placed between the head tags.
</head> - "close head"
<meta> - used for SEO, to add in a key word.
<title> - can increase the SEO. Not visible in design, but shows up at the top of the browser window / in the tab. You can put a favicon in there too, e.g.
<body> - If you want something to show up as part of the design, place it between the body tabs.
</body>
Every single thing that is going to be a part of the website is going to be contained within the root folder. Never use uppercase letters or spaces for your Root Folder.
Create a sub folder in the root folder called 'images'.
Create your site name. Generally call it the same as your Root Folder, but you can call it whatever you want. Also, choose your site folder (the root folder you created earlier)
If you have done this correctly, you should be able to see your site folder and images folder in the side panel...
The click save as... And give your website a title. Remember that it always needs .html on the end, otherwise it won't work! Unfortunately, you can't call your first web page 'Home Page' as the internet is global and home is an English word. The web server will look for a specific html file to open up first. A word that is standard across all languages. The word index. The other pages can be called whatever you want, as long as the Home Page is called index.
To preview your website on the internet, go to the little globe icon and click on whichever browser you want to preview it in!
... And tada!
The website is blank, as it currently doesn't have anything written between the codes to give it content.
Make sure that every time you make a change to your website, you save it and then preview it in your internet browser to make sure it's still working. Then, for some reason if you do something and it stops working, then you know what made it stop working!
At the moment, the title of this web page is called Untitled Document. Change it to your name...
It now says your name at the top!
Now, after the <body> tag, press return and add some text. Then save and refresh your browser to see the change...
