Great post Jeroen!
Question for you, when creating master pages, how would one setup the webparts for the main items (header, footer,navigation)? Conditional Layouts? Macros? Something else?
Here's a scenario:
Say I have 3 width ranges (or devices) I'm dealing with:
> 1028px wide (desktop)
750px - 1028px (tablet)
< 750px (phone)
This site has is fixed with at 940px, centered and has left vertical navigation. When I view on a tablet, I want to change the navigation to horizontal with smaller font, just under the header. When phone, I want the navigation to have a button with 3 lines and expand to vertical in-line (push content down) when clicked.