Midnight Lagoon

Blues and Browsers

6-20-2018

There was a time when I'd prioritze colors and images over actual page structure while creating a new website design. That approach made sense to me as an occaisional artist, and while I found some success, I'd spend an excessive amount of time trying to figure out how to turn a cool looking image, or group of images, into a usable website. I now focus on page structure first, and then add colors and images that suit it. When colors are set with CSS, replacing a few values can change the whole look of a page. In early 2018, I settled on "DarkBlue" for both the center color of the radial gradient in the rounded box backgrounds, and the background color behind the stars, grass and water. This is a screenshot from Firefox.

Dark Blue ML

A deep and bold blue that I thought gave the site a distinctive look. I left it alone for months, then as I came back to write a second blog post, I started to have concerns. "DarkBlue" seemed a bit too bright to be an appropriate background color with white text, and aside from the readability, it seemed a bit straining to even look at my pages for extended periods, in my experiences. These issues were minor when I viewed the site in Chrome, and more pronounced when I tried Firefox or Internet Explorer 11.

It took me quite a few years, but through my recent project testing, I finally noticed that colors and images could look different depending on the browser being used. I generally use Chrome, and an early choice I had made for blue this year seemed to look great in my site backgrounds. The same shade of dark blue came out very differently in the other two browsers, and I didn't care for how it affected the black and white images I use in the site background. One reason I then chose "DarkBlue" was the fact that the results were more consistent across the three browsers I was testing with, if still bearing some differences, such as seeming more vivid in Firefox. It seemed to me that Chrome had a better color palette, but it didn't do any favors for my old neon-themed layout from 2010. The images making up the neon box borders appeared too bright in Chrome, creating blobs of color around the neon lines, rather than the smooth transitions to the black background that I had made years ago. The same layout looks like I remember it when I view it in Firefox, and unsurprisingly, that's probably the browser I preferred while I created the images for ML 7.1, which may be seen in ML History.

Another thing that came as no surprise to me is the fact that color differences between browsers are well known, and this posting is a great source of information on the subject, if you're learning about it like I am.

I tried a different kind of blue extracted right from an image of one of my old designs, and I liked how it looked in the different browsers, seeming to set the right mood for a theme of night and water. With the value "#013161", I think it's more natural-looking, and pairs well with the background images, working with them rather than overpowering them. More importantly, I believe it's better for reading the text on pages. I also took the opportunity to brighten the moonlit horizon beyond the grass, to make it easier to distinguish, and adjusted the color for linked text to fit the new background color.

Natural Blue ML

With those small improvements to the blog, I'm turning my attention to other designs and projects, and there will be posts related to them. I may eventually add the ability to comment on blog posts. For now, if you have anything to share, my email address can always be found under About Me.

Page last updated: 6/21/2018