Driving Screws with Hammers

Your Design Tools Are Broken

Driving Screws with Hammers

Your Design Tools Are Broken

We most often approach web design by starting with a canvas.

But the web isn't built on a canvas, nor anything quite so rigid.

The Web

"What if the web is suited to some things more than others, not because of technical limitations, but because of philosophical mismatches?"

Adactio, Web! What is it good for, 2015 (https://adactio.com/journal/9016)

"The dream behind the Web is of a common information space in which we communicate by sharing information. Its universality is essential..."

Tim Berners-Lee, The World Wide Web: A very short personal history; 1998 (http://www.w3.org/People/Berners-Lee/ShortHistory.html)

"...There was a second part of the dream, too, dependent on the Web being so generally used that it became a realistic mirror (or in fact the primary embodiment) of the ways in which we work and play and socialize...."

Tim Berners-Lee, The World Wide Web: A very short personal history; 1998 (http://www.w3.org/People/Berners-Lee/ShortHistory.html)

"...That was that once the state of our interactions was on line, we could then use computers to help us analyze it, make sense of what we are doing, where we individually fit in, and how we can better work together."

Tim Berners-Lee, The World Wide Web: A very short personal history; 1998 (http://www.w3.org/People/Berners-Lee/ShortHistory.html)

"One of W3C's primary goals is to make these benefits available to all people, whatever their hardware, software, network infrastructure, native language, culture, geographical location, or physical or mental ability."

(http://www.w3.org/Consortium/Points/)

"When you make a link, you can link to anything. That means people must be able to put anything on the Web, no matter what computer they have, software they use or human language they speak and regardless of whether they have a wired or wirless Internet connection."

Tim Berners-Lee, Long Live the Web; 2010 (http://www.scientificamerican.com/article/long-live-the-web/)

"It should be accessible from any kind of hardware that can connect to the internet: stationary or mobile, small screen or large."

Tim Berners-Lee, Long Live the Web; 2010 (http://www.scientificamerican.com/article/long-live-the-web/)

"It promotes ideals of universal access above individual convenience, creation above consumption, and sharing above financial gain."

Adactio, Web! What is it good for, 2015 (https://adactio.com/journal/9016)

"W3C defines the Web as the universe of network-accessible information (available through your computer, phone, television, or networked refrigerator...)....

W3C in 7 Points (http://www.w3.org/Consortium/Points/)

"Today this universe benefits society by enabling new forms of human communication and opportunities to share knowledge....

W3C in 7 Points (http://www.w3.org/Consortium/Points/)

..."One of W3C's primary goals is to make these benefits available to all people, whatever their hardware, software, network infrastructure, native language, culture, geographical location, or physical or mental ability."...

W3C in 7 Points (http://www.w3.org/Consortium/Points/)

I duz responsive.

I haz the break-points!

"What started out as a method to optimize your designs for various screen widths has turned, ever so slowly, into multiple canvas design."

Mark Boulton, The In-Between; 2013 (http://www.markboulton.co.uk/journal/theinbetween)

"'Responsive' isn’t so much a technique or process, but a fundamental characteristic of the platform"

Paul Robery Lloyd, The Web Aesthetic; 2012 (http://alistapart.com/article/the-web-aesthetic)

"This philosophy implies that the characteristics of a material
should influence the form for which it is used."

Kauffman, Architecture in the Age of Reason; 1955

"To cover brick with plaster, and this plaster with fresco, is perfectly legitimate… But to cover brick with cement, and to divide this cement with joints that it may look like stone, is to tell a falsehood; and is just as contemptible a procedure as the other is noble."

John Ruskin, The Seven Lamps of Architecture, 1849

What's this have to do with web design & development?

"I believe every material has a grain, including the web."

Frank Chimero (http://www.frankchimero.com/writing/the-webs-grain/)

"It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility, and produce pages which, by being flexible, are accessible to all."

John Allsopp, The Dao of Web Design; 2000 (http://www.alistapart.com/articles/dao/)

"No metaphors or analogies are needed for insight, only the willingness to listen to the subject speak for itself, even if it contradicts received wisdom."

Frank Chimero (http://www.frankchimero.com/writing/the-webs-grain/)

+25

yrs old

"The web could almost be considered a composite, made up of HTTP (the how), URLs (the where), and HTML (the what). Omit any one of these ingredients and you’re no longer building the web."

Paul Robert Lloyd, The Web Aesthetic; 2012 (http://alistapart.com/article/the-web-aesthetic)

"The more interwoven the relationship between the appearance and the manufacturing process is, the more honest the material."

Kevin Goldman, Material Honesty on the Web; 2013 (http://alistapart.com/article/material-honesty-on-the-web)

HyperText Transfer Protocol

HTTP provides us the lingua franca for moving our information around. It's name implies it's intent is to transfer hypertext (non-linear linked text) or by extension hypermedia.

Uniform Resource Locator

URLs give us the ability to address resources. This really is one of the most unique things about the web and the thing that is most easily violated. If we are to understand what the web wants to be, we need to start by understanding that it wants to be addressable. Every resource should have it's own unique address (sometimes more than one address if you have multiple contexts).

HyperText Markup Language

HTML is how we describe the thing that lives at the address we're at. Notice the singular there. HTML gives meaning and description to the objects on the page. This is what we mean by "semantic markup," another phrase that really just recognizes the nature of the thing.

REST

HATEOS

ONE WEB

DEAD LINKS

"We need to stop thinking of our roles as a division of a whole with well defined lines. If we consider a cake as a metaphor for an application, we tend to think of our individual roles as a slice of that cake. But this is inaccurate. What we do affects the whole outcome...

...Rather we are an ingredient in a cake. We are dispersed throughout it's entirety, interacting with other ingredients in particular ways to produce a poundcake, shortcake, angel-food cake, bundt cake, red velvet, chocolate, strawberry, sheet. There are endless possibilities of the whole when we operate as an ingredient."

Cory, Just now.

JavaSript

JavaScript is mighty in its expressive power. As with anything of sufficient power, its ability to do harm is at least matched in its ability to be of use. Lately, our industry has seen the rise of JS application frameworks which have been injected into the core material of the web to act as a middleman, interrupting the nature of the web and relying upon this middleman to facilitate what is already naturally there via HTML over HTTP at a given URL.

"Without first providing server-side rendering, the SPA app alone breaks the web."

Me, again.

In those cases where the browser supports javascript and it is powerful enough to flip the bottleneck while on a fast network connection, this certainly provides a better experience for the subset of users that also have full use of their eyes and high dexterity with their hands on a browser that with a mouse attached to it in a relatively distraction free environment.

Are you starting to see the problem with that statement? Count the caveats, and those are just the one's off the top of my head.

CSS

CSS has two responsibilities that are interrelated and which pertain to being _of_ the web. The first is to provide visual structure to the web. It performs for the visual input, what proper HTML provides for the cognitive. Where HTML provides semantics, CSS provides visual meaning. They are really two sides to the same coin.

CSS

The other responsibility CSS provides is ornamentation. Don't let that label trivialize it's importance though. Ornamentation is not simply making things "look pretty" as so many have patronizingly reduced the craft of the front-end to in the past.

"ORNAMENT. Integral element of architecture, ornament is to architecture what efflorescence of a tree or plant is to its structure. Of the thing, not on it. Emotional in its nature, ornament is - if well conceived - not only the poetry but is the character of structure revealed and enhanced. If not well conceived, architecture is destroyed by ornament."

Frank Lloyd Wright, Language of an Organic Architect; 1953

"It's not just what it looks like and feels like. Design is how it works."

Steve Jobs The Guts of a New Machine, Rob Walker; 2003 (http://www.nytimes.com/2003/11/30/magazine/30IPOD.html)

DESIGN

All aspects of user experience is encompassed by Design, from the effeciency of database queries, to the proximity of a headline and it's body copy. From network robustness to baseline rhythm. All are aspects of Design.

"The answer is right there in front of us, in the website itself, and each step we take away from its intentions makes our creations weaker."

Frank Chimero (http://www.frankchimero.com/writing/the-webs-grain/)

"The palette of emotional design for flatlanders is instead temporal. Temporal beauty lives in state-change animations, nuanced timing effects, strategically placed user feedback, and other “interesting moments,”"

Kevin Goldman, Material Honesty on the Web; 2013 (http://alistapart.com/article/material-honesty-on-the-web)

"Designing for screens is managing ...change over time, and expressing it in clear, communicative, and powerful ways."

Frank Chimero, The Web's Grain (http://www.frankchimero.com/writing/the-webs-grain/)

"It is control versus discovery, uniformity versus multiplicity."

Frank Chimero, The Web's Grain (http://www.frankchimero.com/writing/the-webs-grain/)

"An edgeless surface of unknown proportions comprised of small, individual, and variable elements from multiple vantages assembled into a readable whole that documents a moment"

Frank Chimero, The Web's Grain (http://www.frankchimero.com/writing/the-webs-grain/)

"The size of what we’re making is unknown until we know what we’re putting there. So, it’s better to come up with an arrangement of elements and assign them to a size, rather than the other way around."

Frank Chimero, The Web's Grain (http://www.frankchimero.com/writing/the-webs-grain/)

"We need to start drawing, then put the box around it. Let me show you an example."

Frank Chimero, The Web's Grain (http://www.frankchimero.com/writing/the-webs-grain/)

"Edgelessness means blurred lines between the disciplines that work together to make things for the web"

Frank Chimero, The Web's Grain (http://www.frankchimero.com/writing/the-webs-grain/)

"Just as the Eames chair required a new manufacturing process, the honest web demands a new approach to web design -- an approach defined less by fixed comps and more by rapid iteration and prototyping."

Kevin Goldman, Material Honesty on the Web; 2013 (http://alistapart.com/article/material-honesty-on-the-web)

"We should invest in honest tools that will forever be part of the designer’s toolkit."

Kevin Goldman, Material Honesty on the Web; 2013 (http://alistapart.com/article/material-honesty-on-the-web)

What could these tools be?

What are materially honest tools that can facilitate materially honest web design?

"Everyone that I’ve spoken with that’s worked on a large responsive project with a big client says that the process disrupts workflows, expectations, and work culture."

Frank Chimero, The Web's Grain (http://www.frankchimero.com/writing/the-webs-grain/)