Web designing is taking new shape and form with the passage of years. We shifted our focus from our dearest desktop to laptop, and within no time we again shifted to smartphones. Well, this all has compelled designers to look for innovative ways where the designs are seamlessly viewed on all the screens ranging from macro to mini. This gave rise to the concept of flexible layouts, where the designers make suitable changes to the design, so that it can be viewed easily irrespective of the screen size of the devices.

According to Statistica, by 2019 the number of mobile phone users is expected to grow beyond five billion.

Mobile User Stats

With the increasing number of different device users, the designers focus on building web pages that could be easily viewed by the users of various devices. The internet is full of various textual explanations. Images that are added to the websites, to make the application more attractive, varies with the changing screens. What happens to the interface when those websites are viewed in different screen sizes?  How does the interface behave when viewed “in-between” the small and large screen sizes? All these questions are answered in the post that follows:

Which Design Layout suits the best for you Web Designs?

1. Fixed Layout

Traditionally, websites were built using fixed layouts. Also known as static layouts, these layouts use a preset page size, which is constant and does not change with the width of the browser. In other words, page layout has a permanent width of either 960 pixels or 760 pixels, which is constant. Generally, it is kept 960 pixels. Around the start of 2010, responsive design concept was introduced.

The rendered pages having fixed layouts are quite unpredictable because different devices will treat the static page layout in different ways. For instance, suppose you are working on your laptop browser and the window size is small. In such cases, the web page gets cut off and horizontal bars appear.

Nowadays, not many designers prefer using the static layouts but still some do. This might be because they’re easier to make and the designer can have assurance that user would be able to understand his viewpoint. Let us now have a glance at the advantages and disadvantages of fixed layout.

Pros:

  • Easy to customize and use.
  • Incorporating content, images, form, videos is easy because widths are same for every browser.
  • Defining min-width or max-width is not required.
  • The content would be easily legible at larger resolution, even if the website is designed for small screens.

Cons:

  • In case of larger screen resolutions, the fixed layout creates excessive white spaces, hampering overall balance of the design.
  • Depending on the width of the layout, viewing ion smaller screen might require horizontal scroll bars.
  • Screens with larger resolutions faces difficulty in smooth incorporation of textures, patterns and image continuation.
  • They have lower general score in terms of usability.

Example of using fixed layout in their designs:

Static Page Layout2. Fluid Layouts

This website layout is also referred as the liquid layout. The fluid page will flow along the contours of the browser window, which means the content will wrap itself as the browser window is resized. The components of the layout have percentage widths and are not defined in pixels. In other words, the change in the screen size does not change the proportion of elements. It automatically adjusts the user’s screen resolution.

Fluid pages are more accommodating which has led to a common belief that they look better on a wider variety of the browsers. Since fluid designs can fit into any type of browser window, sometimes they are considered to be more “accessible”.  

Pros:

  • It adjusts to the user’s set up very easily; therefore, they are user friendly.
  • The excessive white space is same in all browsers and screen resolutions.
  • Horizontal scroll bars can easily be eliminated while viewing in the smaller screen resolutions.

Cons:

  • The layout looks normal on different screen resolutions which do not allow the designer to know about different problems with the look of designs.
  • In case of multimedia and other types of content having already set width might need to be set at multiple widths in order to accommodate different screen resolutions.
  • In case of large screen resolutions, sometimes, white spaces are created due to lack of content.

Fluid Page Layout

3. Adaptive Layouts

In Adaptive Layout, there is not one layout which changes but there are several versions of the layout which are displayed based on the screen size of the viewer. For instance, the layout could be specifically for smart phones, tablets, computers, etc. All the layouts are made in advance, which stands waiting until someone visits the site. The site automatically detects the type of device and renders the type of layout for that device.

Pros:

  • Designer has full control of how the design can be viewed.
  • The layouts can be developed for specific and multiple viewports.

Cons:

  • Adaptive layouts work only on those screens, for which the layouts are available.
  • The final output is not always the best for a wide variety of screen sizes.
  • These layouts need some occasional maintenance.
  • Adaptive sites require a lot of loading to do, which makes them a little slower.

Adaptive Page Layout

4. Responsive layout

It takes the best from the two layouts – fluid and adaptive. Responsive layouts use x and y coordinates on a grid for layout.  Rather than using fixed width parameters, they use percentage for various attributes. This creates a more fluid layout which resizes itself to fit the display screen. Based on the different screen sizes, elements of the layout stretch or shrink themselves. Responsive layouts are very popular because consumers do not want to compromise on the experience while viewing a webpage on mobile device.

According to Morgan Stanley Research, there are more web pages accessed through mobile devices than through desktop computers.

Pros:

  • Designer has the freedom to make the users see what he/she wants them to see.
  • Information is conveyed efficiently, irrespective of the device used.

Cons:

  • Since responsive designs are based on HTML 5 structure linked to CSS, the devices load all the data; thereby leveraging the load time.
  • All devices might not be compatible with the HTML, which restricts the user to access the webpage.

Responsive Page Layout

Conclusion:

Nowadays, nobody wants to compromise on their experience with a particular service. Their expectation is to experience the best. The developers and designers have to take utmost care while designing the webpages in order to provide the best designs for their customers. Based on different buyer personas, one can decide upon which layout can be used for providing the best user experience.

We, at Multidots, can help you with our expert consultation on deciding upon the web designs which is aligned with your buyer persona.

Avatar for Multidots
Author : Multidots
Multidots is full service enterprise software development company with services revolving around consulting, enterprise-grade custom application development, custom mobile and cloud applications to automated and manual testing. We are proud to have served mid-sized to large enterprises including Fortune 500 Companies in our clientele.

Comments

Leave a Reply

How can we help you?

Submit your Business Enquiry here and we will get in touch shortly.

Contact Us

Looking for a First-Class Technology Consultant?

X

Quick Contact

I give my consent to the storage and processing of my personal data by Multidots as per their privacy policy compliance.