January 2013 archive

Don’t hate your users

If you want to enable your users to do something, such as create an account on your system, DO NOT MAKE IT IMPOSSIBLY HARD.

Case in point:

This image will make you cry

Go ahead and register, I dare you

If algebra is too hard, just refresh and you’ll see something else.

Another scary image

I laugh at your feeble Calculus skills!

Woah, better refresh.

You can't escape the Maths

Make your time

You know what this does? It not only keeps out any bots, but turns a normal human into something else:

rageface

Apoplectic: overcome with anger; extremely indignant.

With a zillion other websites out there, are you sure yours is compelling enough or contains such rare information that people will jump the gorge to get to it?

https://www.youtube-nocookie.com/embed/P7vte1epVpE?rel=0

 

How to ask for help the wrong way

When submitting  bug reports, it is a good idea to

A room full of computers all showing the BSOD

  1. Realize that you’re asking for help from people who (usually) have day jobs, and
  2. Expend at least some amount of effort to show you’re not expecting someone else to do all the work.

With that in mind, let me introduce to you the Best Bug Report Comment, Ever

First the bug report:

[snip]

I don’t have the exact errors to post because I deleted my compile log, but they are the same errors you get if you don’t have the bzip2 development libraries installed, which of course I do in /www

[snip]

Then someone helpful asks for more information.

Please recompile so that you can tell us te exact errors.

Derick

And then, GOLD:

The php developer who added/maintains bzip2 support will know what I am talking about. I am not going to compile when I know this! It would be a waste of my time.


Wow.

Now, not to worry; a few minutes later the submitter saw the error of his ways, compiled his code, posted the exact error message and got help.

Learning how to ask questions is a skill. Mastering this skill can only help, because everyone (even the Super-cool techno guru) has to ask for help at some point, so why not be as effective as possible?

Until I find another one. That place is GOLD!

Enhanced by Zemanta

Decoupling presentation from content

Box model in CSS

Box model in CSS (credit: Wikipedia)

I recently ran across the anti-pattern of what I see as a common problem amongst designers and developers: coupled presentation and content. I’ve found that decoupling the presentation from the content makes things much easier to write, maintain and expand.

Here’s a simple example:

HTML

<section>
    <div class="margin-top-10">Lorem Ipsum</div>
</section>

CSS

.margin-top-10 { margin-top: 10px };
.margin-top-20 { margin-top: 20px };
(etc)

Take a look at what is going on here: we’re adding a 10px margin to the top of the div. DON’T DO THIS. You want your class names to be contextual, not descriptive of the style.


Rule of thumb

To change the layout, you should only have to edit the CSS, not the HTML.

Here’s where our anti-pattern falls down and will cause grief.

  1. You decide to adjust the positioning of the section. You can:
    • Edit the CSS, changing the class’s margin value and breaking every other element that uses that class.
    • Edit the HTML create a new class, then edit its CSS class definition. If you have to experiment with different margin values, you’ll need a LOT of classes. “Will 14px work or 15px? What about .25em? Argh!”
  2. You can’t have too many attributes in each class, because they will have unintended consequences for the other elements that are using them. Add a red border to one class because you need a border for a specific element, now you have red borders on ALL the elements that share that class. So, you’ll have to have many single- (or few-) attribute values, and include all of the necessary ones on the required HTML elements.
  3. The violent psychopath maintenance programmer (who knows where you live) will kill you in your sleep. You have made her job insanely hard by turning this:
<div class="margin5 blueborder mediumwidth floatingleft" ...

into this

<div style="margin:5px;border:3px blue outset;float:left;width:75%" ...

for no good reason.

The Cure

Think about the element in terms of content or a functional space. What is it and what does it do? In our example above, let’s assume it is the lede section of an article. Then we would do:

HTML

<section>
    <div class="lede">Lorem Ipsum</div>
</section>

CSS

.lede { 
  margin-top: 10px;
  border-bottom: 2px #9fe2f9 outset;
  float: right;
  position: relative;
  width: ...
};

By decoupling the content (div) from the presentation (style-dependent class), we are free  to adjust the style of that element by making whatever changes to the CSS and leaving the HTML alone.

“But,” you shriek, “I have common elements for everything! Rounded corners! Gradients! (except IE…) Et cetera!”

 

For this, we will turn to our trusty companions Less and/or Sass in a future post.

SASS: Style w/ Attitude

SASS: Style w/ Attitude

Enhanced by Zemanta