Ethan-Marcotte

Our friends at A Book Apart have been keeping us apace, and, what is more, trying to prepare us,  in the least, for the future of the web and how we come to engage it. 

As they write, at the intersection of “multi-disciplinary mastery and laser focus”, they look to address, with style and clarity, both the “emerging and essential in web design and development”.

Ethan Marcotte, who has just published, “Responsive Web Design”, offers just that with his latest book: a glimpse into the ways in which we encounter information.

Here’s Marcotte:

“As I begin writing this book. I realize I can’t guarantee you’ll read these words on a printed page, holding a tiny paperback in your hands. Maybe you’re sitting at your desk with an electronic copy of the book up on your screen. Perhaps you’re on your morning commute, tapping through pages on your phone, or swiping along on a tablet. Or maybe you don’t even see these words as I do: maybe your computer is simply reading this book aloud.”

The constitution of the book, and larger still, the very ways in which we read and write, and engage with thought, well, as we all know, these structures of interaction, and our relationships, they’re changing. Which is to say, a radical transformation is afoot.

It should come as no real surprise, then, Ethan Marcotte, long a pioneer of the internet, is on the cusp of these major shifts. Also, it has become increasingly clear that aesthetics will play a vital and timely role. How material is presented, let alone how we come to experience this content, is quintessential for absorption and dissemination. 

Happy to learn that the future of the web is in such thoughtful hands. A new ubiquity, singular and different, is emerging. 

Facebook and the Responsive Web

Facebook’s mobile moves are part of a larger trend called responsive web design. It won’t just be the code bases that change either. We, the users, will notice the differences too. For example, it’s likely that Facebook’s desktop website will over time utilize more of the design patterns in its mobile apps and site.

Responsive web design was a term coined by Ethan Marcotte on A List Apart (a long running and popular resource for web designers) in May 2010. He coined it in response to the increasing number of devices and browsers on which to view a website, which was kickstarted with the iPhone in 2007 and has since expanded to include the likes of Android and Internet TV browsers. … Marcotte followed up with an entire book on the topic. He summarized:”

This is our way forward. Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design.

  • Listen
Play

EPISODE 025 - New Zealand, Brooklyn Beta, and Responsive Design with Ethan Marcotte (@beep)

Amanda, Dan, and Scott are joined by Ethan Marcotte, progenitor of the Responsive Web Design movement. Ethan recently spearheaded the responsive redesign of the Boston Globe’s website. He has authored and co-authored books on CSS and web standards.

Episode Notes and Links:

The Revolution Will Not Be Printed

by Zach Davidson


          Monuments fall; cliffs crumble into the sea; even stars, inevitably, supernova. The fact of the matter is, no matter how much we try to convince ourselves otherwise, nothing is permanent. The world (and everything within it) is constantly in flux, shifting, changing, adapting. Nowhere is this more prevalent than in new technology. Within months, masterpieces become obsolete, and the heroes who crafted them, if unable to adapt, become ancient relics themselves. If, as a designer, you build something that is stiff, unwavering, inadaptable to the necessary changes of technological advancement (both known and unknown), then you and your designs, too, will fall, will crumble into the sea, will supernova.

           Dramatic? Yes. Accurate? Absolutely. According to A Dao of Web Design, “Designing adaptable pages is designing accessible pages” (Allsopp). Web analytics are characteristically specific—how many people left your site after only seeing one page (“bounce rate”), how many seconds (average) is each page viewed—meaning that it is crucial to maximize ease of interface. A difficult website is not like a difficult driving route, in which the driver will get frustrated but keep trying to find their destination. In an age of immediacy, if a website is tricky to use (AT ALL), ugly, or slow, a user will simply leave—within seconds. That’s why design is so important. The decision to stay or go is decided almost immediately, and if ANYTHING works improperly, it immediately costs you users—which are your main metric for the success of your site. So how does one design the perfect, user-friendly website? What benchmarks/measures are in place to improve interface, ease of use, and engagement? To answer this accurately, we must start by examining the very origins of web design.

           When new technologies are established, it takes a while for their use to extend past duplicating previous technologies. Early television was little more than radio plays performed in front of a camera. This is a necessary step in the understanding of new media, but is certainly not the most fitting, organic, natural way to use these new media. If you are filming a radio play, you are not matching your content to your form, you are simply forcing what you know (actors standing around a microphone) into this new territory (cameras) because you have yet to figure out how to best create content for this new technology. This is what Benjamin Bratton refers to as “interface replication”, and it extends, too, into the birth of web design.

           Web design began as a child of the printed page. Naturally, at its inception, designers were essentially creating fixed, print-based designs. These designs would have looked exactly the same on paper; they simply lived online. This was the digital age “interface replication”, and it lasted until about 2004 (more on that later). Several terms coined in this era, these mainstays of the digital experience are actually examples these vestigial remnants (or genetic hand-me-downs, if you’re an optimist). Many of them still exist, sometimes prevalently, often pointing at the comfort we take from our physical world–files, folders, spreadsheets, documents, trashcans/recycling bins, docks, sites, “home” pages, pages, cut/copy/paste, gallery, desktop—these terms are all near-archaic holdovers from a pre-digital world, which have stubbornly refused to die (or have subverted death by finding new, digital definitions). The most maligned of these terms, of course, is “above the fold”—a holdover from the old newspaper standard that your most important content must appear above the fold of the front page, so that a potential reader will see something that is engaging without having to open/move/flip the paper (or scroll/click/look around the website, as it currently exists).

           Designing for the web poses some unique challenges. Unlike a canvas (or a sculpture, a building layout, a stage, or printed page), the web does not have set dimensions. Sure, you could accept something as a standard (like Macintosh’s default screen resolution of 72dpi, and a screen size of 1366×768p), but the web is pliable, it is fluid between mediums, so what happens when you (inevitably) bump into something that isn’t your standard (like Windows’ default resolution of 96dpi, or, even more extreme, the screen of a tablet, a smartphone, a smartwatch, or any other display that is surprisingly extreme in dimension)? Designers spent years trying to control the web, trying to find ways to equalize user experience across devices, across interfaces, attempting to make something look exactly the same for both Mac and PC users—but to no avail. Technology advances exponentially, and there were always new technologies that thwarted their seemingly all-encompassing code. Then things started to change.

The fluidity of web experience is part of what makes it unique; instead of viewing that as a weakness, something to be worked around, what if that the web’s greatest strength? John Allsopp thinks so:

“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.”

In 2004, Cameron Adams displayed for the world a new way of thinking, when he unveiled a site layout design that changed/adapted based on the width of the browser window (Adams). Within a few years, the design community was in hot pursuit of this new ideal, alive and engaged with words like “flexible” and “fluid”. Then, in 2010, the revolution was formalized: Ethan Marcotte published the book, “Responsive Web Design”, and with its title, coined the term that would come to define the modern digital era.

           Ethan Marcotte is a Boston-based designer and developer. He was a literature major n school, but, by accident, ended up messing around in photoshop, and within ten years, became one of the most important theorists in the field. Inspired by John Allsopp and his essay, “A Dao of Web Design”, Marcotte quit focusing on the standard, which was a fixed-width approach, and began his attempts to meet the web on its own terms. In his book, “Responsive Web Design”, Marcotte unpacks everything you need in order to build a website that actively responds and adapts, based on how it is being viewed. There are three main requirements, when building a responsive design: a flexible, grid-based layout, flexible content, and media queries (Marcotte, 9). Through the book, he walks you through how to build these three things into your own site, as well as giving detailed explanations/reasons behind each tactic.

           First on his list is building your site around a flexible, grid-based layout. Traditional web design (the one at tension with its parent, print design) is built around a fixed-width layout. “The site is x pixels wide. So I want my font to be this size, I want my margins to be y pixels, and I can specify the exact size of everything else.” The folly here, of course, is that on a tiny screen (a smartphone, for example), these set sizes will completely destroy the way the page looks—a tiny screen has way less pixels to work with, so the proportions will look way off. Marcotte suggests that you plot your site layout on a basic grid, and set all sizes as proportions (percentages of the full page) instead of as exact, specified sizes. “The site is x pixels wide. I want my margins to be 10% of that width on either side, I want my main font to be y percent of the page height, etc.” Coding like this gives you a website that shrinks or grows to remain proportionally equivalent based on any browser size. If the window shrinks, the page shrinks—and just like that, gone are the days of the ugly side-scroll.

           His second requirement is flexible images/media. Once you’ve built your grid, it’s important to keep everything flexible. If your whole page is based on percentages and proportions, then you don’t want to start adding fixed-width content. A picture that is too wide for a smartphone (again, just the easiest example) will be awkwardly/unintentionally cut off. But an image/video that is, like the rest of the site, designed in proportion to the whole will look beautiful (and as intended) no matter the browser width.

           Marcotte’s third and final ingredient: media queries. He suggests that, based on different screen sizes, you can infer different devices (and more importantly, expected uses) (Marcotte, 114). The example he gives is the difference between what someone primarily wants when they are visiting a restaurant website on their desktop/laptop, versus what the same person primarily wants when they are visiting the same website on their phone. The phone user is presumably on the go, and has different needs from the website. Marcotte suggests that, when designing a website, you should not only make your website look beautiful on any size screen (ingredients one and two), you should even go so far as to build what are essentially different versions of your site, based on different implied uses. This is where the media queries come in. As far as I can tell, you use these to add in what I understand as code parameters, which tell your site which version to display based on which screen size it is being viewed in. You now have a beautiful site that responds and adapts to the user and their perceived needs.

           The web is liquid. It changes, based on how, where, and why you view it. This is what makes it unique, what makes it special, and where the truest opportunities lie in terms of using it to its fullest capacity. Responsive Web Design, in some for or other, is here to stay. Not necessarily in the exact terms that Marcotte defines it, but in the sense that starting in 2010, a new world was broken wide open for web designers—a flexible world, a customizable world, a world that can adapt and react to the specific needs of every individual user. This is the web of the future. This is what the web can, should, and will be. It can evolve over time. And evolution—the ability to grow, to learn, to adapt—is what will prevent this modern web from the inevitable fall, crumble, supernova.

Open the pod bay doors (to the future), HAL.

BIBLIOGRAPHY

Adams, Cameron (September 21, 2004). “Resolution dependent layout: Varying layout according to browser width”. The Man in Blue.

Allsopp, John. “A Dao of Web Design.” A List Apart The Full. N.p., 07 Apr. 2000. Web. 29 Apr. 2015.

Bratton, Benjamin H. “What Do We Mean by Program?” BRATTON.INFO - Texts - What Do We Mean by Program? N.p., Dec. 2007. Web. 29 Apr. 2015.

Marcotte, Ethan. Responsive Web Design. New York: Book Apart, 2011. Print.

A Book Apart: Brief Books for People Who Make Websites

http://www.abookapart.com/

I have to give thanks to my co-worker Avery Banguilan for pointing this site and these books out to me.

A List Apart, a webzine for web designers has started putting out these books that look at issues involved with planning for and executing digital experiences.

Avery loaned me Ethan Marcotte's Responsive Web Design book, and I’m finding it (code heavy but) very interesting. It’s already influencing how I think about how I approach my job and projects I am involved with. (Which I hope says more about the content/approach/thinking manifest in the book than it is about how easily influenced I am …)

I’ve been thinking a lot about Luke Wroblewski and his Mobile First approach, and that’s another book on this list I’m interested in checking out.

HTML5 for Web Designers by Jeremy Keith also piques my interest, as, really, does every book offered here, for one reason or another.

Here’s how this series’ editors describe their efforts:

“Web design is about multi-disciplinary mastery and laser focus, and that’s the thinking behind our brief books for people who make websites. We cover the emerging and essential topics in web design and development with style, clarity, and, above all, brevity—because working designer-developers can’t afford to waste time.”

“A Book Apart publishes highly detailed and meticulously edited examinations of single topics. We produce brief books of about 100 pages—the perfect size in terms of subject depth and coverage for topics like HTML5, CSS3, content strategy, responsive web design, and more.”

“The goal of every title in our catalog is to shed clear light on a tricky subject, and do it fast, so you can get back to work. Thank you for supporting our mission to provide professionals with the tools they need to move the web forward. Let us know what you think about our books.”

Recommended. Check it out.

Getting back into E-books

This is a picture of my most recent purchase. It’s called Responsive Web Design by Ethan Marcotte. I really wish I could say I purchased it for fun, however I’m currently taking a web design class. It’s already been quite the journey because the way we learn to structure our process makes so much sense. I bought a Javascript book over the summer as a refresher to coding and wow I really need to expand my computer vocabulary. I’m making a better habit of reading in my free time as opposed to watching TV. 

So far, I’m really loving the concept of responsive websites. They make so much sense and they make the world such an easier place. I know that I’ve tried to read so many things on my phone and I constantly had to pinch and zoom and tap on tiny links with my massive thumbs. And responsive web design will eradicate all of those annoying details. 

The only reason it’s an e-book is because I didn’t have enough money to buy the paperback version. And the reading is due tomorrow. So that’s two chapters that I’ve gotta read. It looks like its going to be a fun evening. I haven’t bought e-books in a long time. It’s just too easy for me to click a button and be anywhere else. Flipping pages and finding where you last left off is also way easier. So I'l have to train my mind and focus. I must read this book. Don’t. Click. Away. 

By Mandy Brown, Jason Santa Maria, Ethan Marcotte, David Yee, and Rob Brackett (quite the team!), it’s a tool for collaborative writing and editing. Given their pedigree, I’m excited to try it.

From their introductory blog post:

[W]e came together to make Editorially, a new collaborative writing and editing platform. We believe that the web is not merely another distribution pipeline, but a unique and deserving space for both reading and writing. Our goal is to support and encourage that writing process — from the first flash of inspiration all the way through to publication, and at every point in between.

And hey, it’s Markdown-based! (Isn’t everything good these days?)

Inspired by the amazing Ethan Marcotte and his kick-ass book Responsive Web Design, I rebuilt my website to be responsive. The previous version was built to detect a few specific mobile devices and serve some alternate CSS/content. But without support for other devices it seemed like a half-baked solution. So I went full monty with a completely responsive build.

While my primary goal was to build a responsive site, I also reduced the vast sea of content therein to a single page of key information. I realized that my website was reflective of my own inability to be concise and wanted to change that. So now I afford visitors important information and leave everything else behind.

While building my site to be responsive I quickly realized how much time would be spent testing various resolutions. So I built a little application to help me along. It’s not a robust solution like Screenfly, but it’s simple, quick, and serves me well. Though I do have plans to make this really slick in the near future.

The History Of Web Design Explained In 9 GIFs

The History Of Web Design Explained In 9 GIFs

25 years of web design, summarized in 9 unforgettable GIFs.

Froont, a San Francisco company that makes tools for web designers, has created nine GIFs that show just how far web design has come in the past 25 years. If you’ve ever wondered why CSS is important, or why Flash died out, these GIFs will explain everything.

Read Full Story



via. Co.Design

View On WordPress

Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to ‘design for the ebb and flow of things.’
— 

from responsive web design, the may 25, 2010 article on a list apart by ethan marcotte (the article that coined the term and started it all)

as a designer, it is crucial to consider what it means to design for ANY context. this is the challenge that makes me eager about web design.

follow ethan marcotte on twitter (he likes to highlight great examples of powerful responsive design, and funny pictures, too) @beep

The online landscape has changed tremendously since the advent of responsive web design, with many people weighing the advantages and disadvantages of RWD. Ethan Marcotte, who coined the term “responsive web design,” recently spoke about the state of the web and how responsive design has changed the way web designers have to approach their work. Our web designer Caitlyn was in attendance for the talk and came away with a lot of valuable information.