Home / Articles / Adobe Dreamweaver / Style Your Website for Multiple Devices Using Dreamweaver CS5.5

Style Your Website for Multiple Devices Using Dreamweaver CS5.5

Article Description

To get a site to work properly across multiple devices used to be more a challenge than it is today. For instance, Adobe Dreamweaver CS5.5 has built-in tools that help you design for multiple devices including personal computers, tablets, and phones. In this article, Adobe expert Brian Wood shows you how to use CSS3 media queries, Multiscreen Preview, and various other tools, to easily take your design and get it to work on different devices.
Summary

Summary

Well, there you have it. You now have three style sheets created, each with the same styles at the moment. The media queries will decide on the fly which of the style sheets to apply to which device. Your job is to now go through and decide how to style for each device. To give you a little head start, here are a few things to keep in mind when adjusting your CSS for mobile devices:

  • Keep the design and content simple.
  • Limit the use of images.
  • Try not to rely on JavaScript.
  • Limit scrolling to one direction.
  • Optimize your navigation.
  • Offer a way to access the real site.
  • Test!

To learn more about working with CSS3 media queries and Dreamweaver CS5.5, check out this video on Adobe TV.