OUGD 504 - Web Session 1

In today's session we are going to go over the basics of design for web, talking about these areas:

• Web standard and limitation
• Layout
• Setup
• Basic Coding

Before we would normally start designing anything to do with a website, we would first need to answer the three main questions, which are:

• What is the purpose?
• Who is the target audience?
• What do the audience need?

There are a lot of acronyms and abbreviations in the world of design for web, and understanding what each of them mean can often help in understanding how to successfully code and design a website. I have wrote the meaning of the most important terms for this session.

• HTML
• XHTML
• CSS
• API
• WYSIWYG - What You See Is What You Get
• MIME
• SQL
• MYSQL
• SEO - Search Engine Optimiser
• FTP
• URL - Uniform Research Locator
• XML
• PHP
• ASP
• JSP
• CGI
• AJAX
• ASCII
• DNS
• GIF
• HTTP
• HTTPS
• UI - User Interface
• UX - User Experience
• WWW - World Wide Web

All of these are languages used in design for web; it is a language that needs to be formatted correctly in order for it to work. In order for it to work across all systems, it needs to be a standardised language that can be understood by all of the different systems it may be on.

There are lots of limitations in designing for web; generally speaking you have to design for the lowest common denominator. This is something that is currently in dispute due to new retina display screens that have a resolution of 220 pixels per inch. This means that if you were to design for the lowest common denominator, when it is viewed on a new retina display everything becomes blurry and pixelated. However, the reverse of this whereby you design for the new retina display and simply reduce the size would result in all of the files being huge.

Colour is another obvious limitation; the use of RGB being essential when designing for web. Web safe colours is a collection made up of 216 colours. In order for your colours to work on all computers and systems, you can only choose between these 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 was 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

#FFFFFFF

#FFF

Black

#0000000

#000

Within the last 8 years, CSS has allowed us to identify all of the RGB colours, meaning that we can now use many more colours. There are 256 tones of red, green and blue that are all combined together in different amounts which results in over 16 million different colours that can be made. 256 x 256 x 256 = 16, 777, 21 colours. This is significantly more than the 216 web safe colours that could be made using HTML. In order to get 100% red using CSS, you would type in: (255, 0, 0) where (Red, Green, Blue)

However, these colours made in CSS are not always consistent, but you cannot create gradients or opacity when using HTML. If you want to use web safe colours when working in Photoshop or Illustrator, you can check ‘Web Safe Colours’ on the colour picker.

As well as colours, there are also Web Safe Fonts. In order for a font to be displayed consistently across different computers a standard font must be used. Further to this, a font-family is chosen giving several ‘fall back’ options to ensure maximum compatibility between browsers and systems. For example if the browser/system does not support the first font it would try the next one instead. For example it would look something like this:

Serif font – “Times New roman”, Times, Serif

Sans-Serif – Arial, Helvetica, sans-serif

It would work its way from left to right until it found a font it supports. The speech marks need to be used if the font’s name is more than 1 word otherwise the computer would think that each word represented a different font. However, if you want to use a different font that isn’t ‘web safe’, then you can install the font onto the website using CSS. This breaks all copyright laws and is illegal unless you pay the license fee.

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. If a downloadable font has a web font kit, it means you can upload it to your website.

Size, Dimension and Pixel Resolution:

• 640 x 480
• 800 x 600
• 1024 x 768
• 1920 x 1080
• 2880 x 1800 (220ppi)

 

File Formats:

• PNG
• GIF
• PDF
• JPEG

These ‘lossy’ file formats can be compressed so that the file is as small as possible, which is what is used for screen. The resolution of screens range from 72 ppi, which is what is normally used to design for web, all the way up to 220 ppi. However, most monitors use 96 ppi and have done for a while.

We are now ready to start thinking about going into Dreamweaver and designing our websites. However, before you start designing on the computer, as with anything else, we need to create thumbnails and 'scamps' so that we have a good idea of how our design will look. A ‘scamp’ is a rough initial drawing of the idea and layout. You would then make a site map, which indicates the content you would need and the amount of pages that will be made. This also helps to determine the cost you would charge.

Dreamweaver:

 This is the first screen that you get when you open Dreamweaver and select to start a new HTML file. As you can see in the top left of the document, this is looking at the file in 'Design' mode which means that this is what would be seen if previewed on the internet.

This is how it looks when viewed in 'Code' mode. As you can see, although there are 9 lines of coding, the website is still only a blank page.

This is the 'Split' mode, in which you can see the coding on the left and the actual design on the right. However, once you coding begins getting more and more elaborate, what is seen on the right isn't exactly how it will be seen. This is why it is essential to be constantly checking your design during the coding process.

We then started to remove the code that we didn't need such as the top line, which wouldn't make any difference in this case. Generally, this line of code is needed in order to ensure that it functions properly but as we will not be putting this online, we will not actually need it. However, we do need the at the start, as well as at the end. These tell the computer that the language we are working with is hypertext mark-up language. Wherever there is an opening tag, there must be an corresponding closing tag. For example this would be the first and last thing on the entire code:

• <html>
• (This is where all of the code would go)
• </html>

The tag that says refers to anything that increases the functionality of a website that isn't actually visible. For example, if you wanted to use other languages on the website, this is the section that you would insert the appropriate code. A meta-tag, which is is used for search engine optimisation and is where you would type in key words for the search. They are not actually needed for a website to work. A 'favicon' is the small logo that is seen on the left hand side of the URL. If you want something to be visible on the website, it has to be placed in between the two tags.

In order for Dreamweaver to run to its full potential, as with any other software, you need to be working from the user work folder on the hard drive. Also, you cannot package when using Dreamweaver and so when you start you need to create a 'root' folder. Everything that you are using within Dreamweaver must be inside this folder in order for it to work; if this were not the case, you would end up with broken links. When naming the root folder, the convention is to never use upper case or spacing.

 Once the 'root' folder has been created, you need to create a sub folder within it. Some servers look for a sub folder named 'images', in which should be all of the media files. The rest of the content and information is fine to be left loose within the 'root' folder.

This is how it would look inside the 'root' folder.

Once you are ready to save, you need to create a site in the root folder in order for Dreamweaver to know where this folder is. To do so, you need to go to the top where it says 'Site' and click 'New Site'.

 

From here, you can name it whatever you want. The most effective and common thing to call it would be whatever the website was called. You then click on the small folder icon to the right and find the root folder that should be inside the user work folder. Once on the root folder, click 'OK' and then save.

Then you are ready to save. When saving, you need to make sure that you leave the file extension on so that the internet can understand what type of file it is. As this would be the hope page of our website, we need to ensure that we name it correctly so that when online, the internet will know which page to open first. To do so, we have to follow certain conventions. The name of the file needs to be universal and understandable by everyone and so the file must be called 'index.html'. Once saved, you can view how the website will look by clicking on the small globe icon and choosing a search engine.

This is how my website currently looks, blank and empty. The best way to work when using Dreamweaver is to ensure that you are constantly checking how your website looks. No matter how small the change may be, every time a change is made to the code you should save and preview it. This way, if something goes wrong you will know exactly what it is instead of having to sieve through loads of coding.

I then went back onto the Dreamweaver document and changed the title of the webpage. To do so, I replaced where it had said 'Untitled Document' into 'Samuel Horbury'. I then saved and previewed the changes.

As you can see, the tab is now named 'Samuel Horbury' instead of untitled document.

In order to add some content to my website, I added text in between the two tags. This meant that it would be visible on my page.

Here it is, saying 'This is my website'.