Nathan Leigh Davis Just another WordPress site Sun, 12 Feb 2012 14:29:19 +0000 en hourly 1 Don’t mess with browser vendor prefixes! Sun, 12 Feb 2012 12:05:57 +0000 nathanleigh Using vendor prefixes has become an essential part of modern web development. Prefixes are incredibly useful, as they allow us to use properties that aren’t yet implemented consistently across various browsers. However the latest controversy, in which Mozilla and others have sought consent from the W3C CSS working group to support some webkit-prefixed properties, threatens to undermine that.

Basically the other browser vendors are annoyed that “Webkit’s monopoly on mobile” is causing developers to only use webkit-prefixed properties and to disregard those of other browser vendors. Their proposed solution is to make webkit-prefixes part of the specification. Huh?

Before continuing I should say that I love vendor prefixes for both CSS and JavaScript. While I understand the argument against prefixes, I think they have become an integral part of web development. They are one of the reasons why browsers and web standards are evolving so quickly, after being stagnant for so long. Let’s be honest about this – Flash may be dead, but it’s still more advanced than web standards, which take so long to evolve it borders on ridiculous.

However the idea that some vendor prefixes could become an official part of the specification is ridiculous and Mozilla are fools for advocating that they should. Imagine a scenario where webkit-prefixed CSS and JavaScript code is supported by non-webkit browsers, but doesn’t work as intended? How many developers would trust Microsoft not to get this horribly wrong?

Perhaps what is most frustrating is that developers (you and I) are being blamed for causing the issue. Mozilla and others are asserting that developers are not writing code for their browsers and admittedly there’s probably a fair few of few of us who aren’t. That isn’t our fault though. It’s the fault of the other browser makers who haven’t adequately evangelised their product. Webkit makes us excited about bleeding edge CSS and JavaScript in a way the Opera, Microsoft and Mozilla don’t.

The other browser makers need to get creative! Find people and organisations to evangelise your product. Publish exciting platform previews. Provide developer tools that automatically create compatible code for webkit-prefixed properties. Do something! Just don’t mess with the spec!

Additional reading

]]> 0
Another blog redesign Sat, 28 Jan 2012 15:08:01 +0000 nathanleigh Yeah. That’s right. I’ve redesigned my blog again. I eluded to this in a previous post about my plans for 2012, but decided to just go ahead and do it. My irritation with the previous design reached its climax a couple of weeks ago and despite the fact I’m incredibly busy I’ve been working on it whenever I can find a few spare hours.

The previous design was nice and I got a lot of positive feedback about it, but I always felt it was a little too conventional. A little too cluttered. A little too boring.

It was also a little too confusing. While I get a fair amount of traffic, it seemed very few people had been reading my journal posts. The cause of this was the way in which I had previously partitioned articles and journal entries from another. Now posts appear consecutively, irregardless of whether they’re a full length articles or short journal entries. This change also means that journal entries may now appear on the homepage as well.

I’ve also removed the archive pages and simply opted to place an archive at the very end of each post. This is an approach I’ve observed on Andy Rutledge’s personal blog and I feel that it makes older posts a lot more accessible.

Removing the archive pages led me to the conclusion that I didn’t need traditional navigation menus either. I’m sure some of you will be cringing, but I honestly believe that in this particular context the change makes a lot of sense.

The actual aesthetic of the site has been simplified too, but the use of large headings and a neat scrolling effect prevent the layout from becoming too generic. Unfortunately though the scrolling effect doesn’t work on touch devices, due to the way they handle JavaScript scroll events. Being a believer in progressive enhancement though I’ve simply elected to provide an adequate fallback.

Most importantly the final design is a better reflection of my approach to design and front-end development. I think it’s a nice intersection between minimalism, experimentation, progressive enhancement and responsive design.

]]> 0
Debunking the fold Thu, 19 Jan 2012 14:55:53 +0000 nathanleigh I think all web design professionals have felt the pain that accompanies one of the industry’s oldest and most enduring myths concerning usability: the fold. Most of us have presented a design that’s gorgeous only to have someone in the corner of the room worriedly ask if we’ve considered the fold.

Most designers realise that the theory surrounding this design standard is flawed, so we’ll try to argue against it. We’ll explain that the 600px convention is an arbitrary standard from a time when everyone had a 1024x768px screen. We’ll explain that users are accustomed to the conventions of the web and will realise that more content lies beyond the fold.

Inevitably though there will be some smart arse present who cites how many clicks occurred above the fold in an existing site. Defeated by the use of statistics and flawed logic we’ll concede and admit defeat. The only thing left to do is to attempt to cram as much as we can into the top of the page. We know of course that the result will be a generic and cluttered vanilla design.

Given the implications of the myth it’s surprising the web design community still hasn’t been able to stamp it out. However like all stubborn design conventions the fold has been around for a long time and has many advocates and a wealth of literature supporting it. The only way to truly dispel this myth is to understand both its history and self-affirming nature…

What is the fold?

The concept of the fold is as old as the discipline of web design itself, but strangely is a convention burrowed from the newspaper industry. In publishing the term refers to considering the way in which a newspaper is folded in half, implying that the most interesting content should be placed on the top half of the front-page to lure readers.

However in the context of web design the fold refers to the point at which users will need to scroll to view additional content. Given the plethora of screen sizes, devices and browsers such a measurement would seem impossible to ascertain, let alone standardise across the entire industry. Despite this though we’ve arrived at a standard depth of 600px.

A legacy of a time now passed

The standardised depth of 600px reflects how old this convention is. Back in the day designing for particular screen sizes was easy. Users either had a screen with a standard resolution of 800x600px or 1024x768px and either used Internet Explorer or Netscape. Therefore designers could accurately predict where the fold would fall. Following the demise of 800x600px resolutions the industry was able to arrive at the fairly safe convention of 600px.

Since then we’ve seen a massive array of screen resolutions emerge and screens that are limited to 768px in height are now a minority. However the 600px rule of thumb endures. For the vast majority of desktop users though the point at which fold falls is greater than 600px, demonstrating how ambiguous the fold truly is.

Usability and the perils of scrolling

The fold is also a convention born from the naivety of early users. In the nineties the idea of a web page was still something of an abstract concept for a lot of people. Many developers and designers working within this period worried that users would not intuitively realise that they could scroll pages to see more content. Especially if content was arranged in such a way that it wasn’t obvious that more lay below the drop.

Enter the cut-off look

The cut-off look was a solution that many designers arrived at to resolve this problem. As the name suggests it involved designing layouts so that content was cutoff by the fold, providing a visual cue to users that scrolling was necessary to view more of the page. An article written in 2006 by Jared Spool about utilising the cut-off look indicates how widespread this approach became. However the approach itself is flawed, even if you ignore the ambiguity of the fold itself.

The discipline of industrial design has a great concept know as affordances. An affordance is a design element that indicates how an object should be used. In the context of web design the scroll bar is an affordance that indicates the depth of a web page relative to the viewport and whether there is more content below the drop. Therefore the cut-off look was always redundant, because the browser itself provides an adequate afforadance for users.

A self-confirming practice

By this point though the mold for standardised web design had already been cast and would allow the myth of the fold to endure. Since the birth of the industry we’ve been obsessed with placing content above the fold and unsurprisingly analytics show that the majority of clicks occur above fold as a result. The fold is a self-affirming myth! A positive feedback loop we cannot escape from!

Therefore the fold endures as far to few of us question the statistics that we gather from the sites we create. The industry is far to reliant on quantitative data to determine best practice, leading to flawed design conventions. However if you take the time to observe how users interact with web pages you’ll quickly realise a simple truth…

Left to right. Top to bottom

Advocates of the fold would have you believe that when a user lands on a web page they quickly assess all the content above the drop and determine what to click on based on the options they can initially see. However this belief assumes that users are rational creatures, who weigh up all their options before making a decision.

Users aren’t rational creatures though. They land on a web page and scan from left-to-right, top-to-bottom, looking for something that is either of interest or will help them achieve a specific goal. Therefore they’ll click on the first thing that’s either interesting or relevant. They don’t continue to scan and weigh up their options as many would believe.

Therefore content hierarchy and organisation is key, not half-boiled conventions such as the fold. Users will scroll and do scroll if they cannot see anything that they regard worthy of clicking on. However because so many of us cram so much content above the drop, the way in which users interact with these layouts mistakenly confirms the myth of the fold.

Information overload

Another falsehood concerning the fold is that we have three seconds to convince a user to stay on a page. Therefore marketing managers encourage designers to cram as much as possible above the fold.

However this overwhelms users with options and requires more effort to scan. The result is information overload! Such layouts are complex and hard-to-use. Contrary to popular belief though users are hardy creatures. They’ll persevere with your 11px type, complex navigation and cluttered layout. They just won’t like it… Or your brand.

Moving forward

Because of the constraints that considering the fold imposes a lot of web pages are sadly very generic. Vanilla design is the prevailing standard in our industry and all too often it occurs from rigorous adherence to conventions such as considering the fold.

Far too few of us question such conventions and pander to flawed data and the wishes of clients. Our industry has become one where the intuition of designer’s is spurned in favour of design by committee and analytics. Too few designers take risks and produce bold and unique websites. I often wonder what design masters such as Paul Rand, whose self-belief was legendary, would make of our industry.

While it’s easier to conform to standards, even if we intuitively realise that they’re wrong, we need to question conventions such as the fold. We need to passionately argue against them and educate our clients about such follies.

Great designers are marked by an ability to question conventions and shirk them if they believe that they’re flawed. We owe it to ourselves, our clients and industry to ditch the fold and other conventions that prohibit the creation of exciting design. Design that connects with users on both an emotional and intellectual level and delights them.

]]> 0
Plans for 2012 Sun, 08 Jan 2012 11:30:07 +0000 nathanleigh I’m finally back into the swing of things after a busy December, which was followed by some time off over Christmas. 2011 was a great year and I worked on great projects for Square Circle Triangle and freelance clients. 2012 is already shaping up to be pretty interesting year. After receiving a fair few emails from various people asking what I’m up to, I thought I’d share what I’ve got planned for the year.

I’m continuing to work at Square Circle Triangle in a more design focused role and I’m extremely happy there so I won’t be moving on for some time and certainly not at any stage during 2012. One project in particular has got me very excited, but due to its nature I can’t reveal too much except to say I’m looking forward to it and will hopefully be able to share some work in a few months. Square Circle Triangle are also in the process of refreshing their brand and web presence and I’m enjoying being a part of that as well.

Therefore I’m not accepting large amounts of freelance work at the moment as I’m confining myself to smaller boutique clients, whose industry and/or approach lend themselves to producing high quality and personally rewarding work. At the moment I’m building a couple of sites and undertaking some branding projects and look forward to sharing those over the next couple of months.

I’m also changing my work schedule, dropping down to four days and I’m hoping to use the extra time to work on some personal projects that have been in the pipeline for a while, but haven’t come to fruition. I’m hopeful that these projects will also eventually become passive income sources.

I’ll continue to write about design and my experiences within the industry on this blog and despite the positive feedback I’ve received about the design I’m hoping to undertake a redesign after the current craziness dissipates a little.

I’m really enthusiastic about 2012 and looking forward to producing some great work, so keep an eye on this blog and my Behance folio for fresh updates.

]]> 0
Taylor Reynolds website Sun, 11 Dec 2011 12:46:02 +0000 nathanleigh I’m busy as always and struggling to find time to post on here, let alone write a full-length article, however I’ve been working on some great projects for both Square Circle Triangle and freelance clients. Developing and launching a website for Taylor Reynolds, a building consultancy based in Fitzroy, has been one highlight from a busy couple of weeks.

Gary Domoney of Visua Studio approached me a couple of months ago to implement the site for Taylor Reynolds, a recently established consultancy specialising in multi-residential development and design services. Due to the success of projects I’ve undertaken in collaboration with Visua in the past I jumped at the opportunity. Jobs of this nature are always an excellent chance to produce beautiful work, while also exploring new techniques and technologies.

The final website is minimal in nature, but components such as the large stenciled type reflect the gritty urban aesthetic of Fitzroy where the client is based. When combined with the beautiful photography by Patrick Reynolds the result is a simple, yet stunning website.

The site is quite sparse, but this actually increases the complexity surrounding front-end development and implementation. For instance I decided early during development that the minimal nature of the site would be enhanced by smooth transitions between pages, which could only be implemented by incorporating Ajax techniques. However this was an excellent opportunity to experiment with the HTML5 History API, which is now widely supported by most modern browsers. No more hash tags!

The website is also somewhat responsive as the layout condenses to a certain point to support tablet devices. However developing a layout that would condense for smaller screens was out of scope, so myself and Visua elected to serve a simplified version of the site to mobile users so the site would at least remain accessible. Ultimately the decision to further develop this mobile layout will be reliant on collecting data concerning the devices being used to access the new website.

I’m really happy with the final result and enthusiastic about the possibility of developing more websites like this for great clients and collaborating with design studios in this particular fashion. You can read more about the Taylor Reynolds identity design at the Visua blog and be sure to check out the Taylor Reynolds website.

]]> 0
My first impressions of LESS Sun, 04 Dec 2011 11:38:55 +0000 nathanleigh I worked on a job last week that required me to use LESS for the first time and I thought I’d share my impressions. For those that haven’t come across LESS before it’s a dynamic stylesheet language that extends CSS by introducing principles such as nesting, global variables, mixins and functions. Like SASS it attempts to make the process of writing and maintaining CSS easier.

The good parts

LESS streamlines the process of structuring CSS files because of the way in which you can nest selectors. Essentially this helps write clean and maintainable CSS and for those working in larger teams this is great. It’s not uncommon for developers working within these environments to make changes and tack them to the end of stylesheets, because they’re unsure how the CSS has been structured. LESS eliminates this problem by enforcing a more structured approach to writing CSS.

Global variables, mixins and functions are also terrific as they reduce the amount of CSS that you have to write and maintain. Swapping fonts, colours etc. becomes a snap because you only have to change a single line of code.

The bad parts

While I can obviously appreciate the benefits of LESS, I think the more structured approach that it enforces can also be something of a negative. I’m a massive fan of adding a classes to the HTML element so I can write CSS code specifically for older versions of IE, browsers without javascript and even touch devices. I tend to write these additional styles inline:

.main .button { // base styles } .ie7 .main .button { // IE7 fixes } .touch .main .button { // Make the button bigger for touch devices } .no-js .main .button { // JavaScript isn't active - hide our button }

The problem with LESS is that you can’t do this because of its nested syntax. You have to rewrite everything all over again, which is a massive pain. In addition to this LESS doesn’t handle media queries all that well either. This implies that if you use LESS the easiest way to manage this problem is to maintain additional stylesheets, which in my opinion is far from ideal.

This leads me to my second gripe. The final CSS stylesheet that is generated bears little resemblance to the LESS markup, therefore using developer tools such as Firebug becomes a bit tedious. You can’t find the line that your editing easily and because you loose the ability to write additional styles inline the whole process of updating code becomes very tedious.

My conclusion

While I can see the benefits of LESS, especially for larger teams, it doesn’t fit the way I personally write and structure my stylesheets. Therefore I think the decision to use it is a largely a personal choice. I found it very inflexible and if anything it made writing CSS more complicated, especially when you start targeting different screen sizes, browsers, touch devices etc. Given the prevalence of libraries such as Modernizr and the popularity of responsive web design it will be interesting to see how long LESS remains popular, given the inflexibility that its nested approach imposes.

]]> 0
The perils of share buttons Tue, 22 Nov 2011 02:19:11 +0000 nathanleigh So the new blog design has been live for a couple of weeks and one the many changes made was the decision to remove some social media share buttons from the sidebar. A few weeks prior to this BrightEdge announced that having a Tweet button on a web page drives 7x more exposure to those pages via social media. Given the obvious benefits why remove them?

Put simply I dislike share buttons and in my case I wasn’t entirely convinced I was seeing any benefit from them either. Among my key gripes are their prevalence online. They’ve become the modern day equivalent of the 90′s hit counter.

They scream for our attention, especially when they appear more than once on the same page, interrupting the flow of real content. They’re not as benign as many would believe and in reality they’re just a form of advertising for the network they link to. It’s all about mind share! The only difference is that they yield traffic, instead of revenue for content producers. However like advertising they’re intrusive – a form of visual pollution masquerading as innovative tech.

While designers such as myself worry about the way in which they distract from content, this is probably of little concern to marketing managers seeking to tick items off their social media marketing checklist. However what should concern them is that share buttons are also a form of bandwidth pollution.

I’ve written about optimising website performance before and among the many things that can cause performance issues, share buttons are the worst offenders. Inline scripts that load JavaScript, CSS and image files from external servers are never a good idea. Among the worst offenders are diabolical plugins such as Add This and social media networks who don’t care about such petty concerns. Facebook?

While you can find all sorts of research out there trumpeting the benefits of share buttons, there’s not one study that weighs their benefit against the annoyance users experience because of slow sites. Research regarding the usage of share buttons on smaller sites is also sadly lacking. The study conducted by Bright Edge I mentioned earlier surveyed the largest 10,000 websites on the Internet, but does placing share buttons on smaller sites yield such benefits?

Given the issues that can arise from not carefully selecting social networks to link to and poor button placement, we shouldn’t be so flippant about adding share buttons to websites. Like advertising they can yield substantial benefits for content producers, but can also negatively impact the user experience. If we don’t collectively consider these issues we may find that users simply start consuming digital content offline to escape the visual clutter and bandwidth pollution.

]]> 0 Sun, 13 Nov 2011 11:23:57 +0000 nathanleigh I’ve become a big believer in responsive web design and development, because its the easiest and most cost effective way for many of us to future proof our websites. The wider community has also positively responded to responsive design and as a result there’s a plethora of resources now available. is among the best and is a collection of hand-picked responsive websites. I’m delighted that my blog has been added to their growing collection.

I submitted the site a couple of months ago, but given the number of submissions they receive I didn’t really expect anything to come of it. During that time this site has evolved, adding new sections and undergoing a complete redesign.

Therefore I was surprised to receive a tweet from notifying me that the site had been added. It’s a great resource for finding examples of responsive design, so I’m stoked that my site has been included.

Thankyou to Eivind Uggedal (curator of and the other talented people that contribute to this excellent resource.

]]> 0
Addressing issues outside of project scope Tue, 08 Nov 2011 13:21:00 +0000 nathanleigh I’ve been busy the last couple of weekends coding a website for a freelance job I’m currently working on. While I can’t reveal a lot about the project, it’s made me consider our responsibility as designers and web developers to support devices and browsers outside of project scope.

In this instance the brief is to create a website that is optimised for tablet and desktop devices, however the particulars of the supplied artwork would render the final site unusable on smaller screens. As developers we encounter issues like this everyday, whether it’s considering ancient browsers, touch devices, print style sheets, alternatives for Flash content etc.

The dilemma therefore is whether to disregard such considerations or spend extra time addressing them.

I believe that as professionals we have a responsibility to address such issues, even if they may fall outside the scope of a project. Subscribing to methodologies such as progressive enhancement help enormously, however there are still situations in which we’re required to go above and beyond.

Addressing such issues allows developers to build lasting relationships with clients and reduce future support requests. The goal should and always be to provide sites that work for all users. This doesn’t mean spending hours or days optimising a site for situations outside the scope of a project, but simply ensuring an adequate and usable alternative is offered.

]]> 0
Back Offscreen Magazine Thu, 03 Nov 2011 09:57:57 +0000 nathanleigh I love Kickstarter and visit the site regularly. It’s home to some great projects that are well deserving of the design community’s support. I came across one such project earlier today and was instantly compelled to back it. I only pledged $35, but hopefully my small financial contribution will help make Offscreen Magazine a reality.

Created by Kai Brach (Melbourne based like myself) and Jess Murray, Offscreen will be a printed publication dedicated to showcasing the creative talent behind some of the best websites and apps around. Each issue will contain eight sizable interviews with leading digital designers and developers to expose the hard work, passion and creativity behind great interfaces.

While it may seem strange to choose a printed format for this subject I personally believe that it’s a great decision. I love the tactile nature of print and am an avid collector of books and magazines. The team behind Offset seem determined for this to be high quality product as well, which will only help make it more coveted by design nerds such as myself.

I have no relationship with anyone on the team, so this isn’t a shameless plug. I genuinely would love to see this project become a reality! So get over to Kickstarter and pledge some cash!

]]> 0