Upload
bertram-horn
View
223
Download
3
Embed Size (px)
Citation preview
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.