I have made some tweaks to the design of this website.
Over time, I had become dissatisfied with the desktop layout. I decided to take the opportunity to make the CSS file mobile first. That it wasn’t originally mobile first made me feel slightly guilty.
It probably only makes a tiny difference in terms of performance. But it felt like the right way to go anyway. I was quite happy with the mobile design, but less so with the larger viewport versions.
Rebuilding the CSS file, starting off with the mobile elements that I liked, helped me clarify in my mind how content should reshape itself as the viewport size increases. In reality, there is little difference in how the content looks. But I am satisfied that the code is now cleaner and leaner.
I am still not fully satisfied with the layout for viewport widths of ≥ 1,300px. I definitely want to take advantage of the extra width. It would be silly not to. Websites that are just 960px wide tend to look a bit silly on large monitors, which are increasingly the norm in desktop environments.
But I am still not sure I have found exactly the right solution. It is better than it was before. I think it looks OK, but I’m not satisfied with how the code works.
The new layout for 1300px wide viewports.
It’s strange that I should be struggling with the viewport widths where you ostensibly have more freedom, particularly given that I am more used to creating desktop web designs.
Another aspect of the old design I had become dissatisfied with was the big teal buttons for links to my social media accounts. I am generally a fan of flat design, which is what I was going for. But ultimately I decided that these did not look enough like links — they just looked like boxes.
An update to the Social page.
So I have turned them into more normal-looking hyperlinks. But with a nod to the old design in the form of the icons to the left. I am very happy with this for the moment. Whether I still am in a few months is a different matter, of course.
The next step here is to look at creating icons for retina displays. I have not yet worked with optimising a web design for retina displays, so that will be a good way for me to try something new.