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
Tuesday, 8 June 2010
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.
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.
What is RSS? How is it used, and why is it an important aspect of Web Design?
RSS or Really Simple Syndication (and sometimes called Rich Site Summary) is part of the Web 2.0 movement that gained momentum from 2004 onwards.
RSS is a family of formats use to publish frequently updated works such as blogs, news, audio and video in a standard format. The content of the RSS document is marked up in XML that can be read by software called an RSS reader. RSS Readers can be on a computer or other devices such as mobile phones.
The Users can subscribe by clicking on the RSS logo on, their favourite websites and could be news, blogs or any sort of multimedia site and receive updates or aggregate those updates into one place.
For the author it is good because they get their story or article repeated many times over or syndicated so they reach far more than they would normally.
For the web designer has to consider that as new articles are published the size of the area allocated to the RSS feed can grow or shrink and this can interfere with the look of the page. Common ways to solve this problem are:-
1.To fix the height of the space (DIV) with some white space at the bottom of the feed allowing for the content variations.
2.Fix the height of the space (DIV) and have an automatic height scroll appear if the content is too large.
3. Have a completely liquid layout and accept that the layout will change as the size of the feed content will change.
Another consideration is page load speed. It is best to have the RSS feed low down HTML code so other easy and fast loading simple text and other visual elements can be loaded, and viewed by the user if the feed content is slow to load.
Nothing is more frustrating than waiting for a page to load.
For the web designer it would be good to have some fast loading plain content at the top of the page that will keep the user busy until the RSS feed(s) have loaded.
RSS is a family of formats use to publish frequently updated works such as blogs, news, audio and video in a standard format. The content of the RSS document is marked up in XML that can be read by software called an RSS reader. RSS Readers can be on a computer or other devices such as mobile phones.
The Users can subscribe by clicking on the RSS logo on, their favourite websites and could be news, blogs or any sort of multimedia site and receive updates or aggregate those updates into one place.
For the author it is good because they get their story or article repeated many times over or syndicated so they reach far more than they would normally.
For the web designer has to consider that as new articles are published the size of the area allocated to the RSS feed can grow or shrink and this can interfere with the look of the page. Common ways to solve this problem are:-
1.To fix the height of the space (DIV) with some white space at the bottom of the feed allowing for the content variations.
2.Fix the height of the space (DIV) and have an automatic height scroll appear if the content is too large.
3. Have a completely liquid layout and accept that the layout will change as the size of the feed content will change.
Another consideration is page load speed. It is best to have the RSS feed low down HTML code so other easy and fast loading simple text and other visual elements can be loaded, and viewed by the user if the feed content is slow to load.
Nothing is more frustrating than waiting for a page to load.
For the web designer it would be good to have some fast loading plain content at the top of the page that will keep the user busy until the RSS feed(s) have loaded.
Subscribe to:
Posts (Atom)
Posts
