As the market for mobile devices grows, the need to design compatible Web sites has grown too – and quickly. It didn’t take long for Web designers to realize that they needed an efficient way to make their clients’ sites accessible in a slew of different devices. And so was born responsive design.
The idea behind responsive Web design is that Web sites should have the technology to automatically adjust to the capabilities and screen size/resolution of the device being used to access it. Intelligent use of CSS media queries and the advent of HTML5 are helping to make this possible.
In an article on ReadWriteWeb.com Richard MacManus talks about responsive Web design, saying, “The challenge is now much more than simply re-sizing a design for a user’s browser width. It’s also about optimizing for the user interface – for example, swiping on iPhone vs. point-and-click on desktop. Plus ensuring that the right content for the user’s device is displayed…”
The question of content is a key issue. Does a mobile user want to see the same things a desktop user would when accessing a site? And with the more limited space available on a mobile device, what should be prominently featured and what should “buried” deeper in a site’s navigation scheme?
In response to this need for mobile accessibility, The Boston Globe recently released its mobile initiative through BostonGlobe.com. The re-designed Web site is a step forward for responsive design, and is a great example of full responsive Web design in action. Check out this video to see how The Boston Globe is bringing its subscribers breaking news on any digital device with a browser.
Because so many companies demand a mobile version of their site from their Web developers, it is important to understand what this entails and the content needed to make a smooth transition between devices. Smashing Magazine’s Kayla Knight wrote an article in early 2011 that goes deep into the development and coding required for responsive design, and about the various options, problems and solutions associated with flexible responsive Web design. You can read it here.