Random Responsive Web Design Tip

November 16, 2011

I’ve seen it written that when designing a responsive website, one should start with the mobile version of the site (for cellphones, etc.) then go from there. ¬†Until now, with my newfound understanding of CSS positioning, I didn’t know why.

Essentially, most mobile web designs are going to essentially be a single column of elements…


<header>
<navigation>
<content>
<sidebar>
<footer>

When elaborating into a wider, more fully-developed layout for larger screens, you will inevitably start moving laterally, moving elements into a more left/center/right layout…


<header>
<navigation><content><sidebar>
<footer>

This sort of layout is essentially done by floating elements to the left or right and is nearly impossible to do moving in the opposite direction. I learned this by trying to move a left-side element to the bottom in a mobile layout. After struggling to use absolute and relative positioning to move an element downwards, I realized that the element pretty much has to start lower and be moved upwards when appropriate.

And I wouldn’t have had this issue (or it wouldn’t have been as difficult) if I had begun with the linear, mobile-based layout.