Mobile! Desktop! Laptop! IPad! Whoa…! It’s of not a surprise or secret to web designers and developers that these devices can’t be ignored anymore. As it’s a day routine to every visitor that they are using mobile devices such as tablets and smartphones to visit websites.
Whenever there is a design of page layout comes into the picture, web designers frequently use keywords like fixed, static, liquid, adaptive, responsive, and a few others. So, being proactive, we analyzed the requirement on of the selection of layout types either Adaptive or Responsive. Here we go with our expert analysis:
These concepts are so closely related to one another this makes it difficult to understanding at first. Understanding the differences between each one is the key to understanding them individually and this will keep every person on the same page and help you select the best approach for your project.
Adaptive Vs. Responsive
Let it flow! This is basic concept of responsive layout. To respond to any screen sizes, a Responsive page layout uses both relative units and CSS3 media quires. It combines the concept ideas of liquid layout and an adaptive layout. It not only enhance the user experience when viewed on tablets or mobiles, but it is mind-blowingly cool to see designs adapt to the size of a browser window as you resize it, as it works in fluidity manner with the width of the browser. Characteristically these designs are built on concept of mobile layout is designed first, and then as the browser becomes wider on tablets and desktops, the designer will expand the mobile layout. With it it’s easier to expand a design than to try and simplify a large layout for mobile screens. A perfect example is a single ball growing or shrinking to fit through several different hoops.
Image 1.0: Responsive Layout
Detect, adapt and adjust! This is basic concept of adaptive layout. It not necessarily set on a fluid grid. It essentially utilizes many of the components of progressive enhancements as a way to define the set of design methods that focus on the user and not on the browser.
It is a targets specific device resolution and has set with fixed widths or relative widths (%), controlled by media queries. It uses predefined set of layout size based on the device screen sizes; this approach adapts to detect the device specifications. It adopted a mortality of working on the server side. The information is passed to the server regarding the device’s specification, and a page adapted to that device is returned.
Image 1.1: Adaptive Layout
When it comes to make a choice between them the key is to consider your audience first, no matter what design technique you adopt. Keeping all the points in the mind, it’s safe to say that responsive design will remain popular, but that might be because there is no decent solution to the heavy maintenance which adaptive demands.
Appearance:Optimal Form Field Labels
Should the field label go to the left or right of or above the field? The solution is:
- User need not to look separately at the label and the input field. In most cases it works better when placing a label above an input field.
- If you choose to place labels to the left of input fields, then it must be right aligned.
- It’s preferable to use plain text labels instead of bold labels.
- Place Dropdown list boxes well below more important input fields.
Image 2.0: Optimal Form