[caption id="attachment_58151" align="alignleft" width="360" caption="Jim Shoop of Firefly Creative shows how responsive design renders the same website design on desktop, laptop and tablet computers as well as a smartphone."][/caption]
Nearing the end of its fourth decade in business, Joseph Phelps Vineyards of St. Helena plans to unveil a refreshed website this summer that not only integrates the company's Sonoma Coast wines and has a new background look but also will deliver from the same design a viewing experience neatly accommodating existing or future screen sizes ranging from smartphone to large panels.
"Our new site is being reformatted to work for mobile or tablets," said Joseph Phelps Public Relations and Marketing Manager Mitzi Inglis, who is coordinating the project. "The current site you can view it on an iPhone, but you need to make it bigger and wiggle (the screen view) around. Everyone is on their phones now."
That vintner and others as well as designers of their sites and providers of their e-commerce and operations software are exploring, actively pursuing and dealing with the consequences of "responsive web design." This design strategy seeks to automatically and intelligently vary layout, content, text appearance and arrangement depending on screen size and orientation (portrait or landscape) via single set of page templates. It's sometimes called mobile-first design because of the goal to make it work on the smallest screen first.
Google in June suggested web designers consider one of three options for mobile site development, one being responsive design and the others relating to automatic redirection of mobile visitors to mobile-optimized layouts.
The digital real estate of the winery website visitor's computer screen has been evolving in the two decades of popular use of the Internet. Vintner sites have evolved along with browsing software, speed of computers and data connections, interstate commerce law, social-networking services and consumer electronics to include pictures, bigger pictures, table-based layouts, cascading stylesheets (CSS) for layouts, Adobe Flash-powered animated and interactive graphics, enterprise or standalone content management systems, e-commerce functions and virtual shopping carts, blogs, consumer-driven reviews, downloadable site fonts, videos, live video winetasting and social media interaction on ever larger desktop screens.
Smaller, faster laptop computers started screen-size evolution in the other direction. Then the emergence of handheld smartphones followed by the surging return of tablet computers gave website designers two more basic ranges of screen sizes to deal with.
"We noticed a growing percentage of our website traffic was originating from mobile devices, so we knew it was time to make a change, but we wanted a cost-effective way of doing it," said Stacy Bennett, vice president of digital marketing for J Vineyards and Winery of Russian River Valley. "Responsive design was the answer."
Indeed, 12 percent to 15 percent of the traffic to the 700-plus winery e-commerce clients managed by British Columbia-based Vin65, now part of WineDirect of Napa, is coming from visitors using mobile devices, according to Vin65 President Andrew Kamphuis.
Boosters of responsive design say benefits include lower costs for maintaining one site versus separate desktop/laptop and mobile sites -- the now-standard strategy -- and for developing apps for different mobile operating systems such as Apple iOS and Google Android.
"Layout is optimized for to fit a given window size, not just squishing and zooming the page," said Christine Martin, founder and creative director of Healdsburg-based advertising and marketing communications agency Firefly Creative. The firm is working with Joseph Phelps Vineyards and J Vineyards as well as several new and existing web design clients to create responsive designs. "It also eliminates the need for 95 percent of our clients for app development because the website works properly on a phone."