Traditionally, static websites and web applications were designed with the intent of the content being viewed on a standard 4:3 display and currently 16:9 displays with higher resolutions. In the 2000s manufacturers moved away from 4:3 CRT monitors as flat-screen technology had physical advantages such as less electricity use, lighter weight, and was cheaper to manufacture.
This also led to smaller screens that would be engineered and utilized for mobile devices.
However, mobile devices created an entirely new quagmire for web development, as oftentimes cell phones, handheld gaming devices, and tablets have different resolutions and aspect ratios.
This led to an approach called Responsive Design (coined by Ethan Marcotte in 2010) in which the content of the web application adjusts to the user's behavior and environment based on the screen size, platform in use, and orientation of the device (vertical vs horizontal).
Simply put, Ethan Marcotte helped promote the idea that web design and development should respond to a user's screen size, resolution, and orientation. Prior to this, users would have to zoom out in and out all while waiting for content to load due to early mobile device internet speeds (2G, 3G).
Adaptive Design is also another strategy, and this can be accomplished via CSS media rules . However, web application development is generally done via a traditional desktop machine. In order to test and verify changes, most web browsers have mobile device emulation so that developers are able to view the application as it would appear on a mobile device.
Developers can simulate a mobile view on their desktop machine, throttle their network’s performance (as mobile devices generally have slower internet speeds than desktop computers), throttle the CPU/Ram (because mobile devices generally have far lower hardware specifications than a traditional desktop), and touch input versus precise clicking.
Even though mobile devices of all shapes and sizes have increased in power and can often play complex 3D video games or stream the latest high-resolution video, generally speaking, they are behind personal computers, higher-end video game consoles, or portable devices.
This is due to the size of the devices, which impacts the hardware that can be used, leading us to the SoC (system on a chip architecture).
In a cellular phone, and many other mobile hardware devices the SoC is a single chip that typically combines a CPU (a processor, the brains), GPU (graphics, to drive the display), and a modem (to communicate with the cellular mobile network), as well as other key functions. Thus development should take into consideration mobile hardware limitations.
As stated above, 50% or more users access the internet via mobile devices, understanding that mobile devices generally have slower download and upload speeds using cellular data plans versus a high-speed broadband connection.
This is one reason why many companies will have a responsive web application and a native mobile application for download as well in order to ensure the product can be used by a variety of users, regardless of the device being used.
While there are similarities in developing web applications for traditional personal computers and mobile devices, taking into consideration the various limitations and obstacles presented by mobile devices can assist in the development process of web or mobile applications.
During the initial planning stages for the application, developers should ask how they intend for their app to be used and what the content of the application will be. Other questions include whether the app should be responsive, an entirely separate website ( example: stratusgrid.com vs m.stratusgrid.com), or a mobile app (that runs on android, iOS, etc.), along with general market trends.
This will provide a friendly and responsive experience for users while at the same time ensuring that business goals are met.
BONUS: Find Out if Your Organization is Ready for The Cloud ⤵️