Web Interface Design

5.2Testing mobile webpages

You can also test the example described above. You have two options for doing this: a live test and a simulation in the browser.

5.2.1Live test

There are two items you need for a live test:

• a webserver software application such as the Apache webserver contained in Mac systems or alternatively XAMPP (Mac, Windows, Linux) or MAMP (Mac).
• A smartphone/tablet or the iOS simulator for Mac (component of Xcode, available for free from the Mac App Store).

Then copy the viewport folder to the web server’s root directory on your computer and start the server. Now input the local address in the browser of your smartphone/tablet (the device must be located in the same local WLAN as the computer) or of the iOS simulator, e.g.

Smartphone/Tablet:
http://192.168.178.21/viewport/viewport.html or, if relevant
http://192.168.178.21/~username/viewport/viewport.html;
(replace the IP address with that of your computer)

iOS simulator:
http://localhost/viewport/viewport.html or, if relevant
http://localhost/~username/viewport/viewport.html;

If you use the iOS simulator, the webpage just displayed there appears in the Developer menu of the desktop version of Safari, enabling you to analyze it using Web Inspector.

However, regarding the other exercises in this course, this setup is not required. You can try out the exercises directly in the desktop browser. However, in practice, you are advised to test it, sooner or later, on as many different devices as you can.

5.2.2Testing in the browser

All the latest browsers now offer web developers a whole load of useful resources. Apart from using the essential Web Inspector, you also can test responsive layouts in different viewport sizes.

• Firefox offers you, if you select Tools → Web Developer, the option Responsive Design Mode. You can use this to conveniently try out and check different viewport sizes. However, this tool behaves otherwise like a desktop browser. In other words, it scales the webpage not in the way that mobile devices do, if the relevant mega-tag is missing (status as of July 2016). But, it is completely adequate for testing responsive layouts.

• Chrome has a similar function that is available with opened developer tools (menu option View → Developer → Developer tools). You can access it by clicking on the Toggle device toolbar icon in the top left part of the developer tools. Unlike Firefox, Chrome actually also emulates the behavior of mobile browsers in this case: if the viewport mega-tag is missing, the webpage is reduced.

  

• In Safari you will find the relevant option by selecting Develop → Enter Responsive Design Mode (⌥⌘R). You might need to activate the Develop menu first in the Safari Preferences under Advanced. This also allows you to select from different preset screen sizes and device types or your own sizes. The viewport mega-tag is applied.