Responsive design with jQuery marquee

This template design combines both responsive design techniques coupled with a self-running jQuery promotional marquee. The unique challenge this template solves is that it uses jQuery’s Ajax feature to load additional interactive data into the template based on the user’s screen size. Combined with CSS3 media queries, this template offers a compelling user experience across devices, while maintaining a shared set of HTML and CSS markup.

Note: For more information on CSS-only responsive design template and a starter template, see Customizable starter design for multiscreen development.

One of the great new features of Dreamweaver CS5.5 is the built-in support of jQuery. Whether you are just getting started with jQuery, or are a seasoned JavaScript developer, Dreamweaver's code completion and built-in references for jQuery are sure to increase your productivity (see Figure 1). In addition to jQuery support, Dreamweaver CS5.5 also features robust support for CSS3 media queries, making Multiscreen—or Responsive Design—a snap to set up.

This template features a custom script we developed at Codify Design Studio that allows you to create an interactive homepage marquee, automatically populated and animated based on standard HTML loaded into your web page. The marquee consists of a series of panels, or slides, that contain an image, caption, and links between the panels. The panels and navigation are dynamically constructed based on the HTML content in the marquee_panels.html file (see Figure 2). There is also an autoplay feature built-in, so the marquee will advance on it’s own; however, when a user moves their mouse inside, the autoplay is disabled to allow interaction with the marquee.

Note: Special thanks to Dimas Begunoff for giving us permission to include his jQuery Image Preloader plug-in.

When the viewport width is wider than 550 pixels, we load the HTML page containing all of the marquee panels, preload the images, then start the interactive marquee. When this design is accessed by a device with a viewport less than 550 pixels wide, we hide the marquee container div, and load an HTML file containing only a single promotion (see Figure 3). This technique significantly lessens the load on smaller screens, while still maintaining all of the advantages of CSS3 media queries.

Note to Chrome users: At the time of this article, Chrome disabled Ajax loading of local files from your operating system. This will result in a blank area where the marquee/promo area should be loaded. Chrome supports this feature when your file is served from a web server, or from a locally running web service. Read more at the Chromium open source browser project.

In addition to HTML, CSS, and jQuery, this template comes with a pre-sliced Photoshop file, allowing you to customize the design elements of the template to match your organization's branding requirements.

The following video explains how you can use the Dreamweaver jQuery marquee template to load interactive data based on screen size. Combined with CSS3 media queries, the jQuery Ajax feature creates a compelling user experience across devices, while maintaining a shared set of HTML and CSS markup.

Preview how responsive marquee appears on different devices. Download the HTML, CSS, and source Photoshop files related to this template.