Recently I redesigned and developed Concept Design’s website, the company I work for as a web designer. The old site was out of date so developing a new site was a good way to freshen up the brand and also stretch my current technical skills.
One practice that I wanted to incorporate into the new design was responsive web design and an adaptive layout. This would allow the new site to adapt to phones, tablets, desktops and hopefully most other devices as well.
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.
As a full time web designer, there are a lot of free online tools that I use regularly. I have decided to categorise some of these and link to the most useful tools that you can add to your arsenal. Hopefully these will allow you to save time and become more productive in your web design.
I write CSS in a multi-line format, with lots of white space and comments. That is great for a human-readable environment. But on a production ready website it is unnecessary. A best practice is to pre-compress your CSS before using G-ZIP to compress it even further when delivering it to the end-user of your websites. Procssor allows you to compress your CSS with some configurable steps.
Remember to keep an uncompressed copy of your CSS file for your own future use!
I feel this is one of the best tools on my list. This allows you to create CSS3 effects in real time with a Photoshop like GUI. It then provides you the final CSS code that you can copy/paste directly into your own CSS files. It is really fantastic, and great time saver. Adobe need to pay attention to Layer Styles. Photoshop desperately needs a tool like this built in.
