Why cant we build web pages using absolute positioning? | Hacker News Reader

Why cant we build web pages using absolute positioning?

hastebin.com

0 pointsweb-monkey2 comments

There's numerous reasons why this is a bad idea.

There's a difference between a fixed width layout and an absolute positioned layout - the fixed width layout can adapt.

The biggest issue with absolute positioned layouts (as with design for print) is they can only scale, but not adapt to the various resolutions and pixel densities we encounter on clients viewing websites.

Web design is first most the design of a pattern of design in order to achieve consistency via reuse. If everything has fixed dimensions; it wouldn't be very reusable.

On the topic of using JavaScript to perform the layout:

1. JavaScript performance in newer browsers are pretty good, but ranging from extremely to pretty bad on older browsers (don't forget the mobiles!)

2. You'll have to resort to using CSS anyway for specific layouts (ex. keeping an element always visible) as repositioning an element on streaming events using JavaScript tends to be really slow.

3. The amount of reuse you'll get from even writing a decent interface for layout functions will be pretty low.

4. Behavior of CSS using a reset is more consistent than JavaScript implementations. You'll probably need to normalize between different browser versions - that means using something like jQuery, Moo Tools etc. which adds a hefty payload.

5. Waiting for your JavaScript to be downloaded and interpreted to reposition elements (after the DOM has already rendered) will be an ugly sight.

You should invest time in pre-processors such as Stylus, Less or SCSS (you can write reusable mixins that you can include on different projects and use variables to customize them). If you haven't, you should read up on object-oriented CSS: http://coding.smashingmagazine.com/2011/12/12/an-introductio...

Thanks for your reply.

  > "The biggest issue with absolute positioned layouts (as with design for print) 
  is they can only scale, but not adapt to the various resolutions"

There's no reason you couldn't do exactly the same thing media queries do using JS i.e. if(window.innerWidth <= 320){ layout.apply('mobile') }

  > "If everything has fixed dimensions; it wouldn't be very reusable."

In my experience, practically speaking, there isn't much reuse of components anyway. How often do you put a sidebar widget in the main body? And if you do how many presentational overrides do you need to include to make it look good in it new home. Also using JS for layout doesn't mean not using CSS at all. Instead CSS can be used for what it's actually good for -> text styling.

  > "JavaScript performance in newer browsers are pretty good, 
  but ranging from extremely to pretty bad on older browsers"

I dont think there are that may constraints to track on a usual webpage. Updating 15-20 nodes would (i'd guess) be 50-100ms on page load.

  > "The amount of reuse you'll get from even writing a decent 
  interface for layout functions will be pretty low."

sorry not sure what you mean here.

  > "Behavior of CSS using a reset is more consistent than JavaScript implementations."

No reason you couldn't use both. A reset mostly deals with normalizing presentation issues, not css layout issues.

  > "that means using something like jQuery"

Many (most?) sites are already including jQuery.

  > "specific layouts (ex. keeping an element always visible) as repositioning "

That's an edge case which could be worked around.

  > "Waiting for your JavaScript to be downloaded and interpreted to reposition elements "

There's no reason the initial downloaded layout couldn't be already positioned correctly and therefore not requiring a layout operation on page load. A re-calculation of layout is only necessary if the DOM changes, eg some new content is loaded via ajax.

  > "You should invest time in pre-processors such as Stylus, Less or SCSS "

These are great, but they're pre-processors which limits their usefulness.

Reply on news.ycombinator.com