A Brand New Look
It has taken me quite a while to get here, but when I realised that I’m only one entry away from my 100th post, I’ve decided to mark this milestone with another redesign effort.
SG Watch version 4.0 presented me with the most technically challenging redesign thus far. One of the main problems I faced was the use of custom corners in the layout. There were many solutions available on the net, and a relatively easy method employed by many people is to create the overall layout with a single background image. This eliminates the problem of having to align separate header and content background images using CSS hacks. However, I wasn’t very comfortable with this solution; I felt that a background image should be coded under its corresponding section for semantic reasons.
An alternative solution was suggested by Søren Madsen, which involved using three separate <div> elements. Although his method is semantically correct, I found it too complicated for my redesign. It requires six separate background images to create a single layout with rounded corners, not to mention the use of negative margins to make everything align properly.
I finally settled for a simpler method which uses nested <div> elements. Although this method isn’t as semantically correct as the one suggested by Søren Madsen, it’s a compromise between semantic accuracy and simplicity.
Coding for IE is always a pain; I had to make significant adjustments to ensure that everything renders properly in both IE and standards-compliant browsers. However, the fact that IE doesn’t fully support CSS means SG Watch will look slightly different to IE users. Download Mozilla Firefox and give it a try — experience the difference.
I’ll fix up the photo section tomorrow, and minor changes will also be made over the next few days. In the meantime, feel free to browse through my photos using the old layout.