I've been noticing a lot of awful websites recently, and just for fun, I thought I'd write a bit about them. I'll be starting off with my most recent find. Valve's. Yep. The billion dollar company that's swimming in money, and actually do have a lot of web dev talent at their disposal (as they've proven with the Steam store), have an awful website for the company itself.
Keep in mind that we're talking about the Valve site and not the Steam site.
Let's begin with the mobile experience. When you visit their site on a smartphone, it will look something like this.
If you're a web developer and you're used to making responsive sites, you'll immediately recognize that it's not optimized for mobile.
You have the COPYRIGHT text, you know, the least important information, to the end user, taking up about 30% of the screen, and the main points about the company being almost illegible without zooming. Really bad.
Optimally, you'd of course specify a viewport tag and make the site 100% wide for a mobile screen. It's actually very easy to optimize a site for mobile.
Because of the proportions the site uses, it manages to look decent on an iPad without any further optimization.
Let's move on to desktop, the platform the site was intentended for...hm..
Looks pretty good under normal circumstances on a 1080p screen, doesn't it? Sure. So..since it does..let's just ignore all other possible situations, right? .......no.
Before I go into other resolutions and all that, there's one GLARING issue that needs to be mentioned. A billion dollar company, uses, in 2017, FLASH.
...and what do they use it for?
A banner with lame text effects that could easily be rewritten in an HTML5 friendly format. And yes, that is a lone W in the top right corner.
PLEASE guys, can we just, please let flash die? It's death is way overdue already..
With that out of the way, let's take a look at some other issues plaguing this site.
One thing that really bothers me, is when sites use really low res images, once again, assumed to be viewed at a high resolution display, as site elements, e.g. navigation menus. I immediately noticed this when I went on the site.
It looks SO bad and unprofessional, and these days, it could not be easier to import a custom font, or export these graphics as vector graphics..unless whoever created Valves font actually did it in pixels. shudders
Even some paragraph headers are baked into the page body background, literally expecting the site to be rendered at hardcoded sizes. Disastrous, if you ask me. Especially when it could just have been nice lovely vector text.
On the topic of hardcoding, the menu dropdowns only seem to be tested on the "target resolution" of the web designer(s). Take a look at what happens if you try to use it at 150% zoom!
I mean, what madman would ever zoom in on a website to be able to read the text more clearly, or have their computer connected to a TV where it's less legible and may even require zooming? .....quite many, actually. I zoom in on sites every day, and not just to find examples of bad web design..
So I'll wrap this first episode of Awful Websites up with what to me is the most absurd development choice about this site.
On the jobs page of the site, the same one that uses flash (could there be a connection? ;) ) for some bizarre reason, the HTML tag has the overflow-x property set to hidden. This means that anything that doesn't fit on the screen horizontally, will be completely disregarded, no scroll bar will appear to let you see what's off screen...which results in this:
Overflowing text, can simply not be accessed. There is absolutely no justifying this. The overflow-x property is completely irrelevant here. In fact, I'd argue that the one time it should be used, is when you ARE mobile optimizing your site, and just want to make absolutely sure that the user can not scroll the site horizontally (as they shouldn't, on a properly mobile optimized site) and a few very specific issues / situations.
That's all I have for today, but I'll definitely be doing more of these :)
Thanks for reading! <3