Possibilities within menu settings for the app (custom tabs)

Read more about some of the possibilities in custom tabs to find out which option is best for you.

The possibilities are compared below:

• Regular website/landing page
• Single page application (SPA)

Read more about some of the opportunities within custom tabs to find out which option suits you best.

Possibilities compared below:

• Ordinary web site / landing page
• Single Page Application (SPA)

Summary

Ordinary web site / landing page:

Navigation: Full-page reload on every click

Performance: Slightly slower due to frequent reloading

Technical expertise: None needed – easy to implement

User Experience: May feel less seamless compared to an app-like interface

Best for: Static pages, simple integrations

Drawbacks: Less smooth, might need adjustments for a better mobile experience

Single Page Application (SPA): 

Navigation: Smooth transitions, no page reloads

Performance: Faster after initial load, optimized experience

Technical expertise: Requires developer knowledge of JavaScript

User Experience: Smooth, app-like interactions

Best for: Dynamic content, news updates, interactive features

Drawbacks: Requires JavaScript support, can be complex to develop

...

Detailed explanation

Ordinary web site / landing page

What is it? 

On traditional websites, navigation triggers a full page reload for each click, refreshing the browser to display new content. This happens because the browser requests a new HTML document (a ‘document request’) to display an updated view.

What are the benefits? 

This is the easiest way to include the customer’s website in their apps. The URL to the page already exists and the customer can simply add it in a new external link in the app.

What are the drawbacks?

• Every click reloads the entire page, which can feel slow and interrupt the flow compared to the smooth experience of a SPA.

• If the landing page isn’t mobile-friendly, it might come across as cluttered, hard to navigate, or out of sync with the app’s look and feel.

• Traditional websites lack the dynamic, app-like interactions/feel that SPAs offer, making them less ideal for news articles or content that updates frequently.

In which case do we recommend clients use it?

• Low technical expertise: This option is ideal for customers without technical knowledge or a developer on hand.

• Simple content integration: If the goal is to display static or additional information (e.g., contact details, event pages) rather than interactive features or frequent updates, a traditional website is sufficient.

• Quick implementation: When a fast and straightforward solution is needed, adding an existing webpage to the app can save time and effort.

Single Page Application (SPA)

What is it? 

SPA (Single Page Application) allows seamless navigation by dynamically fetching and displaying new content without reloading the page (i.e. by the web browser making a document-type network request). Unlike traditional websites, which use navigation events to load new pages, SPAs use transition events to update content within the same page. A SPA commonly uses a dedicated  GUI (Graphical User Interface) with buttons or menus to navigate between “pages”. Each rendered page is rendered by the client (web browser) instead of rendered by the server for a traditional page. Content is fetched from the server, CMS, to be rendered “on the fly” by the web browser ensuring new articles appear without manual updates affording a more app-like user experience. In short, an SPA is dynamically rendered by the web browser.

What are the benefits? 

• SPAs update content on the same screen without switching to a new page, offering a smooth, intuitive experience similar to mobile apps. 

• After the initial load, SPAs can feel faster since they fetch only new data instead of reloading the entire page, making them ideal for frequently updated content like news. 

• Developers have full control over rendering, turning raw data into user-friendly visuals efficiently, reducing processing, and ensuring responsive performance.

What are the drawbacks?

• SPAs rely on JavaScript, which can cause compatibility issues with outdated browsers when the SPA relies on a specific Web API, for example social sharing, requiring developers to add fallback code and in turn increases complexity. 

• Rendering occurs in the user’s web browser on their device, where the web browser commonly processes raw data (e.g., JSON) and downloads large files upfront, making the initial load slower than traditional websites. This process also consumes more battery and processing power, affecting mobile devices or older hardware. However, after setup, SPAs tend to respond faster as no additional page loads are needed.

In which case do we recommend clients use it?

• When the goal is to create a seamless, responsive design similar to a mobile app.

• Ideal for content with the latest news or live updates where content refreshes dynamically.

• Suitable for clients with a developer who can handle JavaScript-heavy projects and how to optimize for different devices and browsers.

...

FAQ

How long would you estimate it takes to build a SPA?

The time required depends on the developer’s experience and the complexity of the SPA. In general, building a basic SPA can take around 1–3 development days, with design, development, and testing.

Can we display ads?

Yes, you have full control over the content displayed in your custom tab. The only restriction is mentioning Apple or Google, as this could result in the app being rejected during the review process.

What is the recommended number of menus in a SPA for the best user experience?

When adding a menu bar within the SPA to allow readers to switch between different pages, consider how many menus are really needed. Since the SPA is embedded in an app that already has multiple tabs, an overly detailed menu can feel cluttered. To keep it user-friendly, we recommend keeping the menu minimal and focused.

Do external links from our articles automatically open in a web browser, or does it depend on our own hyperlink settings?

The link behavior is depending on the target attribute. If you do not specify a target attribute, or set it as (_self) the app will treat it as the default target behaviour, which means that the link will be opened within the current view.

Can we force certain pages to open in a web browser instead of in the app, for example by using target="_blank"?

Yes, this is possible. By setting the target attribute to _blank, the app will attempt to open the link in a new browser tab or WebView.

However, in SPAs, this is not commonly used, as it breaks the seamless “in-app” experience that SPAs are designed to provide.

Do I need to implement a refresh function for article pages in the mobile app when users scroll down?

We recommend adding a refresh or reload function to ensure the page updates properly as users scroll down.