Design

Responsive means never fixing a widow

If you’re designing a responsive piece (website, email, etc) and you’re trying to design it so that a particular line of text sits nicely on one line, you are doing digital wrong. If you are not letting text flow and wrap naturally, you are designing wrong. Different devices/browsers/platforms will display text at different sizes, and different screen sizes will cause different wrapping of text to occur. We have to embrace this, not resist it. Trying…Continue Reading →

Why can’t we use InDesign for websites?

I get asked this question a lot, and I always say it’s like asking, “Why can’t we drive in these nails with this screwdriver?” A screwdriver is obviously a very useful, valuable tool. And it’s the wrong tool for the job at hand. We can argue that a screwdriver is a more sophisticated tool than a hammer! And the hammer is still the right tool for the job at hand, i.e. driving in nails. That’s…Continue Reading →

Responsive website semantics: let’s avoid discussing multiple “versions” of a site

Let’s be careful when discussing responsive websites to never describe them as having multiple versions. Let’s always talk about the desktop layout or the desktop view, the mobile layout or the mobile view, but never the desktop version or the mobile version. A responsive site is one site that has multiple views, or variable layouts, depending on screen size. I’m a stickler for this kind of semantics, because it’s extremely important that we use the…Continue Reading →

Favicons

I was asked recently, what do you call that little icon that some websites have in the browser tab or bookmark? Can we make those for our sites? It’s called a favicon, and it’s pretty easy to make and implement. The hardest part is probably figuring out how to make something look good at just 16×16 pixels. Look up at your browser tab right now to see a very handsome example. Once the favicon is…Continue Reading →

Website design: out with 980 pixels wide, in with 1000

For a good ten years now I (and many others) have been advocating for 960 or 980 pixels wide as the standard for website design. I’m upgrading that to 1000 pixels as of now. The reason for this is responsive design, which I’ll get into more below… But first let’s go back to the 980 days. The reason for designing at 980 pixels wide was to create a layout that would safely fit within a…Continue Reading →

Let’s talk about “the fold”

“The fold” is a print term. It has no place in digital media. The end. Okay, okay… When we talk about the fold we’re talking about content that’s visible on the user’s screen, without scrolling, right when a webpage loads. Of course, a big problem when talking about the fold is that there are a ton of different devices and different screen sizes out there, so not all users are seeing the same amount of…Continue Reading →

A responsive site or a separate mobile site?

One of the most common things people have been asking me about lately is responsive design for websites. For a few recent projects at my agency we’ve discussed the pros and cons of creating a responsive website versus creating a separate mobile site for smartphones and small tablets. In the vast majority of cases I advocate for responsive design, and I’ll explain why below. Let’s start with definitions A mobile site is just that —…Continue Reading →

Why we should take a mobile-first approach to web design

Here’s plenty of reason right here: When we design a desktop site and then try to convert that design to mobile, we’re faced with many small problems: Where can we put this part? How can we make this bit legible? How can we make this interactive feature a good experience for users on small screens? Some of these will drive you crazy, and the end result can look forced and cramped. On the other hand,…Continue Reading →