Mobilizing The Web With Cascading Style Sheets
Benjamin Chui isn’t taking ecommerce sitting down. The founder of Ben’s Bargain Center is striding through San Francisco’s financial district, with a smartphone in his hand and one of three mobile versions of his ecommerce website on tap.
For his site Bensbargains.net, the transition to mobile commerce was as easy as CSS.
“We’ve been leaning toward using cascading style sheets (CSS) more and more,” said Chui, founder of the nine-years-running electronics bargain store online. “Our main site is almost completely defined in CSS. It gives so much more control over the content and layout. For the mobile version of Ben’s Bargains, we did the same thing: used CSS to repackage our content for the mobile form.”
Bensbargains.net is one of 15 percent of retailers who, according to the Third Annual Cisco IBSG Ecommerce Survey released in May, have now scaled their sites for the mobile browser. Though many of those retailers reportedly spent $50,000 to $100,000 creating new websites and finding ways to automatically detect device formats for the mobile web, Benjamin Chui simply wrote a few style sheets and provided homepage links to the new pages connected to each style.
“We present the content in three different mobile CSS formats: Single column for the smallest screen, two columns, and three columns,” Chui said.
“iPhone users would want to use the three columns. Now, our mobile site gives almost the same functionality as our full-featured site. Users can still see the user comments and reviews on each item, and click through to a product just like they would normally,” Chui continued.
And that’s a step above many other mobile offerings.
Style sheet simplicity
Cascading style sheets are just one of the ways to take an ecommerce site to the mobile screen. For example, sites like Safari Book Store, a subscription-based media-download service, have developed completely new websites and user interfaces for their customers on the go. Other sites forward incoming visitors to sub-domains formatted separately for mobile devices.
While CSS isn’t the only solution, it does provide an easily accessible one. This type of style sheet already is used by most ecommerce sites, setting consistent fonts and layouts from page-to-page for desktop versions. E-merchants simply apply the same solution to size and shape their existing content to fit the smaller mobile screens.
That’s the tactic taken by 1shoppingcart.com, a hosted shopping cart system with offices in Ontario, Canada, and Eugene, Ore. In 2007 it launched a version of its ecommerce software that, among other things, “boasts a completely redesigned shopping cart interface, redesigned from the ground up using CSS,” said 1shoppingcart.com product manager Michael Valiant. “While the new design allows us to implement [site wide] changes faster and easier, the other benefit is that CSS displays more universally — better than our old table-based pages — on any type of browser, mobile or not.”
Granted, there are still “hundreds” of web-enabled mobile devices that don’t support CSS or the XHTML coding used to create CSS templates, according to the latest count by Chris Abbott, chief technology officer for the Norway firm DetectRight, a worldwide mobile-device detection engine. “But that number is dwindling,” Abbott said. Given that Information Week reports 84.4 percent of mobile phone users have yet to take their phone online, presumably shoppers without CSS-enabled phones won’t be logging on in the first place.
Shifts in overall site design
Implementing CSS for mobile isn’t as simple as just creating a few style sheets. Indeed, many of the standard desktop web-design elements won’t render on or clog up the mobile screen. Consequently, sites using CSS to translate current content for mobile screens usually must roll it out in conjunction with at least a minor site redesign.
“The first preference, for mobile, was backward compatibility to older mobile phone standards,” said Chui at Bensbargains.net. “So for that we switched our entire product display system to simple tables, which have been around since the 1990s.”
Each column is no more than 200 pixels, or the size of the smallest possible mobile-user’s screen (see chart). “We use the most basic table layout to show tabular data only — the original intent of tables in the first place — and it works on every device,” Chui said. “Then we define a grid as ‘x’ by ‘y’ and define the content. For our single column layout, the x is simply 1; y is however many items we’re displaying.”
Meanwhile, main website pages must be stripped of absolute measurements, frames, nesting tables and pop-ups. Each margin, border and padding must be specified in percentage or relative measure rather than in pixels. Merged rows and columns must be separated. Font formatting must be changed to Unicode rather than the html standard. All pages should be scaled down to less than 10K, and page headers and titles must be written in XML and scaled to fit snuggly at the top of the smallest device screen. (Note that mobile bookmarking agents like Phonefavs, which are rapidly gaining a mobile following thanks to one-click web access, use page titles as default for bookmark titles.)
To be sure, a number of organizations have set out “protocols” for mobile web design. There’s the World Wide Web Consortium, the Wireless Universal Resource File, the Wireless Abstraction Library, and the Global Authoring Practices for the Mobile Web. Each protocol involves further tailoring of the made-from-scratch mobile website design process.
CSS avoids synching sites
In the end, the chief benefit of using CSS to reformat desktop-size text lies in its one-source simplicity. “Moving forward, we needed a mobile site that worked off of our existing site content,” Chui said. That way each new bargain requires only one change, to the master file, rather than a stream of changes from one website format to the next.
“With the increasing adoption of smartphones, there will be a move toward the mobile,” Chui said. “It’s hard to say whether that move will be in terms of the same purchase space held now by PCs; it may be an entirely new category of services or products that are done with mobile devices, like paying by the parking meter or getting a drink from a vending machine.”
Some insiders see the future mobile web as the source of impulse buys, “secret” shopping outside of the prying eyes of office networks or family members, and price comparisons while hitting the brick-and-mortar stores. “But whatever happens,” said Chui, thanks to CSS “we can be right there.”
- Mobile Web Best Practices: descriptions of 60 best practices from W3C
- Wap Review Mobile Web Directory, a catalog of reviews and ratings of more than 1,200 mobile web sites.
- XML Validator
- The Unicode Character Code Charts By Script
- Basic “Latin”
- UTF-8 encoding table and Unicode characters
- UTF-8 Unicode Character Set – for HTML UTF-8 enabled pages
- Character Set Codes
- Code for dynamically resizing images in PHP
- ImageMagick’s free dynamic photo resizing tool for Windows and Linux platforms
- Third Annual Cisco IBSG E-commerce Survey: Mobile Emerges as Growth Channel for Retail