Introducing 4 important mobile web enhancements for Sendbird’s React Chat UIKit
We are excited to announce 4 React Chat UIKit updates that streamline user interactions with mobile web browsers. We implemented a new responsive UI for mobile screens, redesigned popups, introduced a bottom panel for reactions, and transformed the context menus into long-press interactions. This blog will explore these enhancements to make the Sendbird React UIKit mobile-friendly!
4 mobile web support enhancements for Sendbird's React UIKit
The mobile web is complementary to apps and an essential experience that lowers the threshold of user engagement by removing the need to download a native app. Mobile web support is crucial to cater to the growing number of mobile users: 92.3% of internet users access the internet using a mobile phone, and as of Q1 2023, people using mobile devices contributed to almost 60% of all website traffic. Because engagement correlates with conversion and retention, mobile web apps and sites are vital components of a mobile-first strategy that extends reach and accelerates business growth in today's mobile-centric world.
Responsive UI: Adapting to mobile web screens
The latest React UIKit update eliminates the need for developers to create CSS tweaks to adapt the UI to mobile screens. The UI components now adjust automatically, saving developers time and unnecessary hassle. For example, the chat message thumbnail will adapt its size and module widths for mobile viewing.
Redesigned popups: An improved user experience
To ensure a consistent and user-friendly experience, the popups in the Sendbird UIKit were completely redesigned and standardized. In a nutshell:
Alert messages such as 'Leave Channel' or 'Delete Message' now feature a unified design.
Actions such as inviting users to a channel or moderating conversations have been revamped to utilize full-screen layouts.
The 'Create Channel' feature has received special attention to provide an enhanced user experience.
Bottom panel for reactions: Simplified & fun interaction
To streamline interaction in the context of reactions, we have replaced the context menus with a bottom sheet that lists the number of reactions and authors who posted them. This creates a more socially conducive experience in which users can assess other members' reactions.
Long press for context menus: Improved usability
In line with mobile conventions, we have transformed the context menus, previously triggered by kebab menus, into long press interactions. This change enhances usability and aligns with established mobile interaction patterns.
Architecture and concepts for the mobile web
To activate the mobile mode in the Sendbird Chat React UIKit, developers can use the simple mediaQueryBreakPoint boolean variable. A specific pixel value or a dynamically deduced boolean value activates the mobile mode. Please refer to the docs for more information.
How to set up mobile mode in your web app:
No additional setup is required if you are using the Sendbird Chat React UIKit component. UIKit will automatically optimize itself for mobile browsers. However, if you have your own layout management libraries, you can use the mediaQueryBreakPoint property to set up the desired layout based on the screen size.
Miscellaneous enhancements:
We added a back icon to the Channel component with an onBackClick handler for seamless navigation.
We introduced the onUserProfileMessage prop to help customers create and navigate to new 1-1 channels when clicking the Message button on the user profile popup.
Enhancing the user experience with mobile web support
With the new optimizations for mobile browsers, web developers can now use Sendbird’s React UIKit to deliver an even more powerful communication experience on desktop and mobile browsers. The responsive UI, redesigned popups, simplified interactions, and other mobile-specific enhancements contribute to an enhanced user chat experience.
Update your application with the new Sendbird React UIKit and unlock the potential of mobile web communication: try our React Chat UIKit today with our 30-day free trial (no commitment or credit card required).
Stay tuned for more low-code or no-code updates to further streamline your React Chat development. Meanwhile, happy mobile web upgrade!✨
