Once you have completed your app using HTML5, CSS3 and jQueryMobile, you can perform some simple testing in the latest versions of some of the most popular browsers and browser's tools to see what it look like on smartphones, tablets and desktop devices.

Browsers

Firefox

1. Open the index.html file in Firefox and then press CTRL + SHIFT + M.
2. From the drop-down menu, select from one of the most common smart phones and tablet sizes for both landscape and portrait modes. You can also create custom sizes and take screenshots that can be used later by pressing the camera icon.
3. Press the X button in the top left corner to return to full screen.

Chrome

1. Open the index.html file in Chrome and then press F12.
2. Press CTRL + SHIFT + M  or press the small phone icon in the top left corner of the panel.
3. Select a device from the Devices drop down menu to preview a device type.
4. Press CTRL + SHIFT + M  again or press the phone icon again to return to full screen.

Chrome also have several add-ons that can help you with Android development:

1. Open the Chrome browser and then click the Chrome Web Store.
2. In the Search text field, type Android SDK Reference Search, clidk the ADD TO CHROME button and then click the ADD button.
3. Repeat step 2 but type Android Resource Navigator.

Opera

1. Open the index.html file in Opera and then press...

Safari

1. Open the index.html file in Safari and then press...

Web Tools

Web Developer Extension

Web Developer extension – adds various web developer browser's tools for Chrome, Firefox and Opera, and will run Windows, OS X and Linux.

1. Go to http://chrispederick.com/work/web-developer/.
2. Download one or more of the Web Developer Extension for Firefox, Opera, or Chrome by clicking on the download link(s).
3. For Firefox, click on the following three buttons:
   1. Add to Firefox
   2. Install
   3. Restart Firefox
      
      WHY: To add the web developer extension to the top of the Firefox browser.
      
      
4. On the Web Developer toolbar from the Resize drop-down menu, select View Responsive Layouts from the options to see the various screen sizes for mobile and tablet devices:
   
   
   
5. To create a custom size, select Edit Resize Dimensions... from the drop down menu (See screenshot above).
6. Click on the highlighted Responsive tab and then click the Add... button
   
   
   
7. In the Options dialog box that appears, enter a description (e.g., iPhone), a width and height and then click the OK button. You can also select the Resize the viewport checkbox and assign a series of shortcut keys from the Keyboard drop-down menu and text field:
   
   
   

Color Tools

It is important to check for the color contrast to ensure the page is easy to read especially for people with various types of color blindness.

Colour Contrast Analyser (CCA)

Colour Contrast Analyser (CCA) – is an easy-to-use tool that helps determine the legibility of text contrast against its background that is available for Windows and Mac and in multiple languages. It has two functionalities:

1. a pass/fail assessment against WCAG 2.0 color contrast success criteria.
2. a simulation of certain visual conditions, including dichromatic color-blindness and cataracts, to demonstrate how your web content appears to people with less than 20/20 vision.
   
   Note: The visual simulation functionality is only available in the Windows version.

1. Go to https://www.paciellogroup.com/resources/contrastanalyser/.
2. Click the Download for Windows or Download of Mac button and then click the OK button.
3. Unzip the downloaded file and double-click on the *exe file in that folder to open the application.
4. Using the eyedropper tool, sample the foreground color of the text first.
   
   
   CAUTION: Ensure that you sample the foreground color (a representative color from the text, typically from a horizontal or vertical line on one of the letters in the text). Otherwise, you may get a bad reading.
   
   
5. Using the eyedropper tool, sample the background color that is behind the text.
6. CHECK POINT:  You should see the result as pass or fail at the bottom of the Colour Contrast Analyser dialog box.
   
   
   NOTE: You only need to pass the AA standard for both small and large text to meet the WCAG 2 criteria.
   
   
7. (OPTIONAL) Click on the show contrast result for colour blindness checkbox:
   
   WHY: To show the results of various type of color blindness.
   
   
   
8. If necessary, change the color of the text, background or both and test again until the color contrast passes.