Mobile Systems Report: Website Responsiveness and Mobile Web Coding

This report provides a comprehensive analysis of mobile systems, focusing on website testing and mobile web coding techniques. The report begins by evaluating the mobile friendliness and responsiveness of various websites, including both mobile-friendly and mobile-unfriendly examples. Testing methods include browser-based tools, automated testing, and user testing on actual devices. Detailed test results are presented with screenshots and explanations. The report then delves into mobile web coding, comparing a desktop-optimized tip calculator web application with a mobile-optimized version. It highlights the differences in source code, such as the use of viewport meta tags, apple-specific meta tags, CSS styling, and input types, and explains how these elements improve the mobile view and user experience. The conclusion emphasizes the importance of website testing in ensuring a quality final product and highlights the various methods that can be used to achieve accurate results. The report is a valuable resource for understanding mobile web development principles and best practices.

Running head: MOBILE SYSYEMS
Mobile Systems
Name of the student
Name of the University
Author’s note

1
Mobile Systems
Table of Contents
Table of Contents.........................................................................................................................................1
Introduction.................................................................................................................................................2
1. Test a website’s mobile friendliness/responsiveness.................................................................................2
2. Mobile web coding for mobile friendliness..........................................................................................12
a) Simple Tip Calculator web application (Desktop Optimized Version).............................................12
b) Simple Tip Calculator web application (Mobile Optimized Version)...............................................13
c) Differences in Source Code and how they Improve the Mobile view.................................................13
Conclusion..................................................................................................................................................15
References..................................................................................................................................................16

2
Mobile Systems
Introduction
These report is aimed at providing analysis and report on different test results of websites that are
Mobile friendly and Mobile unfriendly. The report also outlines the test for websites
responsiveness using various tools including Website based tools, automated testing tools,
Browser tools and User testing on actual device.
Below are different results and solutions after every test.
1. Test a website’s mobile friendliness/responsiveness
Mobile Friendly Websites
https://www.etsy.com/
http://buzzfeed.com/
Mobile Unfriendly Websites
http://www.milehighcomics.com/
http://www.roverp6cars.com/
Simple Test Report
1. Chrome Browser tool test Results
a) https://www.etsy.com/
Etsy is an ecommerce website where people can buy and sell vintage or handmade items.
Results:
The page is friendly in mobile, For Galaxy S5 viewport, the width is large and The content of the
page fits well in the screen. Text on the page is also readable
In Iphone X, The Results is the same with small screen content compared to Galaxy S5. Links can
be clicked and it is touch friendly.
The site is very adaptive to the change in the screen width.

3
Mobile Systems
iPhone X
b) http://buzzfeed.com/

4
Mobile Systems
The Website is easy to use on the Mobile device as it is simulated in the Chrome different
viewport.
Simulating with iPad pro, the all contents of the Website include the sidebar information fit in the
screen. The text can be read clearly and pictures are visible.
With viewport adjusted to Pixel 2 XL, the content is more readable and the content on the page is
too long since the user keeps on scroll till the end. The page is mobile friendly.
iPad Pro

5
Mobile Systems
Pixel 2XL
c) http://www.milehighcomics.com/
On iPhone X, the text on the page is too small to read. The links and tap targets are too close or
rather small.
On iPhone 6/7/8 plus, the content can be read clearly with pictures being shown. The search
textboxes are still small and some sidebar contents are not clearly shown.
Iphone 6/7/8plus

6
Mobile Systems
iPhone X

7
Mobile Systems
d) http://www.roverp6cars.com
On galaxy S5, the content of the website is not visible. The text is too small and some contents are
hidden.
On iPhone X, the content of the website is total unreadable and only images are able to be seen
not clearly seen clearly. The website is not responsive and adaptive.
Galaxy S5

8
Mobile Systems
iPhoneX
2. Google Mobile Automated Test Results
1. https://www.etsy.com/
The page is responsive and mobile friendly. Text is readable

9
Mobile Systems
2. http://buzzfeed.com/
The page is responsible, the text is readable and the page is adaptive.
3. http://www.milehighcomics.com/
Text is too small and page is mobile unfriendly

10
Mobile Systems
4. http://www.roverp6cars.com
Page is not mobile friendly and font is too small to be read.

11
Mobile Systems