LATEST NEWS

Our Thoughts About Software Design And Development

9 Mistakes You Can’t Make During Web App Development Process

Mistakes? Everybody makes mistakes. It’s a human thing. If you don’t make mistakes, it means that you are doing nothing. The real challenge for you, as a web developer, is to avoid them every time you can.

Source: www.softwarehut.com

Let’s say, that you have to develop app. Your main task is to provide support for all operating systems (Android, iOS and Windows Phone). What mistakes you have to avoid? What challenges are waiting for you? How to cope with them? You are lucky. You really are. I will show you nine most common mistakes and their solutions. Some of them will be basic and another more advanced. Are you ready? Let’s get started.

1. Developing without research

Mistake:

You don’t know. whether it’s possible to include some particular feature in web app or not.

Result:

Many wasted hours, tons of frustration, unhappy client (or boss…).

Example:

  • Copy function doesn’t work on Safari (iOS) and user hasn’t got possibility to copy content to clipboard. We have to tell him how to do it.
  • Flash doesn’t work on mobile.

Solution:

Identify your (or your customer’s) requirements and then check, if the targeted capabilities are achievable in a web app. Plan ahead. And succeed.

2. Using some HTML5/CSS3, which doesn’t work well on mobile or some devices

Mistake:

Assuming, that what works on desktop browser, will work on mobile as well, and using code, that doesn’t work on specific devices.

Example:

Example not working:

.menuLink {
color: white;
text-decoration: none;
margin: -10em;
padding: 10em;
}
.disabledMenuItem {
opacity: 0.1;
cursor: default;
}

Example working:

.menuLink {
color: white;
text-decoration: none;
margin: -10em;
padding: 10em;
display: inline-block;
}
.disabledMenuItem {
opacity: 0.1;
cursor: default;
}

Solution:

  • Always check, if you can use a specific part of code or not.
  • Remember about prefixes when using CSS (i.e. animation without -webkit won’t work).
  • Change the display state from display: inline to display: block or display: inline-block.
  • Use some great resources, like caniuse.com or html5test.com, to check what’s supported on specific devices.
You can also use media queries, for example:
$queryMaxNotEnough: ‘only screen and (max-width: 1140px) and (min-width: 1024px)’;
$queryMaxMobile: ‘only screen and (max-width: 1023px)’;
@mixin queryMaxMobile {
@media #{$queryMaxMobile}
{
@content;
}
}
@mixin queryMaxNotEnough {
@media #{$queryMaxNotEnough}
{
@content;
}
}
@mixin queryRetina {
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
@content;
}
}

3. Low resolution images on Apple’s Retina Display

Mistake:

Using only low resolution of images.

Result:

Images look fuzzy on Retina and pixelation may occur.

Example:

Solution:

  • Server has to recognize, if request is coming from a Retina device, and if so – provide higher resolution images.
  • You can also use SVG as images format and web fonts.

4. Site loads on mobile in more than 3 seconds

Mistake:

Expecting, that everyone always uses WiFi connection, which has enough speed (high speed).

Result:

Traffic drop, lower conversion, complaining users (and they’re right!).

Solution:

  • Image optimization, Code compression, Database queries, CDN (Content delivery networks).
  • You can also use AJAX to load some part of the website first or you can also put scripts at the bottom before </body> html tag.

5. Mobile browser place focus on first input field on the website, even we don’t want that

Example:

Keyboard automatically shows up, if there is an input field on the screen.

Solution:

Placing hidden input above our input. We can use this part of the html code:
<input type=text style=position: fixed; bottom: -100000px; disabled readonly/>

6. Forgetting about prefixes

For example, if you want to use transition property, you should remember to use prefix -webkit- before plain property.

Example working:

-webkit-transition: all .5s ease;
transition: all .5s ease;

7. Setting height to 100vh

Mobile Safari interprets document length differently, than other browsers and it adds unwanted bar, which is difficult to be fixed.

Example:

ios-safari-portrait-before-scroll

Solution:

position: absolute;
top: 0;
bottom: 0;

8. Incorrect usage of readonly attribute

Let’s say, that you have used input type="text" readonly and after clicking on it, navigation bar shows up. If we don’t want to enter text into that input, we should add to this tag onfocus="blur()".

9. Creating web app only with only system (i.e. iOS) in mind

And now, last but not least, some thing you should do at the very beginning. Future users of your web app use different systems. Some of them have iPhone’s, some of them Android’s and some of them Windows Phone’s. You should plan your web app with them in mind. Otherwise, modifying web application, to work properly on all systems, can be time-consuming and very, very expensive.

Helpful links:

http://caniuse.com http://html5test.com http://github.com

We are here and happy to help!

Email

We will get back to you as soon as possible.

SEND EMAIL

Live Chat

Speak online with our awesome client support.

CHAT NOW

Call

Monday to Friday From 8am to 8pm IST.

+91 9555960648

Support Videos

Watch our online video and start quickly.

WATCH NOW

Have a question? Our team is here to help