1. Internet Explorer — still alive

If your product does not have users who still work on this old friend or if your project requirements do not contain IE/Edge support you can skip this point. However, statcounter.com says that IE11 in October 2017 had 3,74% of browsers market worldwide. So let’s suppose that your project requires IE/Edge support, especially if it’s a product or company static web page. So what are the biggest problems with these two? Flexbox supports Internet Explorer only partially, so layout is often in a mess. Edge is a bit more liberal but animations are always shifted in comparison to Chrome or Firefox. It also applies to IE — animations are everywhere but not in their proper places.

There is no doubt that it’s always problematic for web developers to check the page on IE. This browser is like an old uncle with big inheritance — everyone wants to get his cash but he’s still alive and you need to look after him ;)

2. Inputs customization

Web forms are usually ordinary and boring, but designers love to add there all these small things like: some outstanding color, chopping borders for a better look, sweet titles and placeholder sprinkle with animating! Beautiful on design, but when I’m testing inputs there is always something wrong: one is a bit above another, the placeholder is unreadable on mobile, dropdown is unable to scroll or buttons inside input type number on Safari are still default… So, I know it’s hard but… before testers start their work, you should pay attention that nothing is floating around.

3. Error displaying

Do you know this feeling when you just want to sign up on the website but everything goes wrong?

Hello! I know you are dreaming to meet my dashboard. Yes! Go on! Don’t be shy… Sign up for free! — sorry for that, but usually I get the feeling, that every app just tries to catch me…

Is that effective? When everything on the page works correctly — might be. Otherwise… Where is the keyboard for typing e-mail address on my mobile? Next: Password must have 8 characters, contain a big letter, a small letter, and one special character… Aaand confirmation e-mail doesn’t match. Or your password can’t be a straight row of keys. — BUT I’m just trying to sign up! And your hints are displaying partially… Inputs changed their places dramatically… REFRESH. OK, last chance — at last I made it, the registration form is completed! Wait… What? Why submit button is inactive?

Web forms are one of the worst things for developing and testing too. There is a lot of edge cases which generate a dozens of bugs.

4. Long text

Your web application gave me an opportunity to add a description to my profile! It’s so nice! I love it! I will put here whole Hamlet poem. I empathize with this story.

But your app doesn’t. Now tell me where is the rest of my profile?! Miles away from the top of the page…

You should remember about setting up some text limits or ellipsis and cut out rest of the text or overflow… Hamlet poem is an edge case, but a long text in a place which you prepared for something short is a common case.

5. Pixel perfect design

Without designers, our products will be so ugly, that only scientist working on ENIAC will be able to look at them. They are artists, it’s obvious and artists do not like to change their piece of art. A lot of programmers have a big problem with it. Paddings, margins, font sizes, and every single object on the page was diligently counted and planned. Why are front-end developers destroying this with some random values in CSS files? Rush, deadlines, maybe low professional experience… If you won’t check it in the first place, you will do it probably only after tests — it’s a waste of your time as well as time of your colleagues.

6. Page with empty state

Imagine that you go to the museum. You admire sculptures, paintings, and architecture of the place. You’re fulfilled with a mosaic of emotions and colors. You’re exploring place by place and suddenly you enter the empty room. There is literally nothing inside! Only white walls and door, not even windows. How confusing! What would you think in this situation?

– Should I be here or not? Why is such a big room empty? Did I do something wrong?

I’m trying to say that on every website exists this one (or more) subpage with no data generated by the user. And then he feels all this uncertainty… Be nice, and make users feel comfortable on your website — you can always talk with the designer to prepare placeholders for the user so he can has much better impressions.

7. 404 — page not found

It’s similar situation to the previous point and it’s very often neglected. Your user got lost, so help him to find the right path… Huge plain text NOT FOUND won’t persuade the user to stay on your page. But beautiful background with explanation what has happened and a link to bring him back might do. It’s the next situation when it’s rather good to be friends with designers. Designing brilliant graphics with links to other places on your page is within their competences.

8. Wrong URL redirection

Have you ever read Reddit? You did for sure. Sometimes users of this website paste some URLs which lead you nowhere. It makes me smile or resolve anger — depending on the mood or how much work I have ;) More to the point, in every project there is this one button, this one link that is improper, it’s just a wrong path. Ok, but sometimes I also notice redirects to localhost:8000 on the staging server. Just keep in mind to double check it and prepare a good config file.

9. Fetching too big pictures and video

Fetching picture 800x600px for avatar which requires just 40x40px size is madness! Unfortunately, situations like this happen. You may say that it’s not a bug, everything works correctly, but on the other side is the user, and what users like is rapid loading and fast working. So when the client needs to fetch about 50 big pictures, it’s becoming a huge challenge for 3G internet connection. 10 movies playing at the same time will slow down user’s computer dramatically. That’s why writing code correctly is not enough, the next step is wise managing of page weight, animations playing, and 3D objects rendering. If it takes about 3–4s. for a page to load, 25% of users will abandon it. Speed up loading time and conversion on your site will rise up.

10. Add-ons and JavaScript libraries configuration

If you decided to use some external libraries or add-ons especially in CMS you should take into account warnings in the console. It’s a pity that ASCII art logo of your product looks better than a red wall of messages… Libraries and add-ons are very helpful and time-saving but they require a bit of time to implement. Average user never opens console — developers used to say… How do you know? The devil’s in the details.

11. Incorrect HTTP status codes

Almost every web app use HTTP for communication — several projects use this protocol incorrectly, especially response codes and HTTP methods. The most popular bug is 200 code response with error message. Or, when you are sending 400 for every user fault, not even 401 — unauthorized or 422 — unprocessable entity (complete list of codes you can find here).

That generates a lot of conflicts during further development and you can’t skip this step while programming. You should also remember about methods that HTTP provides. Not only GET and POST which are usually used opposite to the rest of them like PUT, PATCH, DELETE. I mention this because I found a few cases when GET method was use to write data. Such behavior is incorrect for this method and it’s designed to retrieve information and not to change the application state (I should mention here about RESTful architecture which is commonly used, because of: fast performance, reliability, and the ability to grow. I highly recommend REST).

12. Session expiration

The curse of the default session configuration forced me to evolve new habit — I always sign out before closing the page. No matter if I checked “Remember me on this computer” checkbox or not. Usually, it’s not the main thing to configure at the beginning, so it’s left for the next few weeks or months, and it’s really harmful for users’ security. Setting up expiration period should be the first thing to configure before release.

Wrapping up!

For a long time, I had satisfaction in finding bugs on every step I take in the web. But then, I started being curious and wondering, why is it happening? The Internet provides us a lot of courses, articles or discussions where we can find almost all possible edge cases and solutions. First of all, I thought that it’s just a fault of a lazy human nature, but after a few chit-chats with my colleagues, I found out it’s not the only reason. Bad management of processes, lack of mentors or poor quality of documentation could be some of them. They can occur together or singularly.

And what do you think? Do you have similar feelings? Maybe you disagree with me? Just share with me your opinion in the comments section.

I am also curious what kind of bugs you have found on your favorite web pages. I hope you will find this article helpful. Thanks for your attention!

If you enjoyed this post, please hit the clap button below 👏👏👏

You can also follow us on Facebook, Twitter and LinkedIn.