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

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 Special instructions here

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.

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 tags which can contain and 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 with and 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.