Transcript of "Why 2013 is the year of responsive web design"
Why 2013 Is the Year of Responsive Web DesignMashableMashableYou may have noticed that Mashable got a new look recently. The design seems widerthan usual, and when you shrink your browser, the content resizes to fit.The aim here isn’t merely prettiness or technical trickery, however: Media companieslike ours are seeing a major shift in the consumption habits of their audiences.Those organizations that don’t act may find themselves behind the curve. Here’s why.The Post-PC Era2012 has been a very unusual year in the PC market. For the first time since 2001,PC sales are projected to be lower than they were in the previous year.So which devices are consumers buying? Tablets, for one thing. Tablet sales are expected to exceed 100 million this year.Tablet sales are expected to exceed 100 million this year. Their sales numbers maytop notebooks next year. Smartphones, of course, are also a hot commodity —according to Nielsen, the majority of U.S. mobile subscribers now own smartphones,
not feature phones.Meanwhile, the shift to mobile is happening at an extraordinary speed. Today, 30% ofMashable’s traffic is mobile. By the end of next year, this may exceed 50%.Web or Apps? How About Both.For those of us who create websites and services, all this leads to a singularconclusion: A million screens have bloomed, and we need to build for all of them.Building apps may seem like the obvious solution. There’s no doubt that havingmobile apps for the major platforms is better than having no apps at all, and yet howdo you build for every app store? Last month, for instance, Mashable was accessed onmore than 2,500 different devices. We could certainly build apps to reach a goodnumber of those platforms, but probably not all of them.When it comes to news sites like ours, there’s even more data suggesting that themobile web is key. According to the Pew Research Center, 60% of tablet users preferreading news on the mobile web than via an app. While I think media companiesshould certainly offer apps, it’s clear that having a great mobile website should be thepriority.Responsive Web Design
The solution, of course, is to make a website that works equally well on every device.Enter responsive web design. In simple terms, a responsive web design uses “media queries” to figure out what resolution of device it’s being served on.In simple terms, a responsive web design uses “media queries” to figure out whatresolution of device it’s being served on. Flexible images and fluid grids then sizecorrectly to fit the screen. If you’re viewing this article on a desktop browser, forexample, try making your browser window smaller. The images and content columnwill shrink, then the sidebar will disappear altogether. On our homepage, you’ll seethe layout shrink from three columns, to two columns, to a singular column of content.In the case of Mashable, we also detect the type of device and change the site’sbehavior accordingly. On touch devices, for instance, we enable swiping betweencolumns. (Technically, detecting device functionalities may be referred to as “adaptivedesign,” rather than “responsive,” but increasingly both approaches are used intandem.)The benefits are obvious: You build a website once, and it works seamlessly acrossthousands of different screens.
2013: A Responsive YearGiven the rapid adoption of tablets and smartphones — and the fact that userscurrently seem to prefer reading their news on the mobile web rather than in apps —I think it’s inevitable that 2013 will be the year that responsive design takes off.For publishers, it offers the simplest way to reach readers across multiple devices. Forusers, it ensures a great experience on every screen.As Ethan Marcotte, the author of Responsive Web Design, explains, “Now more thanever, we’re designing work meant to be viewed along a gradient of differentexperiences. Responsive web design offers us a way forward, finally allowing us to‘design for the ebb and flow of things.’”Image courtesy of iStockPhoto, RapidEye, mbortolinoTopics: Announcement, Apps and Software, Dev & Design, Media, mobile, responsiveweb design, Supported, TechMashable