Preview Your Mobile Website Designs on Mobile Phone Simulators
Once you design and develop a stand-alone mobile website or a mobile friendly responsive website, you will need to preview it on real devices or simulators such as the ones I will talk about in this post.
I started designing mobile websites (mobile version of websites optimized for mobile devices such as iOS and Android devices) a couple of years ago and I have built a number of them up to now. Since I didn't have a smartphone when I started, I mostly used online and desktop mobile phone simulators to preview and test my mobile designs.
I've stumbled upon a couple of questions on webmaster forums related to previewing mobile websites on a PC and that's why I decided to write this post about two great apps that I use frequently for previewing my mobile website designs.
Before I start, I should emphasize that if you are designing for mobile devices you should do your final tests on real devices because none of the simulators will give an accurate result as the device itself. The layout and colors might look slightly different on a real device as compared to a simulator. However, that doesn't mean that you shouldnt use such applications to get a general idea about how your design will look on a mobile phone.
Having said that, let me continue with the first mobile simulator that I will talk about.
At this time, Mobilizer can simulate four of the popular mobile devices: iPhone 4, Blackberry Storm, HTC Evo and Palm Pre. Start the appplication and click on the blue Phones link and you will see a small menu where you can select the device of your choice.
You can view multiple device previews at the same time and take screenshot images by right clicking and choosing Export PNG option.
You can download and install Mobilizer from this page.
Electric Mobile Studio is another free-to-try mobile preview desktop tool from Electric Plum that simulates iPhone and iPad web browser. It is a standalone software, which means that you don't need any other software like Adobe Air to run it. Electric Mobile Studio has a lot of capabilities such as viewing landscape and portrait orientations, capturing screenshots, zooming content within the device and changing device size. You can find all these settings on the menu of the application.
You can download and install Electric Mobile Studio from this page.
One great thing about both simulators is that they automatically redirect to the mobile website if a website has a mobile version. Many of the online preview tools don't have this feature.
There are many more mobile devices that you should be testing your design but as a beginning, these two simulators will be enough to have a good idea about your mobile web design. If you know of any other great mobile preview tools, please share with us.
More Web Design Tips
The Best Free Web Design Software for Beginners Web Design Basics Part 1: Introduction to Web Design Web Design Basics Part 2: Your First Steps to Design a Website Free Web Design - How to Get Your Website Designed for Free Bad Web Design Practices to Avoid as a Web Designer 12 Great Websites to find Free Stock Images for Your Website 10 Great Websites to Find Free Web Design Tutorials 9 Websites Where You Can Download Free Public Domain Images 5 Essential Notepad++ Plugins You Should Download How to Add a Favicon (Bookmark Icon) to Your WebsiteWeb Design Tips