<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<link rel="stylesheet" type="text/css" href="content.css" />
		<title>
			Tips for creating Dreamweaver web content for mobile devices
		</title>
<!-- Changed by: , 21-Mar-2006 -->
<script src="help.js" type="text/javascript" language="Javascript" charset="UTF-8">...</script> 
		
		
<script type="text/javascript">
<!--[CDATA[
handleContext(1);
if (use_ie_6_behavior) {
  document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"content-ie6.css\" />");
}
// ]]-->
</script> 
		
<script src="scripts.js" type="text/javascript" language="Javascript" charset="UTF-8">...</script> <script src="terms.js" type="text/javascript" language="Javascript" charset="UTF-8">...</script> 
	</head>
	<body id="content_body">
<!--googleoff: index-->
<!-- BEGIN PAGE CONTENT WRAPPER -->
		<div id="pneumonic">
			<h1 class="DeviceCentral">DeviceCentral</h1>
		</div>
		<div id="page_content_wrapper">
			<p class="sharedproducts">TOPIC APPEARS IN: </p><p class="sharedproductindicators"><img src="images/dreamweaverSharedIndicator.png" title="Dreamweaver" /></p>
<!-- BEGIN BREADCRUMBS -->
			<div id="breadcrumb">
<!-- BEGIN BREADCRUMBS -->
				
<div class="nav"><dl class="page"><dd class="prev"><a accesskey="p" class="prev" href="WS092945DE-D20D-41de-9548-D1781281BB83.html" title="Tips for creating video for mobile devices"><img src="images/prev.gif" alt="Previous" /></a></dd><dd class="next"><a accesskey="n" class="next" href="WS259BCE9F-6E6E-42d4-A440-65F58EA67D3F.html" title="Testing with the Emulator tab"><img src="images/next.gif" alt="Next" /></a></dd></dl></div><div class="hierarchy"><a href="WS28F6F81C-55B3-4ad5-B632-171637249F5B.html">Create, preview, and test content in Adobe Device Central</a> /
     <a href="WS3A29C98D-5768-45ea-AB2F-75FAF64078EE.html"><b>Tips for creating content for mobile devices</b></a> 
     </div>

<!-- END BREADCRUMBS -->
			</div>
<!-- END BREADCRUMBS -->
<!-- BEGIN PAGE TITLE -->
<!--googleon: index-->
			<h1>
				Tips for creating Dreamweaver web content for mobile devices
			</h1>
<!--googleoff: index-->
<!-- END PAGE TITLE -->
<!-- BEGIN CONTENT WRAPPER -->
			<div id="content_wrapper">
<!--googleon: index-->
				<div><div class="section">
                        <div class="p">
                           
                           
                           Device
Central previews web pages created in Dreamweaver using Opera’s
Small-Screen Rendering. This preview can give you a good idea of
what a web page looks like on a mobile device.<div class="note"><span class="notetitle">Note:  </span>Opera’s Small-Screen
Rendering may or may not be pre-installed on any individual emulated
device. Device Central simply gives a preview of how the content would
look if Opera’s Small-Screen Rendering was installed.</div>

                        </div>

                        <p>Use
the tips below to ensure that web pages created in Dreamweaver display well
on mobile devices.</p>

                        <ul><li>
                              <div class="p">If you use the Adobe® Spry
framework to develop content, add the following line of HTML to
your pages so they can render CSS and execute JavaScript™ correctly in Device Central:<pre>&lt;link href="SpryAccordion.css" media="screen" rel="stylesheet" type="text/css"/&gt;
&lt;link href="SpryAccordion2.css" media="handheld" rel="stylesheet" type="text/css"/&gt;</pre>

                              </div>

                           </li>
<li>
                              <p>Opera’s Small-Screen Rendering does not support frames, pop‑ups,
underlining, strikethrough, overlining, blink, and marquee. Try
to avoid these design elements.</p>

                           </li>
<li>
                              <p>Keep web pages for mobile devices simple. In particular,
use a minimum number of fonts, font sizes, and colors.</p>

                           </li>
<li>
                              <p>Scaling down image sizes and reducing the number of colors
required increase the chances that the images will appear as intended.
Use CSS or HTML to specify an exact height and width for each image
used. Provide alt text for all images.</p>

                           </li>
</ul>

                        <div class="p">
                           <div class="note"><span class="notetitle">Note:  </span>The
Opera software website is a good source of information about optimizing web
pages for mobile devices.</div>

                        </div>

                     </div>
</div>

<!--googleoff: index-->
			</div>
<!-- END CONTENT WRAPPER -->
		</div>
<!-- END PAGE CONTENT WRAPPER -->
		<br clear="both" />
		<div id="related">
			<div class="t">
				<div class="b">
					<div class="l">
						<div class="r">
							<div class="bl">
								<div class="br">
									<div class="tl">
										<div class="tr">
											<div id="related_in">
												<h3>
<script type="text/javascript">document.write(terms_Related_Information);</script> 
												</h3>
												
												<h4>
<script type="text/javascript">document.write(terms_AHV_HELP_RESOURCE_CENTER);</script> 
												</h4>
												<ul class="link-list"><li class="icon external"><a target="_blank" title="This page on the Web" href="http://help.adobe.com/en_US/DeviceCentral/1.0/WS858C150E-6615-4629-990F-18F3487BEC6A.html">This page on the Web</a></li></ul>
												
											</div>
											<br clear="both" />
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<br clear="both" />
	</body>
</html>