Designing a mobile website can be a challenge at the beginning. Unless you are working on a website for only one device, forget about creating an exact pixel-by-pixel web design. Your mobile website will look different on every device it’s viewed on; you need to accept this and, keeping it in mind, create a strategy to create the best web design you can.
The best advice I can give you about mobile web design is: Keep It Simple! However, that doesn’t mean Keep It Ugly.
A mobile website ideally consists of vertically scrollable documents. The typical two- or three-column design is not suitable for mobile web pages. Every mobile web document has a few identified zones:
These sections will be created one after the other in a vertical scope. Only for devices with a landscape orientation and smartphones it is suitable to create an alternative organization where you can move the main navigation section to a right-side column.
On high-end smartphones, your main navigation can become a top or bottom tab bar, and the content modules can shrink with an accordion or master-detail design.
When you are creating a mobile version of an existing desktop website, you need to understand that you are mobilizing the website, not minimizing it. Minimizing (or miniaturizing) a desktop website simply involves displaying the same content on a smaller screen. Mobilizing is more than that; it requires understanding the ...