Sometimes we have tabular data that do not go along well with mobile by default.
One of the approaches can be putting tables in a wrapper DIV to make them scroll horizontally on smaller devices as proposed by Bootstrap. But I’m not a big fan of it as the scrollbars are almost hidden on mobile devices and there are chances that user oversight them.
The other approach is to change the display of table on small device to display entire data on screen without scrollbar and that is what I’m going to demonstrate now. To accomplish that, I used the one of the underused CSS property
content: attr(value string).
Responsive design is fluid; using CSS3 media queries to respond to any screen sizes, where text can wrap and images can shrink to adjust along with your browser whereas Adaptive design uses a series of static layouts based on breakpoints.
– Excerpt from an article by Ryan Boudreaux
I think the above definition is self-explanatory; however I will try describing both with examples and used cases without getting into it that who started what and when.
In 2013 Matt D Smith shared an innovative form interaction pattern popularly known as “Float Label Pattern”; it floats the placeholder up above the input and make it as label after the user focuses on the form field or enters a value.
“Only the placeholder text is showing by default, so there is a nice, clean and readable form. Once an input field is tapped and text is entered the placeholder text fades out and a top aligned label animates in. This way, with multiple fields a user won’t forget what an individual field represents.” — Matt D Smith