Many web designers and developers are diving into mobile websites. This might include using media queries to swap out CSS files, building HTML5 animations with Wallaby or detecting device capabilities with WURLF. Whatever the case may be, multiscreen development can be a little difficult when it comes to testing. Dreamweaver CS5 added some nice features for testing different screen sizes, but this just isn’t the same as testing on a physical device. It would be great to test a local website on a computer directly from a device. If that sounds interesting, keep reading.
XAMPP is a free Apache/MySQL/PHP webserver. It’s similar to WAMP, or MAMP. Any of these servers can be used to setup a testing environment for websites. If server or testing environment sounds intimidating, don’t fret. The process is pretty painless.
This article assumes your computer is connected to a network. It also assumes you have a device (iPad, smart phone, another computer) connected to the same network either through WIFI or a hardwired connection.
1) Download and install XAMPP
Download XAMPP (Windows or MAC). Install XAMP with all the basic settings. When XAMPP finishes installing, the control panel should startup. If it doesn’t, locate XAMPP in your Program Files or Applications directory.
In the XAMPP control panel, click the Start button next to the Apache server. This will start your XAMPP server:
2) Time for a little security
This step is optional, but probably a good idea. I’m not a security expert so I’m sure there are plenty of ways someone can hack into the server. I’ve been told this will help keep things more secure. If you don’t care, skip to step 3.
Once the server is running, click the Admin button to launch the XAMPP administrator.
When the administrator launches in a browser, click the Security link to show the security settings. If the administrator does not launch, there may be an issue with the server installation. Check out the support pages from the XAMPP website for troubleshooting tips.
On the security page, click the link at the bottom to fix the security problems.
This page will let you set a password for the XAMP directory on the server. Choose a username and password and click Make safe the XAMPP directory.
3) Create a testing directory and a test file
At this point you can technically start testing a website from a remote device. To better organize the server, create a mobile directory on the XAMP server. The default XAMPP server directory is located at C:\xampp\htdocs\ on Windows and Applications/XAMPP/htdocs on OSX.
Notice the mobile directory is inside the htdocs directory. Create a simple webpage in that directory. I used Dreamweaver to create a blank HTML file. I added the text Hello World in the HTML file and saved in the mobile directory as index.html.
Before testing on a device, verify the webpage works by testing it in a browser on your computer. Type http://localhost/mobile/ to browse to the directory we created. If this doesn’t work, you can try http://127.0.0.1/mobile/. If neither URL work, visit the support pages on the XAMPP website.
4) Find your IP Address and test from a device
Before you can test the webpage on a device, you need to locate your computer’s IP address. The IP address is the location of your computer on the network. On Windows, open a command prompt (Windows Button > Program Files > Accessories). Type ipconfig at the prompt and hit enter.
In OSX, open Terminal (Applications > Utilities > Terminal). Type ifconfig en0 at the prompt and hit enter.
You now have your IP address. It may look something like 192.168.36.10. Now, for the moment of truth, open a browser on your device at try browsing to the directory using the IP address. In my case, I entered http://192.168.36.10/mobile. You’re now testing a website on your computer from a remote device like an iPad.
Hopefully, this gets you started design for multiple screens. For some fun, check out our Wallaby video and build an HTML5 animation to test on your device.