The need for mobile-optimized websitesLesson 11, Mobile Design 249Testing your designs on mobile devices
The best way to test your page designs is to have access to the mobile device in question. There
is a category of software programs called emulators that allow you to test your designs in software
versions of diff erent mobile devices. The most reliable source for emulators is the manufacturer.
For example, Apple provides an iPhone emulator with its iPhone development tools; Android
and Windows Phone 7 also include emulators with their development tools. Using these
emulators results in an accurate preview of your designs without placing your sample fi les
online. However, emulators are often not cross-platform compatible. For example, the iPhone
emulator (at the time of this writing) is only available for the Mac. Additionally, these emulators
are installed with the assumption that you are using them for application design, not web page
design; as such, the installation process might seem a bit overwhelming and unnecessary.
There are also a few online web services that claim to emulate your designs in the mobile
format. However, these services are not always reliable and often require a hyperlink to your
page online, rather than locally on your desktop. In this case, you could just use the actual phone.5 Preview the page in your mobile web browser. Your page might appear somewhat
broken, but the media query is working.
Your mobile design after adding rules for
the body and the wrap container.You currently have two logos; the second one (in the masthead) is redundant and you
will remove it. Your page appears distorted because the mobile browser is attempting to
fi t all div elements that are fl oated and have fi xed widths into a narrow space.