Responsive Web Design-Fad or Future?
TRAVERSE CITY – If your website fills your customers' smartphones with teeny script, then it's time to get on the responsive web design bandwagon.
"It's the latest buzzword," said Tim Barrons, co-owner of Byte Productions in Traverse City.
"It's the ability to have a website that's dynamically scalable to the device you're browsing with, instead of creating a website that's just one size and making multiple versions to fit on different devices."
Driving the change is the soaring use of smartphones and other devices.
"Responsive web design makes it so easy for clients to interact with what's going on," said Dan Montie of Pro Web Marketing, which completed some four responsive web design projects last year.
Responsive web design adapts the original layout to the device it's being viewed on. Fluid grids and flexible images shrink to fit, changing the site's colors, fonts and graphics as the user makes the window smaller.
"If you're looking at a website on a PC or laptop, you might see the text in a three-column version," Barrons said. "But as you make the window smaller, the content will scale on the fly to two or one columns and the supporting graphics will change so they're easily viewed on a phone or tablet."
It's a fairly new concept to the local business community, Montie said, and he sees it continuing to trend this year. In fact, 2013 is being dubbed "The Year of Responsive Web Design" – a click up from last year's number two ranking by the Internet magazine .net.
Yet some designers are warning against using a single site – built with responsive design techniques – for all devices. They suggest having different sites for different devices, i.e., a desktop site and a mobile site, said Andy Tyra of BrightBridge Studios in Traverse City.
"I side with developers who believe that the best solution is to design for mobile and tablet devices first, and desktop/laptop computers second," Tyra said. "But most of the time, a 'mobile-first' approach and a responsively-designed site is a great solution."
"Just making a scalable web version is not always the smartest thing for a business to do," he said. "I still see a use for 'mobile-specific' design pages."
Take Chateau Chantal, one of Byte's clients. If customers use their phone to go to the winery's site, they get a link to wine-tasting hours and a map to the bed and breakfast – not the company's full-blown site.
"They figured if you're on your phone, you're probably not at home on your computer – you're probably on vacation browsing for something specific," Barrons said. "Of course, there's always a button that lets you go to the full site."
As with any new technique, there are challenges. Some bugs still being worked out include the use of banner advertisements and video.
"There is still a fundamental problem with fluid-width banners," Tyra said. "Banners have historically [in printed media] been sold at various fixed dimensions, with larger sizes costing more than smaller sizes. On a mobile device, a fluid-width banner is small. On a larger device, the same banner appears larger. This makes it a bit more difficult – but not impossible – to explain different value/cost levels to advertisers."
And since fluid widths are based on percentages rather than pixels, the issue with video is that sites like YouTube and Vimeo routinely use pixel widths for embedded scripts. These pixel widths need to be removed in order for a responsive design's cascading style sheet to determine the fluid width.
In addition, web designers simply have more work to do when programming sites to respond to various browsers, operating systems and window sizes.
"We need to test it on different media because people are looking at it in different ways," said Sue Nolff, a web designer at Byte. "Right now, I have an iPad, a Mac and an iPhone in front of me and that's how I work. It keeps our job interesting!"
Barrons predicts the responsive web design buzz will die down after its newness wears off.
"There will be developers that tell you it's the greatest thing since sliced bread and that it's going to change web design," he said. "But people said that about CSS and HTML5. It's just another thing to enhance a web browsing experience."
BrightBridge Technical Director Jon Roth agreed it's about user experience.
"A site that adapts to the user's device and viewing preferences sends the clear message that 'We are with it; we know what we're doing, and we care about your experience,'" he said.
For the 20 best responsive web design examples of 2012, go to http://socialdriver.com/2012/07/20-best-responsive-websites/