Cohesive Design Between App and Webviews

Webviews can be a convenient way to offer content in the mobile app that you may have published already on your website. When using webview, keep in mind the following:

  • Be aware of how a website translates to a small screen. Mobile responsive websites are best suited to use in webviews. 
  • Consider hiding elements of a website that are not relevant to the content. For example, an FAQ button in the app linking to a webview of the FAQ section on your website may not need the website’s header, footer, and navigation.
  • Link directly to the content in a webview. Don’t make users scroll through to find it. 
  • Webviews that link to websites with a lot of content may be slower to load depending on the network availability.
  • Matching the fonts, colors, and branding between the native side of the app and websites housed in a webview can create a cohesive experience for your attendees. 

Example of a native app and a registration screen side by side:

 

Next article: Design Fundamentals with Widgets and Building Effective Widget Screens