How To Make Your Web Apps Mobile-Friendly
Developers usually build their web apps keeping the desktop layout in mind. But today, people use their mobile devices more than computers to browse content and use web apps. But since these apps are primarily built for desktop devices, these apps end up looking different and ugly on mobile devices.
This is a simple React App that gives us a list of DC superheroes. When I tried to run this web app on a mobile device, it looked like this:
As you can see, the app’s original layout is completely disrupted.
In this post, I will show you how to optimise a web-app for mobile devices using CSS features and build components that will look and work great on both mobile devices and desktops.
Setup
I have created a Scope on Bit that houses the components of the above app.
A List of DC Comics Superheroes 6 Javascript components. Examples: src / actions, src / app, src / hero. 1…bitsrc.io
You can also clone this app in your system from GitHub:
$ git clone https://github.com/rajatgeekyants/superhero.git
$ cd superhero
$ yarn
Run this app using yarn start or npm start in your system to see if it works.
The Chrome browser’s developer tools has many great features that not only allow us to develop web apps, and to do so while keeping mobile devices in consideration.
Open the Chrome Developer Tools and click on the Toggle Device Toolbar button that can be found on the top left corner of the Dev Tools section of the browser. Your browser should now look something like this:
Using the Device Toolbar, we can can emulate mobile devices inside the browser. Use this toolbar to emulate iPhone X on your browser.
Scale a Page Correctly for Small Viewports with a <meta> Tag
Open the app’s directory in a code editor, and take a look at the index.html file that is inside the public folder.
You will see that there are a couple of <meta> tags inside the <head> tag. One of them is the viewport meta tag. Let’s delete this meta tag, and see what happens to our app in the browser.
Here, the app is running on an iPhone 5/SE emulator. Previously, the app’s fourth column called View was not visible. But now the all the columns are nicely visible, and the app’s design layout is similar to what I had intended it to be.
The only hiccup here is that the text in the app is not quite readable because it is so small.
Inside the index.html file’s head tag, add the following meta tag.
<meta name="viewport" content="width=device-width" >
This meta tag targets the device’s viewport. It has an attribute called content that takes in a string of settings. For now, it only has a single setting that set the width of the app to be equal to width=device-width. Refresh the browser page, and you will get something like this:
Now even though the app’s device is disrupted, the text is quite readable. Now you may say that, we don’t need to set the width inside the meta tag because mobile devices allow us to easily zoom in on the text. But different devices have different viewports and we need some way to control the scalability.
Inside the viewport meta tag’s content attribute, add a setting for the maximum scalability:
<meta name="viewport"
content="width=device-width, maximum-scale=1.5">
Now the app looks incomplete, with the columns not completely display.
To solve this issue, we need to enable horizontal scrolling in our app.
Horizontal Scrolling
Our web apps on desktop use elements that need a great deal of width. On many occasions, we can’t just simply turn these elements into columns so that they fit on a small screen. Such elements may not only fit inadequately on small screens, they could ruin the entire layout of our page if we’re not careful. One solution to this is that we can use a horizontal-scrolling to preserve the width, but keep it easily usable.
Inside the src folder, you will find a file named App.css. This is where we will make our app horizontally scrollable.
body {
display: flex;
overflow-x: auto;
white-space: nowrap;
padding: 10px;
}Here, the body targets the entire app. I want to use flex properties for styling. This can be done using the line display: flex;. This will automatically set the flex-direction to row. The overflow-x: autoproperty tells the app that if content is horizontally overflowing, the user should be able to horizontally scroll to it. The app now looks like this:
Sticky Positioning
We can also use something called sticky positioning to keep the column header at the top of the page while the user scrolls . This provides our app with a neat categorisation.
Inside the App.css file, find the style properties that are targeting the th tags and add the following properties to it.
th {
text-align: center;
border: 1px solid black;
background: #018ded;
position: sticky;
position: -webkit-sticky;
top: 0;
}The position: -webkit-sticky; ensures that the sticky positioning works in webkit browsers. The top: 0; property sticks the column header to the top when the user scrolls down.
This is particularly useful for small viewports because if there’s a lot of data, or data takes up a lot of room, users will still be able to get the context of what they’re looking at.
Note: Before jumping in and using sticky, it’s worth checking first that it’s supported on the devices or operating systems that you need to support.
Quick Recap
- Use Browser Dev Tools to emulate different mobile devices on the browser.
- Use the viewport meta tag to set the width and maximum scalability of the app.
- Enable Horizontal Scrolling to access the horizontally overflowing content.
- Use Sticky positioning on header to help users understand what data they are looking at when they scroll down.
Try Bit
Bit’s platform help you manage and use components in different projects, collaborate as a team and build new apps faster. Give it a try.
