"responsive" entries
Learning the Web
Finding a gentle entry to a big space
The Web welcomes, but it’s awfully big. While HTML, CSS, and JavaScript may all be appropriate entry points for newcomers who want to create, finding a solid starting point can be complicated. Social media has minimized the level of HTML and Web knowledge people need to start contributing, but when it’s time to make the jump, the Web offers perhaps too many options.
Part of the challenge is that HTML, CSS, and JavaScript may be the marquee technologies, but they’re not actually what hosts a website or app. Setting up a site requires an additional set of technologies, from domain names to hosting to web server choices. Setting up a site – long before you get to packaging an app! – requires mastering an additional technical toolset and vocabulary that will help you navigate where you need to put your projects. Our free report, Getting Started with the Web, provides the core foundations beginners need.
Those aren’t the only barriers, though. Read more…
Defining front-end architecture
Raising the banner for a new discipline.
In this excerpt taken from the upcoming book, Front-End Architecture: A Modern Blueprint for Scalable and Sustainable Design Systems, Micah Godbolt details the history of this new discipline and explains why it is such a vital role to embrace in our industry.
With the evolution of the web came changes to the roles of the modern web team. We went from a small group of generalist webmasters to a team of talented specialists. As each of these specialties developed, and members became more proficient in them, the web began to form a new set of roles… or disciplines.
Sketching in Code
Flexible dreams for a responsive world
Last week’s Artifact Conference focused on the challenges of designing for multiple devices simultaneously. One frequent suggestions on stage and off was rough sketching, on screen or on paper, but it’s tricky to get there. The problem is easiest to see for designers on the Web, but it applies to a wide range of digital projects.
The challenge isn’t just devices – designing for a particular device with its given constraints isn’t (usually) that hard. HTML, CSS, and JavaScript have long had tools for abstracting just far enough away from the device that sites can work even in unexpected places. The challenges come from the multiplicity. I used to spend a lot of time helping designers and clients move from “it looks like this in print” to “it probably looks like this on the Web”. That was largely about surrendering control, which was difficult enough, but this is frequently about controlling just enough to create multiple variations with a single code base.
What does a sketch of a page look like when that page morphs itself to fit differently in different containers? What does a sketch of a site look like when that site may present different content (and different types of content) to different users based on their past encounters with the site? What does a sketch of a program look like when it handles many different kinds of input in many different kinds of circumstances?
One answer – the classic answer for those of us walking around with notebooks full of dot grid paper – is multiple sketches. Breakpoints become critical as “it looks like this when…” becomes a mantra.
At the same time, though, I rarely feel comfortable creating site (or code) details on paper when I know the result will be electronic. I spent way too much time explaining how paper and screens are different to saddened designers to want to inflict that pain on my own projects. My notebooks are largely filled with words, with occasional pictures.
Toward Responsive Web Programming
Creating flexible expectations
“Expect the unexpected” has long been a maxim of web development. New browsers and devices arrive, technologies change, and things break. The lore of web development isn’t just the technology: it addresses the many challenges of dealing with customers who want to lock everything down.
Matt Griffin (and a lot of others) reminded me of these difficulties at Artifact, and his Client Relationships and the Multi-Device Web brings it home for designers.
Is there room for programmers to tell a similar story?
I don’t mean agile. Agile development is difficult enough to explain to clients, but applications that adapt to their circumstances are a separate set of complications. Iterating on adaptable behaviors may be more difficult than iterating on adaptable designs, but it opens new possibilities both for applications and for the evolution of the Web.
Responsive Web Design is (slowly) becoming the new baseline, giving designers a set of tools for building pages that (usually) provide the same functionality while adapting to different circumstances. Programmers sometimes provide different functionality to different users, but it’s more often about cases where users have different privileges than about different devices and contexts.
Adjusting how content displays is complex enough, but modifying application behavior to respond to different circumstances is more unusual. The goal of most web development has been to provide a single experience across a variety of devices, filling in gaps whenever possible to support uniformity. The history of “this page best viewed on my preferred browser” is mostly ugly. Polyfills, which I think have a bright future, emerged to create uniformity where browsers didn’t.
Browsers, though, now provide a huge shared context. Variations exist, of course, and cause headaches, but many HTML5 APIs and CSS3 features can work nicely as supplements to a broader site. Yes, you could build a web app around WebRTC and Media Capture and Streams, and it would only run on Firefox and Chrome right now. But you could also use WebRTC to help users talk about content that’s visible across browsers, and only the users on Firefox and Chrome would have the extra video option. The Web Audio API is also a good candidate for this, as might be some graphics features.
This is harder, of course, with things like WebSockets that provide basic functionality. For those cases, polyfills seem like a better option. Something that seems as complicated and foundational as IndexedDB could be made optional, though, by switching whether data is stored locally or remotely (or both).
HTML5 and CSS3 have re-awakened Web development. I’m hoping that we can develop new practices that let us take advantage of these tools without having to wait for them to work everywhere. In the long run, I hope that will create a more active testing and development process to give browser vendors feedback earlier—but getting there will require changing the expectations of our users and customers as well.
Looking Forward, a Leap
Will the Web shift?
Over the last few months, I keep finding new signs that the way we approach web development is about to shift. The parts – which have mostly existed for a while – haven’t completely come together yet, but the next year or two should be exciting.
In 2005, the Web changed without a major new technical push. When Jesse James Garrett wrote “Ajax: A New Approach to Web Applications“, he was describing a combination of techniques that had been around for a while but only combined in the previous few years. At about the same time, JSON, a format that Douglas Crockford had unearthed from existing JavaScript syntax, began its steep ascent. We’ve spent much of the last eight years learning the powers of these new combinations of old things, and celebrating the revitalization of the web ecosystem that they launched.
Today’s shift is a little different: change has been in the air for a while. We don’t exactly have Browser Wars any longer, though there’s still plenty of drama. HTML5 is not only in development, it’s becoming normal rapidly. Some pieces are moving and arriving faster than others, and there is always the challenge of a multi-browser world. There is much much more you can do across browsers today, though, and JavaScript has made it easier to fill the gaps.
Beyond the long-awaited features of HTML5, I see three major factors driving a larger shift:
-
The ever-increasing variety of mobile devices has shattered limits designers imposed on their work.
-
JavaScript practice is maturing, even as the first major additions to the language seem about to arrive.
-
A long slow shift toward hypermedia models (REST and beyond) for application development.
As mobile devices become ordinary, designers are having to give up the last shreds of “the web site must look like this printout”. Dynamic HTML and then Ajax gave sites much more motion and changeability, but usually within a design that was roughly stable. Creating a second stable design for mobile was never a great compromise, but the explosion of mobile devices has forced developers to move toward designs that take much heavier advantage of web-centric styling approaches. Responsive web design is evolving fast.