bradbice.com

Winter Cleaning, 2022

brad@bradbice.com (Brad Bice) — Sat, 05 Mar 2022 00:00:00 +0000

It was time for some cleanup around these parts, so here’s a list of what was fixed.

I spent some time this winter diving deep into this website and cleaning up what was initially a lot of add-on, messy, and less-than-optimally organized code. I also made some design updates and basically rounded off a lot of sharp edges. Here’s a roundup, for posterity:

Design changes

Standardized link hover states
Removed sunruise lines from homnepage
Fixed heading sizes in article-stubs
Changed up and fixed some dark mode colors and styles
Standardized button and form specs across the site
Fixed some movie rating layout issues
New menu button location and fixed header
Tweaked the Blog header to use a less-repeating image of the Chicago skyline

Code cleanup

Moved seasonal styles to date-conditional class
Restructured articles layout, and basically re-wrote the entire structure of every page
Changed colors to use hsl()
Converted all font-size px values to rem
Fixed some broken links across the site
Converted all modals to the new <dialog> element
Changed the primary branch from master to main

Content

Added new work post about Figma
Added a goodbye blog post for Tom
Added more movie, video game, and TV ratings
Switched from a Google Form to a custom form on the Contact page
Updated some Work posts with larger images and up-to-date content

What’s next

This was a clean-up and bug-fix phase, and now I have a list of some enhancement, performance, accessibility, and usability fixes to come next. Not to mention that it’s about time for a design refresh soon. This is a 2018 special that’s been going strong, and I’m happy with it still, but the itch is forming.

Core Web Vitals work
Lazy loading ratings images
Performance! ~~Currently scoring a 60 (94 on desktop) on the homepage. Embarrassing.~~ Edit: That was actually some adblocking scripts getting picked up. All good with 100 now!

Introducing Dark Mode

brad@bradbice.com (Brad Bice) — Thu, 10 Oct 2019 00:00:00 +0000

I’ve added a dark mode to bradbice.com, as well as some quick and simple ratings comparisons.

Dark mode

My website has been a little too bright lately, so I’ve implemented a dark mode which will activate according to your OS settings. Thanks to CSS custom properties and the (prefers-color-scheme: dark) media query, this was really simple to do and was completed in about 30 minutes and around 20 lines of CSS. Most of the time was coming up with alternative colors (granted mostly shades of black, gray, and white at this point) and checking color contrast ratios.

I hope it’s a little easier on your eyes if you’re viewing the site at night or if you’ve turned the rest of your computer dark.

Movie comparisons

My other side project is rating movies. Here I’m collecting every movie I’ve ever watched in my entire life, documenting them, and rating them. My wife will join in when we watch the same movie together.

At times, I may want to compare movies of a certain run, certain eras, that have similar actors, etc. Now I’ve created a simple shortcode in Hugo that allows me to do that by passing in a list of movies like so:

blog-movies "batmanbegins:thedarkknight:thedarkknightrises"

The Dark Knight Rises

61%

Now I can compare any types of movies, and as many as I can list (as long as I’ve already rated them).

Back to the Future

94%

Back to the Future Part II

90%

Back to the Future Part III

91%

However, as of this writing I’ve only rated 153 of 737 movies (21%), so I’ve got a ways to go before I can fully utilize this feature.

I am a CSS Designer

brad@bradbice.com (Brad Bice) — Mon, 12 Aug 2013 00:00:00 +0000

I’ve done a few job interviews over the summer as I’ve transitioned between roles. Each interview has similar questions, one of them being:

“What is your ideal role?”

I often begin explaining that I would like a role that offers a bit of web design and web development mixed into one. I am proficient in graphic design and I am slightly more advanced in writing HTML/CSS code. I’ve worked with designers and developers directly for my entire career, and have often bridged the gap between the two (and it is often a large gap.)

However, the word design seems to capture everyone’s attention very quickly. When it comes to the web, I’ve found that “design” or “designer” can mean something very different from the world of print, 3D space or other mediums. This is because unlike print or sculpture or other mediums, the web is a very fluid, malleable, living thing.

There are millions of devices that display the web very, very differently, from a laptop browser to an iPhone to a Playstation on a TV to a watch, there is no guarantee that the person viewing a website will be doing so under specific circumstances or environments. And in those very different devices are more variables like window sizes, screen orientations, interactive capabilities (pointer device or touch?) and more. And to add even more complexity is the thought process into how a person is using web content, on what device, and where they may be or what they may be doing (sitting at home on a laptop vs. in the subway on a mobile device. Different environments, different challenges like screen space, network bandwidth, ease of use, etc.)

Along with being fluid, web content can also be required to be very malleable. What I mean by this is that an image can not be displayed at 1024x768 pixels on every device. Text size of 12 points might look great on a desktop monitor, but may be way too small on a large projection screen. That neon green background color makes a paragraph look outstanding, however if the page is printed, the background color most likely will not be and the effect could be lost. Web content needs to be molded and shaped into what the user needs, whenever and wherever they are accessing it.

Finally, the web is a living breathing thing. Sure there are sites that have gone untouched since 1997, however the most commonly visited websites are those that are frequently updated with fresh content, keeping their visitors coming back for more. With changing content comes new challenges. Maybe that one line headline that we made room for now has two lines. Maybe that photo for the news story is in landscape instead of portrait orientation. Or maybe a huge sale will need to push all of the other content out of the way, for this weekend only! Web content is always changing, moving and being manipulated.

For these reasons, there needs to be CSS designers. CSS designers should work hand-in-hand with graphic designers and User Interface designers when planning and designing a website. A plan for a website can include a header with a navigation menu running across the top, but what happens when the user shrinks their browser width, or moves to a mobile phone? As designers create visual compositions for these scenarios, a CSS designer will need to plan and develop for the in-between moments. At what point will the menu shrink behind a menu button on mobile devices? Will the menu just pop behind the button or will there be a transition effect?

Along with solving implementation of design, a CSS designer must also solve other problems, such as saving on bandwidth, and progressively enhancing the web experience for all users and devices.

Many of us enjoy fast internet connections in our homes and workplaces, but can be saddled with data plan caps and/or slow network speeds on our mobile devices. That large, 3MB photo may download just fine on your laptop at work, but when you check it on the train at night delivers a not-as pleasant waiting period. CSS designers must implement ways to account for these situations by delivering appropriately sized images, or preventing download until the image is displayed (for example.)

Along with bandwidth, another unknown is technology. Many offices and homes are up-to-date on the latest browsers, computers and capabilities. However, most are way below the cutting edge. CSS designers are tasked with maintaining accessibility and usability of web content while adding on features and complimenting effects for those with technology that supports them. This is called progressive enhancement, and it ensures that even if someone is using a very outdated form of technology, the web content is still readable and usable.

Many of these decisions can be made by UI designers, web architects, graphic designers and more. However, a CSS designer/developer is the one who will implement and ship these solutions. I enjoy being a part of thinking through and solving the many road bumps of the web. I enjoy optimizing and progressively enhancing content for all users. And I enjoy writing CSS. It is a form of design that is unconventional but, I believe, is very essential.

Internet Explorer 6 compatibility

brad@bradbice.com (Brad Bice) — Thu, 18 Jun 2009 00:00:00 +0000

Internet Explorer 6 is the bane of web developers everywhere, much like Netscape 4 was in the early 2000s. How do we support IE6 users without going crazy?

There is a growing campaign in the web development community calling for the death of version 6 of the Internet Explorer browser by Microsoft. Introduced in 2001, it had ruled the market share of browser usage for years until the coming of Mozilla’s Firefox and Microsoft’s own Internet Explorer 7.

I did a quick Google search for the term “ie6” and found a startling six “death to ie6” websites on just the first two pages of results. These include:

Bring Down IE6
STOP IE6
IE6 Update
IE Death March
DearIE6
Stop IE6

And one likely parody, SaveIE6.

Update 2023-03-05 All but one of those no longer exists, appropriately, since IE6 is no longer a large issue.

One of the main reasons for the IE6 hate is its lack of support for web standards such as full CSS 2.1 compliance and PNG alpha transparency. Another is its many security issues which come with being the top browser for approximately 5 years. While no browser available supports every standard, even IE7 at least supports a larger contingent of CSS 2.1 selectors, PNG alpha transparency and is a little better on security.

While it may seem easier to point visitors to new browsers like Mozilla’s Firefox, Opera, Google’s Chrome, Apple’s Safari or even Microsoft’s Internet Explorer 8, it is important to note that some people either can not or will not upgrade. Many business computers still run IE6, and will do so for years to come. So what is the solution for web developers who want to escape having to “fix” their websites for IE6?

Andy Clarke, a member of the Web Standards Project and a former invited expert to the W3C’s CSS Working Group, provided a solution that I find appealing. Since the content of a website is most important, make sure that content is viewable and accessible to users of IE6 by providing them with an IE6-only CSS stylesheet. This renders the page in a very readable and organized yet generic design while separating the main design for others using more current and advanced browsers.

This is done by inserting IE conditional comments into the <head> portion of your website’s HTML, like so:

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.0.3.css" media="screen, projection" /><![endif]-->

The stylesheet code is available on Google Code for anyone to use for free. I am using it on this website as a mere 10% of my visitors are currently browsing with IE6. It is important that designers and developers view their logs and stats to determine what browsers to support. I will usually adapt my design for IE6 (or any other browser) if more than 30% of my visitors are using it.

As Jeffrey Zeldman said when referring to Clarke’s method, “no solution, however elegant, will work for every situation.” But work like this will allow for an easier transition as the world upgrades.

Typekit will change the web

brad@bradbice.com (Brad Bice) — Thu, 28 May 2009 00:00:00 +0000

Looking forward to using Typekit, a new technology that easily allows for @font-face use in websites.