The Web Platform has gone a long way since HTML5 was first made popular and people started looking into JavaScript as a language that could do build complex apps. Many APIs have emerged and there is an abundance of content out there about how the browser can leverage all this.
This specific article series will go a step further and focus on how these powerful technologies can be leveraged in practise, not to building cool demos and prototypes, but how real practitioners use them in the trenches. In this (post)HTML5 series, we'll go beyond buzzwords and get practical insight from experts about what has actually worked for them. We'll also talk about technologies (like AngularJS) that go a step further, and define the future of how the standards and web development will evolve.
This InfoQ article is part of the series “Next Generation HTML5 and JavaScript”. You can subscribe to receive notifications via RSS.
In his book The Responsive Web, Matthew Carver provides an accessible introduction to modern web design and the importance of responsive design.
The book is divided into 3 sections. The first section provides a brief introduction of what responsive design is, why it exists, and some of the features of modern web browsers that enable the responsive web to exist. It also makes the case for "mobile-first" where sites are designed for a mobile device breakpoint before moving on to a desktop design.
The second sections goes into the how of designing for a responsive web. Before any code is written, Carver presents information on how to present ideas to clients. Using navigation as a talking point, design patterns are introduced and the thinking about how to build responsively. The book then goes on to cover some of the fundamentals of how to actually build a responsive design and some modern techniques for presenting information such as web typography.
In the final section, more advanced techniques are introduced as effective solutions to problems presented by various browsers. The book wraps up with practical advice on testing a design and how to optimize it for performance.
InfoQ spoke with Carver about his book and the challenges facing the modern web developer.
InfoQ: Modern developers face incredible challenges with myriad browsers and devices. What advice can you give for developers struggling to keep up?
Matthew: First of all, I would say keep at it. I think the state of "struggling to keep up" is common among passionate developers. Our industry moves way too fast for anyone to truly live on the bleeding edge without having a very focused, niche practice. If you feel like you're struggling to keep up, then you're likely doing your job pretty well.
Secondly, there's so many great ways to emulate devices and browsers. It would be great to have a fully stocked device lab with all the up-to-date tablets and mobile phones, but it's simply not a reality for a lot of developers. Luckily there's some alternatives.
Chrome in its developer tools offers a sort of emulator that frames the viewport relative to a device size, so you can choose to emulate the screen size of any number of devices. It'll also spoof things like touch controls so you can get a pretty good sense of what to expect in mobile and tablet browsers right in Chrome. Installing the Android SDK will install the official emulator and Xcode comes with an emulator for iOS devices.
InfoQ: What are your thoughts on frameworks such as Foundation or Bootstrap? Where do they fit into the developer's toolbox?
Matthew: I was pretty soft on them previously. In The Responsive Web I discuss Foundation in detail and offer it as a great prototyping tool, but recently I've been experimenting with it in production environments. The most common argument against is that they can be bloated or restrictive to the design. I feel like they represent a real need in the process though.
Site builds are getting more and more complex as we stretch our legs and start using the web to do more and more real-world problems, so when you set out with a site build sometimes you're not sure where you'll end up. Having a framework like Foundation in place offers a prefabricated solution that frees you up from solving the immediate problem, like "what do buttons look like on the site" and lets you move into more complex problems such as "is there a better way to implement this button". I still end up customizing 70-80% of the framework, but using Foundation or Bootstrap as a starting point saves a ton of time.
InfoQ: What do you say to critics who say that responsive causes bandwidth and memory issues (on mobile)?
Matthew: I think that's a valid criticism in a sense. The simple fact of the matter is that in web development there has never been a large scale solution offered that hasn't in one way or another been controversial. Has there ever been a solution to a web development problem that wasn't followed by a swarm of critics? Look at Swift right now. Apple has more cash reserves than some countries and has spent years building a language to improve iOS development and immediately there criticism over how well it compiles. Face it, as developers we're a critical lot and if you want to know how failing to embrace change works out online, go talk to a Flash developer.
Bandwidth and memory exist in a budget and in order to accomplish tasks you must spend that budget. Developers might over spend in those budgets for a myriad of reasons but it's not a valid reason to dismiss responsive design as a whole. That's just silly. There's this old saying "A shoddy carpenter blames his tools". Responsive design is a tool to solving the problem of device parity on the web. Device fragmentation is a reality on the web and just because responsive design isn't perfect doesn't mean it's worth abandoning.
InfoQ: Integrated browser tools (F12, etc.) continue to advance in functionality and complexity. What improvement excites you the most about these tools? What parts are most useful to responsive devs?
Matthew: I think the movement to build tools is pretty incredible still. I know it's a little old hat, but gulp and grunt have made the development process so much more efficient, by leaps and bounds. Compass's ability to generate sprites on the fly is incredible and tools like Live Reload make the whole front-end development process light years faster.
InfoQ: How will we see the responsive web change in the future?
Matthew: That's a hard question. In the appendix of The Responsive Web I have a chapter on what I call "Context Aware Design". This idea, that interface should adapt deeply to a user's environment and patterns, is something that I found was already being discussed at Code and Theory as a "Responsive Philosophy". To me, just that fact that this same concept was cropping up independently from each of us, both looking at the same problem, proves to me that there's something there.
I think we have all the tools in place to offer a deeper connection to UI for web users that incorporates their personal preference, environment, time, and personality into interface design.
InfoQ: What are your thoughts on tools like Macaw and Brackets when designing and coding?
Matthew: They are great. I don't know that I would use either in production at the moment, but any tool that helps designers get exposed to the fluctuations in space that are common in responsive design is great. The ability to manipulate and move the drawing space in a design helps designers articulate their ideas closer to the literal browser. I find more and more arguments towards designers using a more fragmented tool set, instead of the one application to rule them all approach of Photoshop.
InfoQ: What was your main motivation for writing the book?
Matthew: I wanted to create something to resolve what I saw as the biggest issue in modern web design, collaboration between disciplines. My hope was to writing something that a designer could read and come away from empathizing with the challenges of a developer and a developer could read and empathize with the challenges of design. I care deeply about the web and I believe passionately that we can use the web to make lives better but that can only happen if we first develop systems to solve problems and make these solutions usable for average people.
A great developer might can come up with a great new way to search for homes to buy that cuts costs dramatically, but if it relies entirely on a command line interface, does it do anyone any good? Alternatively, a designer might come up with a beautiful interface pattern but if the software under it doesn't work, who cares? We need people with these skills to communicate for things to move forward and I hope my book can help that to some degree.
InfoQ: How do you think responsive design has impacted the work done by today's web developers?
Matthew: I think it's inside of every function on the process. You can't ignore users device preferences and I think responsive design has found its place in the development workflow. To me, it's the default process and I find myself having to justify not including responsive layouts by default.
Note: Save 40% on The Responsive Web with discount code info40rwd at manning.com. The code is now active and will not expire.
About the Book Author
Matthew Carver is a front-end developer and web designer with real-world responsive design experience for clients like American Airlines, The Dallas Morning News, and Chobani Yogurt.
The Web Platform has gone a long way since HTML5 was first made popular and people started looking into JavaScript as a language that could do build complex apps. Many APIs have emerged and there is an abundance of content out there about how the browser can leverage all this.
This specific article series will go a step further and focus on how these powerful technologies can be leveraged in practise, not to building cool demos and prototypes, but how real practitioners use them in the trenches. In this (post)HTML5 series, we'll go beyond buzzwords and get practical insight from experts about what has actually worked for them. We'll also talk about technologies (like AngularJS) that go a step further, and define the future of how the standards and web development will evolve.
This InfoQ article is part of the series “Next Generation HTML5 and JavaScript”. You can subscribe to receive notifications via RSS.
