| | h1. *Dreamweaver web content for mobile devices* |
| | |
| | {info:title=Add your own tips} |
| |  | Sign into this wiki (or register) then use Edit to insert your tip or click Add Comment at the bottom of the page. {info}\\ |
| | | Sign into this wiki (or register) then use Edit to insert your tip or click Add Comment at the bottom of the page. {info} |
| | |
 |  | (/) *Previewing Content on Mobile Devices and Printers (Video Tutorial)* |
| | \\ |
| | * In this 5 min video tutorial, learn how to preview website content on Mobile Devices using Adobe Device Central CS3 and how to use the Print Preview command to view how the same page would appear if it was printed. |
| | [View this video tutorial|http://video.totaltraining.com/totaltraining/ttvid/adobe/TC3WDWF/tut/TC3WDWF_P01_C06_L01.mov]. |
| | \\ |
| | [Learn more about this Total Training video series|http://www.totaltraining.com/prod/adobe/cs3design_workflow.asp?c=adobe&n=wiki]. |
| | |
| | *Author:* [Total Training|http://www.totaltraining.com/home.asp?c=adobe&n=wiki] |
| | |
| | {rate:title=Rate this tip\|theme=dynamic\|key=AdobeDWprev\|display=default}\\ |
| | |
| | (/) *Preview your pages in Device Central* |
| | \\ |
| | * 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. 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. |
| | |
| | *Author:* Adobe |
| | |
| | {rate:title=Rate this tip\|theme=dynamic\|key=AdobeDWprev\|display=default} |
| | (/) *Add this code to render CSS and* *[JavaScript]* *with Spry framework* |
| | * 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: |
| | |
 |  | {code} |
| | <link href="SpryAccordion.css" media="screen" rel="stylesheet" type="text/css"/> <link href="SpryAccordion2.css" media="handheld" rel="stylesheet" type="text/css"/> |
 | | {code} |
| | Author:Adobe |
| | |
| | {rate:title=Rate this tip\|theme=dynamic\|key=Adobevidshoot\|display=default} |
| | (/) *Avoid using pop-ups and complex formatting in your design* |
| | \\ |
| | * Opera's Small-Screen Rendering does not support frames, pop-ups, underlining, strikethrough, overlining, blink, and marquee. Try to avoid these design elements. |
| | |
| | *Author:* Adobe |
| | |
| | {rate:title=Rate this tip\|theme=dynamic\|key=AdobeDWpop\|display=default} |
| | \\ |
| | |
| | (/) *Keep web pages for mobile devices simple* |
| | * In particular, use a minimum number of fonts, font sizes, and colors. |
| | |
| | *Author:* Adobe |
| | |
| | {rate:title=Rate this tip\|theme=dynamic\|key=AdobeDWwsd\|display=default} |
| | \\ |
| | |
| | (/) *Use CSS or HTML to specify an exact height and width for each image used* |
| | * Scaling down image sizes and reducing the number of colors required increase the chances that the images will appear as intended. Provide alt text for all images. \_The Opera software website is a good source of information about optimizing web pages for mobile devices. |
| | |
| | *Author:* Adobe |
| | |
| | {rate:title=Rate this tip\|theme=dynamic\|key=AdobeDWcss\|display=default} |
| | \\ |