Repositioning Elements of the Layout on a Mobile Device. Good Stuff.
When creating a responsive design it’s important to consider the limited amount of space you have to work with. Take this email from Browns for example. When viewed on a mobile device the navigation is shifted to the bottom and becomes stacked.
You may be thinking why on earth would you do that? Well consider this, the average pixel size of the human finger is 40x40 pixels. If you allowed the navigation so scale down horizontally in this email the links would become too small and too crowded. That’s a recipe for poor user interaction in the email. By stacking the navigation links you ensure that they’re easy to read and easy to interact with.
Ok, that makes sense, but why shift it to the bottom then? Shifting it to the bottom is a good move because of the limited “above the fold” space you have. The objective is to communicate your message so you want it to be as close to the top as possible. If you stack the navigation and leave it at the top you have to scroll through it to get to the good stuff. Don’t make people scroll farther than they have to to get to the good stuff!