Mobile App Development India: Where to Start?

Performance, compatibility, accessibility... Before starting the development of a mobile website, a lot of questions arise. Update on two possible methodologies to properly address a project.

Before starting a mobile website project, you will, of course, have a good million questions to ask you, both technical and ergonomic, not to mention aspects of browser performance, compatibilities, accessibility to all, etc.

In addition, depending on the existing project (the version "office" already exists, or everything is to build from scratch...), your considerations will not be the same. As is the procedure followed. It will not be a question here of going into all the details, but of addressing the main steps to be taken.

We have distinguished two common methodologies, adapted to two scenarios: the adaptation of an existing design (ideal for "going fast" but not necessarily very optimized), and the "mobile first" approach (perfect for starting from scratch but requiring further initial reflection).

Methodology 1: adapt an existing design

Your "classic" website is already online but unsuitable for smartphones and tablets?

By following a simple 10-point procedure, it is relatively easy and quick to adapt an existing design to different screen sizes. In return, know that managing the pitfalls of ergonomics and web performance will not always be a part of fun.

·         Fix the terminal viewport ( <meta name = "viewport"?> ),

·         Identify breaking points,

·         Make a mobile navigation choice (up, down, select, drop down, hidden, etc.)

·         Apply mobile styles via media queries, either embedded in global styles or in a separate CSS sheet,

·         Start your mobile styles with a basic mobile stylesheet ("reset")

·         Treat all elements with problematic widths (width, min-width, height, min-height, margin, padding ) one by one by canceling these widths (width: auto, min-width: 0, for example),

·         Reinstate the elements in the stream to get vertical blocks (overwrite the values of float and position: absolute by float: none and position: static),

·         Adapt the contents and the media to avoid overflows,

·         Opt for templates of fluid width,

·         Take into account HD (Retina) displays and mobile web performance.

Methodology 2: the "mobile-first" approach

This time, let's radically change our strategy: thinking "backwards," we avoid all problems of inadequate resources, unnecessary load times, superfluous and non-ergonomic elements.

Long and necessary step: think from the beginning of the project to the ergonomics of your website in different types of terminals (usually smartphones, tablets, laptop screens, desktop screens). As a result, plan a graphical design time multiplied by 3 or 4, but it is for the good cause.

The steps are sometimes substantially identical to the previous methodology (i.e. fixing the viewport, use of media queries, taking into account the HD terminals and the web performance), with some particularities to take into account:

·         The wireframing  must be initially oriented for small screens (tools such as Codiqa are dedicated to mobiles),

·         Design and ergonomics mainly adapted to small screens,

·         basic CSS styles are dedicated to smartphones (then improved via respond.js or conditional classes to ensure compatibility with older desktop browsers),

·         Resources and media are very optimized (then replaced if larger screens), same for JS and "comfort" scripts

To know more about mobile app development India, I invite you here to consult the top best agency from India.