Mobile UI
One of the crucial aspects when building a web application is to ensure that it can be accessed and utilized on devices with various form factors. Having a responsive UI allows the web application to adapt to different screen sizes or devices. This feature enables individuals to access the website via a mobile phone or a desktop computer. In this section, we will learn how to scale some common UI elements to display properly on mobile devices. We will learn how to modify the appearance and the behavior of the footer, the navigation bar as well as buttons and vertical tabs.
Pre-workshop Setup
If you did not attend the “Styling Modern Web Apps” workshop, you will need to clone the wsr_web-design-guide repo using the following command:
git clone https://github.com/McMasterRS/wsr_web-design-guide.git
Then, checkout the mobile-ui branch using the following command or using the IDE GUI:
git checkout mobile-ui