Accounting for browser resizing in a site layout

Question

Accounting for window resizing in a site's design and layout

When designing a site's UI and layout, I've always wondered how much I should accommodate for the user resizing the frame (window/browser). I struggled to find any solid standard about how a site should adjust itself according to its root container.

Should it try and resize the contents by shrinking or enlarging the elements relative to the frame size? Should it keep the width of elements relative to the frame size and adjust the height to make the contents fit in vertically (like a newspaper column getting longer vertically)? Or should it simply not adjust the layout at all and provide scrollbars to navigate the content?

I've noticed that many sites do it differently and even the biggest sites like Google's own homepage and StackOverflow have minor breaks in the UI if the browser is shrunk:

Google:

StackOverflow

This might be more of an issue of accounting for different resolutions rather than browser resizing but regardless, I'm really just interested in how the frame should deal with being smaller than the size it was designed for.

I'm curious to know if there IS a standard or general best practice and if not, I'd be interested to know your personal opinions on how it should be done and why.

Answer 1

Not only should you accommodate the user wanting to resize the browser window, but users can come to your website with a variety of browser windows sizes in the first place, so yes your site should be designed to cater for a wide range of different window sizes.

HTML is inherently capable of describing logical layouts of web page elements, with relative positioning, and sizing can be based on percentages and font sizes, not just pixels.

Thus the standard way of designing pages around the web is not to treat resizing as some form of zoom, with shrinking/enlarging images and text, but to treat the differing space available on the page as an opportunity to better arrange the text/image elements at their existing size, within the new sizes of the layout containers. (There are already browser features capable of doing zoom/font enlargement, should the user wish to do that.)

If you design a site well, using relative sizing where appropriate, then the browser will take care of most of the page layout for you when the window is resized, and it will provide a scrollbar for scrolling down to see the rest of the content (for example, if your column has got longer vertically because it is not so many pixels wide after the browser resize).