What Is Responsive Web Design?
I thought a fitting first blog post would be a brief over view of responsive web design. If you haven’t heard of this yet, don’t worry, you soon will. Certainly you’re aware of and hearing about the emergence of mobile and tablet device usage for internet browsing, and the correlating surge of mobile website development which is storming the web development world in response. But did you think that actually building a separate website and redirecting users to m.versionofyoursite.com was going to be here to stay? Pffft. That technology is so 8 hours ago! Pay attention and you’ll see new sites begin to evolve just like www.youdoonline.com through the implementation of RWD – Responsive Website Design.
In short RWD is is an approach to web design in which a site is crafted to provide an optimal viewing experience – easy reading and navigation with a minimum of resizing, panning, and scrolling – across a wide range of devices (from desktop computer monitors to mobile phones). This Cutting-edge architecture provides “app-like” experiences is is quickly becoming the next big thing in Web Development.
iPhone Screenshot
iPad Screenshot
iMac Screenshot
Why Go Responsive?
Tablet sales are expected to exceed 100 million this year. Their sales numbers may top 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. For those of us who create websites and services, all this leads to a singular conclusion: 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 having mobile apps for the major platforms is better than having no apps at all, and yet how do you build for every app store? We could certainly build apps to reach a good number of those platforms, but probably not all of them. When it comes to news sites like ours, there’s even more data suggesting that the mobile web is key. According to the Pew Research Center, 60% of tablet users prefer reading news on the mobile web than via an app. While I think media companies should certainly offer apps, it’s clear that having a great mobile website should be the priority.
How Does It Work
In simple terms, a responsive web design uses “media queries” to figure out what resolution of device it’s being served on. Flexible images and fluid grids then size correctly to fit the screen. If you’re viewing this post on a desktop browser, for example, try making your browser window smaller. The images and content column will shrink, then the sidebar will disappear altogether. On our homepage, you’ll see the 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’s behavior accordingly. On touch devices, for instance, we enable swiping between columns. (Technically, detecting device functionalities may be referred to as “adaptive design,” rather than “responsive,” but increasingly both approaches are used in tandem.) The benefits are obvious: You build a website once, and it works seamlessly across thousands of different screens.