iOS web apps are actually websites on Safari that are saved to the home screen using native tools in iOS. This usually turns the website into a small icon that looks like a webpage and title you enter for easy access. Some websites have special icons called Favicons in their code to make the web app have a special icon like a true app. Some even go further and take the look of a web browser completely away, giving the appearance of a true app to the website. Wouldn't it be cool to make your website one of these cool web apps? And wouldn't be better if you could do it for free? First things firstHere are the sites that you will need accounts:There are more ways to accomplish building this customized web app, but I will be using Weebly and building for iOS. If you have never built a website using Weebly, check out this tutorial: If you have never used Canva before, watch this tutorial: Points to keep in mind...
Step 1Create an icon in Canva. To do so, create a custom design and size it to 1024x1024px. For the best looking icon on an iOS web app, make the background image white. To make things easier later, change the name of the design to "apple-touch-icon" and download as a png file. Step 2Create a page in your Weebly website named "images". Make sure to select "Hide in Navigation". Drag an image place holder to the "images" page and then upload your "apple-touch-icon.png". Fair warning, sometimes the upload process does not like hyphens in the upload. You can rename without the hyphens, you just may need to remember to potentially rename it in the code also. I would recommend trying it a few times or open in something like MacOS preview and export as the same name. This can sometimes remedy the issue and cut down on issues later. Once you click publish, open another web browser tab and go to your iamges web page. It should be your domain plus "/images". Here is what mine looks like: jamesmccrary.com/images. We will come back to this web page later. Step 3 Access your Weebly website's settings for your header code under SEO (Search Engine Optimization). Paste in the following code in the header: <link rel="apple-touch-icon" href="xxxx"/> <link rel="apple-touch-icon" sizes="72x72" href="xxxx"/> <link rel="apple-touch-icon" sizes="114x114" href="xxxx"/> Replace xxxx with your image web location. To find the image location, go back to your web site images page you opened earlier. Right click the image and select "Copy image address" on a Mac or "Copy image URL" in Windows. Once you have completed this step, most iOS devices will scale to the appropriate sized icon image. Step 4Only completing through step 3 will not yield the best results. Two things occur if you stop there:
<meta name="apple-mobile-web-app-title" content="xxxx"> <meta name="apple-mobile-web-app-capable" content="yes"> While both lines fix the above two issues, another one will arise. Please move on to step 5 to see the problem and cure. Step 5Removing the web interface makes your web app look really clean and crisp. However, once the user navigates away from the home page to another page in your site, it will open in Safari. So here is the code you need to place under the other code in the header. No need to edit...just copy and paste: <script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script> Step 6...Test it Out!Make sure to click save at the bottom right in the settings on Weebly, then click Publish in the top right. Grab your iOS device and go to your website on Safari. Add your website to your home screen. Let me know your thoughts or if your think I am missing anything...I'm here to help.
0 Comments
Your comment will be posted after it is approved.
Leave a Reply. |
AuthorJames McCrary is a director of technology and innovation and consultant located in Baton Rouge. ArchivesCategories
All
|