Encode your HTML attribute values as well as other content

I recently wrote the following bit of code:

1
<meta name="author" content="willem & øen" />

Which got me thinking, should I encode these special characters? Even though they are inside the attribute values? It appears that this is a fairly common issue but I found it difficult to find a definitive answer so I thought I would write about it here. After a bit of Googling around, I found the answer to be yes you should always encode special characters in HTML content.

Taking that into consideration, the code above should actually be written as:

1
<meta name="author" content="willem &amp; &oslash;en" />

Any special characters in between any tags should also be encoded like so:

1
<div>H&eacute;ll&ouml;</div>

Also, something that I regularly forget is that any ampersands in URLs also need to be encoded so if you are linking to ?query=string&second=value then you should instead write ?query=string&amp;second=value

Pro tip

If you use Sublime Text, it can automatically encode html special characters:

  • Select the text you want to encode
  • Press CMD + Shift + P (or CTRL + Shift + P on Windows)
  • Type in encode and it will filter the options available
  • Select “HTML: Encode Special Characters”

Sources

You should follow me on twitter here.

Website Case Study

The willem & øen website displayed on a laptop and smart phoneThis post is about the technology behind our recently relaunched portfolio site and blog. The website works across many different devices and screen sizes. It has a very small footprint of less than 1MB for the entire site. I developed the website and wanted a chance to explain some of the aspects of the site that are working behind the scenes.

SASS/Compass

SASS or Syntactically Awesome Stylesheets is an extension of CSS that enables developers to write much cleaner CSS and make use of things such as variables and calculations which CSS does not support. Compass is a framework built on top of SASS which adds even more features such as the ability to automatically embed data-uri images and handle a lot of CSS3 vendor prefixing. For example, if you want to add rounded corners to a container, in vanilla CSS to get this working you would have to write:

1
2
3
4
5
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;

Whereas, with compass, you simply have to write:

1
@include border-radius(15px);

This short expression is then compiled in to the longer code above. It makes developing with CSS much more streamlined and simple.

CodeKit

As CodeKit says on their website, “It’s like steroids for web developers”. CodeKit compiles things like SASS and Compass, it live reloads the browser window so you can see changes as you make them, it concatenates and minifies Javascript and it can losslessly optimise all images that belong to a website. It’s a great piece of software and greatly improves my workflow especially when working with Compass and Javascript. Check out their website to learn more. CodeKit was used during the site development to compile SCSS files and to minify Javascript.

History.js

Benjamin Lupton’s History.js is a Javascript plugin that aims to gracefully support the new HTML5 History/State APIs in all browsers. This basically means that using javascript, you can change the entire URL of the page you are on without using things like Hashbangs. This means Javascript can be used to create nice transitions between pages but if the page is refreshed or the back button is used, the transitions behave like a traditional web page does. It also has some SEO advantages because each page, such as /about or /portfolio, does actually reflect a static page. So when Google sees the /about URL and tries to index it, it gets served a static HTML file which contains what the Javascript would eventually transition to.

Other plugins

A number of other very useful Javascript plugins have been used on the site such as:

And for IE (of course) some extras:

Blog

The blog uses a custom child theme of Twenty Twelve. The logo has been replaced with a version made up of over 9000 particles that form the text of the logo. When you mouse over the logo the particles are repelled away from the cursor in a circle. This particle logo is inspired by the techniques used in Grumpy Buffalo’s “Text Particles” Chrome Experiment.

Hopefully this post will give you some insight into the development of our new site. If you have any questions about the site’s development then feel free to email me at [email protected]

Also, you should follow me on twitter here.

willem & øen is a creative agency that was founded in London a little over a year ago. Learn more.