Wineries consider one-site design for Web

[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."

Acknowledged drawbacks include higher upfront cost for this all-environments approach, designer unfamiliarity with the strategy, client desire for totally different desktop and mobile sites, and current incompatibilities with existing core website features such as e-commerce.

"We're trying to get them to embrace mobile more," Mr. Kamphuis said.

He said he is a big believer in responsive design, even sending in-house designers to tech conferences to learn the latest. Yet challenges the company has encountered in convincing vintner clients and their designers to think mobile in general have been a number of designers don't understand mobile layout and winery executives may be reluctant to pay extra for mobile-oriented design and too busy to learn what needs to be done to make their sites suitable for visitors on the go.

Vin65 has taken a common web design approach of offering automatic detection of mobile browser software accessing sites designed for desktops then redirection of those visitors to separate mobile sites.

At the same time, Mr. Kamphuis said he is a big believer in responsive design and a mobile orientation in web design in general. The company offers designers flexibility with the stylesheets, which can specify layout, colors, font choices and sizes and other page elements, for the Vin65 e-commerce portions such as product views and virtual shopping carts and the programming code that governs their behavior.

Responsive design is part of a "progressive enhancement" website design movement over the past decade to separate text, pictures and other content from site design, allowing both to be kept up to date and have the latest technology with the least amount of cost-intensive work and accommodating various screen sizes. That's contrasted with past page design based on tables, the cells for which can't been rearranged on smaller screen sizes, and/or having too many design specifications defined in the page template used to deliver content from a database through content management software.

Responsive design flows from progressive enhancement design strategy, drawing on "media queries" in modern iterations of international standards for standards for page design code -- HTML4, HTML5, CSS2 and CSS3 -- and understood by recent versions of popular browser software. Among other capabilities, these media queries tell the browser to detect the size of the browser window offer options for loading different stylesheets.

Redesigning a winery website for responsive design can be straightforward if the designer used progressive enhancement practices, but it could be quite involved with table-based designs or those with design specifications directly in the template, according to Jim Shoop, Firefly technical director. The firm also incorporates Adaptive Images website server--based software to automatically create multiple images optimally sized for various computing devices from one large image uploaded.

"A lot of wineries use wine e-commerce companies, and it is more difficult to move to responsive design, because we can't access their inner templates and shopping cart codes," Mr. Shoop said.

Expanding on its open, progressive-enhancement "toolkit" for its e-commerce system, Vin65 plans to offer responsive design templates for clients to use in redesigns of their websites, according to Mr. Kamphuis.

Firefly is working with Joseph Phelps' e-commerce and operations software provider, Advanced Management Systems of Santa Rosa, to adapt its e-commerce elements for the responsive design. Firefly also offers traditional mobile sites.

Another major provider of comprehensive winery operations software, including e-commerce and shipping compliance, is eWinery Solutions of Napa. Like Vin65, the company offers clients separate desktop and mobile versions of its web modules for site visitors. Some clients want that anyway, according to senior engineer Michael Whetten. Yet, the current version of the software has restrictions that make integration in a responsive design challenging.

"All that said, responsive design is a good idea, and we have plans for the next version of our software to make it much more flexible so that we can keep up with current design trends and best practices," Mr. Whetten said.

He said the company's first responsive design application could be released as early as September.

Show Comment