28/02/2016
Behaviour and mouse hovering in responsive web design
Grids are a great way to tackle the layout issues of responsive web design. Modern CSS layout techniques like flexbox and grid layout will make this even more comfortable, when their adoption becomes wider and standard. The one single issue that is a lot more difficult to understand and provide solutions for, regardless of the grid itself, is behaviour and the way it changes from desktop to mobile and vice versa. With "behaviour" we mean both user and device behaviour, we mean user-device interaction.
For instance, one might have a beautiful drop down menu in desktop mode, which is activated when the user hovers their mouse over it. However this hover action is not available in mobile devices because, well, there is no mouse, there is no cursor to hover over anything. There are only touch events. This simple differentiation causes the need for all UI elements to simultaneously provide solutions for both worlds. The most common, the one that everybody has come to recognise -no judgmenet here- is the burger menu. Like it or not, it is a solid way of providing a useful differentiated behaviour between desktop and mobile without having to invent one's markup twice.