Friday, January 31, 2014

15 Powerful Social Media Tips

Social media is ever-changing and ever-growing. Of course, this is true of the internet in general, but even more so when talking about social media. Facebook, Google+, Twitter and countless others are constantly evolving and changing based on their users' reading, browsing and posting habits. Of course, this is good news. It does mean that social media will continue to be relevant in the years to come.

15 Powerful Social Media Tips

Friday, January 31, 2014

Scattered Polaroids Gallery

A flat-style Polaroid gallery where the items are scattered randomly in a container. When a specific item is selected, it will move to the middle while the other Polaroids will make space for it by moving to the sides. Optionally, an item can have a backface which will be shown by flipping the Polaroid when clicking on the current navigation dot again.

Scattered Polaroids Gallery

Monday, January 27, 2014

5 UX Tips for Designing More Usable Registration Forms

The web is crowded with UI solutions that we've inherited from the past, but are still applied because "everybody else does". It is time to reconsider all of them, but especially registration forms. When designing registration forms, keep in mind that they are for the user and the smoother the registration process, the more delighted your customers will be.

Here are some tips to make the most of registration forms.

Monday, January 27, 2014

Validation and Exception Handling: From the UI to the Backend

Sooner or later in your programming career you will be faced with the dilemma of validation and exception handling. This was the case with me and my team also. A couple or so years ago we reached a point when we had to take architectural actions to accommodate all the exceptional cases our quite large software project needed to handle. Below is a list of practices we came to value and apply when it comes to validation and exception handling.

Friday, January 24, 2014

CSS animation-fill-mode

We're always super excited to get into CSS animations because, quite frankly, they're incredibly awesome. One overlooked animation property, however, is the animation-fill-mode property. This CSS property sets the state of the end animation when the animation is not running. Here's a quick example:

Friday, January 24, 2014

Prevent common problems when writing CSS from scratch

Many times when I started writing the classes of a brand new site, I had two problems that bothered me very much: keeping the footer always at the bottom of the page - even if the page has few content - and using padding values in divs without influencing the overall width of the div.

Then I decided to always put the same basic classes on the css file, no matter what the layout would look like:

Friday, January 17, 2014

How to Make WordPress Sites Load 72.7% Faster

How to Make WordPress Sites Load 72.7% Faster

You want to know the secret to a faster WordPress website?

You and everyone else.

Wednesday, January 15, 2014

SVG Hover Effect

Tuesday, January 14, 2014

When To Use The Button Element

When To Use The Button Element
You use it when, uhm, you want a button on your page that users can click, right? Well, unfortunately it's a bit more complicated than that. It's not too bad though, let's figure it out.

It looks like this:

<button>
  Do Something
</button>

What's the most common result of clicking something on a website? Moving to a new URL, like you would clicking a link (an <a href="/example/"></a>) element).

The <button> element, by itself, can't do that. There have been various conversations about allowing "href anywhere" over the years, but nothing has came of it.

Clicking on a button does do something though, when used in its natural environment...

Button is a Form Element

Web forms have submit buttons. You might think of that like this:

<form action="/" method="post">
  <input type="submit" value="Submit">
</form>

A <button> element in a <form>, by default, behaves identically to that submit input above.

<form action="/" method="post">
  <button>Submit</button>
</form>

However gross the UX, forms can have reset buttons as well. You can duplicate that behavior by changing the default submit type to reset.

<form action="/" method="post">
  <button type="reset">Reset</button>
</form>

Clicking that button will clear all the other inputs (and textareas) with the parent <form>.

Buttons can have content

The primary reason for using a <button> is that it has both and opening and closing (</button>) tag. Which means there can be stuff inside. A common use case would be something like:

<button>
  <img src="tiny_birthday_cake.png" alt="">
  Submit
</button>

While an input can be <input type="image">, this mixed content would be hard to pull off.

As far as I can tell, there is no limit to what kind of content you can put in a button, so feel free to get real weird with it. Pseudo elements can be used too.

Let's leave styling <button>s for another day, but different browsers generally have a special style they apply to buttons. You'll want to either leave that alone so the default comes through, or remove it thoroughly so your new styling can be consistent across browsers.

Let's consider: "if a button doesn't have a meaningful href, it's a <button>"
I said recently that I enjoyed that sentiment. That's what kicked off this article for me. At the time, I was thinking of how I enjoyed the semantics of it. As in:

<a href="#0">
  I'm kinda sick of doing this for buttons.
</a>

There is no meaningful href there. The 0 is just there so it doesn't jump the page, because ID's can't start with a number.

Chances are, HTML like the above means: I'm going to make clicking that do something with JavaScript. Somehow that feels better than a <div> whatever, because you get the cursor change and whatever else default styles.

If you don't like those meaningless href's, a <button> can seem like a nice alternative. But unfortunately outside of the context of a <form>, a <button> is equally meaningless.

<button>
  Outside of a <form>, I'm just as useless.
</button>

But <button> feels better anyway

Even if a <button> doesn't do anything outside of a form without the help of JavaScript, it still feels better for things you can click that do stuff other than change pages. A bogus href link definitely doesn't feel right.

Alright. Let's insert it with JavaScript then

That's probably the best solution. If JavaScript is required for the clickable-thing to do anything at all, it might as well not even be there at all unless JavaScript runs. We can do:

// 1. Create the button
var button = document.createElement("button");
button.innerHTML = "Do Something";

// 2. Append somewhere
var body = document.getElementsByTagName("body")[0];
body.appendChild(button);

// 3. Add event handler
button.addEventListener ("click", function() {
  alert("did something");
});

You could easily have "button adding" be a part of your JavaScript workflow.

When links make more sense

If there is any kind of href you could put on that link that makes sense, by all means, use an anchor. Even if you override that behavior with JavaScript. That's progressive enhancement at it's finest. For instance:

  • A search button normally triggers a type-ahead ajax-search thingy - but the href could just point to a /search/ page.
  • A publish button triggers the the next stage of publishing something a user built - but the href could just point to a /publish/ page.
  • A thumbnail button opens a lightbox with a larger version - but the href could just point to the URL of that larger version.

If nothing makes sense, insert the button with JavaScript.

Accessibility concerns

Let's say using an anchor link does make sense. After you give yourself a nice little back-pat for being good at progressive enhancement, there is accessibility to consider as well.

You might be like, I got this!

<a href="#meaningful" class="button" role="button">
  I'm good
</a>

But you aren't out of the woods yet. MDN covers it well:

Warning: Be careful when marking up links with the button role. Buttons are expected to be triggered using the Space key, while links are expected to be triggered through the Enter key. In other words, when links are used to behave like buttons, adding role="button" alone is not sufficient. It will also be necessary to add a key event handler that listens for the Space key in order to be consistent with native buttons.

Get that? You activate links and buttons with different keys, so consider that.

Go forth and uhm, make clickable things correctly.

Sunday, January 12, 2014

Simple Responsive Grid

Simple Responsive Grid

A simple responsive grid layout with minimal markup.

<div>Simple Responsive Grid</div>
  <span class="grid">
    <div class="unit-2">Simple Responsive Grid</div>
    <div class="unit-2">Simple Responsive Grid</div>
        
    <div class="unit-3">Simple Responsive Grid</div>
    <div class="unit-3">Simple Responsive Grid</div>
    <div class="unit-3">Simple Responsive Grid</div>
        
    <div class="unit-4">Simple Responsive Grid</div>
    <div class="unit-4">Simple Responsive Grid</div>
    <div class="unit-4">Simple Responsive Grid</div>
    <div class="unit-4">Simple Responsive Grid</div>
  </span>
    
<img src="http://placehold.it/400x300">
  <span class="grid">
    <img class="unit-2" src="http://placehold.it/400x300">
    <img class="unit-2" src="http://placehold.it/400x300">
        
    <img class="unit-3" src="http://placehold.it/400x300">
    <img class="unit-3" src="http://placehold.it/400x300">
    <img class="unit-3" src="http://placehold.it/400x300">
        
    <img class="unit-4" src="http://placehold.it/400x300">
    <img class="unit-4" src="http://placehold.it/400x300">
    <img class="unit-4" src="http://placehold.it/400x300">
    <img class="unit-4" src="http://placehold.it/400x300">
  </span>

div {
    font-family: monospace;
    text-align: center;
}

div, img {
    width: 100%;
    font-size: 80%;
    margin-bottom: 10px;
    color: white;
    background-color: black; /* optional border color */
    padding: 10px; /* optional border width */
    box-sizing: border-box;
}

.grid {
    display: block;
    margin-left: -10px;
}

.unit-2, .unit-3, .unit-4 {
    float: left;
    border-left: 10px solid transparent;
    box-sizing: border-box;
    background-clip: padding-box;
}

.unit-2 { width: 50%; }
.unit-3 { width: 33.3%; }
.unit-4 { width: 25%; }



via CSS Deck by