How to Turn a Website Into a Mobile App

Long gone is the time when everybody wanted a website; today, everybody wants a mobile app. We receive lots of emails from potential clients asking us to convert their websites to iPhone or Android mobile apps. If you’re thinking about jumping on the mobile path, let’s look at turning a website into a mobile app from three perspectives: business, user, and platform. Business - What Do You Need an App For? There are a lot of examples of businesses that started as a website and got into mobile a bit later: Dropbox, Airbnb, Google Docs, the Guardian -- the list goes on and on. Why do you think they made this decision? ...Hmm... because mobile devices are rapidly overpopulating the planet! We’ve been hearing this for years, ever since they started shipping Ericsson phones with Symbian OS. But the real reason is not “devices.” The real reason is users. Website, email, SMS, mobile app, kiosk, customer service, phone calls. All these things are simply channels that companies use to interact with customers. Customers don’t think of these as “channels.” But they do care about their experience with a company. If their experience is bad or is not seamless across platforms, then the customer is likely to go elsewhere. Developing a cross-channel user experience is the reason why brick-and-mortar companies get first into the web, and then into mobile and tablet apps. It’s up to you to decide how exactly you want the cross-channel user experience to be implemented across platforms. You may encapsulate all your website features in a mobile app, or let an app perform a limited number of functions. Sometimes, mobile apps may even provide functionality that a website doesn’t. It doesn’t really matter whether an app is a direct translation of a website or not. What matters is creating a seamless user experience. Every platform or channel has different rules that need to be followed – whether you develop a product from scratch or turn an existing website into an iPhone app. Platform-specific knowledge combined with development experience and business expertise are the three ingredients needed to craft a seamless user experience. Even if you already have a responsive website (WordPress, Joomla, custom-made, hard-coded HTML 5, etc.), we suggest that you forget about it; a native mobile app is an entirely different product. The cost of turning a website into a native app can be rather high given the variety of features that websites typically provide. More to the point, wrapping an entire website into an app is risky because you can’t predict whether users will actually like your finished product. We prefer starting with an app that does a few things well, and then gradually adding more features. The idea of a Minimum Viable Product (MVP) is to quickly develop a functional prototype that includes a minimum number of features – the core functionality - and then launch it on the market and evaluate the concept. It lets clients save time and money, and, most importantly, lets clients elaborate on further developments based on what they learn from users. It defines the most essential features to be included in an MVP within the first week of work. This is called the project planning stage. This pre-production stage is about getting an understanding of the product, its users, and its key functionality, as well as understanding the technologies needed for its development. User – How to Achieve Seamless UX Native apps have a very distinct look and feel. Therefore, the UX of a mobile app should be completely different from a website’s UX. Keep it simple and intuitive, don’t ignore the platform, provide context, make a good first impression, and pay attention to the brand values. These are some of the fundamental UX design principles that we focus on while ensuring a consistent and beautiful visual language across the product. From our experience, the biggest challenge for website owners is to switch to a mobile way of thinking. Therefore, I have decided to highlight some of the most common user expectations that distinguish mobile from the web: Consistency across screen sizes It’s obviously hard to accommodate the whole website on a small screen. Roughly speaking, 4-5 features on a website will equal 5-10 screens on a mobile device. This is another reason why I suggest picking out only the key features and dumping the rest, at least in an app’s early versions. Simple navigation Interactions on a website are usually complicated. “Complicated” is absolutely not what you want in a mobile app. When we convert a website into an app, we let the mobile-first philosophy lead the process. In other words, I designed each page with a clear orientation and simple navigation so that a user doesn’t feel lost. There is nothing users hate more than wasting their time trying to reach a destination. Instant gratification With mobile, users expected immediate gratification. In a mobile app, users get in, accomplish something, and get out. If they press a button, they get a reward, so to speak. Instant gratification is the only way to keep users engaged and an app running. Users become less motivated to use an app as its complication increases. The longer it takes a page to load, the more clicks there are between screens, and the more fields a user needs to fill out, the less motivated a user will become. For example, the web version of one of our current projects has a pretty sophisticated car search with lots of filters. If we didn’t simplify it for mobile, the user would’ve had to spend a lifetime trying to make use of all of the filters. Instead, we chose only the three most significant – brand, style, and price – thus achieving the slickest possible user experience. Platform – How to Turn a Website Into an App Since web and native mobile platforms have very few things in common, the question you should be asking isn’t “How can I convert web to mobile?” but rather “How can I develop a mobile app with the best user experience?” As opposed to websites or mobile web, native apps have a lot of advantages that you can use to take your business to the next level. One of the biggest advantages of mobile apps is the ability to connect to a device’s services and hardware components. We can access address books, pictures, cameras, and microphones. We can also use a device’s compass, accelerometers, gyroscope, and GPS to define location, positioning, motion, and orientation. A mobile device, unlike the web, is a part of a user’s lifestyle and is designed for frequent use. That’s why data caching and offline capabilities are particularly important. While data caching is a must for any app, accessing an app’s content in offline mode cannot always be possible because it implies storing resources locally and utilizing the computing power and memory of the device. If you already have a server, we can pull the data from your website into an app, but only if the server is optimized for mobile. Sometimes, a backend even needs to be developed from scratch (if it’s outdated). A mobile app usually works against a server layer through JSON APIs, while websites typically use HTML format. Certain functionality - like payments, for example - requires using a third-party service that processes transactions through a server. On the web, payment functionality is implemented differently. Mobile platforms also offer possibilities for user engagement that websites often do not. These include push notifications, gamification features, and location-based actions, all developed natively. Mobile is also a great avenue for innovation given the speed at which technology is developing. From iBeacons to Apple Pay to Bitcoin and augmented reality, the possibilities of mobile platforms are endless. However, the sooner you come to the app community, the better it is for your business and customer to bring you more leads, or else someone else will acquire your customer.