‍

Launch your very own native app in no time

There’s no denying that native mobile apps deliver a far better user experience when compared to viewing a website in a mobile browser. That said, developing native apps for both iOS and Android devices from the ground up can be challenging! Aside from being costly and time-consuming to develop, producing and maintaining apps for both iOS and Android requires double the effort and double the experienced engineers.

If you want to avoid these challenges but are still looking to launch a beautiful, functional native app, try Median! Rather than developing iOS and Android apps from scratch, our online App Studio allows you to convert your existing website to a native app with only minimal web development. This way, you can leverage your website’s existing user interface to launch a powerful native app. Not only can this help you launch your app faster, it will also help to lower the costs associated with development. 

A native app for every use case

From early-stage startups to Fortune 100 companies, Median’s platform has helped thousands of customers build and launch their own native apps. Whether you’re looking to launch an app quickly to test a business idea, or in need of enterprise-level app support and maintenance plans, Median can provide the services you need.

With Median, you can choose how far you want to take your app: 

• Our online App Studio lets you quickly create a basic app with minimal configuration that you can publish immediately. 
• You can easily add native functionality and access mobile device native features by adding simple JavaScript to your website, such as setting the status bar color or controlling screen brightness. 
• For more advanced apps you can add Native Plugins to integrate functionality such as Face ID / Touch ID login or QR/Barcode scanning.
• And best of all? As native mobile development is not required to build or maintain your app you’ll save significant time and resources.

1. Start by entering your website URL

To start building your native app, simply enter your website URL into Median App Studio here! Once you enter your URL, our online build platform will create your app in a few minutes. This initial app converts your website content to a native app, and you can use our browser-based mobile device simulator to preview what it looks like on a mobile device. 

Each time you edit and rebuild your app configuration, we will email you a link where you can download your app and an appConfig.json file that contains your app configuration details. Be sure to use a valid email so you receive these important details.

2. Add your app icon, splash screen, and set theme colors

Our online App Studio makes it easy to put a unique, brand-oriented stamp on your app. At this stage, you can add a custom app icon, an app splash screen, and in-app theme colors.

App icons

Not only do app icons reflect your brand and hint at the purpose of your app, they can also influence app rankings and visibility within app stores.

• With Median, you can upload a single large square image file (we recommend at least 1024 x 1024px) to use as the app icon for both your iOS and Android apps. 
• You can use third-party sites like Canva to convert your desired photo to the correct dimensions. 
• With your image file uploaded, our service will automatically create all the required icon sizes for both iOS and Android.
• Already have separate image files for iOS and Android? You can provide those as well. 
• Find more tips and best practices on designing your app icon here.

Splash screen

The app splash screen is the brief introductory screen that appears as the app loads after the user has clicked the app icon.

• With Median, you can use your existing app icon to create your splash screen or you can upload a unique image. 
• You can also select and set unique, custom color backgrounds for your splash screen. 
• After choosing these elements, the Median platform will automatically create the different image files needed for each device and platform and incorporate them into your app. 

Want to use a unique image? Consult our blog post for tips and best practices.

Theme colors

A consistent, branded color theme can help shape your app’s visual identity.

• With Median, you can specify the color of the device's top status bar, and color of labels and in-app components.
• These elements are known as the iOS tint color and the Android accent color. 
• For the best results, get specific and choose the exact HTML color codes that align with your brand. 
• Knowing your specific color code helps you stay consistent across pages and operating systems.

Previewing changes

As you add your app icon, splash screen, and edit your theme colors, you can rebuild your app to preview your changes live in our browser-based Apple iPhone/iPad and Android mobile device simulators. You can also request feedback from others by sending them your app’s view-only Public Sharing URL.

3. Download and test your app on a physical device

Now that you’ve seen your app on browser-based simulators, it’s time to see how it looks and performs on physical devices. It’s at this stage where you’ll understand the true difference that a native app can make! From the easy navigation to the way the app icon, splash screen, and color themes align to create a UI-friendly design — there’s really no comparison between a native app and a mobile website.

There are different steps involved in testing iOS and Android apps. Here’s how to get started: 

Testing on iOS devices

1. You’ll need an Individual or Organization Apple Developer Account and a Mac computer. If it's just yourself testing, an individual account is easy to sign up for and you can enroll with Apple here.
2. Download your iOS Source Code from your app management page. Then use Xcode to load your app onto any iPhone or iPad connected to your Mac via USB.
3. Don’t have a Mac computer? You can use Median’s publishing service and our team will distribute your app to you via TestFlight prior to publishing to the Apple App Store (this is a paid service).

Testing on Android devices

1. You can test your app on a physical Android phone or tablet by downloading the Application Package (APK) file generated by our build platform and installing it on your device.
2. Simply open the email received when you first created your app and open your app management link on your Android device. Then click the Download APK link and once downloaded choose Install.
3. You may need to consent to warning prompts as you are installing an application that is not yet published through Google Play. Our documentation provides details on how to navigate these prompts.

4. Optimize your app

Want to take your app further before publishing to the Apple App Store and Google Play Store? Consider making the following optimizations!

Configure your website

You can make adjustments to your website to ensure it looks as good as possible when it’s displayed in your native app:

• Fix the display scaling: Ensure that text and UI elements are set to a suitable size, fix the display scaling at 1:1
• Prevent zooming: Prevent the user from zooming in on sections of the page
• Disable text selection: Prevent users from selecting and highlighting text and links 
• Add dark mode: Use of the prefers-color-scheme CSS media query to add light and dark modes

Find out more about how to make these optimizations by referencing this blog post. 

Native navigation

Elements like native sidebar menus and bottom tab bars create easy, intuitive navigation through your app. The bottom tab bar is our most popular native navigation menu, as it provides consistent navigation options and allows users to quickly navigate through the different pages of your app. Want to learn how to add native navigation to your app? Our documentation can help.

Link handling

You can control which in-app links open within your app and which open in the device’s mobile browser. You can also consider configuring deep linking — whereby links to your website from text messages, emails, other websites, etc. open directly within your app on a user’s device rather than their mobile browser. You can learn more about link handling and deep linking in our documentation.

Interface improvements

For an enhanced app-like experience, fix the device’s screen rotation so that it will always be in portrait mode. You can also enable swipe gestures to provide users with a quick and easy way to navigate through your app.

Website overrides

Apple and Google are quite clear: If your app doesn't look and perform like an app, it doesn’t belong on the Apple App Store or Google Play Store. To help you meet these standards and get approved, consider the following:

• Design a functional main page: Your main page should be a hub from which users can explore your app
• Avoid footers: Apps shouldn’t contain footer text and menus that the user needs to scroll to view
• Use mobile-optimized logos: Contain it to an area as opposed to letting it consume the entire screen 
• Use mobile-optimized forms: Forms should be large enough for easy completion on mobile devices
  

You can add Custom CSS to your app to change how certain website UI elements display within your native app. Using CSS you may show, hide, or otherwise alter the styling of certain elements within your app. You can also choose to make the changes on your website rather than app by displaying a different URL (e.g. app.yoursite.com) or different version of your site within your app.

5. Add push notifications and native plugins

These additional features will supercharge your app and allow your app to take full advantage of native functionality! You can include Push Notifications and Native Plugins when you first publish your app or add them in the future and make them available for your users via an app update.

Push notifications

With the power of push, you can reach your users directly on their mobile devices with updates, announcements, offers and other information. When you use OneSignal, Median’s default push notification provider, you can send native mobile push notifications to all your users for no additional cost. All that’s required is to create a OneSignal account and add your OneSignal App ID to your Median app. If you are using Median’s App Store Publishing Service, our team will set up push notifications on your behalf.

Native plugins

The advantage of building a native app versus using a mobile browser is that native apps can access the mobile device’s hardware and functionality. With Median’s extensive library of native plugins, you can harness the power of native device functionality with only JavaScript and minimal web development.

From adding Face ID / Touch ID login, to adding QR/Barcode scanning, to enabling in-app purchases, video chat and social login, these plugins will help your app deliver an immersive, highly integrated experience. To learn more about Median’s native plugins, refer to our blog post and our documentation.

6. Publish your app!

Publishing your app to the Apple App Store and Google Play will allow your users to download and update your app safely and securely. You have two options to get your app live in these app stores:

1. You can choose to publish your app yourself
2. You can use our App Store Publishing Service and let our experienced team handle the publishing process from end-to-end

Regardless of which route you choose, you’ll need either a Google Play Developer Account or an Apple Developer Account. You can start the process of creating these accounts here:

• Apple Developer Account
• Google Play Developer Account

Successfully navigating both Apple and Google’s review and publishing process is a complex, multi-step process. If you’d rather not take that on, leave it to Median to manage the process for you! Since 2014, our highly experienced publishing team has published over 3,500 apps with a 97% approval rate to the Apple App Store and Google Play Store. We will handle the publishing process from end-to-end, including the preparation of app store listing metadata and screenshots.

Ready to get started on your native app?

If you’re ready to build your own stunning, immersive, highly functional native app, without having to negotiate long, costly development timelines and managing multiple codebases, try Median’s App Studio for free and follow the steps above!