A website[1] is a very different animal than a book or a printed poster even though many of the terminology and rituals we use to make websites was inherited from the world of print. Many websites are still designed using the same tools and techniques as would traditionally be expected for a printed product. Namely, static design comps whose dimensions represent idealized screen sizes. If the designs you work with originate as Photoshop files that later turn into websites, there are a variety of “symptoms” that can be considered warning signs that a design will translate poorly to the web.
Fixed heights
Whenever I see a design where containers have specific fixed heights I start to get worried. This is especially true when the content it contains is powered by a CMS and is apt to change, as with any text that is editable by site administrators. The most obvious problem is that the length of the text is variable, while the height of the container is predetermined. So the text might be awkwardly small or too long such that it overflows depending on the verbosity of the author.
More generally, the effect of fixed heights is difficult to execute consistently in the modern ecosystem of devices which vary wildly in total size as well as dimensions. HTML is inherently flexible. In this responsive era we typically visualize this characteristic in terms of accommodating differing widths, but width variability often coincides with shifting heights as the content either cascades and gets longer or possibly shrinks to maintain a specific aspect ratio. Designs that eschew this property contradict “the grain”[2] of the internet and the resulting sites tend to work best only on specific devices but not others.
The Fold
The term “the fold” was inherited from the newspaper business where most enticing stories were printed on the top half of the front page, so that when folded in half and stacked face up they would be visible. In the days before smartphones, when most screens had approximately the same proportions, this term conveniently described the similarly predictable point on a web page below which further content would be hidden on a standard screen until the user scrolled down to reveal it.[3]
Today there is no such thing as a standard screen size or dimension. Instead we have an incredibly wide spectrum of screen sizes and dimensions with a few popular clusters, but no individual standouts that could be considered the standard. Therefore, a design that relies on the precise location of “the fold” exposes a fundamental misunderstanding of how the modern internet works. My experience is that these tend to be a hassle to build and rarely manifest in the way the designer originally intended.
Desktop-only mockups
For all the same reasons described above about why there is no longer a meaningful definition of “the fold”, there really aren’t meaningful definitions of “desktop” or “mobile” screens anymore. Sure, phones tend to be small and desktop screens tend to be big(ger). But there are also a lot of tiny laptops sitting on desks, as well as some enormous phablets riding on buses. So when I’m presented with a “desktop” design it’s my first clue that someone has a slightly outdated understanding of the modern web. If it’s the only design presented then the suspicion is confirmed. Regardless of a designer’s personal workflow[4], in the current era of the internet, it makes no sense to present only a “desktop” design as the sole way to communicate a website. Traffic from mobile devices has generally surpassed desktop traffic and continues to grow. Even in edge cases where most users are thought to be on desktop devices[5], mobile devices will still make up an enormous portion of the audience. The point is that presenting a series of 1600 by 900 pixel mockups is sort of like a tailor presenting only the back half of a suit. Sure it might represent more than half of the suit, but how meaningfully can you assess it?
I prefer starting with smaller screens and working up to the larger widths because in my experience it’s generally easier to expand things than to compress them. Thinking about the smaller screens first also forces us to be disciplined about the relative priorities of various content. But that’s not the hill I’m going to die on today because ultimately where you start is less important than where you end up. Just as two tailors might disagree on whether to start on the front or the back of the suit, they’ll both agree that an entire suit needs to get done. And I doubt that either would recommend doing either side without any consideration for the other. Unless your audience is time machine owners that hang out in the mid-1990s, any website you make will be viewed on a huge variety of devices. So from the earliest stages of designing we should be thinking (a lot) about that range and how the design will function across it. Desktop-only comps are a red flag because they indicated that this diversity is not being considered. For this reason, when a designer in 2017 treats the “desktop” designs as first order business (even with an assurance that the mobile designs will follow later), brace for further oversights such as links too small for touch screens or layouts that don’t work in portrait orientation. And other things that get overlooked as a result of tunnel vision on the “desktop” experience.
Placeholder Content
There is no such thing as a website with no content. A website with the content removed is a template, such as a WordPress theme that defines a generic system of presentation for any arbitrary content. There is nothing wrong with a template, but it is dangerous to mistake it for something its not. The goals of a template designer are typically quite different then a web designer building a custom site. Templates are definitionally generic/universal in their relationship to content with built-in tolerance for varying text and media content. Versatility is a key priority of a good template. Crucially, templates describe how a website will look but they cannot describe precisely what a site will look like until inserting the missing content that will dictate the actual height of pages, widths of headers, density of images, and so on. Generally the expectation of a bespoke website is the opposite. A client paying for a custom website typically expects it to be purposefully tailored. If this is the plan, it begs the question whether a template is a worthwhile intermediate step? Or whether the template it is being confused for a design ready to be built. The latter opens the door to significant project risk as “the design” can potentially manifests in a very unexpected way as the real content replaces lorem ipsum.
Arbitrary breakpoints
Arbitrary breakpoints usually have names like “tablet” or “phone”. Sometimes they get recycled across multiple projects. Often they are inspired by the physical widths of popular apple devices. They represent a fledgling understanding of responsively, still secretly hanging onto the warm and fuzzy myth that targeting any handful of specific widths is “enough” for a site to work across all devices. This device-centric interpretation misses the point of breakpoints. Where breakpoints occur and how many are needed is entirely dependent on the design in question. Whether you’re working from small to big, or the reverse, when an aspect of the design “breaks” by being incompatibility with a given width (or height), you’ve identified a breakpoint. Designing with off-the-shelf breakpoints is like grabbing a random pile of empty boxes and then shopping for presents that will fit in them. Breakpoints exist to accommodate the specific contours of a website, not the other way around. If the inverse is happening, expect to struggle at the dimensions at the edges of the pre-determined break points.
No single item on the list above guarantees that a design will fail, but each is worth watching out for and avoiding when possible. A workflow that consistently incorporates the anti-patterns on this list is likely to be inefficient, unpleasant and yield disappointing results.
Footnotes
1: Let’s be rigorous and define what is and is not a website: A website is a location on the World Wide Web where humans access content. Note that this excludes several things that sometimes smell like websites. Native apps on mobile devices or desktop applications are not websites. Service APIs that have no (human) user interface are not websites. Private intranet tools used by a small and specific group of users (like a company or organization) are also not websites by this definition.
2: Frank Chimero talks about “the web’s grain” in his seminal work by that name: https:// www.frankchimero.com/writing/the-webs-grain/
3: I sometimes hear this term used to casually describe the bottom of the page, which is a far more benign usage. But due to the fact that it is still used with the outdated, stricter meaning, I consider any usage to be imprecise, at best.
4: In my opinion, it does not ultimately matter if a designer prefers to create a big splashy homepage design before or after the mobile experience. The point here is not to be prescriptive about the internal process of the designer so much as the deliverable they choose to present.
5: There are fewer examples of this than people think. In my experience these assertions are sometimes untrue and based solely on un-researched assumptions that a particular audience isn’t “tech savvy” or that no one would want to use the site in question on a phone. Quite often, the actual analytic data is surprisingly.