Make your web app look amazing, no matter what device you’re using

A couple of tips on creating web applications that will look great across various devices (including mobile!)

A few years ago, nobody cared about how a website would look like on mobile phones and other devices as they were not ready to display them properly, and the idea of responsive web design was nowhere to be found. Today, when mobile traffic takes the biggest part of the whole Internet traffic and Google indexing mobile-friendly pages is as a top priority over desktop ones, so it is really important to keep your web application responsive on all devices. It is a complex task that consists of many steps, but I will try to give you a few tips that could help you achieve that goal.

What is responsive web design, and how to create a web app that will work perfectly on mobile devices?

Responsive web design is often called with the acronym RWD. It is a pretty simple approach that states that your website should adapt to the size of a screen that you are using. All developers know that it is impossible to have the same look of the website on a 4K monitor and a small smartphone. Also, performance on different devices will vary, thus it is perfectly fine to load a big image or a video within PC, but not on a mobile device where the Internet connection is much worse in most cases than on computers.

Make sure that you really need a responsive web design

As said before, creating a webpage that will look great on all devices is a really complex task and the development is more time-consuming. The testing phase will play a crucial role but will be much more demanding than in the case of other projects. So it’s important to answer the question before starting developing if we really need RWD. When wouldn’t you definitely need an RWD?

Imagine that you are creating a web application that will generate some graphs based on the data from the database. This application is only for the internal use within the company and all users are using the same laptops. Obviously, there is no point in investing your time into the responsiveness of that application, as it won’t be used on various devices. On the other hand, if you are going to make that web application public after a few months, you should start with implementing your website with the mobile-first approach, which means that you should start designing your screens first for mobile devices.

Media Queries are your friends when creating responsive web design

As one of the CSS elements, media queries will help you ensure that your application looks great across different devices. You should look at different media type since a few media types were deprecated in version 2.1 of CSS and for now, we are left only with all, print, screen and speech. In most cases, the screen is enough.

How many screen sizes should you consider?

If you think responsive is simple, I feel bad for you son. We got 99 viewports, but the iPhone’s just one. – Josh Brewer

That is the kind of question with no clear answer, but most of the sources will tell you that you should have three sizes: desktop, tablet, and mobile phone, but it is not the best approach, as phone screen sizes can vary from 320px to 1440px. A much more effective approach is to have breakpoints driven by your content. If you see that your content has too many empty spaces on some resolutions or looks strange, put a breakpoint there.

See breakpoints on popular websites.

Flexbox vs Column Grid Layouts

Some time ago most of the responsive websites were driven by Column Grid Layouts (don’t confuse it with CSS Grid Layout), for example, Bootstrap implementation or 960 Grid System. The approach was pretty simple: every container consists of a specified number of columns that will always take a needed percentage of that container. For example, in bootstrap we had a grid system that was built on 12 columns, and every column takes 8.33% of space in the container, so when you needed an element to take more space than the others, you were just spanning those columns with simple syntax like:

<div class=”container”>
  <div class=”col-xs-3”></div>
  <div class=”col-xs-6”></div>
  <div class=”col-xs-3”></div>

The approach was fine enough and became really popular among all websites. There was already something that could take responsiveness crown but was not implemented in most web browsers. Of course, I meant flexbox. Nowadays, it is supported by most browsers, so you are safe to use it freely.

Why is it better?

It gives you a lot more possibilities, you can easily change the order of elements based on the viewport, you can easily specify shrinking or growing of elements, you are not bound to the specified number of columns, etc. It is still simple to use, so you won’t need to spend so much time learning. Bootstrap in the 4th version also moved to use flexbox, so there’s for sure something awesome in it. Go give it a try!

Here are useful resources for you:

Think about responsive images

A really important part of responsive design is to create images in a few sizes to avoid unnecessary loading of images. There’s no reason to load 2000x1000 pixel images and scale it down when you are using a mobile phone. Instead, you should load an image that will be closest to the size of a device you’re using. To achieve that you have two possible ways: one is to use srcset attribute in your image tag, the second is to use a new html5 picture element. Both are not supported by all browsers, but they fall back gracefully to standard HTML elements so you are safe to use them. It’s great to have some kind of automation tool that will create different versions of your pictures automatically during the building process, as it will boost your productivity.

Make sure that clickable elements are possible to hit on the mobile

The last thing to worry about is to make sure that all of the clickable elements are big enough. You can have a really big precision in clicking when using your mouse pointer, but it is not so easy when you are using fingers on a touch screen, so always make sure that you make your clickable elements big enough. Different sources propose different sizes, but most of them are going around having an element with at least 40 pixels.

The task that is pretty complex could be much easier if you remember those few tips when creating your awesome web projects. Try to have them in mind and go make the Internet a more responsive place!

If you have any questions, you’d like to share your feedback with us or you want your web app work great on various devices, just contact us!

Read also

Most Read

1 What is a legacy system, and why do companies keep using them?
2 Mobile payments security. What should developers know about it?
3 How to fold QA into every sprint
4 Software development view of healthcare wearables
5 How to quickly add a date dimension to a Pentaho Mondrian OLAP cube
6 Nearby Messages: Sharing Information With The Person That Is Near You
7 Creating a digital product for the healthcare industry?
8 7 reasons to use real time data streaming and Flink for your IoT project
9 How to create an effective Asset Tracking System?
10 Minimum Viable Product (MVP) in software development - what it is and how to define it. Product Owner and Project Manager perspective.

Digital products from concept to launch

We understand that creating a product is a challenging and risky endeavor and believe that having a partner with experience and know-how is a critical first step.

Learn More

The Digital Product Journey

From idea to launch we guide you through the startup experience

Learn More
Path Created with Sketch.

Before you head out, you can download our latest E-book “18 Software Product Killers Every HealthTech Strategist Needs to Know (part 1)”

Yes, we know it's a mouthful, we're working on it. Enjoy!