The web has been around long enough for us to know its powers and constraints.

We know about the constraints because we’ve bent them as much as we can over the years. For example, before CSS, we used tables and spacer gifs for layout. And before border-radius, we used background images for rounded corners.

We use pre-existing mediums as a guide for how a new medium should work.

We take our preconceptions and apply them as best we can.

We’re much better now at embracing the web than we used to be but we still make too many assumptions. Many of those are wrong. For example, we used to think that all viewports were 640px wide. And we used to think that all computers had a keyboard and mouse.

More recently, we thought that small screens means swipeable, and big screens means mouse users.

These assumptions are also wrong.

The truth is, we don’t always know what users do. We don’t know their ability or preferences. We don’t know much. And that’s okay.

But we can still design simple experiences that embrace these constraints.

After all there’s no creativity without constraint.

Which is why I’ve created a universal design checklist which takes into account every constrant.

Let’s go:

Constraint #1: Outlook, culture and understanding

Everyone is different.

How people think and see the world is unique to the individual. We’re influenced by where we live, our upbringing and the people we spend time with.

Constraint #2: Disabilities

48.9 million people suffer from disabilities.

This disabilities affect mobility, hearing and eyesight.

Not all disabilities are permanent. For example, a mother holding a baby only has one available arm.

Constraint #3: Preferences

• Some people prefer touch screens
• Some people prefer keyboard
• Some people prefer screen readers
• Some people print web pages

Designing for preferences is good design.

Constraint #4: Speed and connectivity

Industry pros often have fast connections. But many people don’t.

Make the slow fast and the fast, lightning.

Constraint #5: Screen size

People use multiple different devices from watches to TVs.

Responsive design isn’t about 3 different media queries. It’s about fixing content where it breaks.

Constraint #6: Browsers

Different browsers have different functionality and support.

This impacts what users can do or experience. Deliver a solid baseline experience and use progressive enhancement.

Everything but content is an enhancement.

Constraint #7: Data cost

While you and I may have expensive data contracts, many people don’t.

Even if data is cheap, it can run out. Let’s keep our interfaces and interactions lightweight.

Breaking up content across pages gives users the choice to load it.

Constraint #8: Environment

People’s experiences are affected by their environment.

For example, low lighting, screen glare from the sun or being outside in the cold wearing gloves.

Constraint #9: Standards and conventions

Use the same patterns to solve the same problems.

This is intuitive. You can break convention but you need a good reason to do that.

Constraint #10: Interoperability

Some people use Safari’s reading mode or a feed reader to access the web.

Some people rely on how Google displays search results.

We need to consider the experience outside of UIs and design for where people are.

Constraint #11: Configuration

We can’t assume people use their devices in factory settings.

People add plugins and adjust the font size.

There’s no creativity without constraint

Bad design ignores people.

And there’s a lot be said for design that ignores people. People ignore it.

Let’s embrace these constraints.

And make products that work for everyone.

That’s the challenge.