What does it take to develop a mobile responsive UI? How about a mobile responsive UI that works on all devices? What about if the application you developed doesn't work on mobile devices? This bombardment of questions can be overwhelming but is an important part of the development process. In this article, we will discuss the tools and techniques that will answer these questions.
First, what is a Responsive UI?
The UI we create may end up on a variety of devices. Each device has its constraints (e.g., screen sizes and dimensions) that must be considered when being designed/developed. Making the UI respond to the screen enables anyone to use the application on their preferred device. Achieving a fully responsive UI is a great success on any project, especially since it will naturally handle many accessibility concerns as you go.
However, maintaining the guideline of simplicity in the CSS stylings and proper HTML semantics will help ensure the UI is accessible to all. Be strategic in how and when you develop the UI, typically smallest to largest is best:
- Mobile (320px - 640px): Small Devices
- Tablet (641px - 1024px): Medium Devices
- Laptop (1025px - 1440px): Large Devices
- Desktop (1441px - 1920px): Extra Large Devices
With that out of the way, now we can discuss the tools and techniques that will help us achieve responsive UIs and ultimately ensure apps work anywhere.
Tools and Techniques for Cross-Device Testing
Starting with a solid design is a great start to developing a responsive UI. But does that solve all the problems? Eventually, those designs are going to be implemented into code and run in a browser for example on any kind of device. This is going to introduce unknowns that may lead to bugs that may pop up on only a few devices, ultimately not every piece of hardware or every browser is the same.
What can we do to ensure the UI works on all devices? The following are some tools and techniques that will help us achieve this goal.
Start Using These Tools Now!
Browser Developer Tools
Inspecting the DOM and Console isn’t just enough to debug. I’ve caught myself many times only using the dev tools at a minimum, this is a mistake. The dev tools are powerful and are available in every browser. Simulation of devices, network throttling, API calls, and more are all available in the dev tools. But these aren’t enough, especially for cross-device testing and simulations are not always accurate.
Debugging Mobile Devices
Learning how to debug on mobile devices is a must. This is the only true way to test on a mobile device that is running any web application. No simulations and since the actual hardware is being used, bugs will arise, if any, and can be addressed. This is a great way to test the UI on a mobile device and is a must for cross-device testing. Chrome DevTools Remote Debugging, Firefox Remote Debugging, and Safari Web Inspector are all great resources to get started.
NPM Run Dev
Running a command like npm run dev is a must, but if you want a quick way to test the UI on a mobile device, running a command like npm run dev — —host will allow you to access the application on any device that is on the same network. But limits the ability to debug on the device with browser developer tools.
Cross-Device/Browser Testing Software
Leveraging the power browser testing software is the most viable way to streamline testing and development times. Typically, these tools act as a proxy server that exposes a development server to the local network. This allows for any device on the network to access the application. Browsersync is a perfect example and is free to use.
Browsersync
This is a free tool that makes cross-browser or device testing fast. Being completely free to use and easy to install, this is a great tool for any size of project or team. Browsersync is an NPM Package and can be installed either locally or globally. To get started, install the package:
npm i -g browser-syncOnce installed, you can immediately get started. To start a server and watch for changes in a project directory, replace the /project/folder with the path to the project directory as seen in the example below. This will start a server and watch for changes in a project directory, once a change is detected, the browser will automatically refresh. Run the following command(s):
browser-sync /project/folder -w
// If you're not on version >= 2.23, run this command instead...
browser-sync start --server /project/folder --files /project/folderProxy Servers: How to watch development servers
What if you were developing a project that was running on a development server? Browsersync can proxy the development server and watch for changes that occur. This is a great way to solve the issue by working in JavaScript frameworks like NextJS or SvelteKit. To proxy a development server, run the following command, replacing the “port” with the port number the development server is running on:
browser-sync start --proxy "localhost:port" -wAkin to using the npm run dev — —host command, this will allow any device on the network to access the application. This is a great way to test the UI on a mobile device and is a must for cross-device testing.
Congratulations! 🥳🎉
There are many ways to go about testing a UI and application on multiple devices. With so many tools and solutions out there, it can be accomplished in many ways. But what matters is utilizing the tools that are natively available in the browsers and the tools that are available to us as developers. The tools and techniques discussed in this article are a great way to get started and will help you test and develop a functional UI and app that works on any device.
Happy coding! 🤓