Motion Fascination

Here’s an admission: When I discover a website that’s built responsively, I’ll play with it, seeing how it reacts. I love playing. It’s such a fantastic way to learn. My daughter taught me how to wonder through play without expectation. She’s always curious, open minded, and ready to see.

I try taking on that point of view as I pull my web browser frame from right to left, slowly making it smaller. Small enough until it’s the width of a phone. Then with a pause of admiration, I’ll drag the browser’s right edge back to full screen’s width, watching how it responds to my movement. How does it fill a desktop screen size?

The act of screen layout destruction and creation fascinates me. What pieces decide to shrink down? What sections pop away? What springs into life, hidden until my movements reveal them? How does the site decide to break down anticipating the viewer’s screen width? Responsive design is a brief, choreographed dance performed for my audience of one.

Do you do the same thing? Admire the complicated beauty that unfurls as a sail blowing full in the wind before collapsing down into stillness? Orchestrating that composition is not without heartache. It demands dedication. Making it look smooth and effortless takes tremendous effort. Dynamic, user-driven interaction remains one of the most compelling aspects of our digital world. It’s the reason for responsive web development.

Inspiring the content in this book is a desire to serve technically minded designers and web developers. Anyone wanting to power up their craft of delivering their responsive websites more quickly will find serious tools here.

Responsive Web Design: A Brief History and Explanation

If we asked a group of people to define responsive web design, what answers would you expect to hear? More than likely, we’d get descriptions. People would tell us qualities of what it is and what it isn’t. Perhaps we’d hear about popular libraries and frameworks used for successfully building responsive designs. Fluidity, adaptivity, grid-based formats, media queries, and breakpoints might be mentioned.

You and I probably share similar expectations for responsive web design. They’re relatively simple given the overall complex topic. For each category of device (phone, tablet, laptop), the site best fits to the capacity of the viewer’s hardware. It’s amazing that all possible views are held within a unified design architecture, showing enough information, enabling our customers to effectively interact with our technology.

Observations on implementation details are honest reflections of our current understanding. It’s informed by engaging in development, consuming responsive sites, and being interested in the community’s best practices.

A few years back, facing the increasingly diverse array of screen sizes our customers view our websites with, our industry had to invent a technique, one promising that our sites look and work well for all. Responsive web design was, and for the most part currently is, the primary solution for that complicated challenge.

Desiring a richer context on the domain, I discovered Ethan Marcotte’s May 2010 article on A List Apart to be one of the earliest opinions on the matter. In his article, Marcotte compares the relatively transient nature of software and websites to the relative permanence of architecture. More significantly, he teases out metaphors drawing upon a building’s foundation, footprint, and potential for flexibility.

There surely is a losing battle in a pursuit of making designs specifically for a given form factor. So many screen resolutions exist that keeping up is traveling a maddening path with only loss of time and sanity found at the end.

We can easily agree with a client’s request for supporting typical screen sizes: “oh yes phone, tablet, laptop.” In that very assurance, we know phones come in 4- and 5-inch versions. We know tablets come in 7- and 10-inch forms. We know computers have all sorts of dimensions as well as external monitors. Further still, my videogame station hooked up to my living room HDTV has a high-end web browser.

Marcotte spells out the underpinning concept so well.

Seek out that article when you have the time if you’ve not read it. Even more fun for me is that Marcotte’s proof-of-concept web pages remain functional. They demonstrate his techniques, which are relevant today.

As a product engineer, I admire his initiative looking at real-world references, such as buildings and architecture for inspiration and convention that our digital world might use. Often enough, I’m stuck on a horridly demanding problem, and success comes into view as I look at the problem through the lens of other industries.

Adjusting for All Shapes and Sizes

How many screen sizes are there? What’s a realistic count that we need to support? Is it actually so complicated? Yes, certainly more than we know.

Treating a new user or perspective customer to a sad experience is the worst. Anything less than a great experience lets your audience drift away to your competitor. The viewer doesn’t have an investment hooking them into figuring out your site.

As a study, I’ve reviewed my blog analytics. I found that approximately 350 different screen sizes have shown up while users are reading my articles. Of course I need to serve each and every one of them, or I feel that I’ve failed. Fortunately I’ve built my blog with responsive web design in mind. RWD allows me to satisfy my readers by fitting my content into their screens in the best way possible.

Reading that statistic, someone might exclaim “Three hundred and fifty! How can that many screen sizes exist? Sure, we have many phones, several tablets, lots of computers, and a couple of external monitors, but that’s not possible.” A fair reaction.

Not only mobile devices figure into the count. In fact every time someone resizes their web browser on a computer they’re hitting my blog with a different view. Their experience is uniquely theirs, and if my blog carried ten times the readership traffic, I’m sure I’d see at least double or triple the number of screen sizes.

Looking at the analytics data, I see visitors presenting groups of screen sizes.

Trailing behind the top fifteen is a long tail of random shapes and sizes, probably representing whatever resolution my readers resized their desktop browser to before navigating to my site. Don’t be too worried, because order does emerge from this randomness. Easily recognized sizes typical of phones, tablets, and laptops are counted among the top fifteen most popular visitors to my blog. Similar patterns will show on your site as well.

If you’re looking at that screen size data and thinking its insights are totally useful, I agree. We can turn data into knowledge, understanding what our customers need from us. If you’re thinking I must have labored getting the data in the chart above, that’s the awesome part. Getting those numbers is simple. Because reporting them only takes five minutes, I refer to them often.

Empathy for Our Users

Anyone in charge of project budgets thinking responsive web design is a magical solution because “we build it once and it works on anything, all the platforms come for free, and it’s cheaper because we build the UI once instead of three times” misunderstands the technique. It’s more expensive and more difficult than creating a user interface (UI) for a single device. It takes more brain-sweat, more paper prototyping, more mindful consideration of everything your user wants to do on your site. Enabling them to consume your content with devices of any size can feel mind blowing, but we’ll make it easier starting today.

Early on, if we can imagine how our users connect with our website, we can encourage that connection. Ensuring it’s as straight a line as possible without distracting turns down broken paths is compassionate as well as valuable.

Resources for Responsive Web Design

Many excellent sources explaining the design process, from sketching through paper prototyping to authoring source code, are out there. Where their voices grow silent is on the grueling task of developers testing and debugging against an ever-growing array of devices.

This book focuses on filling the gap between writing code and a site appearing on users’ devices. Much time is spent assisting you in more easily testing your design, more rapidly turning around source code changes, and more soundly debugging it. Ways of incorporating reality checks such as simulating production server environments and screen sizes without hardware are crucial topics.

Designers, artists, and developers wanting more guidance on designing and planning ought to look for alternatives. Typical RWD implementation topics like the following are not covered here:

• Grid-based frameworks
• CSS and HTML boilerplates
• Media queries and breakpoints
• Wireframe strategies

All of these topics are crucial for our craft, and I want every reader of this book to succeed at them. Learn more about them by spending time in the search engine of your choice plugging in those keywords.

Once you’ve internalized those concepts and are building a website, please crack open this book for concrete ways of reviewing and validating your designs. You’ll find that troublesome effort can be done more easily, cheaply, and generally more happily.

This Book is for You If You’re Seeking Easier Development

In my opinion, “development” incorporates the entire process of building software rather than any particular job. Everyone who has a concrete touchpoint in an application or website is a “developer.” Why does that matter? It’s to assure readers of this book that it’s not written with programmers in mind. In fact, many of us feel that artists are evolving into roles that pull tasks for writing code as well as traditional look, layout, and workflow. In my mind, this is a technically minded designer. It’s high time to raise them up.

Designers are the primary audience for this book, but everyone on the team will take away something useful for making their job easier. Benefits abound for teammates who gleefully cross boundaries but take a deep dive in some specialty skill. Let’s get out from behind our silos and see what other folks are doing!

Working closely together comes naturally for generalists at start-ups. Everyone must seemingly do everything just to willfully pull it off the ground. Furthermore, cross-functional teams are found in any number of companies.

What are key challenges for developing responsive design?

• A single page of content is seen with multiple looks.
• There is no single definition for what a phone and tablet screen size is.
• Developer computers are not configured to match customer-facing environments.
• Writing CSS becomes complicated as more media queries are built into styles.

If responsive web development is as complicated as all this, who would ever want to do it? In fact, we know who demands it: our customers, made up of end users and clients paying for modern websites.

What are specific ways this book makes responsive web development easier?

• Strengthening your development workflow
• Increasing your tooling options
• Providing multiple ways to look at the page content
• Simulating device specific resolutions
• Matching up authoring and production environments
• Iterating the classic design–code–test–fix lifecycle rapidly

Helping Designers and More

Anyone building modern-day websites will benefit from the lessons contained in this book. It’s not just designers but also technically minded artists, web developers, quality-assurance testers, and leaders managing creative teams.

Technically minded designers will gain insights into the next level of development, incorporating ways of testing websites by emulating how users view their work. Installing servers that closely match final live production environments helps diagnose glitches earlier in the build process, when changes are less costly.

Quality-assurance experts may want to incorporate ways of emulating devices on their own computers with an eye toward delaying expensive hardware orders for as long as possible. Analytics reporting reveals what mobile devices are used the most and are therefore most worth budget spending.

Leaders will take away concrete strategies for reducing time to market and development expenses. Techniques show ways of directing their teams of designers and developers to fail fast. The goal is seeking out problems and glitches before they hit customer-facing environments.

Developers straight-up coding websites will have a new sense of joy when incorporating these tools. The drudgery of making wireframes and design mockups functional by coding them up will be easier as verification techniques are introduced.

The Book’s Structure

Chapters are grouped to introduce you to new tools, explain their use, and then progressively advance your knowledge through new applications of them. Each chapter flows together from end to beginning, but you’ll see a few major groupings.

Chapters 1 and 2 contain an introduction to the book’s mission and the concept of adapting engineering tools and process to your daily workflow.

Chapters 3 through 6 introduce you to the importance of web servers and walk you through the steps necessary for installing, setting up, and using one on your own work machine.

Chapters 7 through 10 each survey a particular tool that will help you raise your expertise in web development, making responsive web development easier.

Chapters 11 and 12 conclude the book with a special project connecting the dots between several open-source tools, creating a highly customized megatool!

Tip Boxes

You’ll find boxes throughout the chapters pulled away from the regular text. These are totally optional reading, but they are linked to the lessons around them. Each offers additional details explaining some concept introduced in that section. Because they’re deep dives into the related subjects, feel to read them at your leisure or even skip them for a while.

Companion Website

I’ve made a website to accompany this book. Give it a look from time to time to see what’s new. I’ll be sharing on it the latest info I find on new tools that will help you hammer RWD into shape. I’ll also write answers in response to whatever questions I receive from you and your fellow book readers.

Assembling a Toolbox of Success

Anyone can walk over to the neighborhood hardware store to buy a hammer and screwdriver. It’s one thing to have the tools stacked on a work surface in the garage, but it’s another to know when to use them for solving a recognized problem.

It’s another talent to know when a tool needs to be replaced. Technology changes all the time. Hammers look very much the same as they did a hundred years ago. Software tools are a trickier matter. Compare two that solve the same problem, and they might install, behave, and act differently. Understanding the job you’re trying to finish directly influences what tool you reach for today. It also reveals the capabilities you seek out in its replacement tomorrow.

Ultimately, by following along with this book, you’ll assemble a compete toolbox of modern power tools specifically arranged for your success. Ideally, you’ll meet deadlines more quickly, leapfrog your peers, suffer less frustration, and stay more deeply immersed in the creative flow. You might even be happier!