In our last blog post, we looked at some of the ways designers are using responsive web design to deal effectively and imaginatively with images, layouts and navigation, but of course these are not the only elements of a webpage. So this week, we’re going to extend the topic to include some more advanced design features, focusing on some of the latest approaches to handling forms, tables and iframes.
First up, forms.
Forms
Many forms, particularly the most lengthy varieties, are not always that interesting to look at, and they can rely heavily on text. On small screens and mobile devices, it’s simply not practical to have to scroll through a lot of content or type in lengthy answers, and it’s easy to make mistakes in filling in a form when you can only see a small section at once.
Increased use of radio buttons, checkboxes and dropdown selections are obvious ways to make this easier on the user, and using the required and autocomplete HTML5 attributes can be helpful in avoiding errors, limiting the amount of information to complete and increase website conversion rates.
There are several new HTML5 tools to help with various inputs, including a date picker called input type=“date”, which will avoid large fingers struggling to press small areas of a calendar screen on a mobile device, instead using large images and a swiping motion (think iPhone calendar). Although this is currently only available in Chrome, Opera and Safari on iOS, a polyfill such as Mobiscroll can be used for browsers with non-native support.
It’s a step in the right direction, but there’s still a lot more to be done to make forms truly responsive.
Tables
Tables are typically a content-heavy means of displaying information, and often are too wide to fit neatly onto a small screen. Changing the column widths is easy in HTML, but usually makes the data squashed and impossible to read.
Hiding particular columns, or even rows, is one way of dealing with the problem, allowing the user to choose which information they need to see by way of checkboxes. The table shown would depend upon the screen size of the user.
Another method is the use of a scrollable table, whereby the column on the left remains in place, whilst the user can scroll across to see the other columns. A neat idea, it is hindered by the fact that many tablets and mobile devices won’t display a visible scroll bar, meaning that the user won’t know that more content is available to the right.
An alternative is, of course, to simply not show the information as a table, choosing to split up the data and use the ‘reflow mode’ technique – essentially displaying the data as a series of lists.
iframes
Whilst iframes are great for embedding third-party content into your website on a desktop, they are not at all so straightforward in a responsive design situation. The reason for this is that iframes force a fixed size into your HTML. Assuming you choose a width of 100% (so that the iframe fits on the page), the ratio of embedded content would be lost, which might prove important, depending upon the content of your iframe. Using a 16:9 ratio, Thierry Koblentz has experimented with wrapping the iframe in a container and applying some CSS, enabling the frame to resize fluidly, although with this technique, all iframes need to be wrapped in an element.