Mobile Web Development

Introduction

As the prominence of technology continues, the advent of mobile technology will continue to grow and expand as well. For many developers, this means learning and understand mobile development intimately and being capable of not only identifying the differences between mobile web development and normal web development; but also knowing and understanding why these differences exist.

The demand for mobile websites increased the smart mobile phones became; especially after the advent of Web2.0 and the surge of online communication between devices on the World Wide Web (WWW). While different to traditional web development, it does share some similarities such as the general development process which focuses on design and responsiveness. The similarities end there, however, as there are many considerations to consider for smart mobile devices browsing your website and as such, many differences between normal web development and mobile web development. As such, the challenge lies in how to replicate the same features done on desktop/laptop websites or web applications on a mobile device.

Considerations

The first and most obvious difference to consider is the difference of screen size between a desktop/laptop and a mobile device such as a PDA/smartphone. Not only is the latter group considerably smaller than the former, their sizes are a lot more varied as the screen size of PDAs and smartphones can go anywhere from eleven inches (11”) or bigger to four inches (4”) or smaller. This means that above all else, the content displayed on a webpage must be viewable at all times regardless of the viewing device’s screen size. To get around this, most web developers develop a habit of utilizing percentages in their Cascading Style Sheets (CSS) documents which handle the formatting of their website. Through this, most content on the screen would be adaptive to the screen’s height or width and not a set amount.

Another thing to consider is element design and layout within the website. Typically, when a mobile device views a website which has no website developed specifically for mobile, the device simply tries to force as much as it can to the screen and put what remains beneath it. As a result, while the size of buttons and other web elements can be controlled by using percentages instead of fixed values when defining formatting styles, the layout of other elements presented on the webpage also need to be considered as most mobile devices are touchscreen. Interactive elements on the website might become troublesome for mobile users depending on the website’s layout and design while for desktop/laptop users, they would find no difficulty in this because of the keyboard and/or mouse peripherals. As mobile users have no such means (unless their device is a rooted Android device) they are a lot more dependent on developers to consider them. Because of this, simply using percentage values is often not good enough to ensure a website is mobile ready which leads to developers performing mobile web development specifically for smart mobile devices.

The two biggest things to consider with mobile devices, which is also the cause for many website-related issues on mobile devices, is the device’s firmware and the browser being used. These two software-related considerations can cause various issues to ruin a mobile user’s web viewing experience, ranging from some elements appearing strangely to the web page not appearing at all. The reason for this is because the device’s firmware ultimately dictates the device’s capabilities and what it can or cannot do while a device’s browser and what its capable of supporting could cause a lot (or none) of the web elements on a web page to not appear. This is because while most browsers typically support JavaScript (JS) and the Document Object Model (DOM), they all handle it differently and there can exist many third-party browsers on mobile devices which may not offer this support. As such, developers must be mindful of their development to ensure thorough and rigorous testing of their website across all its intended platforms.

Android and iOS Development

The two most prominent of operating systems (OS) on mobile devices are Android and iOS and both have their pros and cons when it comes to development. As Android devices have their OS built by Google who opens it to a wide variety of manufacturers, they are more varied and can be more challenging to develop for. This is because some devices might offer features which others might not despite still being on the same operating system; for instance, an Android device (usually rooted) could have the capability to completely prevent all scripts from running on any web browser the phone uses. This would mean that a website’s PHP and JS scripts would have some difficulty running which can create a lot of performance and reliability issues. On the other side, iOS devices are all made by the same manufacturer, Apple, and as such, their feature-set will stay the same across each. Because of this, it is incredibly easy to design a website or web application across iOS devices; however, it should be noted that there might be some issues across different OSes across devices as Apple’s updates are quite frequent. This can typically happen when developing a web application for one certain iOS version and then later finding out that after an update to the OS, certain users who have performed the update are having issues viewing or using your web application.

The entire process becomes even more challenging for developers who’re aiming to develop for both platforms at the same time. This is because the process involved in both vary greatly and have different requirements involved throughout the development cycle. APIs between the two platforms can vary differently as well as the IDEs and language used to develop certain web applications on each of them. There is also the challenge of ensuring optimization depending on the web application in question as Android devices tend to be less optimized than iOS devices when considering how the operating systems may manage memory and processes of running applications as well. It should also be noted that Androids in particular also present the unique issue of hardware issues where some phones might have some unique hardware features (fingerprint scanner, retina scanner, QR code reader, etc) that others may not and as such, a smart developer would do well to ensure that if their web application utilizes any of these features, that there is a usable alternative for those who cannot use them.

Responsiveness and Consistent Design

Among all other things when performing web development for mobile, responsive and consistent design is paramount. This is because having a desktop/laptop version of a website or web application that varies vastly from its mobile counterpart is not only unprofessional but jarring and confusing for users who utilize both versions. As presentation and user accessibility has become a key feature of technology today for end-users, having an interactive design that is well designed and consistent will result in a much better user experience overall. This means that textures and/or images used on one medium must be consistent with those used on another and would also require these resources to be of a high quality as well. It may also deter away some functionality of a website or web application which may be specific to one version or operating system that the other targeted mediums might not be capable of as well. Consequently, this is a design philosophy which then goes both ways as a mobile version of a website or web application should not possess some design or theme that is vastly different to the desktop/laptop version as well.

Most developers accomplish this through the use of various development tools which focus on development that also offer a web development version of their product. For example, Wix and GoDaddy both present options to have a mobile web version of any website created under the platforms while there are many integration functionalities within IDEs such as Xamarin and Eclipse which supports porting versions to mobile. In either case however; while the overall design and dynamic nature of your website or web application would be preserved, it should be noted that this is not a “fix all” solution as there still needs to be a thorough series of testing done to ensure the port is functionally successful and usable to your targeted audience.