Tag Archives: webdesign

March 12, 2015
March 9, 2015

Why you should be excited about CSS shapes

CSS shapes is one of those properties that won’t totally break your layout if someone is viewing it on an unsupported browser. It just falls back onto the usual rectangular column most people are already used to anyway.

December 16, 2014

Parallax Scrolling: Attention Getter or Headache?

Although this article may seem to be a scathing denunciation of the usefulness of parallax scrolling, it’s not all bad news for parallax lovers. If you use parallax in moderation and stay within the bounds of these sophisticated optimization strategies, parallax scrolling actually has the potential to delight users, thus improving a Web site’s user experience.

Whilst not quite as scathing as my own thoughts on the matter, this article does bring up some good examples of the tradeoffs one invariably makes when employing parallax design. Unless there is a strong case to be made for using it, don’t use it.

November 28, 2014

Apple’s site for the new Retina iMac is quite slick. A good use of transitions and effects highlighting the product’s number one feature.

March 17, 2014

Parallax web design: the good, the bad, and the ugly

Parallax scrolling seems to be the new hotness in web design these days. Scratch that; it is the new hotness—have a look at Google Trends, for example.

So what does parallax web design actually mean? Well, it’s an umbrella term for sites in which some elements move slower than others (or not at all) when the user scrolls the page, giving an illusion of depth for 2D graphics. It’s a neat idea, first popularised by videogames in the 1980s.

Why would you want to use parallax design? Well, besides mouse clicking, scrolling is something every web user does hundreds, if not thousands of times per day. There is nothing wrong with making that action a little bit more appealing and visually interesting. For sites that rely on graphics as the primary content (as opposed to text), it’s a natural fit. For interactive brochures, infographics, zeitgeists et cetera, it adds visual flair and can really make content pop, so to speak.

However, parallax design should not be used everywhere. It isn’t possible, at least for now, to implement a parallax site using only CSS and HTML—you’ll need at least some JavaScript. By itself, this isn’t a big deal, but if you’re already running a resource-heavy site, adding more JavaScript only to add a depth effect is something you may wish to reconsider. The longer a web page takes to load, the higher the abandonment rate. It’s that simple. If your site chugs as it is, don’t even think about parallax.

So parallax design has its pros and its cons—what about the ugly stuff? Well, let’s start by stating the obvious. Even though we all use the scroll wheel on our mouses without thinking much about it, the vast majority of website visitors only ever look above the fold. By some accounts, only 20 per cent of users scroll past the initially viewable area. Thats a significant majority, and something that all web designers should take into account when creating even the most simple of sites. Put bluntly, people don’t want to scroll down on a page. Parallax sites, on the other hand, are intended to be scrolled so that users can appreciate the depth effects. Unfortunately, this has led to many websites breaking what is the golden rule of the web: content is always king. Instead of placing the most important content in pride of place above the fold, thereby enticing users to scroll down and consume more, content is deliberately spaced out and the vertical length arbitrarily increased so that parallax effects can be experienced by as many people as possible. That’s designing for the sake of designing, as opposed to designing for the purpose of enhancing the most important thing—the content.

Not all sites that incorporate parallax effects in their design do so poorly. There are numerous sites that use such effects whilst keeping content front and center where it belongs. I’m just worried that if everyone jumps on this design craze without giving it any thought, we’ll end up looking back on 2010s/2020s web design wondering what the hell we were thinking.

November 12, 2013