The modern day web needs layouts that can adapt to meet the growing number of devices, screen sizes and web browsers on the market. The ability to build good looking interfaces that meet this criteria is a skill to be appreciated. The idea of fluid layouts is not new, but with the implementation of an adaptive layout you can retain more control and make design decisions based on different contexts. A user may be accessing your content via a phone, tablet or a desktop computer, and you need to consider these options when setting the constraints on your design.
To show how this can be applied to a real life situation I designed a mock-up of a calendar widget for use in this article, with the goal of implementing a HTML version of it that will adapt to different sizes and still remain usable and true to the original design. In this article I am going to use CSS3 techniques to avoid the need for images and to further improve the adaptive nature of the widget. I will be concentrating on the calendar style and structure only. A fully working calendar is definitely a project I will create in the near future.
