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.
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> </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!