To choose which technique is right …

Which responsive images solution should you use? is a post from CSS-Tricks

]]> //AN_Xml: There are a bunch of techniques going around for dealing with responsive images lately. That is, solutions to help us serve the right image for the occasion (e.g. size of screen and bandwidth available). They all do things a bit differently. To keep track, Christopher Schmitt and I have created this spreadsheet of techniques.

//AN_Xml:

The spreadsheet has the data, but let's digest it through thinking about it through the lens of practical questions.

//AN_Xml:

//AN_Xml:

To choose which technique is right for you and your project these questions may help as a guide. Many of the questions may apply to your project, so you'll have to sort out which techniques fit what scenarios and find the overlap.

//AN_Xml:

Do I have legacy content?

//AN_Xml:

Which really means... do I have legacy content that is impractical to update? For instance, I have thousands of pages of content on CSS-Tricks and a writing staff of one.

//AN_Xml:

//AN_Xml:
Yeahhhh... I'm not going to go back and update every <img> on the site, so I need a technique that will allow me to leave those alone.
//AN_Xml:
//AN_Xml:

The only technique I know of that works with absolutely no markup changes is Adaptive Images. It works by routing requests for images through a PHP file which intelligently serves (and creates if need be) images of the appropriate size for the screen width.

//AN_Xml:

Another question to ask yourself is if you care about legacy content. Perhaps the vast majority of traffic to your site is for newer content in which you can make markup changes and thus take advantage of other techniques. If that's the case, read on to discover those other techniques.

//AN_Xml:

If you have a small project, a brand new project, or a project with legacy content that you are able go back and update, you are also able to choose a technique which does require special markup, so also read on.

//AN_Xml:

Do I care about special markup?

//AN_Xml:

This is really a sub-question of the above. Many of the techniques require you to use special HTML. For example, HiSRC has you put higher resolution images as data-attributes:

//AN_Xml:
<img src="200x100.png" data-1x="400x200.png" data-2x="800x400.png">
//AN_Xml:

I'd say this is a clean, valid, semantic technique, but it also means that you need these attributes on every <img> on your site, which may not be possible on sites with loads of legacy content.

//AN_Xml:

If you know that special markup (or specialized CSS) is not an option for you, really the only option is Adaptive Images. Even Sencha.IO requires prefixing the src attribute which may not be possible with legacy content.

//AN_Xml:

Do I care about semantics?

//AN_Xml:

Some responsive images techniques involve markup which isn't strictly semantic. Ultimately, there is only one way an image can be semantic. That is if the src of it points to a real image and it has alt text describing that image. Brad Frost sums it up nicely:

//AN_Xml:

@stowball Unfortunately its not that simple. A picture of a horse needs to be a picture of a horse or else its not a picture of a horse. :)

//AN_Xml:

— Brad Frost (@brad_frost) April 5, 2012

//AN_Xml:

l: Do Something //AN_Xml:</button> //AN_Xml:

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).

//AN_Xml:

The <button> element, by itself, can't do that. There have …

//AN_Xml: //AN_Xml:

When To Use The Button Element is a post from CSS-Tricks

]]> //AN_Xml: 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.

//AN_Xml:

//AN_Xml:

It looks like this:

//AN_Xml:
<button>
//AN_Xml:  Do Something
//AN_Xml:</button>
//AN_Xml:

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).

//AN_Xml:

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.

//AN_Xml:

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

//AN_Xml:

Button is a Form Element

//AN_Xml:

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

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

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

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

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

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

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

//AN_Xml:

Buttons can have content

//AN_Xml:

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:

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

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

//AN_Xml:

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.

//AN_Xml:

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.

//AN_Xml:

Let's consider: "if a button doesn’t have a meaningful href, it’s a <button>"

//AN_Xml:

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:

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

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.

//AN_Xml:

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.

//AN_Xml:

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.

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

But <button> feels better anyway

//AN_Xml:

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.

//AN_Xml:

Alright. Let's insert it with JavaScript then.

//AN_Xml:

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:

//AN_Xml:
// 1. Create the button
//AN_Xml:var button = document.createElement("button");
//AN_Xml:button.innerHTML = "Do Something";
//AN_Xml:
//AN_Xml:// 2. Append somewhere
//AN_Xml:var body = document.getElementsByTagName("body")[0];
//AN_Xml:body.appendChild(button);
//AN_Xml:
//AN_Xml:// 3. Add event handler
//AN_Xml:button.addEventListener ("click", function() {
//AN_Xml:  alert("did something");
//AN_Xml:});
//AN_Xml:

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

//AN_Xml:

When links make more sense

//AN_Xml:

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:

//AN_Xml: //AN_Xml:

If nothing makes sense, insert the button with JavaScript.

//AN_Xml:

Accessibility concerns

//AN_Xml:

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.

//AN_Xml:

You might be like, I got this!

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

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

//AN_Xml:

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.

//AN_Xml:

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

//AN_Xml:

Go forth and uhm, make clickable things correctly.

//AN_Xml:

//AN_Xml: //AN_Xml:

When To Use The Button Element is a post from CSS-Tricks

]]> //AN_Xml: http://css-tricks.com/use-button-element/feed/ //AN_Xml: 94 //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: