Category: Customization

To create a seamless app experience for your users, it’s important to optimize your website for the mobile environment. In this guide, we’ll walk you through simple adjustments that will make your website function and feel more like a native app when viewed inside the Vendrux app.

By applying these optimizations, you can ensure smoother navigation, faster loading times, and a cleaner user interface—all while maintaining full control over your website’s design and content.

IMPORTANT! Keep in mind that the code snippets provided below are examples, it is very likely that you will need to customize them to work with your website.

Creating a Fixed Header for Easier Navigation

One of the key features of many mobile apps is a fixed header or navigation bar that stays in place as users scroll. This makes it easier for users to access important links or menu items without needing to scroll back up to the top.

Here’s how you can make your header fixed:

CSS + Javascript Example:‍


	// Check the user agent for the canvas string
  	if (navigator.userAgent.toLowerCase().includes('canvas')) {
    	const style = document.createElement('style');
    	style.textContent = `
      		header {
        		position: fixed;
        		top: 0;
        		z-index: 9999;
      		}
    	`;
    	document.head.appendChild(style);
  	}

This keeps your navigation always visible, improving user accessibility.

Optimizing Image Sizes and Media for Mobile

Large images and unoptimized media can slow down your website's load time, which is especially noticeable in mobile apps. It’s crucial to ensure that your images are optimized for mobile users by using appropriate file sizes, formats, and resolutions.

To optimize your media:

• Use responsive images: Add the srcset attribute to your tags to serve different image sizes based on the device screen size.
• Compress images: Tools like TinyPNG or ImageOptim can significantly reduce file sizes without sacrificing quality.
• Lazy-load media: Defer loading images and videos until they come into view, improving initial page load time.

These optimizations will make your website load faster inside the app, providing a smoother experience for users.

Removing Unnecessary Pop-ups and Overlays

Pop-ups, modals, and overlays can take over too much screen space on mobile devices, making it harder for users to navigate the app. It’s a good practice to either remove these elements or simplify them for the mobile app environment.

Here’s how to hide pop-ups and overlays when viewed in the app:

CSS + Javascript Example:

	if (navigator.userAgent.toLowerCase().includes('canvas')) {
		const style = document.createElement('style');
		style.textContent = `
			.popup, .overlay {
			display: none !important;
		}
		`;
 		document.head.appendChild(style);
	}

This will ensure a cleaner, less disruptive interface inside the app, while still allowing pop-ups and overlays to work on the website when accessed via desktop or browser.

Removing the Footer

Mobile app users generally expect minimal distractions when using an app. Removing the website footer inside the app can help reduce clutter and keep the focus on the core content.

Here’s how to hide the footer when your website is viewed in the Canvas app:

CSS + Javascript Example:

  if (navigator.userAgent.toLowerCase().includes('canvas')) {
  	const style = document.createElement('style');
  	style.textContent = `
  		footer {
  			display: none !important;
  		}
  	`;
  	document.head.appendChild(style);
  }

This reduces unnecessary scrolling and declutters the interface.

Making Buttons Easier to Click

On mobile devices, buttons that are too small or too close together can be difficult to tap. It’s important to optimize button sizes and spacing to enhance usability in the app.

To make buttons easier to click:

• Increase button size: Ensure buttons are large enough to be easily tapped on small screens.
• Add padding: Increase spacing between clickable elements to prevent accidental taps.

CSS + Javascript Example:‍

	if (navigator.userAgent.toLowerCase().includes('canvas')) {
		const style = document.createElement('style');
		style.textContent = `
			button {
			padding: 15px 20px;
			font-size: 18px;
		}
		`;
		document.head.appendChild(style);
	}

‍This will ensure buttons are more user-friendly inside the app, improving overall usability.

By applying these simple adjustments, you’ll be able to create a more app-like experience for your users. Each optimization makes the app feel more responsive and tailored to mobile, while still being easy to manage on your end.

For more detailed guidance on customizing your app and optimizing your website’s performance in the app, be sure to check out our other guides:

These resources will help you fine-tune the app experience for your users and make the most of your mobile presence.

‍

When your website is displayed in a mobile app, certain elements that are useful on a desktop site—like footers or large widgets—might take up valuable screen space in the app. By hiding these elements, you can create a cleaner, more focused experience. This guide shows you how to identify elements to hide, use CSS or PHP to do so, and avoid common issues like flickering.

Identifying Which Elements to Hide

Here are common elements you might want to hide in your app:

• Footers that contain links and information suited for desktop browsing.
• Pop-ups and overlays that can take over too much screen space.
• Unnecessary widgets or ads that disrupt the flow.

Using JavaScript to Inject CSS and Hide Elements

We’ll use JavaScript to inject a tag into the header that applies the necessary CSS. This ensures the CSS is applied only when the site is viewed in the Vendrux app.

if (navigator.userAgent.toLowerCase().includes('canvas')) {   
	var style = document.createElement('style');   
    style.innerHTML = 'footer { display: none; }';    
    document.head.appendChild(style);
}

if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'canvas') !== false) {    
	echo '';
}

  if (navigator.userAgent.toLowerCase().includes('canvas')) {
      var style = document.createElement('style');    
      style.innerHTML = '.popup, .overlay { display: none; }';   
      document.head.appendChild(style);
  }

if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'canvas') !== false) {    
	echo '';
}

  if (navigator.userAgent.toLowerCase().includes('canvas')) {    
      var style = document.createElement('style');    
      style.innerHTML = '.hide-in-app { display: none; }';    
      document.head.appendChild(style);
  }

if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'canvas') !== false) {   
	echo '';
}