Responsive Tables

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).

Read more…

Float Label Pattern

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

[GIF] Float Label Form Interaction

Read more…