Testing Mobile Web Apps

Here is a list of various online tools for anyone that is planning to create a new mobile Internet business model, web app or native mobile app.  The links in this article test responsive design elements and provide mobile emulators. Good responsive design is when a website responds to each unique visitor’s screen resolution, language, input, and other interactivity with a relevant response.  One of the best websites to learn all about Responsive design is AListApart.com

As a developer I have my own set of SDKs (software development kits) and even a wide range of mobile devices, but my remote clients that are not developers often appreciate a way to quickly see for themselves that a mobile solution I created for them does actually look good in a specific mobile device or browser.

It’s very rare that I ever meet my clients in person because all of my work is based on being accessible via the Internet.  I love this setup because it makes proud that I am chosen to develop amazing technology solutions based on my work and my ability to communicate effectively by using the Internet Technologies that I develop and promote.

JQuery Mobile Theme Roller   allows anyone to test out their ideas for colors on buttons, headers, and any mobile UI element.  You simply drag and drop colors around the webpage to instantly see what your idea will look like.  When you are happy with the look, you can download the CSS file and use it in your JQuery Mobile project as a custom stylesheet.

MobiReady is awesome because it quickly tests your mobile web app and provides solutions for any problems it finds, in a nice easy to read layout.  I tested a mobile web app that I am currently developing and see that I have 6 errors.  Now those errors are typically found in my development workflow with the SDK tools I use and by the time I submit a completed project to a client there are no errors left.  If you are a project manager or a client that paid a developer to create a mobile web app, this tool is very helpful for you to see for yourself that your developer’s work is verified to be working correctly and was built with stable industry standards.

Responsiv.is  tests the responsive design and media queries of your website.  Just add the website you are testing in the Go text entry box at the top right of this website.

Matt Kersley Responsive Design Tool Online  provides you with a fast easy way to see how your website looks with different screen sizes, including those that are common for mobile devices.  I tested one of my mobile project sites today with this and see that I need to edit my CSS3 files a little more so that my responsive design will work better on the tiniest screen resolutions.  I plan to make my images resize (smaller to bigger) and the layout changes depending on the viewers’ various screen resolutions.

GoMo Mobilize Your Site Now   tests your website and shows you what it looks like on a very small screen.  It also provides helpful tips and ideas to consider when you are planning to make your website mobile.

PixMobi  lets you create mobile websites by dragging and dropping modules.  It’s free to signup and create basic mobile friendly websites that will work on most mobile devices.  You should have knowledge about the terminology used by mobile developers and designers to use this online tool.

Opera Mini Simulator   gives you an easy, fast, pretty online experience where you can check to see what any website looks like on a mobile device that runs the Opera Mini Browser.  I thought it loaded mobile webpages slow, but it looks useful for when I want to verify that my mobile web app is going to work on the Opera Mini Browser.  For example, I found out that one my Mobile apps that I created to use Geolocation will not work on the Opera Mini Browser.  I will have to do some more research if I want to make that specific mobile app’s Geolocation features work on the Opera Mini Browser.

Gomez Mobile Web App Cross Device Compatibility Test   gives you a long form to let you test your website on various mobile devices.  They send the results to your email.  I’m not too keen on the long form that asks for unnecessary details like my phone number.

iPadPeek shows you what your website will look like on the iPad. Super fast and easy to use.

Proto Fluid  promises to provide rapid prototyping for responsive design, fluid layouts, and adaptive css.  Licensing is 5 Euro and it lets you test your CSS, media queries, and responsive design elements in a browser.

W3C Mobile OK Checker  is another great tool for a client or project managers to verify that their mobile developers are following industry standards and creating valid source code.  Enter the mobile website you are testing and you will receive a list of any issues found with suggested solutions.

Responsive.px  lets you test your mobile website on any screen resolution and it’s super fast to use.

UserTesting.com  records videos of what your mobile website visitors do on your website, polls them, and provides you with the results of your mobile website in regards to Responsive Design and Usability.

MobileWebDesignBlog.com is an informative website that I highly suggest to anyone that is involved with any aspect of the mobile technologies industry.

For the readers that are new Developers I have a few reminders for you in regards to making sure your work is going to pass your client’s visual testing.  If you are an experienced Developer that already knows everything, gloss over the rest of this article and be thankful that you already know about these important aspects of our industry.

console.log is your friend.  Use it as much as possible!  Bonus points when you include fun or secret messages that only other developers will understand and get a kick out of.  Funny JavaScript stories can be found all over the internet when you use your web browser’s console log.

Safari, FireFox, and Chrome all provide excellent Web Inspector & Developer tools so you can view your console log, ui elements, tweak your css, and more.  Keep that console log open when you are developing and viewing your work in the web browser.

AListApart.com  bookmark it, put it in your RSS Reader, and make a habit to read one article each day.  You won’t regret it and your clients’ will appreciate how your knowledge continues to move forward with rapidly changing Internet technologies.

Make 1 or 2 minute, weekly or daily screen casts of your mobile dev. project while you are developing.  Put it all together to create one nice 5 or 10 minute screencast video that shows the magic of how your mobile website project started from nothing and is now the amazing interwebz beast that your client knows and loves.  Do NOT SHOW any source code, passwords, industry secrets, insider tips, or anything that is confidential or touchy for your client because the  fastest way to kill your career is to prove that a client should never trust you.  Only show things that are going to be available to the general public from your client’s mobile website.  Show things like Navigating through the Mobile Web App or the process of completing a task that your mobile website features.  Present the video to your client and you can also use it on your own professional portfolio - as long as it only shows navigation and features that are publicly available knowledge.

If you have any questions or comments about this article or would like a future article to provide more information about another specific topic about Internet technologies and Computers, please contact the Indian Time Newspaper.