To present a full week calendar table to the users and make the most out of the available screen estate without duplicating elements.
The HTML structure, using a simple table, is perfectly fine to use on larger screens, however, on mobile devices it can result in content scrolling out side of the visible part of the screen or breaking to multiple lines. Not ideal if you consider the growing number of mobile users out there.Basic calendar html structure: This can be improved:
A better approach for responsive content
Using media queries you can detect device screen size and serve a better aligned view.Try this instead:
table for an unordered list
ul. This will give us more flexibility when it comes to the width of the elements. Add the data attributes containing the abbreviated week day name
data-abbr="Mon". They contain mobile specific values. Notice that the screen readers can still take an advantage of the full week name displayed in the list item tag.
Then, add some styles to put it all to work. The key style in this approach is the
content: attr(data-abbr) applied to the sudo
:after element. It lets you grab the value of the data attribute and pass it to the
The new responsive approach
There you go. Try resizing the screen or use different devices to preview the solution. Of course, this approach can be applied in other situations, so feel free to experimant and modify it to your requirements.