Web Design 101: Study Group

You should be feeling a little more comfortable with the CSS Syntax by now, and your text should be looking far more stylish than when it is displaying standard HTML formatting.

You are probably feeling ready to start playing with CSS positioning (i.e. moving blocks of content around a page). To warn you, CSS positioning can be incredibly frustrating and often has the most inconcistencies across browsers.

Because browser inconcistencies are going to get really annoying, you should begin to make a habit of checking your site across more browser versions. Usually you'll only have one or two web browsers installed on your computer - how can you test across more?

A good (but slow) resource is http://browsershots.org/. You can select which browsers to test your site against and after half an hour or so, a series of screenshots are returned giving you an idea of how your site appears on different operating systems and browsers.  This page gives a clear idea of the most important browsers and version numbers to test against: http://www.w3schools.com/browsers/browsers_stats.asp

I recommend that you work on a simple page layout for this week's exercise. Include a header and a footer and two columns (a main column and a sidebar) which are perhaps 1020 pixels wide and centered in the browser. This is a very "blog" like layout, but it allows you to explore some simple positioning concepts.

You should also begin thinking about the layout for a more advanced page, perhaps the site you pitched as your application to this course.  You can sketch this out with on paper and photograph or scan a copy to share with the rest of the participants, or you could use a photo or vector editing application like GIMP or Inkscape to "mock up" your page.

The readings this week focus on CSS positioning.

Week 4 Readings

CSS

• The CSS layout model - boxes, borders, margins, padding, by Ben Henick.
• CSS background images, by Nicole Sullivan.
• Styling lists and links, by Ben Buchanan.
• Floats and clearing, by Tommy Olsson.
• CSS static and relative positioning, by Tommy Olsson.
• CSS absolute and fixed positioning, by Tommy Olsson.

Refresh the concepts around page design that were covered in Week 3's readings:

Web Design and Project Planning

• Information Architecture Planning a Web Site
• What Does A Good Web Page Need?
• Building Up A Site Wireframe
• Colour Schemes and Design Mockups

Week 4 Activities

1. Make sure that you're working on a separate  Week 4 copy of your work
2. Develop a CSS based layout for your page which includes a header, a footer, a main text column and a sidebar. You will need to update the HTML versions of your page with "div" tags to divide your page into these main sections.
   • NOTE: if you're using the HTML5 Doctype and wish to use the "header" tag etc you should also read these articles:
     • HTML5 And The Future Of The Web
       
     • Structural Tags in HTML5
       
3. Develop a first draft site wireframe for your final website. Explore what colours you would wish to use within your styles.
4. Provided links to both your Week 4 site and the site wireframe.
5. Please share any questions you have on the forum!