Building Web Apps: Avoid these Pitfalls during the Design Process
Over the last years I built tons of websites as well as web apps and worked together with many different designers. Some designers were experienced in building web apps, some weren’t because they were more focused on illustration or print design. Since web design is a subcategory of design you might assume that every designer is able to properly design a web app — the same software as for other design tasks can be used after all. However, as a developer, you immediately know if a designer is experienced in building web apps or not. So, what’s the difference between web design and other types of design like print design?
Print design is static.
When you design something that gets printed afterwards you know the format, the size of the canvas and the possible color palette. Most of the time you can export your (digital) canvas and the result will be 1:1 the same when we neglect color issues. It’s static. What you see on your computer, is what you will get in your hands. Fair deal. So why should web design be any different?
The pitfalls of the ideal scenario.
Designing for the web is different because there are many uncertainties you need to consider while designing a web app. After you designed a web app you don’t just export it. Your design gets split into code (HTML, CSS) and media objects (images, videos). Everything gets distributed to the user where it gets interpreted on the computer. Not your computer. The user’s computer. Or his laptop. Or his tablet. Or his phablet. Or his smartphone. Or whatever device he is using.
The web might be the most cluttered platform to develop software on. It becomes better and better but you can never be sure about the specifics of your user’s system. It’s really easy to forget this fact when sitting in front of your brand new 27" iMac, opening Photoshop and thinking “impossible is nothing”. I guess designers who aren’t experienced in web design forget that there are so many different devices with different specs and are just focused on their setup or what they see while designing — that’s what I call the ideal scenario. There are many pitfalls that you might be able to avoid when you ask yourself one questions again and again:
What’s the lowest common denominator?
When the user uses a web app there are many factors that influence the user experience. Since you can’t control any of these factors you need to define the lowest common denominator for every area. It’s totally OK to accept that some users won’t be able to use your web app when it increases the user experience for your app’s target group.
So let’s go through some pitfalls that came to my mind.
Performance
Not everybody has always access to the latest hardware. And even if somebody does have access, it is also possible that he is visiting your web app while having opened 20 other tabs or performing some other performance-intensive tasks in the background.
To consider: Your web app should avoid tasks or elements that are performance-intensive or, at least, use them more sparingly and not all at once. Performance-intensive tasks include:
- Animations, especially when infinite or based on scrolling
- Large high resolution images (processing a 500 MB image is more intensive than processing a 500 KB image)
- Playing HD videos
Operating System
Every Operating System has its own way to present the Graphical User Interface. The latter influences how fonts and window elements like scroll bars are rendered. While scroll bars look really aesthetic on macOS their appearance isn’t that nice on Windows.
To consider:
- Try to minimize the usage of scroll bars or other elements presented by the Operating System.
- Alternatively, you could completely hide the scroll bars or replace them with a customized version.
Resolution
There was a time when a lot of websites had a neat footer note like “This website is optimised for 1024x768” but these times are over because there is no real mainstream resolution anymore. Today, we have external displays, retina displays, laptop displays, tablets, phablets, smartphones and every category comes with many different (possible) resolutions. It is something you need to keep in mind while building your web app.
To consider:
- Use a grid. A grid reminds you that you should stay within the grid (ha!). It also helps you to balance your layout.
- If you don’t want to use a grid set the width of your canvas to a maximum of 1.440 pixels if you want to create a web app. When your canvas is 1.440 you can be quiet sure that your design will work on most laptops.
- The height of a laptop display is around 700-800 pixels. If you create elements where it is advantageous for the user to see all of it at once, like sliders with a pagination, please limit their height. Don’t create a fancy image gallery with a height of 1200 pixels and put the pagination below. A laptop user won’t see the pagination without scrolling.
Display Panel
Every display panel has a different way of presenting colors. There are also tools like f.lux that actively change the colors. That said, you might see slight color differences on your display that someone else won’t.
By now, there are also retina displays which have a higher pixel density than normal displays. If you don’t consider this by using a scalable format, such as SVG, or export your images in different resolutions, your images will appear blurry on retina displays.
To consider:
- Use high contrasts if the element is important, e.g. a button. Some users won’t see a difference between #f2f2f2 and #f7f7f7.
- Export your images as SVG or export your images in different sizes to make them retina-friendly.
Internet connection
So it’s 2016 but some countries (hello Germany) aren’t so good at implementing high speed internet infrastructure for the masses. There are still a lot of people who access the internet with 3G/2G and have limited data plans.
To consider:
- Limit the size to your videos to a few MB and provide thumbnails with a “play” button.
- Include videos based on the internet connection or screen size. Don’t autoplay videos when the user visits your website with his smartphone.
- Try to limit the width of images to 1920 pixels. Otherwise, the file size will be too high. Pro Tipp: Provide different versions using appropriate media queries.
- Use WebP as the image format (Chrome and Android only).
Browser
So your design will be broken down into a lot of HTML, CSS files and some images. The browser is the software that reads all of it, interprets it and creates all the visual elements on your screen. And every browser interprets everything a little bit differently.
Some years ago, it wasn’t possible to create visual effects like shadows, gradients, blur effects without using a lot of images. Since images need to be loaded and don’t scale it was kind of a challenge to create those effects and make sure that they always look good. By now, we can create these effects (and other stunning stuff) with pure CSS. However, that does not mean that we can implement every effect that’s available in Photoshop with CSS.
To consider:
- Make sure you know what kind of shadows, gradients and so on can be (easily) implemented with CSS.
- The more complicated your gradients, shadows and 3D effects are the more likely it is that you need to implement them with images which makes it more difficult for the developer.
Content (my personal favorite)
Most websites and web apps are filled with content dynamically, so you don’t know the exact content of your web app during the design process. A good approach to bypass this circumstance is to add placeholder texts like “Lorem ipsum…” and some placeholder images so you and the client (or your boss, user, mom or whoever you want to show your design) get a better idea of the final look.
Unfortunately, there is the “theme effect”. What I call the “theme effect” is this huge disappointment when reality (your final web app filled with the existing content) destroys your dream of a perfectly designed web app that you sketched before. Just check this demo of a random HTML theme that you can buy for some $$$. The demo always looks awesome because it is presented with stunning HD pictures, tons of text blocks and other fancy elements full of content. In reality you don’t have much content most of the time — especially when it’s user generated. Most of your users also don’t upload stunning HD profile pictures with smiling faces. That’s why a lot of themes look quite, let’s say, disappointing after you installed them. The same goes for web apps when you don’t consider that web apps are dynamic.
To consider:
- What text/content/information will you have for sure because it is required? Focus on these elements.
- Use plugins like Craft to generate better placeholder content.
- What content is optional and how likely is it that the optional content is filled out? The more unlikely it is to be filled out the less important it should be for your design.
- What happens if the user enters too much/too little text? In reality, no text block will look the same. Start varying the length of your placeholder text blocks instead of copy-pasting the same text.
- What if the image size/format is different? Don’t use HD pictures in your design if the web app won’t use HD pictures later. Also consider if different sizes and/or formats are possible.
Conclusion
People using your web app will probably use it in a different environment, with a different setup, and with different content than you did while designing it. That’s something really easy to forget. Especially when you have a really good hardware setup because you might not experience many bottlenecks during your day. Thus, it is important to constantly ask yourself “What is the lowest common denominator?”. Sometimes it can be even beneficial to not use the latest hardware because it won’t let you forget that resources are limited.
—
Thanks for reading. You could’ve read anything in the world, but you’re here with me. I appreciate that.
This was my first post on Medium. If you like this kind of content I would be overjoyed if you hit the ♥ button or leave me a comment. It‘s the easiest way to show us what we should blog about in the future.
I’m co-founder & CEO of techboi. We are a software company based in Berlin, Germany. We value efficiency, technology and design. Check out follow.techboi.io to stay in touch.
