Learn it fast with expert-taught software and skills training at lynda.com. See what you can learn

By Colleen Wheeler | Monday, February 06, 2012

Interactive jQuery elements meet responsive web design

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 jQueryCreate an Online Photo Gallery with jQuery and DreamweaverCreate an Interactive Map with jQuery and DreamweaverjQuery Essential TrainingSet a Marquee to Autoplay with jQuery and Dreamweaver

Learn it from the experts.

With online video courses at lynda.com, you can reach your goals faster. Learn software, improve your skills, and get an inside look at how the professionals work.

See what you can learn


Share this article:

Get the latest news

  •   New course releases
  •   Pro tips and tricks
  •   News and updates
  
New releases submit clicked

You can change your email preferences at any time. We will never sell your email. More info

Featured articles

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Become a member

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.