beetle
mastering the web since 1997
Responsive Layout & how it comes together:
Above you can see the responsive layout of the Tatami website, as it appears on three different screens: tablet (portrait), desktop (landscape), and mobile phone (portrait).
I want to demonstrate how the content is re-arranged: the main content, left side of the desktop screen, comes first on tablet and mobile, the right sidebar flows below.
This is not the only way a responsive site can be set up. A popular look now are three even blocks of content, which then would display in blocks underneath each other on mobile devices. Many other page layouts are possible – the order of blocks on narrow screens is determined by “break points” inserted into the page code.
Please note as well, how the horizontal menu across the top of the page is automatically (well, not quite, it took some coding) re-organised: it originally has six links in one row, on tablet two rows of three menu points, in the mobile layout three rows of two.
Menus in general are one thing to distinguish between a mobile friendly “responsive website” and one which is not so easy to navigate on touch screens. You see: menu buttons, like all links, need to be a certain size or big fingers will miss them on touch screens…
On sites with an extensive navigation I like to use a small menu button for mobile screens, which only on finger tap opens the full menu.
My own home page has only four main menu points, so I simply display them in one block list on mobile.