[Intro Slide][00][x] This talk is Pixel Perfect Design for Mobile - presumably Mobile Web or Mobile Applications.
[Cow + @NikolasWise][00b][x] My name is Nikolas Wise. I'd like to briefly introduce myself and let you know the perspective I'm coming from before I launch into my talk.
I'm a designer with Esri Portland Research and Development. I work with a team of designers, some of you might be familiar with our work – our team is largely responsible for developers.arcgis.com. [Screenshot of Developers][01][x]
Personally, I've had a lot of great opportunities to work on projects like the Mapattack game -
[MapAttack Screenshots][02][x]
- and creating homes for open source projects like Terraformer.io.
[Terraformer Homepage Screenshot][03][x]
Most of our design team in Portland comes from a print background - though I'm probably embedded the most in the analog print world. [Print? Press? Yeah][04][x]
I received my Bachelor of Fine Arts in Printmaking, have worked in Fine Press studios printing artist books and editions in Oregon and France, and worked three years doing primarily print design and large format digital printing. Today I still maintain a small printmaking studio practice in Portland Oregon. So I think a lot about print.
[Screen Illustration][05][x] For the past couple of years, I've been working on the web as my primary design practice. So I think a lot about screens.
[Screen with a Canon overlay][06][x] Today I'm going to talk a lot about how critical practices and theory for print applies to screens, and how fundamental principles of design developed and explored in the analog world can inform our Pixel Perfect Design for Mobile.
['Pixel Perfect Design for Mobile'][07] So, Pixel Perfect Design for Mobile. I have some good news and some bad news. First the bad news. Pixel Perfect Design for the Mobile Web can't be done, not possible, everyone go home.
[Cross Through Pixel Perfect][07b][x] Pixel Perfect isn't a thing - or at least, isn't a useful thing - [Cross Through Mobile Web][07c][x]
- and the Mobile Web isn't a thing.
['Perfect Design'][08][x] The Good News: It doesn't matter if you can't create pixel perfect designs. Pixel's are not the indivisible atom of design. You can do Good Design, Excellent Design, even Perfect Design without worrying about Pixels.
['Web'][09][x] More Good News: The Mobile Web may not be a thing, but the Web is a thing. So design for the Web, and know that people are going to be approaching your design from a tiny smartphone screen. Design for good interaction and excellent experience, rather than a preconcieved notion of what "Mobile Web" is supposed to mean about your users, their actions, and their desires.
['Pixels?'][10][x] Lets unpack this, starting with the Pixels. I'll try and make this brief, as it gets a little hairy technically. If anyone wants to get into it deeper I'll be happy to catch up after the talk. We can discuss the finer points of angular measurements.
[Illustration of Pixel as Point][10b][x] The Pixel is the indivisble atom of the image. Conceptually, the pixel is the average color of any point sample taken from an image. With an array of pixels, we have a fascimile of the image, a conceptual representation. In this model, the pixel isn't a physical thing at all, but a point that averages and represents information.
[Illustration of Pixel and Block][10c][x] The Pixel is also the atom of the screen. The smallest indivisible block of color that the screen can change. This 'Hardware Pixel' is not the same as the 'Conceptual Pixel'.This pixel is a physical thing, and even though I just said it's indivisible, like the atom it can be split. [Illustration of Subpixels][10d][x] It's made up of three subpixels, R, G, and B. The screen is an array of physical pixels, and the resolution of the screen is determined by the density of these pixels.
[Illustration of CSS Pixel][10e][x] The Pixel is the atom of our stylesheets, the baseline unit of measurement for our CSS. THIS Pixel is not the same as a Hardware Pixel, or a Conceptual Pixel.
This Pixel comes 96 to an inch at arms length, no matter what your screen says. This pixel is also divisible, though less simply so than our dependable hardware pixels. You can always halve an abstract unit, but what happens when that half-unit is represented physically is a can of worms.
[three up illustrations of the concepts][11][x] So we have one word for three different things - a color sample at a given point of an image, a small color-changing element in your screen, and an abstract unit of radial measurement.
Pixels suck. The concept of the pixel sucks. Let's leave the Conceptual Pixel to the theorists, engineers, and scientists. They can have that one.
[strike through concept one][11b][x]
And lets bin the radial measurement pixel, as it's an arbitrary and abstracted system invented as a misguided stop-gap.
[stroke through angular measurement pixel][11c][x]
When we say pixels, lets talk about the physical little things that live in our screens. [little box pixel][11d][x]
These little blocky hardware pixels are important. They are the fabric of our work. Pixels are the baseline for any design that lives on a screen. So it it's natural to think that they are the most important peice of the puzzle. This isn't the case. Pixels are just the grain of the screen, like the texture and grain of paper. In neither medium is the grain a primary issue of the design process.
How can write CSS without using the CSS Pixel?
One of the things I find the most useful in my work, and to remove Pixels from my design process as much as possible, is to use classical typographic systems of measurement. I use a base indicator, a single known that my design decisisions rest on - the size of the default type. The Web is primaraly type - type first everything else second. The baseline unit that I work from is the Em, defined by the size of the default body size. An Em is the square that contains the glyphs of a typeface at any given point size. For 16 point font, an Em measures 16 points. For 32 point font, the same em measures 32 points. One em of margin on a large header will be different than one em of margin on a text block.
It can certainly cause problems when our baseline measurement unit is variable. CSS solves this problem by inroducing a close sibling to the em - the 'Rem'. The Rem is identicaly to the em at default type size. If your default type is 16 points, your Rem is 16 points. Now one rem of margin is the same across all our of type elements.
There is still one assumption we're making - that the default size of type on any device is going to be readable. Using type instead of pixels gives us a big advantage, even though their both still assumptions made about devices: As pixel density in hardware increases, text will look better and better, but pixel-based assets and design decisions start falling apart.
[Phone illustration][12][x] Lets talk about the Mobile Web.
The Mobile web is not a thing. 'Mobile' has become a shorthand indicator for a lot of different ideas lately. Mobile means apps, mobile means html5, mobile means smartphones and tablets, and sites and web apps for smartphones and tablets. Or do tablets not count as mobile? [phone, Big phone, small tablet, tablet][12b][x] What about really BIG smartphones, or really small tablets? As the consumer device market is exploding, the lines that differentiate between this web and that web are starting to become more and more meaningless. And you know what? That's a good thing. The web is the web, there is one of them. If you are creating a web application, or a web map, the only thing that makes that it 'mobile' is that your users are looking at it from a tiny screen.
[Phone, Cinema Display][13][x] Our designs are meant to be accessed by users. Why should we close doors on that access? Anything that we want to define as mobile, we're inherently defining as 'not for big screens', and anything that we say is not mobile, we're saying that it's 'not for small screens'.
Instead of thinking about 'mobile' or 'not mobile', we should instead of thinking about goals, actions, outcomes, and audience. If we know our users are going to be interfacing with our work on tiny screens, we need to support that without disregarding everyone else.
[Project Perfect Design for Goals][14][x] Instead of Pixel Perfect Design for Mobile, instead be thinking about Project Perfect Design for Goals. And this mode of thinking is not ours alone - we share this with every other design discipline out there. So what can we learn from these older, analog disciples? Classical print and layout has a lot to teach us on this front.
[Question Mark][15][x] When we design for unknown screen sizes, aspect ratios, densities, resolutions, and bandwidth we need to anchor our decisions to relationships between known elements. In this way, the primary design problems we face are largely typographic ones.
[big text of the below][16][x] Content, goals, and hierarchies.
Here's where we can take lessons from the world of print. Focus on the why of the print, the critical reasoning that drives print method rather than the how and the what.
[Three Fundamentals illustration][17][x] When we talk about print, and what makes a print, there are three fundamentals we consider. The pigment, the matrix, and the substrate. Ink, paper, and plate.
[Three Fundamentals 2 Illustration][17b][x] To generalize these concepts, we can talk instead about Aesthetic Considerations, Design Decisions, and Material Requirements. The work that we do as designers happens in the first two of these - Aesthetic Consideration and Design Decision.
[Mapattack Screenshot - Leaderboard][18][x] With Mapattack, our driving Aesthetic Consideration was to play into a certain look - we wanted to use a visual language that represented the feeling of school yard baseball. We made this choice to make a very new, very abstract idea of a game feel accessible to anyone. Simple and playful was what we were going for.
[Screenshot of Selecting Game][19][x] Working within this aesthetic framework, or next step was to examine the interactiong and goals of user, and consider how our structural design decisions could allow the user access. If you going to use a visual language of accessbillity, you have to follow through and make actually accessible.
[Screenshot of Mapattack Website][20][x] These two decisions guided us through the rest of the process. After working through this, than we made the approach of how to bring our work to life across a range of screens.
[Mapattack, the book][30][x] This process would have been the same if we we're creating a Mapattack publication.
[Illustation - Book =/= Screen][31][x] There are a couple of fallacies I see when people talk about the differences between print and web design. One is that the print designer has absolute control - over image size, type placement, and layout. The other is that the print designer starts from a given, known size and works down from that point.
[Control? Illustrate something hard to control, pogo stick?][32][x] Print designers never had complete control. The idea that designers should even be expected to set their own type only came with the end of the bad-old-days and the advent of desktop publishing. Print designers have always been beholden to the technical limitations of the print process, and have always worked with printers to find how their vision could best be implemented. What print designers have is not control, but the advantage of an incredibly honed technical process that has been thouroughly mastered and standardized. And it took us 400 years to get there, if you want to start the conversation at movable type.
[A4 paper size][33][x] The other idea I see a lot is that print is about starting from a known size and working down from those contraints. Standard paper sizes - A3, Tabloid, whatever, are the results of the technical perfection of the industry, tools arrived at through economies of scale and their broader usefullness to the original goal of the designed page - presenting the content to it's strongest advantage. [A4 with an illustration. Cow?][33b][x] The paper is subject to the design. When you see a poster design that's exactly 11x17 inches, minus an 1/8 inch for the trim, all your seeing is the result of a decision - to make the poster as big as possible for as cheap as possible.
[A4 == 960px][34][x] That's not a design decision. Thats an economic decision. Why should we try to inheret and adopt a model for making design decisions from such a lazy source? Our screen is 960 pixels wide, how much stuff can we wedge in there? We shouldn't be starting from here at all - and we absolutely shouldn't wail and gnash our teeth that we can't. That's missing out on all the oppurtunities that screens are giving us in the first place.
[Frank Chimero's Plasic Screenshot][35][x] The screen is an inherently plastic medium. Who has read Frank Chimero's What Screens Want? Good/Go Read it.
Chimero talks about the screen following the same patterns of use as plastics. A medium that has no inherent shape of it's own, and is infintely flexible. I would say that the screen IS plastic - not in the extruded and melty way but in the Piet Mondrian way.
[image of Good ol' Mondrain no. 5][36][x]
To paraphrase Mondrian, Plastic means flexible, conformable, and abstracted for a foundation as close to the truth of the content as possible. The truth of the content. Working from the content out, organizing and understanding that content, and making decisions on how to deliver it effectively is our job as designers. This doesn't change in the slightest because our audience is interacting with our work on a small screen instead of through printed paper. The princples remain the same. [Piet Mondrian in a screen][36b][x] But the opportunities are different. We can harness the plasciticy of the screen to bring interactions, animations, and depth to the truth of the content. The screen can conform to our needs, and our design decisions can be empowered by the screen rather than limited by it.
[Elements of Typogrpaphy Cover Shot][37][x] Robert Bringhurst's celebrated work The Elements of Typographic Style covers a huge range of principles for excellent design that we can bring to the screen.
Some of the practices that we can draw on include maintaining line lengths for comfortable reading, considered and effective relationships between elements to facilitate communication, and informed approaches to creating harmonious proportions.
« Example One: Line Length and Media Queries » [line length illustration][38][x] How can we use plasticity of the screen to create readable text? Unlike paper, we have the advantage of being able to adjust our line length, leading, and margins on the fly.
[illustration content block][38b][x] We start with out content. After selecting a typeface that fits the project, determining a readable size, and a comfortable vertical rhythym, we have all we need to tackle the problem of comfortable reading measures on an array of screens.
[Small Column][39][x] We can make a decision about the smallest measure that suits out content
[Large Column][39b][x] As well as the widest. And using the magic of the CSS Media Query,
[BIG media query code sample][40][x] We can make adjustments at each point to change our layout and maintain clarity of content.
[Super wide screenm, large margins][41][x] On large screens we can use more generous margins, or large type.
[Small screen, small type][42][x] On smaller screens we can make the choice to bring down the size of our type. In this way, design decisions on how to bring out the truth of the content gives us guidelines on how to approach the interface between content and screen.
« Example Two: Relationships in Size and Color » [illustration of header, body, and two colored buttons.][43] Asking questions about the hierarchies in our content, the order of importance of communication and interaction in the content is not unique to the screen.
[illustration of bad hierarchies][44][x] Bad design in print is going to look a lot like bad design in screen. When all the elements on the page are close together in size and color, we loose definition, and we can't make a mental map of the page.
[Illustration of good hierarchies][44b][x] The mind needs differences and exceptions to find it's way through the content. The eye needs variations to move from place to place in the page. Here, the typographers profession is more relevant than ever.
[Illustation of drop cap][45][x] Thinking from within the type out to the layout with an eye to hierarchy will guide you through the design process, and bring you to essential questions that your design has to answer. What is the most important thing on this page? What do we want to user to do? And most critically, why?
« Example Three: Relationships in Proportion » [Bringhurts's canon][46][x] Most of the time, nothing in a layout is arbitrary. Eveything is coordinated to assist and serve the content. A tone is set, and layout decisions need to support that tone. Simplicity is the key here - the art of taking away until you have an elegant solution rather than adding on and complicating.
[Boring square in square layout][47][x] Simple here doesn't mean boring. A lack of variation, a lockstep symmetry will destroy your work as surely as an unvarying block of copy.
[Illustations of neat, playful, hierarchful wireframe][47b][x] Be playful with your design, explore ideas that are challenging. Engage your users, show them that you are thinking, thinking about your content and thinking about there experience with it.
We can't ask a reader to be any more engaged than we were when we wrote. Which really is the key to design.
['Care'][48][x] You have to care about the design, and give it time and give it energy.
There are no magic sprinkles that you can add in later. These decisions start being made before a line of code has been written, prefereably before even the computer is on.
[Pencil Stub][51][x] Work through some pencils before commuting your self the machine.
Pixel Perfect for Mobile is not a meaningful way to think about design. What is a meaningful way to approach your work is that you have a design that's robust, that's fluid, and that accomplishes it's goals. You want a Project Perfect Design for Screens. And THAT is attainable.
[end slide, with @nikolaswise][52][x] Thank you. If anyone has questions, I'll be happy to answer them now, or please find me after the talk or on twitter.
=== Resources http://adactio.com/articles/5826/ - Jeremy Kieth on 'There is No Mobile Web' http://frankchimero.com/talks/what-screens-want/transcript/ - Frank Chimero's Excellent talk on Screens as Plastic Medium http://typeneue.com/ - An Excellent primer on the basic principles of typography http://www.amazon.com/Elements-Typographic-Style-Robert-Bringhurst/dp/0881791326 - The Elements of Typographic Style by Robert Bringhurst. Excellent primer on typogaphic and structural principles.