How to Make an Interactive Mobile Website

1. How to make an Interactive Mobile Website If you can’t program

2. Introduction • 75% of customers polled in a 2012 Google study said they “prefer a mobile friendly site” • 70% of mobile searches act within an hour, whereas only 30% of PC searchers do (Mobile Marketer 2012).   • By 2017, total no of mobile phones, smartphones and tablets will be larger than world’s population • (according to predictions from analysts CSS Insight). • Whether you are a small business owner, part of a local sports team or community group, a musician, artist or real-estate agent; having a mobile website can be one of the best ways to interact with people you’re involved with. • This helps you to create and maintain your relationships, keeping them up to date with your latest information.

3. Yesterday & Today • Over-priced • Requires technical skills • Minimal budget • Drag & Drop builder

4. Clear picture of your App • Decide on what type of app / mobile website will you be making. • What is it for? • Who is your target audience? • How will they use it? • Have a focused but flexible plan ?

5. Research: What are the mobile app builders out there • There are tons of software on the internet that you can use to create your own mobile website. • Among those choices, we recommend these three free-to-use programs that can help you create apps and/or your mobile website. • AppGeyser • DudaMobile • AppMakr

6. AppsGeyser (www.appgeyser.com) • User-friendly platform that enables users to convert their existing website content into a mobile friendly site. • Only requires 3 simple steps Step 1: • Enter web address • Include HTML code • Upload document and link YouTube videos Step 2 • Displays your website content you have submitted Step 3: • Publish your app to Google Play • Free to use AppGeysers tool • But require payment of $25 to publish as a Google Android developer. • Great if you’re targeting Android market. • Expect your huge competition in the Google Play market • Require you to work extra hard to build your brand outside Google Play market to increase downloads.

7. DudaMobile www.dudamobile.com • Enables you to create your own mobile website without any coding on cross platforms (Android, iPhone, Windows and Blackberry). • 3 simple steps to get your mobile website in less than 10 minutes. Step 1: • Enter your website URL on the main page of Dudamobile site Step 2: • Decide on design & Edit pages • Options to pick from gallery of icons, colours and buttons Step 3: • Publish • Setup your mobile website redirect (requires setting up a mobile sub-domain name – m.yoursite.com and fiddling around with DNS settings. • Advantages: You can preview your site in different platforms on their site • Disadvantages: Sync is only one-way • 3 pricing plans : • FREE - supports up to 10 pages, allows only 500 monthly page views, features ads, comes with Dudamobile/yoursite domain name, limited functions (eg. Click-to-Call, Mobile map, Yelp Reviews, etc) • $9/month, $86.40/year (20% discount is given if you pay upfront for a year). • The paid plans doesn't limit visits to your mobile site, is completely ad-free and you are can have a proper domain name, eg, m.yoursite.com

8. AppMakr www.AppMakr.com • A web-based tool most suitable for those who are not keen in learning Java or get involve in any coding work. • Simple drag-and-drop interface, and the elements dragged here are the actual icons used in your app / site, rather than symbolic blocks. • Advantages: • AppMakr automatically creates cross-platform mobile apps that run natively on Android, iPhones as well as simultaneously creating a  mobile web site that will run in the browser of any HTML5 enabled smartphone. • Apps built are automatically uploaded for free to AppMakr’s own app market and the web, and can also be published to commercial markets including iTunes and Google Play for a small fee. • This app is what we’ll use for the rest of the article, since it seems to be the best choice among the three.

9. Get Started with AppMakr • Go to www.appmakr.com • Enter app’s name • Get Started • Sign in using Gmail, Google account, Facebook, Twitter account, or your Yahoo ID

10. Using the Machine (Step 1) 2. Fill in the details on the first page. Step One (Basic Info) • Contact Information • Name of the App • Overall Colors & Design (Colors of background, title and text) • Background Image of the app interface • Splash-screen image (this image will appear when the app is loading). • App Demographics (Region, Country or State that your app targets) Note: You can upload your own design or image; or select from The Machine’s library of free images. Do note that the image uploaded should have recommended dimensions of 768 pixels wide X 1024 pixels high.

11. Using the Machine (Step 2) Multi-function tool you have selected, and you are required to provide detailed information whether it is a URL link, image or text. 3. Click the “Next” button Step Two (App Creation) Where you layout your mobile website Has a list of multi-function tools with categories of customized and pre-made apps you can choose from.

12. Using the Machine (Step 2) • Here are a few examples of the functions you can include in your app: • Menu/Reservations • Directions • Calendar • In this example, we’re going to look at a mobile website and app developed for a local bar, which can also be applied for a shop, cafe, restaurant or any food and beverage outlet.

13. Using the Machine (Step 2) a. Menu, Reservations • You can include your menu details by navigating your RSS feeds for your menu on Allmenus.com. • You can do the same with Reservations, by inserting the details from your OpenTable account.

14. Using the Machine (Step 2) b. Directions - So you want to include directions to your bar? • On the left side of the screen, choose Location Services. • A drop-down menu will reveal three icons. Drag the “Directions” icon from the left panel and drop it anywhere into the centre panel. • Type in your address in the configuration panel on the right. You can also use Google Maps to verify that the address is valid. • Your mobile website will now point your customers to your location. You can also create multiple directions icons for your different branches.

15. Using the Machine (Step 2) • Calendar - Want to update your customers with your Happy Hours during the week? • A function that lets you share schedules and events with others. • Check the calendar on your phone and find the Settings or Preferences page. Set the calendar settings to public. • Find the iCal link, which ends in “.ics”, and copy this link. In most phone calendars, it can be found near the bottom of the settings page. • Go back to the Machine and click the Events drop down menu. • Drag the Calendar icon to the phone interface area (the middle of the screen). • Paste the iCal link in the URL field on the lower right part of the page. • Save your work.

16. Publish your App (Step 3) Step Three (Publish your App) Once you’re done with the app’s customization details, you can finally publish and download your app. • Choose your Icon • Write a Description • Write a Welcome message • Add some additional info • Add some Tags (Improve your results in search engine and make your app more searchable) • Pick your HTML5 Domain (eg. fanapp.mobi, churchapp.mobi, ourcondo.at, bhealthy.mobi,..etc) • Publish Categories (eg. Books & Reference, Accounts/Tax, Education, Games, Social networks, etc)

17. Download your App & Share • Lastly, simply download the app from the URL or QR Code provided, and you’re done.

18. Useful Tips • Always save your work every time you create changes on your app. • You can actually have your own personalized application where you can combine all your favourite links, contacts and photos in one place. (Great for creating private space for families) • The Step-by-Step tutorial video in each step is a great help, and is available in ten different languages, if you get a little lost.

19. Summary • Great for small business owners, musicians, bands, churches, local communities, real estate agents, schools, learning institutions, etc