org.symbian.tools.wrttools.doc.WebDeveloper/html/GUID-B74565A3-C981-4377-99F0-FAD87B9E516D.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="copyright" content="(C) Copyright 2009"/><meta name="DC.rights.owner" content="(C) Copyright 2009"/><meta name="DC.Type" content="concept"/><meta name="DC.Title" content="Designing for small screens"/><meta name="abstract" content="The screen size of mobile devices is significantly smaller than that available on desktop devices. When creating your widget, you should carefully consider what is the most relevant content to present on the UI. It is not reasonable to try and fit all the content on a Web page to a device screen. Moreover, the screen size varies between different mobile devices."/><meta name="description" content="The screen size of mobile devices is significantly smaller than that available on desktop devices. When creating your widget, you should carefully consider what is the most relevant content to present on the UI. It is not reasonable to try and fit all the content on a Web page to a device screen. Moreover, the screen size varies between different mobile devices."/><meta name="DC.Relation" scheme="URI" content="GUID-36CDDA1B-3B62-4936-9E06-7935AAD1CD77"/><meta name="DC.Relation" scheme="URI" content="GUID-D54DEFE7-E878-4530-B707-A5388DFE1D9D"/><meta name="DC.Relation" scheme="URI" content="GUID-9E0EC12F-EF50-4831-B0F4-C588590871D8"/><meta name="DC.Format" content="XHTML"/><meta name="DC.Identifier" content="GUID-B74565A3-C981-4377-99F0-FAD87B9E516D"/><meta name="DC.Language" content="en"/><title>Designing for small screens </title><script type="text/javascript">
function initPage() {}
</script><link href="../PRODUCT_PLUGIN/book.css" rel="stylesheet" type="text/css"/><link href="css/s60/style.css" rel="stylesheet" type="text/css" media="all"/></head><body onload="initPage();"><div class="body"><div class="contentLeft prTxt"><h1 class="pageHeading" id="GUID-B74565A3-C981-4377-99F0-FAD87B9E516D">Designing for small screens</h1><div><p>The screen size of mobile devices is significantly smaller than that available on desktop devices. When creating your widget, you should carefully consider what is the most relevant content to present on the UI. It is not reasonable to try and fit all the content on a Web page to a device screen. Moreover, the screen size varies between different mobile devices.</p>
<p>For a discussion of the design principles, see <a href="http://library.forum.nokia.com/topic/Design_and_User_Experience_Library/GUID-E653B16D-5CF6-4BC5-A64F-910D22228DF9.html" target="_blank">Using the small screen effectively</a>.</p>
<div><h3>Determining the screen size and resolution</h3><p>S60 devices can have one or more displays. Some S60 devices support specialized cover screens used only by special features and applications built into the device. Other devices support primary and secondary displays.</p><div class="p">The following are examples of display sizes on S60 devices that support Web Runtime (WRT):<ul>
<li><p>240 x 320 pixels portrait</p></li>
<li><p>320 x 240 pixels landscape</p></li>
<li><p>360 x 640 pixels portrait </p></li>
<li><p>640 x 360 pixels landscape</p></li>
<li><p>800 x 352 pixels landscape (Nokia E90)</p></li>
</ul></div><p>Expect future S60 devices to support larger screen resolution.</p><p>To find out the screen sizes of your target devices, see <a href="http://www.forum.nokia.com/devices" target="_blank">Device Specifications</a>. You can filter the devices by platform, device model, or screen size.</p></div>
</div></div></div><div class="footer"><hr/><div class="copy">© Nokia 2009.</div></div></body></html>