I am writing much less HTML/CSS these days and, coincidentally, there has been a lot written about the ascendency of apps (iOS, Android) and the decline of the web as a presentation layer. Personally I am spending most of my days deep concerned with Service Oriented Architectures (SOA) so regardless of which presentation layer wins I hope to be instrumental in designing secure, robust business layers.
As far as presentation layers go though the web remains the most open and while the jury is out on how it will keep up in mobile first world, I will ensure that I try to keep track of the UX/UI patterns that are pushing the platform forward. The tips I picked up this week was this little known CSS function called Calc(). It provides a way for you to mathematically mix relative values like percentages and em, with absolute pixel values.
#div1 { float: right;
width: calc(80% - 25px
);
#div2 { float: left;
width: calc(80% - 4em);
}
If you have completed any significant responsive web design projects then you would have probably solved the issue of divs tags with fixed width mixed with percentage width in a number of ways. Still, this is a nice shortcut, and I imagine as long as you do not concatenate too many variables this could be a reasonable pattern to use.
Comments are closed.