Necessity for Standardization
When designing a website layout for a large audience, the designer must consider the following potential attributes:
Ì Screen resolution.
Ì Browser.
Ì Whether or not the browser is maximized.
Ì Operating system and hardware.
Ì Device Orientation.
With standard web design it is possible to provide a solution which is fully design for the web’s
inherent flexibility and fluidity.
Front End Layout Ingredients
Front-end layout requires four core ingredients:
q A flexible, grid-based layout,
q Adaptive Content
q Flexible images and media, and
q Media queries, a module from the CSS3 specificati
Types of Layout
Majorly CSS layouts are of four types:
Ì Fixed Grid Layout : Many designers prefer fixed layouts to fluid ones because they’re easier to make and provide more assurance that what the designer sees, the user sees.
Pros : Fixed-width layouts are much easier to use and easier to customize in terms of design
Cons : Fixed-width layouts generally have a lower overall score when it comes to usability
Ì Fluid Grid Layout: Designers may not use fluid page designs for various reasons, but the layout’s benefits are often overlooked. Below are pros and cons to think about when considering fluid web page design.
Pros : Fluid web page design can be more user-friendly, because it adjusts to the user’s set up.
Cons : The designer has less control over what the user sees and may overlook problems because the layout looks fine on their specific screen resolution.
Ì Elastic Grid Layout: It mixes the two other main layout types. It works by sizing all elements with em‘s.
Pros : If implemented correctly, this layout style can be very user-friendly. The goal is to have everything grow larger or smaller in proportion with the user’s preference.
Cons : Even given the first pro above, this type of layout can create a huge problem with usability. It takes a lot of savvy and testing to get the layout right for all users.
Ì Hybrid Layout: In this designer uses features of Fixed, Fluid and Elastic Layout together.
for example:
> margin and padding are provided in pixels.
> font-size are provided in em’s
> and, content panel’s width provided in relative percentages.
Adaptive Content
A technique that involves adapting content to a specific ranges of screen resolutions.
Fortunately, we can use this technique outlined with our grid layout designing, and then we can add this technique for even better usability. below is the showcase for Adaptive content
Below are few screen resolution bench marks:
THE BENEFITS
1) The designer is able to see with greater accuracy what a design will look like in different resolutions.
2) Better adherence to design principles of spacing and balance, no matter what platform the design is viewed on.
3) The tiniest and largest resolutions are handled with perfection.
Flexible images and media
“img” element will render at whatever size it wants, as long as it’s narrower than its containing element. But if it happens to be wider than its container, then the max-width: 100% will forces the image’s width to match the width of its container.
However, the cold and hard truth is that Internet Explorer 6 and below don’t support the max-width property. But in a separate IE6-specific style sheet, we’ll include the following:
img,embed,object,video { width: 100%;}
only Internet Explorer 7 and lower are affected, as is Firefox 2 and lower on Windows. More modern browsers like Safari, Firefox 3+, and IE8+ don’t exhibit a single problem with flexible images.
Best practices:
1) Avoid Flash files.
2) Usage of split images – this reduces the number of request heavily.
3) Use of light PNG images.
4) No Image backgrounds.
Media Query
Problem : Fluid grid makes it pretty resilient to changes in window size and screen resolution—much more so than a fixed layout would. But even slight changes to the size and shape of the browser window will cause our layout to warp, bend, and possibly break outright.
Solution : Media Query
The recognized media types are: all, braille, embossed, handheld, print, projection, screen, speech, tty, and tv.
Supported features are : width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid. Some features accept min- and max- prefixes
E.g. - @media screen and (min-device-width: 480px) and (orientation: landscape) { … }
Support: Opera has supported media queries since version 9.5, Firefox 3.5 and above supports them, as do WebKit-based desktop browsers like Safari 3+ and Chrome. Even Internet Explorer 9 supports media queries. WebKit-based mobile browsers, such as Mobile Safari, HP’s webOS, and Android’s browser all support media queries.
Others
View Port Meta Tag
handling Viewport meta tag properly:
e.g. : <meta name="viewport" content="width=device-width; height=device-height; maximum-scale=1.4; initial-scale=1.0; user-scalable=yes"/>
Conclusion
All of these techniques can be implemented in one design to create a very user-friendly fluid layout.
A smart use of the fluid grid can create an adaptable layout whose proportions remain faithful to any screen and balance the other design principles. The adaptive content technique can handle unusually small and large screen resolutions with a bit of customization, so the designer is sure to get the perfect look for all users. And the third technique is a good one for making sure that images and other pieces of content with set widths aren't too large for the screen. Finally Media Query helps to handle device orientation and other device based custom changes if required.
Hopefully, advanced fluid layout techniques will signal a new era in layout design. With the growing variety of screen widths, it’s only a matter of time before these techniques become essential.
