Lightning Talks | Shelmith Nyagathiri Kariuki | Leveraging CSS to Make Shiny Mobile-Responsive

Hi everyone, my name is Shel, a data analytics consultant based in Nairobi, Kenya. Today I'm going to show you how you can quickly make your Shiny apps mobile responsive. At the beginning of the year, I joined a team that had built an amazing app, but users were finding it hard to maneuver it through their phones. I was required to make the app mobile responsive while making very minimal edits to the R code. I took this as a challenge and within 2-3 weeks, we had the mobile Shiny app ready and deployed.

Apps are said to be mobile responsive if they are optimized to be functional and aesthetically pleasing on devices of different sizes. For this talk, I created a dummy Shiny app that you can access via bit.ly slash mfano. You can also access it by scanning the QR code displayed. This is the same app, but with a few differences, depending on whether you view it on a laptop or mobile phone.

Making the menu collapsible with CSS

The first thing you can do is to set the app such that the menu is collapsible. In Shiny, by default, when collapsible is set to true, the menu is collapsed and the screen size is 940 pixels or less. Here, I used CSS and media queries to style the menu icon and to reduce the font size of the tab names and tab background color.

CSS is used to style HTML elements and media queries enable web page content to adapt to different screen sizes and resolutions. Think of media queries as eval statements. For example, if the screen size is less than 480 pixels, typical of mobile phones, convert the background color to pink or the h1 font size to 8 pixels. We use breakpoints with media queries to set points where websites adjust to the width of devices.

Think of media queries as eval statements. For example, if the screen size is less than 480 pixels, typical of mobile phones, convert the background color to pink or the h1 font size to 8 pixels.

Hiding elements and using shinybrowser

Next, you can choose to remove some objects so that they are not visible on some devices. In this example, we removed the icons and introduced a button on the mobile view. You can do this by setting display as none in CSS. I also used media queries to edit the topography of the paragraphs for the mobile view.

Shiny browser, a package by Dinatali, lets you easily detect a user's web browser information in Shiny. One of the caveats is that the width and the height of the browser window are only reported once when the detect function is initially called, so you'd need to refresh the page to get the new dimensions.

You can use shiny browser to reduce the font size of different things such as plot titles, axis text and labels. You can have a function that generates your graph with an argument of type of device. For example, if your device is mobile, we want the title to be of size 14, otherwise size 18. Then on the UI, insert the detect function and on the server, define a reactive element that detects the type of device based on the device's width and use this as the graph's function argument.

And this is what I did in the Kwanzaa tab. The axis text size in the desktop view is a bit larger than that in the mobile view. You can use the same principle to change the orientation of the graph as seen on the tattoo tab. On the mobile view, the chart is flipped.

CSS Grid, Flexbox, and browser inspection

You can also choose to change the order in which objects appear in each tab. And this is where CSS Grid and Flexbox come into play. They both define how elements are displayed on a web page.

Lastly, one trick that is really helpful is inspecting the browser. You can play around changing some aspects and seeing how things look. It is also very important to see how your app looks on different devices. And here, you can ask your friends to send you a screenshot of output displayed by myviewport.com and add the screen size dimension in the devices section.

Once you are happy with the result, copy the rules to your CSS file, refresh and rerun. You can perfectly see the media queries in action on your browser. And that, my friends, is how you can have a very awesome and usable Shiny app that can easily be viewed via a laptop or a mobile phone.

Now, disclaimers. Number one, I worked on this project before I learned about Bootstrap and BSLib, so please check them out. Two, I'm not a CSS pro yet, so I believe my code could be more efficient. And honestly, with CSS, you just need to keep guessing values till things work and undo when things get worse.

And honestly, with CSS, you just need to keep guessing values till things work and undo when things get worse.

You can access my code via bit.ly slash mfano code. If you are attending the conference physically and you're interested in hearing more about this project, please look for me over lunch hour so that we can chat. Thank you.