Remodelling native mobile app UI on desktop web
I am working on a project that involves translating native mobile app (Android & iOS) UI and behavior on the web, using HTML5, CSS, and JS. Since there is no framework or tool to do the conversion, I have been manually using CSS for this task. Is there a more efficient way to approach it? I have been thinking of a couple of options, but I'm not sure about their long-term viability:
- Build a template from a framework like Polymer that utilizes my pre-defined web components. For example, build an HTML layout that works like an Android's vertically-oriented LinearLayout, and reuse it when needed. Mobile apps inevitably share mutual layouts, views, and behaviors, so once the work for the template is done, the overall process might actually be faster since I can use data binding to input the new set of UI data to the template.
- Draft the UI in an SVG, and load it via HTML. This is great in terms of pixel scalability, which makes the end UI look more matching to the original mobile app UI, but once done, this won't be reusable when I need to remodel a different app.
- Freeze and clone the a mobile web version (if available) of selected apps.