Interactive jQuery elements meet responsive web design

Published by | Monday, February 6th, 2012

In his lynda.com course, Create an Interactive Homepage Marquee with jQuery and Dreamweaver, author Chris Converse shows you how to build a visually rich, interactive marquee in order to aggregate and display content on a website homepage. Here is a preview of Chris’ web project which combines text, images, and animation into a dynamic, compelling feature:

During the video, you’ll note that Chris explores how this final effect might appear on a variety of browsers and emulators. Of course, one of the challenges in web design today is making sure this marquee will appear and perform desirably on the seemingly endless range of mobile or desktop devices upon which it may find itself. Enter the concept of responsive web design, a phrase that’s at the top of the hot buzz-concepts in web design since being coined by Ethan Marcotte last year.

To make sure your designs survive the jungle of possible ecosystems they might have to live in, Chris has designed and developed a template that leverages jQuery’s Ajax feature to load additional interactive data into a template based on the user’s screen size. As Chris explains over on the Adobe Developer Connection:

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. This technique significantly lessens the load on smaller screens, while still maintaining all of the advantages of CSS3 media queries.

For more on how to create an interactive marquee, log into your lynda.com account and check out Create an Interactive Homepage Marquee with jQuery and Dreamweaver in the Online Training Library®. Then, to ensure that your marquee displays correctly and responsively on a variety of screen sizes, you can download Chris’ template and get instruction on how to use it for free from his Adobe Developer Connection article.

chris converse reactive web design screen examples

Interested in more?
• The full Create an Interactive Homepage Marquee with jQuery and Dreamweaver course
• All developer courses on lynda.com
• All web + interactive courses on lynda.com
• All courses from Chris Converse on lynda.com

Suggested courses to watch next:
• Create an Interactive Video Gallery with jQuery
 Create an Online Photo Gallery with jQuery and Dreamweaver
Create an Interactive Map with jQuery and Dreamweaver
jQuery Essential Training
Set a Marquee to Autoplay with jQuery and Dreamweaver

Share this:Share on Facebook0Tweet about this on Twitter14Share on Google+0Pin on Pinterest0Share on LinkedIn4

lynda.com - start learning today


One Response to “Interactive jQuery elements meet responsive web design”

  1. Digital Magaseen says:

    Web design is the process of planning and creating a website. Text, images, digital media.. thanx for sharing information…

Leave a Reply