For a long time it has bugged me that the css for the recent version of my site was desktop-down. I made some adjustments for adaptive/responsive behaviour three or four years ago, but since the code base of my site is organically growing since I started it on WordPress in 2005… uhm, I think you get the picture. So all I did back then was to consider how the site should look on smaller screens, and making modifications inside max-width media queries, keeping all of the desktop-related stuff as the default styles, outside any media queries.
Of course when starting a new website, nowadays I would do exactly the opposite: make basic styling outside any media queries, but seeing this as the default for any screen, thinking in terms of small, mobile screens first, then adding mods for the instances when the content starts to look funny on larger screens, and putting that inside min-width media queries.
Such an approach is tedious when most of the existing styling is aimed at large, 'desktop' screens, so I always put that on the 'need to do it eventually' list, knowing that this would be not so much fun at all.
Finally yesterday I started a clean-up, restructuring the styles in a mobile first way. All on the live site, so if you see something strange, be sure to reload the site with empty caches (strg + f5 on pcs, shift + ctrl + r on mac) and let me know if it won't go away, I am sure that there are some parts of the site where some things are still looking weird.
I tried to keep the overall look, but made some changes to the display. I removed the sidebar for all screens but the really large ones. For smaller ones I moved the search bar and the part with the avatar picture and the 'elsewhere' links in the footer. Added an 'About' link in the main nav that jumps down to that part (still need to figure out a short 'About me' sentence, though), and put a back to top link in the footer for all sizes. I wanted to use more screen real estate for the content, so as a result all my old images are too small for the new width on larger screens, still undecided, but I tend to leave it this way. On the home page the article teasers (everything but the first article) are now displayed in a two column way to save some vertical space on medium sized displays and wider. I think I'll adapt I adapted this for the archives views as well, especially on the archive for the notes/status posts the wide view looks ugly.
I still haven't got rid of all of the "id" based styling that I used years ago, and the code is still a long way from being modular, but I enjoy the fact that a fairly modern approach is possible to a grown ten year old code base.
That's what I like about the web technologies -- done right, you don't need to throw everything over board every few years just to keep up to date.
09b10a57ef2b5d40d747ac95b25bf800
