This post should be titled “Getting Ahead of Yourself.” “…By a Few Years,” actually. Here’s the deal: at the time I’m writing this, early 2013, there’s no way to accurately design for the Web using physical units, nor will there be for a very long time. But there is a way to design while knowing the physical characteristics of the device — or, at least, there will be in the very near future.

Different devices can have a similar screen resolution, yet entirely different physical factors. iPad (1st generation) has the diagonal size of 9.7″, the resolution 1024 × 768 and 132 ppi. Kindle Keyboard 3G has the diagonal size of 6″, also the resolution 768 × 1024, yet 212 ppi. Image source: kodomut.

It’s called the “resolution media query”, and it’s been in the specification for media queries for some time. However, while it has been in the spec, that doesn’t mean anyone has actually implemented it yet. Fortunately, WebKit is leading the way and pushing for this feature to be implemented. So, how will we use this nifty little feature, exactly? Here’s how.

The Thin Line Between Queries

First off, I posit that there will be only one use case for a resolution-only media query. Something along the lines of

    @media (min-resolution: 250dpi) {
    
    }
    

has, at this time, only one good use: swapping out low- for high-resolution images. I’ve tried imagining other uses and, as far as I can tell, there just aren’t any. But resolution is not what we, as Web designers, are truly interested in. Since we are designing for humans, shouldn’t we be thinking about the physical side of human data consumption and designing using this kind of a metric? And in a perfect world we could simply say width: 1in and have a one-inch wide element, regardless of the device. Unfortunately, we live in a digital world in which the physical and digital pixels are not the same. We need something to bridge the gap. That something is the resolution media query.

Good. Now that that’s out of the way, let me show you how this one little piece of code can make so much difference that your head will promptly explode. (I take no responsibility for actual blown heads as a result of this post.)

Let’s compare two media-query declarations:

    @media (min-resolution: 341dpi) and (min-width: 767px) > {
    
    }
    

and

    @media (max-resolution: 131dpi) and (min-width: 767px) > {
    
    }
    

At first glance, this doesn’t seem like much of a separation, right? Wrong. The numbers I’ve used are specific to the HTC Windows Phone 8X (the first snippet) and the iPad 2 (the second snippet). By using the resolution query, one can basically separate physically small devices from large devices.

As it currently stands, a query that looks like @media (min-width: 767px){ } will affect both the HTC and the iPad, with no other possibility of separation, because both have a resolution that is 768 pixels wide. In fact, the iPad has a lower resolution, at 1024 × 768, whereas the HTC is 1280 × 768. In case you haven’t realized yet, the problem with all of this is that the iPad is a 10-inch device, while the HTC is a 4.3-inch one. That’s less than half the physical size!

By using the resolution media query together with a width query, we can distinguish between physically small and large devices to adjust design elements and layouts accordingly. While, as mentioned above, screen resolution isn’t really what we are interested in since we use logical breakpoints in responsive design, it is useful to know whether a site is being displayed on a small or a large physical display — e.g. to increase font size or rearrange design elements in the layout. But where do we draw the line between small and large? Quite simply, we can’t. Each of us has to draw the line, possibly on a project-by-project basis, between “This is a small device” and “This is a large device.” As far as ballpark numbers go, I’ve done a few calculations and have developed a theorem that should give you a clearer idea of how this works more or less.

The Physical Size Inquiry Non-Exhaustive Theorem (PSINET)

Here’s the theory: In a combined query, if the ratio between the smaller of the width and height and the resolution, called a PSINET score, is higher than 5, then the result falls in the category of a physically large device. If the resulting number is lower than 5, then it is a physically small device. Devices that score very close to 5 are considered to be medium-sized, close to the physical size of an A4 sheet of paper (21 × 29.7 cm).

Here’s a non-exhaustive list of devices to test the formula above. I’ve listed each device’s score according to the formula, along with its diagonal size, resolution and density, and PSINET score.

Physically Large Devices

Physically Small Devices

Medium-Sized Devices

Is this method of determining device size foolproof? Hardly — that’s why it’s a theorem. It’s based on solid reasoning and empirical evidence and has come about by using the scientific method, but it is not a rule, law or axiom. Take it with a pinch of salt (or, better yet, a truckload of NaCl) and refine it. It is a theorem, a proposition, to be remembered in the future when the resolution media query and our work with it become a mainstay of the Web.

Breaking the Theorem

Like any self-respecting follower of the scientific method, I’ve tried to break my own theorem. Thus, I imagined a freak of a device, 2 inches long and 20 inches wide, putting its diagonal size at 20.09 inches, with a 240 × 40 pixel display, yielding a resolution of just 11.94 PPI. It gets a PSINET score of 2.01, which puts it well into the small device category, even though it’s almost half a meter long. The reason is simple: it’s that 2-inch-wide dimension. Because the PSINET score ignores the longer of the device’s physical width and height, the greater the difference between those two dimensions, the less accurate the PSINET score will be. Sure, this beast of a device is unlikely to ever become reality, but it’s worth understanding the reasons why it would break the theorem.

Real-World Applications

Apart from the obvious visual changes and tweaks mentioned above, there are other ways to use the resolution media query.

Enter Enquire.js. For those of you who haven’t heard of it, it’s a very nice JavaScript library that helps you execute particular scripts on matching media queries.

We could use Enquire.js or even just window.matchMedia, which is a native JavaScript method, to differentiate between mobile, tablet and computer users much more reliably than by using width queries alone. Here’s a not-very-polite example using Enquire.js:

    enquire.register("screen and max-resolution: 150dpi and max-width: 300px", function() {
        alert('My, what a small screen you have there, Grandma!')
    });
    

Combining media query types with CSS and using a resolution-aware JavaScript library is just the right formula to give us real future-proof control over what I call the “physical Web.” Imagine being able to view a priceless sculpture located in a museum halfway across the Earth on a 1:1 ratio on any device, or shopping for an engagement ring online and seeing exactly how big that 24-carat diamond is. The real-world applications, pun intended, are nearly endless.

In our world of responsive Web design, we’d very much like to provide the best experience to users, whatever their device. In light of the sans-resolution media query above, that task becomes less of a challenge and more a windmill fight. Assigning blame is pointless, because none of us can do anything to change the current ecosystem of devices. Manufacturers will continue to put out devices with resolutions and pixel densities that they’ve pulled out of their butts, and that’s fine — that’s their business. Staying on top of the situation by providing us designers with the tools we need (but can’t easily build ourselves) to create the best user experience possible is the job of browser makers, and I salute the good people at WebKit for spearheading the implementation of the resolution media query.

(al)

© Radu Chelariu for Smashing Magazine, 2013.

The SPARQL Working Group has completed development of its full-featured system for querying and managing data using the flexible RDF data model. It has now published eleven Recommendations for SPARQL 1.1, detailed in SPARQL 1.1 Overview. SPARQL 1.1 extends the 2008 Recommendation for SPARQL 1.0 by adding features to the query language such as aggregates, subqueries, negation, property paths, and an expanded set of functions and operators. Beyond the query language, SPARQL 1.1 adds other features that were widely requested, including update, service description, a JSON results format, and support for entailment reasoning. Learn more about the Semantic Web Activity.

The System Applications Working Group has published a Working Draft of Runtime and Security Model for Web Applications. This document specifies a runtime and security model for Web Applications. It describes how an application is defined through an application manifest, and how it can be installed, updated and packaged. It also specifies how such an application can put into the background, put back in the foreground or woken up. Finally, the document describes the security model for such applications. This includes the permission model and the different security rules that would apply. Learn more about the Ubiquitous Web Applications Activity.

Over this past weekend, I watched the live stream of Tina Roth Eisenberg (a.k.a. “Swiss Miss”) giving her keynote speech at SXSW. She spoke about her experiences building her website and her amazing businesses: Studio Mates, Tattly, and Creative Mornings.

I watched as she spoke of passion and how her life and heart had led her from the Swiss countryside to the busy streets of New York. I was moved as she read and explained her own personal principles that have carried her through her brilliant career. She showed us video of her jumping up and down at the sight of a new design, and she explained the value of being fearless when it comes to enthusiasm.

The moment her talk was over, I stopped streaming it from my iPhone to my Apple TV and switched back to regular cable. The first thing that I saw was the movie, Forrest Gump. Then it hit me…

The way to a simple life and a great career as a designer, is to minimize what drains our mental capacity and to get out of our own way. Although Tina Roth Eisenberg is one of the most intelligent people I’ve ever met, her ability to repeatedly get things done greatly paralleled Forrest Gump's ability to live a full life. (I know this metaphor may be a bit of stretch, but bear with me.)

I then decided to explore what elements were paralleled between the two, and why they could lead to a mantra for the modern web designer. Here’s a summary of what I came up with.

Swiss Miss's 11 Rules That She Lives By.

As Tina progressed through her talk, she walked us through the 11 rules that she has created to help guide her life and career. I found these rules to be extremely helpful so I’ve listed them here for your own reference and also as a means of comparison with Forrest.

1. Invest Your Life in What You Love.
2. Embrace Enthusiasm.
3. Don’t Complain. Make Things Better.
4. Trust and Empower.
5. Experiences are Greater Than Money.
6. Surround Yourself with Like-minded People.
7. Collaborate.
8. Ignore Haters.
9. Make Time to Think and Breathe.
10. If an Opportunity Scares You, Take It.
11. Be Someone's Eccentric Aunt.

The Reasons Forrest Gump Would Have Killed It in Design

He Had a Repeatable Set of Principles.

We all remember the famous sayings from the movie like, “Life is like a box of chocolates” or “stupid is as stupid does”. These were simple and repeatable mantras that Forrest’s mom gave him to always help him get through life. I think it’s important for every designer to create their own set of principles that will guide them in their design career. Just like Tina had her list, Dieter Rams (one of the most well-known designers in the world) had his own set of principles that helped him measure good work versus bad work. It served as a guide to check everything that he designed without having to tax him mentally for every product he put out.

He Collaborated.

Forrest Gump was a massive success in business, but Bubba Gump could have never happened without Bubba. Forrest also saw the value in having someone like Lieutenant Dan around too. No man (or woman) is an island, and it's much more fun to surround yourself with talented people anyway.

He Worked Hard at His Passion.

Forrest worked really hard at his passion for Bubba Gump. The fact that he was slightly cognitively challenged kept him from thinking too much of himself instead of working. He didn’t see himself as some “great designer” that should be given everything on talent alone. He worked hard at what he did, and hear this… “There will never be a better substitute to working hard”. Talent is nothing without the work to back it up and see it through.

He Told Stories.

It is no secret that storytelling is one of the best ways to teach and learn. Forrest spent his entire life listening to people and helping them through their trials by telling them great stories (and even parables if you will). Following suit, Tina had some great stories to tell in her talk because some great things have happened to her. Stories are what make us human and experiences are what help guide us into creating them.

He Created Stories.

The only thing more important than telling stories, is creating them. The most important thing in life is creating and having experiences. Think about you own past. Do you have great stories to tell? If not, maybe it's time to get out and make some. Forrest and Tina both have a lot of stories to tell and it's part of what makes them magical characters.

His Life was Full of “Happy Accidents”.

Remember in the movie when Forrest was running and someone handed him a shirt? His face was imprinted on it and it turned into the “smiley face” cultural phenomenon. Or how about the time he was running through a football practice and it led to him being honored by the president for being an All-American?

When Tina watched her little girl come home from school with a poorly designed temporary tattoo, the Swiss designer in her was disgusted. She then did some research to see how she could create her own, but with better aesthetics. The result ended up being that people saw them and wanted them, and now Tattly is a million dollar business. The important thing was that she was “out there” and always open to opportunity. She never set out to do tattoos to make money, but it was something fun, creative and something she was passionate about. Now the business makes her “happy”, but its success wasn’t all accident.

He was Naive.

Forrest honestly wasn't smart enough to know whether or not anything he did would work. The fact of the matter is that this was a great character trait to have. When we're doing something great and unique, way have no way of knowing whether or not it will work. I find this exciting, because if there is no way to ensure success, that means that we can try any “hair-brained” idea that we have because it might just be crazy enough.

The Main Point

The main point I wanted to make here is that success can be much easier than we make it out to be. Don’t get me wrong, it takes a lot of hard work and I know for a fact that Tina works her ass off, but I propose to you dear reader that many times we over-think and make things hard on ourselves before we even start. Maybe we need to be more like Forrest Gump with the creativity, savvy and grit of Tina Roth Eisenberg. Too many times, the only thing that holds us back is our own thoughts and ideas about problems that don't actually exist.

I say do great work, but be stupid about how you put it out there. Be naive, knowing that there are thousands of other people out there too scared to ship their work out into the world. Be crazy, enthusiastic and fearless like Tina, but think like Forrest Gump right before you ship.

After all, we're all weird and that's exactly what will make us great.

I love you Tina;)

The post Swiss Miss & Why Forrest Gump Would Have Killed It in Design appeared first on Treehouse Blog.