Responsive Web Design Toolkit

Hammering Websites Into Shape

Ken Tabor

• Publisher: Chapman and Hall/CRC
• Year: 2015
• ISBN:
  9781317630333
• Edition: 1
• Topic: Informatik
• Subtopic: Webprogrammierung

Responsive Web Design Toolkit: Hammering Websites into Shape focuses on the nuts and bolts of responsive web design, showing you how to better build and how to debug websites that use the responsive technique. This book guides you through the technology that programmers use to build, test, and debug responsive websites. Covering what engineers do, how localhost can help, and DIY-testing, this book shows technically-minded designers how to create digital objects that lead to shorter development times, quicker testing cycles, and more insight into users and their mobile devices, ultimately leading to better products.

Chapter 1
Responsive Web Design

Why We Do It

This book won’t debate whether responsive web design (RWD) is a good idea or worth our time pursuing. I can guess you’ve already made up your mind on that account just as I have. I consider RWD crucial for any modern web site. Given that common ground we can move forward with a goal of advancing the craft. We can put together a complete toolbox dedicated to helping you develop and, more importantly, debug your responsive web design.

I hope this book helps you when you most need an answer. Making your daily professional pursuit easier is my singular goal in writing this. Discovering a set of techniques enabling and amplifying your effort is what will happen as you travel through the pages. Reading from chapter to chapter, you’ll assemble a box full of time-saving tools that build upon one another, forming a strong chain.

You will discover hands-on examples of effectively using these tools. You’ll receive nuts-and-bolts examples discussing how to use them and, more significantly, when and why. Talking about problems that need solving and how to go about approaching them will empower you when replacing tools becomes necessary. Why replace tools? Some become obsolete. Some become boring, and a desire for something different drives creative inspiration.

Why should we assemble a powerful toolbox? Because debugging responsive web design isn’t easy! Imagining how a page layout appears across phones, tablets, laptops, and super-wide monitors is a brain-bending exercise. Seeing how HTML, CSS, and JavaScript work across a wide selection of devices is complicated. The list of devices commonly found out in the wild isn’t shrinking, either. In fact it’s expanding as Android devices grow and exotic machines appear. You may already be targeting glasses, watches, and thermostats.

This book will share immediately useful concepts, helping you more safely navigate one of the most difficult things we tackle: building websites that respond to a world of devices.

When you get to a point that it feels as though you wish you could throttle a website into submission by hammering it into shape, I expect tools and techniques found in this book will give you the confidence and strength to debug your designs into working order.

An audience of technically minded designers will find practical topics in this book such as:

• Delay expensive hardware purchases as long as possible by emulating devices in your development environment.
• Turn around work iterations more quickly by setting up a web server on your Windows and OS X machine.
• Write more readable and maintainable CSS by using Sass.
• Explore the power of NodeJS and PhantomJS to generate multisized portfolios.

As we review each of these concepts, reason is always applied: reasons we reach for a particular tool, how to wield it, and the creative power it’s meant to amplify. While technology changes and tools are replaced, the reason to use them remains.

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.

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.

“Responsive Web Design,” last modified May 25, 2010,
http://alistapart.com/article/responsive-web-design

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.

Amount of Visitors	Amount of Screen Sizes
62%	Top five
87%	Top ten
93%	Top fifteen

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.

Debugging and Testing Versus Writing Responsive Web Design

Every page of this book supports your goal of crafting a fantastic user experience founded on responsive design principles. Please understand that very little time is spent in the design or implementation of RWD simply because dozens of books and hundreds of blog articles already cover that.

Someone might ask, “Is writing the files making up a responsive website easy?” and I’d answer, “No way.” We do know that many books and articles exist to serve that audience. In fact, every website on the Internet is a functional example showing CSS, HTML, and JavaScript. All that’s needed is a web browser with solid inspection tools.

Given that, I turn your attention to the next steps in the creative workflow:

• Testing and debugging
• Rapid iteration in your developer environment
• Emulating production servers locally
• Simulating user device screen sizes

Where will these next-level tools come from? In many ways, it’s mindfully adapting parts of the tool chain that at first appear to be the ex...

Table of contents

• Cover
• Title
• Copyright
• Contents
• Dedication
• Assembling a Toolbox of Success
• Chapter 1: Responsive Web Design
• Chapter 2: Introducing the Engineering Process
• Chapter 3: Localhost, the Best Host
• Chapter 4: Apache Web Server
• Chapter 5: Connecting Devices to Your Computer
• Chapter 6: Virtual Hosts: Making Many Out of One
• Chapter 7: Get Together on GitHub
• Chapter 8: Google Chrome: Browsing a Page and Reading Its Code
• Chapter 9: Surviving CSS by Thriving With Sass
• Chapter 10: Google Analytics: Measuring Your UX With Analytics
• Chapter 11: Responsive Screen-Capture Project
• Chapter 12: Looking Around the Toolbox
• Appendix
• Index