Audit mobile problems

[pirog]

This site was completed without rigorous testing on mobile devices. It would be great for someone to check how this site performs on mobile devices and to then post other issues based on their findings.

[zhuoyuzhu]

@pirog I think there are several problems of the sites on mobile device.

1. When I resize the pages, the size of fonts and images retain their proportions in the laptop so in terms of user experience, the size of fonts and images on the mobile device seems to be too large for users to continue browsing this site. In addition, the top image on the president and robot page almost break out of page.
   Solution: The unit of font size and line height should be set to relative unit (em) instead of absolute unit (pixel) because it's much easier to make fast and powerful changes with a relative unit of measurement rather than setting it with pixels and being very explicit. In addition, we also need to set the max-width of images to be 100% because when we resize the window to mobile device, we need to tell the images to fill the width of their parent container. If the container shrinks down in size, then the image will shrink down with it. Without this piece of styling, the images would keep the absolute size proportion and some of the images almost break outside their container, which have been illustrated above.
2. In the mobile device, the top menu instruction bar is hidden unless the user clicks a button, which might cause confusion for users. A better approach is either adjust the battle, president, robot and scores instruction under the image on top menu bar or we can just get rid of the two blurred images.
3. On both president and robot pages, the titles, images and references of each robot and president are strictly align in the vertical direction. This problem even magnifies on the tablet device so we need to look into the CSS layout setting inside the media query to solve this issue.
4. On mobile device, it's relatively time-consuming for users want to browser all the information on president and robot page sine each robot or president icon lies in one line, which will affect user experience. Therefore, apart from using relative unit of font size and max-width of image, we can use float attribute to make these icon appear side by side rather than stacking on top of each other.

[pirog]

@zhuoyuzhu great finds! could you separate these out into their own issues?