Loading...

When presented with varying display sizes, rarely will one layout work across the board.

A more complex layout that uses floats and columns may look great on a monitor, but when going to a phone, especially in portrait mode, there simply isn't a lot of horizontal room to work with. A phone in landscape mode may fare better, but then there isn't much vertical space, and you'll be scrolling constantly. The best thing to do is often to simplify your layout for the phone.

The site's navigation, for example, should either go across the screen or be a stack of link buttons when viewed on the phone. But when you move over to a larger display, you can add a float to an entire div to rearrange the layout. This lets you take advantage of the wider space and make the layout more interesting when you have the opportunity.

web page layout with a nav bar floating to the left
web page layout on a smartphone with each nav button on its own line, following by page content
Widescreen Monitor Smartphone Portrait Mode

The same could be said of situations where you may have text entries floating next to divs or images. Without the horizontal real estate, the page will need to go more vertical and sections of content will each get their own line. Divs or images with text below them will look appropriate and easy to read on the phone, and floating text next to divs or images on a monitor will look better because the space available is being utilized.

Remember, moving entire sections of your page could cause the orientation of certain style choices to change as well. If you have a div with borders above and below it, and then choose to float it off to the left for wider screens, that border should be changed to appearing on the div's right side. When you add or remove floats, it is important to test out these changes to catch these potential oversights.