CSS/UX Blog

My space for posting about CSS tricks or contraptions as well as any User Experience (UX) insight that might come along. Please, don’t hesitate to discuss :-)


YouTube’s New Design: It’s Not Centered

YouTube’s newest redesign of Dec 2012 brings a ton of changes in both function and layout in big ways–and naturally most of its users are up in arms about it. Most people chalk up grumblings after similar redesigns to growing pains, but sometimes there is more to these complaints.

This is probably one of those times.

Users have many legitimate gripes with the new design such as the width of the new side bar forcing most pieces of content to elide, or the changes to how subscription content is displayed. However, in my opinion the most senseless change is the switch from a centered page design to a left-aligned layout.

YouTube, what were you thinking?

Continue reading »

A Message From Facebook: It Looks Like You Were Going Too Fast And Misusing This Feature, So Your IP Address Has Been Blocked

In classic facebook fashion, it seems that a new mechanism was uncovered in the last few hours at the time of this writing that wasn’t quite fully baked. It appears to be some sort of traffic monitoring system to help stop bots from spamming the system, but the end result so far is a TON of users getting an unhelpful error on the top of their page, reading

“It looks like users on your current IP address were going too fast and misusing this feature, so this IP been blocked from it for up to two days”

Sweet Facebook, glad to hear from you too. Not only do I have no idea what you’re talking about, I also don’t have any idea what to do. Yet another example of a seemingly innocuous error message from a developer’s point of view that is actually very unhelpful–and worse, disturbing–when reading it as a user.

Now if you’re hitting this page from Google and just wondering what to do, I won’t bore you; here’s the simple solution:

  1. Hit Start
  2. Type “cmd” and hit enter. A command prompt will open.
  3. Type in    ipconfig /release    and hit enter
  4. Type in    ipconfig /renew      and hit enter
  5. Enjoy your Facebook

 

Solution aside, let’s look at how we could have made this error message better. First, note the opening informal language: ‘it looks like’. I actually see this as a good thing in that it makes the interaction more casual and less like a brush with authority–good. Moving on, we get to ‘your current IP address’, and here’s the first bit that could really confuse users. What constitutes an IP address? I would conservatively bet that ~30% of facebook’s users have no idea what an IP address is, and even then the remaining 70% probably wouldn’t know if the IP address being referred to is literally their own computer’s IP or if it’s their access-point/router’s IP (which nearly EVERYONE is behind nowadays). Some guidance on this bit would really help anyone troubleshooting the problem without Google.

Continuing, we get to ‘misusing this feature’. What feature was I using, exactly? Heck, a user logs in and is immediately using 5-10 features depending on how you cut it. And then we get to the consequences for your naughty ways: you could be blocked from it (the said feature?) for up to two days. What a great way to send your users into panic mode! Such a great error message.

Now, given the mistakes, let’s take a shot at how this should read:

“It looks like users on your computer’s current IP address were potentially misusing the <insert feature here> by making too many requests. If you have any issues with the <said feature> in the future, please see this page for support.”

We basically just give the users the complete picture, remove any blame from their part, and avoid the consequences all together by giving them a solution should they come into effect.

Now, for fun I visited a Facebook Community Forum page with nearly a hundred comments from users all within about an hour of my viewing. Obviously there was a lot of complaining going on, but the comments getting the most votes by users were those jokingly criticizing the new ‘speed limit’, bashing the grammar of  the message, or even calling it out as a threat (which is completely justified in my opinion).

As you can see, it looks like this could get some negative PR should this error show up in a large number of users’ newsfeeds–and it could all simply be avoided by some good UX.

Not-So-Faux Columns

Creating a multi-column layout is often the first of many unsolveable puzzles that a novice web developer runs headlong into. It should be an easy thing to do, right? After all, two-column layouts are a standard in print, and you see them everywhere online. Alas, it’s not easy at all… in fact, it’s nearly impossible to make this layout without faking it. Nearly.

The Problem

In css, controlling height is often a big issue. For instance, making a Sticky Footer is another extremely common frustration dealing with height that should be far easier than it is. Interestingly, we often don’t have any issues controlling widths. So, why? The issue lies in the fact that, by default, html elements don’t expand to fit the height of a container, while they do with width*.

So, let’s say you want to have a website with two columns; one column for navigation, the other for content. In most cases, the content column is going to be longer than the navigation column, and it’s going to stretch the website container along with it. Unfortunately this will leave the navigation column all by its lonesome. If the navigation column has no background (or border!), there’s no problem–but if it does, your website is going to look a little lacking.

*Ok, not every element expands to fill width. The main point here is that no element, nor attribute, expands to fill height.

The Solution So Far

To solve this, the standard implementation that web developers have been using is called Faux Columns. The gist of the fake is pretty simple: use a repeatable background on the container to style the column that isn’t filling to the bottom. Because the container will expand to where the height-challenged column will not, this works.

But it’s a fake! And when there’s a fake, there’s a problem. For starters, the styling isn’t actually being applied to what it should be, and that rubs me the wrong way (flags about this being harder to understand, harder to maintain, and harder to change fly up in my head). A more tangible issue is that of borders, for you cannot apply a border to the short column and thus you are limited to border on the long one. Furthermore, the complexity of the stunt becomes unmanageable with 3+ columns in my opinion, as it requires the styling of two columns to be dependent on the container–or, of course, more markup.

The Better Solution

The better solution lies in understanding what I see as the two layers of css design and what attributes tweak them. The first layer is the Rendering layer, which is the layer that determines what the browser will render. Attributes such as background, padding, border, color, opacity, and most others deal with it. The second layer is the Layout layer, which is the layer that tells the browser where the elements are and how to react, and is mostly seen as the page flow. Attributes such as position, margin, float, and display tweak it. The problem with Faux Columns is that it tricks the rendering layer, but doesn’t trick the layout layer. But we will–in a pretty basic way, too:

To trick the rendering layer, we’ll use padding. To trick the layout layer, we’ll use margin.

Wait, what? Use two basic layout attributes to fix a complicated problem?! Yea, it seems fitting, doesn’t it? Here’s the code and a jsFiddle:

The HTML:

<div class="container">
	<div class="left">
		Left Text. Left Text. Left Text.
	</div>
	<div class="right">
		Right Text. Right Text. Right Text. Right Text.
	</div>
</div>

The CSS:

.container {
	position: relative;
	overflow: hidden;
}
.left, .right {
	float: left;
	padding-bottom: 9999px;
	margin-bottom: -9999px;
	width: 200px;
	background: white;
}
.right {
	background: skyblue;
}

Result (editable):

Left Text. Left Text. Left Text.
Right Text. Right Text. Right Text. Right Text.

You may be thinking that a solution using basic attributes and a pretty straight-forward DOM would have been thought up sooner, and you’d be right. My original search for something better than Faux Columns didn’t yield anything and no one in the office knew of anything better despite the many years of experience I was pooling from, so I spent a few hours coming up with this. Of course, once I knew specifically what to look and scan for, I found my solution already written up. One True Layout has already solved the issue with the same technique, and of course CSS-Tricks’ Chris Coyier includes that solution in his toolbox towards the bottom of the article on the issue.

Problems

The most glaring problem is that we’ve just set a static height on something that isn’t static. While you could extend the padding and margin to extremely high numbers, I would think there would be some performance ramifications. This alone makes me say that this solution isn’t anywhere near perfect, and is in fact a little ‘meh’. Other, more specific problems have been found by One True Layout such as printing in IE, Select+Scroll in extremely old gecko browsers, and linking to anchors. My uses of the technique aren’t complicated by these issues, so I haven’t tested if my solution is also plagued by these problems. If you’d like to test, please tell me what you find :-)

So, overall the solution is a little dodgy, almost like a bait and switch actually. But it is so much more real than the Faux Columns technique, and it isn’t trying to pull a fast one on you.

Enjoy!

Stop WordPress From Removing HTML

Anyone who has worked with HTML in WordPress knows that wordpress has a nasty habit of filtering out html tags/elements that you have specifically placed in the HTML editor. Many claim this is wanted behavior, but we all know this behavior is about the most annoying thing about WordPress and other blogging systems. So let’s fix that.

While there are many ways to stop WordPress from filtering html, I believe the most unobtrusive way to achieve this is to define custom tags that wordpress will pretty much leave alone. Originally I was modifying core WordPress files, but after a little digging I found out how to hook on to variables that have been generated in the core, and add to them. This way you aren’t messing with important things (too much), and your changes will persist through WordPress updates!

Without further ado, simply add this function to your functions.php file in your theme’s directory, changing <<yourtag>> appropriately:

function my_valid_elements($initArray) {
	$initArray['extended_valid_elements'] .= ',<<yourtag>>[*],<<yourtag2>>[*]';
	return $initArray;
}
add_filter('tiny_mce_before_init', 'my_valid_elements');

After that is done, the visual editor will no longer filter out your innocent html tags.

Notes:

  • WordPress will still change all attributes of your html to lower case. If you have a plugin that requires case-sensitive attributes, you’re still out of luck :-(
  • WordPress will still modify certain tags. For instance, I couldn’t figure out how to stop it from converting <image> to <img attr=”"> despite an hour of searching through code
  • Special thanks to Engfer at www.engfers.com, and many others who have posted similar code!

Website Design

I work at a tech company called Apptio, who delivers a complicated suite of business software to IT departments of large companies. Luckily for me, this software is served entirely through the web in HTML, CSS, and Javascript, so I can use CSS to style and control it. I enjoy my work, but because we support browsers as old as IE7, have a complex codebase, and are generating HTML instead of writing it, I can only use a fraction of the technology that the web offers.

And everything is different with this website.

Continue reading »

Website Comments

Over the last two days I’ve been finding my way around the wordpress menus and taking css styling one step at a time. Yesterday, I took on the comments section. Initially it didn’t seem very daunting, but anyone who has styled an html form would have told me otherwise. After a few minutes of firebug, I quickly wised up and put some extra thought into it.

Continue reading »