Project One: CSS slicing and image optimisation

This week in class we covered CSS slicing and image optimisation. CSS slicing is the process of dividing up a design into different sections/slices which define how the webpage will be coded.  We have been doing this same process already in class by creating div maps in illustrator. Slicing basically is breaking down the design into smaller areas, allowing you to see which parts need to be nested inside one another, which parts need to be seperate, which parts that might be repeated (eg: header, menu, footer) and which parts are unique to each page (eg: the specific information).

The areas that are sliced become our divs for when we begin to code. This is worthwhile doing as it helps with site optimisation in terms of load time (no one likes a slow website). In most cases the more your page is broken down, the faster the page will load. It is a really good idea to keep elements that are common throughout your website common in CSS too as this will mean it will only need to load once. This is why you create a HTML and CSS template so that it can be used as the starting point for all your pages. To do this you need to copy your index.html file and then rename the copy your new page name for example aboutus.html. Check that they both still link to the same CSS file. In the menu add a link so that it will link to your second page. Use the code "h ref" to do this. You can then go and add any new code to your aboutus.html file that is specific to that page and then add the styles for that code to the CSS file. 

Tips: 

- when naming your files make sure there are no spaces,  they start with a lowercase letter, no numerals if possible and no punctuation unless its a hyphen. 

-  When writing additional CSS make sure and additions or changes don't effect you index.html file too. 

- If the selector only appears of the aboutus.html page then it should be fine to style individually.

- If the selector is used on multiple pages and you want to style it in different ways on each page, you will need to go back to you HTML and write new ID or class selectors to prevent clashes.

Another thing image optimisation is crucial for web design as you don't want your webpage to take a long time to load. You also want you photos to be good quality to though. It is finding the right balance between file size and picture quality. The bigger the images the longer they will take to load. A good way around this is displaying the image as a thumbnail or smaller size and then giving the viewer the option to open the image at full size in a new window if they want to. 

Here are a couple of useful websites I have found that give you tips and explain optimising images and search engine optimisation (SEO) in more detail. 

http://www.yourhtmlsource.com/optimisation/imageoptimisation.html

http://www.hypercube.co.nz/search-engine-optimisation-seo/