Is flexible layouts hard to make and maintain, time consuming than fixed width layout?

Question

Is flexible layouts hard to make and maintain, time consuming than fixed width layout?

Is flexible layout means only to give width height and font in em or %?

What is main benefit of flexible layout to the desktop and mobile users?

And if we make flexible layout then should be give images width and height in em or `% also to images scale along with layout div and font size.

Should we make everything flexible Header, footer, sidebar, content area?

Is there any cons of flexible layout? I heard one about longer paragraph is not good for readability.

If client is happy with fixed width layout even should we make layout flexible (to show our skills to others) if client don't mind if we don't ask for extra money? or we should make layout flexible only on demand.

Answer 1

Flexible layouts are more difficult to develop than fixed with layouts. Setting width in % is one possibility to create flexible layouts. You can also use JS to scale the text a.s.o.

The benefit of flexible layouts is that it fills every screen and horizontal scrollbars never appear. Images should be fixed width because most browser don't do a very good job of scaling images.

Not every single element has to be flexible, but a flexible content area doesn't help you much if the header remains fixed and creates a scrollbar.

Answer 2

I generally develop a site with a fluid structure that is kept at some fixed width by the main containing element. That way, I can easily make changes to the overall page width without manually modifying every element whose width needs to be changed. Essentially, this requires that you set the main container's width in pixels and all of the inner elements as percentages of that containing element.

If you do need to create a fluid layout, a better way to deal with the wide content area would be to use max-width to limit just how far certain elements can extend. This should prevent content flow issues while still allowing other parts of your layout to take full advantage of the user's screen size.

To allow for text resizing, leave the height for containing elements undefined, so they can expand as needed when the text size is changed.