Hearst Continues HTML 5 Transition With CarandDriver.com
New site is enabled for SEO and intuitive navigation.
The new CarandDriver.com has officially launched and the site has been enhanced with HTML 5, the latest technology for structuring and presenting content that allows for easier navigation and mobile Web browsing, search engine optimization and a snappier performance. The Web site look and relaunch, which took just over 6 months, was designed by Car and Driver’s internal team and comes on the heels of a September announcement from Hearst that promised the integration of the language across all of its Web sites.
Mike Dushane, vice president of consumer brand product development for Car and Driver and Road & Track, says that all interactive content now on the site, including video, galleries and news tickers, are now rendered in HTML 5 and work across all smartphone and browser platforms.
"HTML5 is used exclusively in the photo gallery and flyout menus throughout the site," says Dushane. "It allows direct access to content, even on devices without Flash."
Now, within every vehicle review and news item on the site, contextual links to shopping and research tools are presented based on the visitor’s content selections.
"Contextual links allow a user to continue his or her pursuit of knowledge on a particular subject," says Andrew Reale, vice president of development for Car and Drive, Road & Track and Jumpstart Automotive Group. "A person looking at our BMW 3 page is likely to want to know about the BMW brand and about 3 series competitors. This is just one small example of how we continuously seek to minimize the barrier between our users and our technology in order to make the site more intuitive and usable."
The HTML 5 semantic markup also helps with search engine optimization and rendering-the site’s "breadcrumbs," a navigation aid developed for user interfaces that allows visitors to keep track of their locations within the program, comes in handy by providing links back to each previous page visited, all the way to the user’s starting point. These breadcrumbs typically appear horizontally across the top of a Web page, usually below title bars or headers.
HTML 5 also improves the site’s SEO by being more semantically appropriate in terms of naming page elements. Earlier versions of HTML gave code names that did not support their functions, which made it difficult to determine its particular use. With HTML 5, terms have been assigned an abbreviation in relevance to their name, making it easier to navigate and determine what the code is actually for.
"Previous versions of HTML were less appropriate," says Reale.
Additionally, galleries "lazy load" for quick response times with instant access to a large volume of content. Lazy loading, which is also referred to as dynamic functioning loading, is the ability to command certain routines from memory when a program first launches. This limits the number of functions called in at start up and reduces the initial load time-allowing users to interact with the page without delay.
"In a large gallery this could cut page load by 50 percent," says Reale. "HTML 5 is also used in the navigation but in photo galleries it brings enhanced transitions, better semantic markup and improved navigation. It also ties in with our ability to lazy load the images. Future iterations will allow for swipe and other gestures."