Preparing for Mobile Devices

[00:00:00]
>> The next thing we're gonna discuss is a family of improvements we can make to apps in order to optimize it for mobile devices. So we should care about this for two reasons. First is that the mobile traffic has already eclipsed desktop traffic and is ever accelerating in that direction, right.

[00:00:21]
More and more people use their mobile devices to shop, to get information, to verify their businesses real, and so on. And they do it like many times throughout the day. The second thing is that in the middle of last year, Google decided to fork their search index right.

[00:00:41]
The search index was their master data for the relevance and importance of search results on various keywords, right? So now we have a desktop specific index and a mobile specific index or rather a mobile specific index and stuff for things that are not mobile. So that means that your ranking may be different depending on whether someone searches with a mobile device or a desktop device.

[00:01:09]
One of the things that's taken into consideration beyond what we've talked about today for mobile devices is sort of the fitness of your app and how well it presents itself on a mobile form factor. So one of these things that you have to look for is, making sure you handle your viewport correctly.

[00:01:29]
This is what ensures that your content gets sized appropriately, it's done by a meta tag. Both iOS and Android will respect this tag and you see that the name of the tag is viewport and the content is a bunch of key value pairs separated by commas. Here are the different things that you can put in that content, the different key value pairs here.

[00:01:55]
This is typically a good setting to use that you start out with the width of the viewport being the device width. So the consequence there is you're gonna sort of end up with a very narrow window as opposed to a wide window that is really zoomed out. So you just have to make sure that your CSS facilitates a width of, a phone, which for an iPhone is 320 pixels that you collapse down effectively to that width.

[00:02:25]
The initial scale being one, so that's controls whether you're zoomed out or zoomed in. And then you've got a maximum and minimum scale that lets you sort of bound the allowed values for the user to scale. So if you want them to be able to pinch to zoom in just a little bit, but not go all the way in and potentially get lost and there's swimming around in there.

[00:02:45]
They're tiny viewpornt and your big area of content like this would be a way to prevent that. I leave it to usability experts to advise us to what the best values are there. User scalable being set to yes or no, that is an on off switch as to whether you can pinch to zoom at all or not.

[00:03:08]
And so if you're looking for something that resembles the experience of a native app. Like of an app you downloaded from the App Store, you're gonna want to turn the user scaling off so that people can't zoom in, like on UI elements, for example, on the navbar. You may want to facilitate zooming within certain areas of your site and you'll handle that sort of in your application layer the ability to scroll, to handle this mouse events and to appropriately respond.

[00:03:39]
Additional meta tags that you can add to your app, which will make it seem more app like start with the apple mobile web app capable which value is yes. So like, this tag is either present or it's not. So having a value of no there doesn't make much sense just don't include the meta tag at all.

[00:03:58]
This is what lets your app launch in fullscreen if it has been launched from a home screen bookmark. So you know how you can add a website to your homescreen if you have this meta tag in place and you launch it from the homescreen. You will be looking at something that doesn't appear to be a browser.

[00:04:17]
So the UP address bar will go away, the bookmarks button will go away but you'll have some of the very basic controls like the ability to swipe to go back. So you'll just be left with that. When you're in that full screen mode, you have the option of turning the status bar black versus leaving it as its default colour which is I believe going to be weight.

[00:04:39]
And then finally, you have the option to define an alternate, like you have a second place to define the home screen title. If you don't define it by way of this meta tag, the title tag will be what's used. But keep in mind, the number of characters you are allowed in terms of having the label underneath that homescreen button, that's a very small number.

[00:05:02]
I don't recall exactly what the limit is but it's probably like less than 30 and you would not want to have such a short title for general purposes. As in showing up in search results, so this is a place where you can, instead of truncating your title, which is what's going to happen if you go over a certain limit.

[00:05:21]
Here, you can use the short text that is meaningful for your app. So going beyond basic mobile meta tags like this, a new standard is emerging. So this is in the W3C draft phase and already supported by modern Android devices, it is called a web app manifest. So you create a JSON file, you refer to it with a meta tag and then we can place information in this JSON file that will help create a really nice experience on mobile devices.

[00:05:58]
So just from top to bottom, we've got the name of our app which is equivalent to that Apple specific app title tag except this would be for Android devices and we hope Apple will adopt this as the standard as well. Right, then we've got this icons array and in terms of what we can put in there, two things are recommended.

[00:06:19]
A 192 pixel icon that is used for the Android home screen button and this is the appropriate size for their high DPI devices. These are their high resolution if you have one of those OLED nice Android phones. It wants a 192 pixel square for the home screen and then a larger image that's 512 pixels which it will use in composing together with a background color, which is also in this file a launch screen for you.

[00:06:52]
So you're gonna hit that button to launch the app and it will give you kind of a startup screen with like your icon centered on a solid color background. And then gradually, you're gonna fade into your app. So, we get a theme color, which allows you to change the color of the title bar of your app.

[00:07:13]
So you can sort of mess with the styling of the browser itself outside of your web application. The background color is part of what's used for that splash screen. And also as your app loads, this is gonna be like the color of the unpainted area behind your app.

[00:07:32]
So normally for a client side rendered app you'd start with a white screen and then you'd start rendering stuff on it. This gives you an opportunity to have something that maybe is consistent with the colors you're going to use in your app. And so it's a little less of a jarring Slam from white screen into bright purple experience.

[00:07:52]
Finally we've got this display value and there are a couple things we can do here but you'll start to see some similarities with the full screen idea in the Apple meta tag world. So, here are the values we can use for this. And generally what happens is devices may not support all of these different modes of display an app.

[00:08:14]
And the policy is if a device that does not support one of these, it will fall one down into the list and try to support that. And if it doesn't support that it will fall down. So from bottom to top, we're sorta stepping up into a more app experience and from top to bottom, we can just go through one by one.

[00:08:36]
Full screen would take all of the display area, including your battery bar and your signal, your cell phone, signal strength and the clock. Think video player, that's taking up everything, right? Standalone is gonna be slightly less than that and that would be sort of a typical app like experience where you leave that always present.

[00:09:00]
OS UI in place where you can still see that your Bluetooth is on and that your phones on vibrate and so on. Minimal UI that I have yet to see an example of this is part of sort of the proposed standard here. And this you can think of is like a very light browser experience, where you might do away with like the bookmarks, functionality and the concept of having many tabs that are open.

[00:09:27]
But you keep the back button and you keep the address bar, maybe the refresh button, but just sort of slimming down that UI into something more basic. And then finally at the bottom, the last resort is the conventional browser experience. So if we specify, the typical thing we wanna do here is standalone for a full screen app that's equivalent to that fullscreen Safari tag, the mobile Safari tag that I gave you.

[00:09:54]
We've been talking about adding stuff to the home screen and launching it from the home screen. So let's talk a little bit about home screen icons, I've given you a cheat sheet of the size of square icons in pixels for various different types of devices. Unfortunately, each of these will require a separate meta tag and there are quite a lot of them.

[00:10:19]
So you probably want to use an app or some sort of there are a couple of web applications that can take a high resolution source image. And to automatically generate a zip file for you that contains all of the different sizes that you care about. They tend to look like this, it's just a link tag, the REL is what you have to look at in order to make it work on a particular device.

[00:10:45]
So, when we start the next exercise, which we are winding up to here. I've given you all of these already pre written in your head because it is tedious as all hell to go and find all of the correct ones. So your task will be to uncomment that big block of rd in place icon stuff and you're welcome for that because you would not learn anything from this.

[00:11:07]
You would just get tired of copying and pasting. A library that I love to use here is called Add Home screen. Now I'll show you the GitHub URL and how you're going to invoke this but it results in a nice little bubble floating down and pointing directly to the share button.

[00:11:28]
The button the user will press to actually add this thing to the homescreen on their device. And they have cleverly and probably painstakingly found out all of the different locations of buttons that lead to bookmarking on various devices. So you will find that this thing will float down and that little arrow will be pointing right to that little share button.

[00:11:50]
Basically instructing the user post this thing, add home screen and it will read the icon for your app right out of the same meta tags that the mobile browser reads in order to fetch that and put it on the homescreen. So really, all you need to do is put an inline JavaScript block, so this is gonna be just a script tag, put something like this in place.

[00:12:15]
And in fact, for today's exercise, you don't need to pass any options, I simply wanted to give you an idea of different things that you could configure here. It'll have a great default message, the default app ID is gonna be something that relates to this cubic company that open sourced this project, but you can change it.

[00:12:38]
Is the name of the key that it uses the local storage, so it doesn't keep, like bombarding users with this message if they say no, I don't want this. It won't bother them again. You can actually have it, you can set it up so that like only once every two weeks, show this to people.

[00:12:56]
So it'll just track frequency rather than like a yes no, only show it to them once. Modal and mandatory are useful for presenting in a different ways, which is just simply like add an overlay that will make it. So that this is the main focus of the page and like mandatory would even prevent people from tapping through that overlay until they've added it to home screen and launched it.

[00:13:21]
So there's a way that you can in JavaScript detect whether you've been launched from the home screen. It's like Window.navigator.standalone, so it is detecting based on that whether it should keep pestering you to add this or whether it can finally, leave you alone. It is a bad practice to just get in your users way to that extent.

[00:13:44]
I would say if you really want to get on your users home screen just do that in terms of frequency and say like, every ten days ask them again.