Martin Francis

Blog (hosted for free at Google)

Martin Francis - Web designer in Bristol


Showing posts with label css. Show all posts
Showing posts with label css. Show all posts

Tuesday, 8 June 2010

What's is Quirks Mode?. How does it solve certain problems? What problems does it at the same time raise?

Quirks mode is a way that a browser can interpret CSS. Older browsers have their own “quirks” and to make sure that website pages rendered correctly web designers would have to write CSS with browser specific quirks.
So in the old days different browsers had different CSS.
Browsers were faced with a problem when the W3C published it’s web standards knowing that web designers would write CSS to conform to that standard and browsers would have to render the standard because of all those legacy pages with their quirky CSS code.

To solve this browsers have 2 to modes for rendering pages, a quirks mode for old pages with old quirky CSS, and a strict mode for the web standard version.

The browser would decide on which way to render a page depending on the type or lack of Document Type (doctype).

This is called doctype switching

No doctype triggers quirks mode.

Most doctypes including new or unknown ones trigger strict mode except for some older doctypes that might, depending on the browser trigger quirks mode.

The most common problems for designers are:-

1. Box model bug that occurs when IE is put into quirks mode.
Instead of content width meaning just that as per the W3C standard box model width includes content, padding and border

2. Margin auto is not supported in most browsers quirks mode so a centrally aligned website may move to the left.

3. Images can have extra paddng at the bottom

For a full list of quirks mode problems and which problem affects which browser go to www.quirksmode.com

Explain the advantages and disadvantages of both fixed and fluid web page layouts from a design perspective.

Fixed width is:-
A fixed width is one where the main wrapper is set to a specific immovable width that remains the same no matter the users browser window size or screen resolution.

Fluid width is;-
A fluid or liquid layout is created by not specifying a wrapper width at all or doing so by using percentages as the units of width. So a 100% width will use all of the width of the browser window.

Fixed width

Pros
The overall design can be controlled and be just like the way the designer intended.
It is easier to design for content that is fixed width such as videos, adverts, and images.

The overall design can be controlled and be just like the way the designer intended.
It is easier to design for content that is fixed width such as videos, adverts, and images.

Cons
Small resolution screens end up with a horizontal scroll bar.
If you accommodate small screens and use a narrow width then larger screens will see a lot of white space.

To get round some of the cons most designers will centre the layout (using margin 0 auto) and using either 760px width for 800pixel wide or 960px for 1024 pixel width screens.
Also to include different style sheets for different media types such as mobiles and at the other extreme projectors.

Fluid
Advantages in certain situations
can be constrained with max width, min width property, does not include padding borders or margin,
Max height and min height does not include padding, borders, or margin
By using a mixture of width, height, overflow, and max, min we can take control of both fixed width, fluid and fixed/fluid layouts

Pros
Fluid can be more user friendly because it adjusts to the users set up.
If designed well can eliminate horizontal scroll bars that appear on small screen sizes.
Also with wider screens more or all of the content will appear on the screen above the fold and so there may be no need for vertical scrolling at all.

Cons
The designer has less control over what the user sees
Elements that usually have a fixed width such as images, video may have to be set at multiple widths to accommodate different screen sizes.
Lack of content on large screen sizes may create a lot of white space and long unreadable paragraph lines.

To get over this a web designer can use the max width min width properties, and so the layout within it’s and max and min width fills the browser space available but beyond these limits it behaves just like a fixed layout.

Only one slight drawback in that earlier versions of IE don’t support it.
But as time goes by this is less of a problem.

In conclusion the design decision will come down to a balance between the users needs, the site owners requirements and what sort of content is to be included.