Optimization posts
How to optimize for legibility using text-rendering
The most frustrating aspect of web design for designers trained for print, is the persistent lack of typographic control.
Careful typographic choices are the hallmark of quality work and the lack of that quality online never ceases to be jarring for those of us that know what we’re looking for.
Fortunately, the level of control that we have is increasing all the time and support for more advanced typographic rendering is also increasing. Whilst it’s certainly not possible to deliver the kind...
The perils of A/B testing
There’s an expression in advertising that goes “I know that 80% of my advertising isn’t working. I just don’t know which 80%”. The same logic applies to all forms of design, including web design. If only we knew which part of our page content, layouts and workflows were not working as well as they should, wouldn’t that be amazing?
It would seem like a godsend to know what works when it comes to user experience design, to have confirmed in harsh quantifiable data which of two layouts, elements, or routes is the optimum and this is the promise of A/B testing. It is a powerful tool, but it is not a panacea and over-reliance on it can not only blunt your...
How to use CSS specificity
If you plan to use CSS on a regular basis you need to develop an understanding of what specificity is and how it is applied.
Other than floats and positions, specificity may be one of the hardest things to get used to, let alone master. The selectors you use in your CSS all have different weights and those are controlled by specificity. That’s why sometimes, when you apply a rule to an...
How to speed up your website load times
Do you want your website to load blazing fast? This article will teach you how to make your website load faster than you ever thought possible.
In order to understand why having a fast website is important, check out these statistics: the average smartphone user will leave a website if it does not load within 3 seconds; Google now considers page speed a major consideration for search engine rankings; 75% of internet users agreed that they would not return to a...
Optimize your JavaScript with RequireJS
RequireJS is an effective way to improve the speed and quality of your JavaScript code additionally making it a lot more readable and easier to maintain.
In this article I’ll introduce you to RequireJS and how you can begin using it. We will go through requiring files and defining a module and even touch on optimization.
In simple terms...
The harsh truth about HTML5's structural semantics (part 3)
In the first part of this series we looked at the failings that lead to the structural elements new to HTML5; in the second part of the series we looked in detail at the consequences of those failings; in this final part we’ll look for a way forward, and draw some conclusions about the current state of play.
This is not an abstract problem: people actually have to teach this stuff. The next generation of web designers and developers will be taught with HTML5 as a starting point. I feel sorry for whoever has to try and explain outlining and sectioning to the current and future crop of students. Perhaps they’ll wisely stick to the simple format we have that...
The harsh truth about HTML5's structural semantics (part 2)
In the first part of this series we covered the failings that lead to HTML5′s structural elements, in this second part we’ll look in detail at the consequences of those failings.
I’ve said several times that HTML5 introduces a new method of structuring a web page, and you’re probably wondering what that actually is. It’s right there in the spec, which introduces the concept of ‘sectioning content’: sectioning content is content that defines the scope of headings and footers. Each sectioning content element potentially has a heading and an outline.
The spec documents its approach to headings, sections, and outlines to make the concept clear. Well, clear to those who...
The harsh truth about HTML5's structural semantics (part 1)
HTML’s structural elements — article, section, nav and aside — are, at first glance, some of the easiest parts of the HTML5 specification to understand and implement. However, they’re actually some of the most poorly specified, poorly understood, and poorly implemented parts of HTML5.
Created arbitrarily; they attempt to introduce a whole new way of structuring web pages; they violate HTML’s own design principles; they harm accessibility for some users; and you shouldn’t use them.
Yes, I’m coming out guns-blazing against this specific part of HTML5, but please don’t assume I’m ‘anti-HTML5’. I’ve written a book about HTML5, I love the open web, I love good web standards, and I love the fact that after working through a decade...
HTML5 and SEO
Since the advent of the first web search engines, designers and developers have struggled with issues of how to increase their placement on a search engine results page.
With the major search engines (Google, Bing, etc.) unwilling to reveal their ranking algorithms — protecting them from “black hat” search engine optimizers attempting to game the system — “white hat” search engine experts must play a constant guessing game to determine which tactics will be most effective.
The continuing development of technologies, from HTML...