Friday, June 6, 2014

Experience Continuity Design®

For nearly two years, I've been working at an awesome little shop that builds nearly everything on WordPress. And for over two years, I've had some strong opinions about web design. Do you see all of the irony here? My blog is on Blogger and I have no credentials whatsoever for web design. That doesn't keep me from opening my mouth though. Ha! Anyway, this seems like the perfect opportunity to put big mouth to the test.

For over a year, I've been contemplating porting my blog to WordPress because it just makes sense. I work with WordPress every single day. I like WordPress. It seems like the right thing to do. And of course, I don't want just a regular old boring WordPress theme that looks like a million other blogs out there so I started coming up with my own design.

I came up with something that I call, Experience Continuity Design®. I'd like to think that this is nothing new but I wouldn't be surprised if no one has ever thought about web design in this way.

So the old school method of web design seems is what I call "The Least Common Denominator" method. Basically, the lowest resolution screen on which someone will view a website on is 1024 pixels wide. So to ensure that everyone can see your website, make a template that 960 pixels wide and just don't do anything wider than that. This really, really, really sucks on full HD widescreen monitors.

With the advent of the smartphone, that method has evolved, but only ever so slightly. With responsive design, you focus on what's most important, display that at the top of your narrowest resolution (~320 pixels) and then let everything flow out as you get larger. It seems like things still max out at a width of about 1200 pixels and really isn't all that different than it was, just slightly less wasteful.

The problem is that design hasn't adapted to the fact that users, in a "desktop" environment (so not on a phone or perhaps a tablet) almost universally have wide screen monitors. That's why there's always wasted space on the edges of most websites. Figuring out how to use that extra space necessitated a different approach.

Instead of finding the least common denominator in screen size, I latched onto the fact that desktop users' view port is essentially the same rectangle. Some are a little wider than others but basically everyone views web content through a rectangular frame. With that in mind, I mocked up my design so that all users would see the same content and layout regardless of the size of their rectangle, thus creating a continuity of experience. So whether you're on a 1280x800 Macbook Pro or have a WQHD monster, you will have the exact same experience.

Full screen @ 1920 pixels wide

1366

And then at 1024 where I felt it was time to respond to a 4:3 layout.



All of this was accomplished using some magical CSS by incorporating lots of percentages, vw's, and vh's. A year ago when I started this mockup, which has collected dust since then, browsers weren't all that happy with the vw and the vh but I think they might just be ready. And I'm hoping that by me actually publishing this, I will be motivated to make something happen. Of course, I don't have the PHP skills to execute but that's just a minor detail, right?

Does this not make amazing sense? Let me know what you think, please, in the comments.