WEB DESIGN AND PROGRAMMING

Advanced CSS Techniques

WEB DESIGN AND PROGRAMMING

Layouts

• Fixed Width layouts– Main site wrapper is specific, immovable width,

independent of users display resolution (often 760px)

– PROs• Offers specific control without using max and min

width which aren’t supported by IE.• In many ways simpler to code and style.• Can be assured of readability of text given one width.

– CON’s• Optimal width for readability can be compromised if

text size is increased.

WEB DESIGN AND PROGRAMMING

Layouts

• Fixed Width layouts– CONs

• REALLY small resolutions have to be compromised.• 760px wide can look too narrow on large displays.• The width ultimately limits the number of columns

you can have. This can be a good thing though.

– Tips• Keep the content to the left.• Provide a handheld stylesheet, and maybe a

projector/tv display stylesheet.

WEB DESIGN AND PROGRAMMING

Fixed example

WEB DESIGN AND PROGRAMMING

Layouts

• Liquid layouts– No specific width on site wrapper. Widths

controlled by % value.– In theory, no horizontal scrollbar should ever

be seen.– PROs

• Can adapt to any screen size (not often though)• This is actually the standard way that browsers

try to display anything.• Makes the most out of all screen realestate.

More content potentially above the fold.

WEB DESIGN AND PROGRAMMING

Layouts

• Liquid layouts– CONs

• Too much content can be a bad thing. The human brain works in specific ways.

• Can lead to lack of focus on the right information.• Can cause a destruction of white space, and a

cluttered look.• Without max-width property, you can get lines of

text spanning 1000px.

– Advice• Make sure you are using Liquid for a reason.

WEB DESIGN AND PROGRAMMING

Layouts

• Liquid layouts– Advice

• Defeats the purpose if you make a fluid layout with fixed with content areas. If you are going to the trouble, make sure you do it properly.

• If you have to, make sure it will, at minimum, fit to an 800x600 browser size.

WEB DESIGN AND PROGRAMMING

WEB DESIGN AND PROGRAMMING

WEB DESIGN AND PROGRAMMING

Layouts

• Elastic layouts– Site wrapper and other content areas are measured

in ems, which are relative to text size.– If the text size increases, all of the content areas will.– PROs

• Everything will change at the same rate. Nothing will change size disproportionally.

• Pretty challenging to code, but the end result is worth it.

– CONs• Apart from the cool factor, there is not much benefit.• In the end it will just keep getting wider and wider.• With IE7 the whole effect is redundant

WEB DESIGN AND PROGRAMMING

Layouts

• Elastic layouts– Advice

• Once again, you still want to check that it works on a small screen res first.

• Still use a max width declaration using a percentage to limit the design. This may not be pure, but code purity should not sacrafice usability.

• Since IE doesn't support max width, so a good place to start planning is with max text size on IE at 1024x768.

WEB DESIGN AND PROGRAMMING

Layouts

• Summary– In the end, there is no right or wrong answer.

Your decision will depend on what you want to do.

– Don't do it just because it's pure.– All of these methods can be used to make a

perfectly accessible, and valid, website.

WEB DESIGN AND PROGRAMMING

Common browser bugs

• Too many to mention.• But lets look at Box

Model– Only an issue with IE

browsers below 5.0.– Is not an issue if in new IE

if you use strict DOCTYPE.– Can target only IE with<!--[if IE x.x]> Special instructions here<![endif]-->

WEB DESIGN AND PROGRAMMING

Common browser bugs

• Double margin in IE– Margins appear larger in Internet Explorer,

sometimes double, sometimes just more.– Simply use the {display: inline;} attribute on the tag

containing your margin setting.

• I was going to go on, but there are just so many.– The conditional statements for IE will help you solve

many of your problems.– Other than that, you just have to know how to

search.– Someone out there has had the same problem

before, and there will be a fix.

• http://www.positioniseverything.net/

WEB DESIGN AND PROGRAMMING

Some more HTML/CSS

• Lists again– Unordered lists can be used as navigation.– They are a lot more efficient.– Use less code.– Are easier to update.– More scalable. – More accessible.– Give more information to screen readers.– Just generally more suited semantically.– They will comfortably wrap to the next line if the

list gets too big.

WEB DESIGN AND PROGRAMMING

Some more HTML/CSS

• Definition Lists– Composed of <dl> tags which can contain <dt>

and <dd> tags. – Really good structurally for a title/description

sort of data. – Or for question/answers.– Can also work well for title/image/description.– Can be more meaningful than <div> with <h1>

and <p> tags as it is less generic.

WEB DESIGN AND PROGRAMMING

Some more HTML/CSS

• Tables done right– Tables have their place. When presenting

tabular data.– Don't use table cells for presentation.– Don't waste whole rows and columns just to give

spacing. Css will be able to do this for you much easier.

– Once again; • It will be easier to update.• It will have cleaner more efficent code.• It will be easier to re-style.• And will be easier to write dynamic code for.

WEB DESIGN AND PROGRAMMING

Some more HTML/CSS

• Indestructible boxes– HTML panels that can be any width or height.– Without background images and no rounded

corners, this is really simple.– With them, you need to assign each corner

background image to 4 different HTML tags.– And then use padding to ensure they don't

overlap each other.– Quite complex, and it may just be of benefit to

have a look at some examples and discover how they work.

– Obviously they can be of great benefit to re-use code for so many different elements of a site.