8 Tips to Make Your Website Feel Like an iOS App

i've been having a ton of fun working on this side project of mine uh it's a fitness app that i'm using with some friends at the gym and this week i learned some tips to make it feel more like a native application it's just a website built with nexjs but none of the tips we're going to talk about apply specifically to next they work with any website so without further ado let's get right into the first tip now the first tip is more for you than your friends and that's just to use the ios simulator that comes with xcode so if you just open up xcode here you can go to xcode open developer tool and click simulator and this is going to open this really high fidelity simulator of ios it's running the whole thing and so now we can actually just bring this over to where we're coding and we're going to have this really nice simulator that we can use to basically develop our website just like we would normally do with chrome except we're gonna see all of the behavior that you would see if you were using a phone so we can just actually pop open localhost 3000 and we'll see our app running right here so that's the first tip and it'll help you make sure that your site functions as you expect on the phone without actually having to use your device the next tip is to make your site act like a standalone app so if we come over here to the simulator and we click the share button we can add to home screen click add and this will give our users this little icon but you can see it looks kind of funny and when we click on it it really just opens our site up in safari again so if i were to close out safari and click on it again you'll see this just opens it in the browser and we're actually still in safari here there's something else about uh this app like it is if we were to log in here and use this app we can click around it just fine but we'll see if we long press a link ios will show us this link preview just as if we were browsing a site in safari because that's basically what we're doing so again all these things make our site not really feel like an app but fortunately there is a way to fix this the first thing we have to do is come over to our app and right in our public folder we're going to create a file called site.web manifest and here we can just put in an object that says display standalone then we can close this out and right in the head section of our app we just need to add a link to that manifest so now if we come back to our app let's go ahead and close this and delete our old bookmark if we add this again by coming down and clicking [Music] add to home screen now if we open up the app we'll see that that browser chrome is all gone and if we actually view the app switcher we have our own little app right here next to safari and if we were to go ahead and sign in now we'll see if we long press any of the links in our app that little preview actually goes away so now our app already feels much more like a native app okay so we're off to a good start here let's go ahead and close out our app and we'll see that the icon and label here could use a little bit of love so that leads us to our next tip which is to add a short name so by default ios is going to use whatever we have set in our title of our website for the name of the app so right here we have the title set to fitness challenge and as we saw on the home screen that's exactly what's being used for the app but we can come back to our web manifest and add another property called short name in ios we'll use this for the app name so let's just call it fitness go ahead and save that [Music] and now if we come back to safari and add this to our home screen now we see fitness is what it uses so that's pretty cool easy and definitely worth setting okay our next tip is about our icon and our splash screen so we can see right here that ios is uh just using a screenshot of our website for the icon which you know obviously sticks out like a sore thumb here and also if the app is closed and we open it for the first time we just see this white screen as the browser loads and renders our app so again none of these things make it really feel like a native app but fortunately we can fix this pretty easily thanks to this great tool we have called pwa asset generator so to use this tool all we need is a simple icon and it will basically generate a bunch of splash screens and icons for different device sizes for us so i have this little svg icon right here in my public folder it's just this little weightlifting guy uh and it's all white and this package is basically going to use that icon plus some css that i give it to generate all these images so i can just open my terminal right here paste in this nifty command we can run it using npx and by pointing it to our web manifest and blank index.html file it's going to update our manifest and give us all these new tags that we need to add to the head section of our document so that's all done we can close that and if we look in our project we'll see all these really cool icons that is generated for us along with the changes we need to bring into the head section so here are the changes [Music] we can just grab all these and i'm going to go ahead and add my closing bracket since i'm working in jsx and i'm also going to add an absolute slash here for the ahrefs i found i needed to do this to make it work so now with that we can just copy these come back to our app and paste all these in and now with any luck if we come back to our simulator open our site in safari and try to add it again we already see our little icon showing up here and we'll click add to home screen and there we see our new icon as well and that's kind of how we know it works now if we click on it we see this nice splash screen while that initial load happens so that's obviously a huge impact on just making our site feel like a native app and this package is just doing all this heavy lifting for us i found it really nice you can customize the gradients you use how big or small you want your icon so definitely be sure to check this package out i'll be sure to include a link in the description all right our next tip is to make the status bar transparent so you'll see here in the app that we just added everything's working great but we kind of have this interesting behavior where the status bar above the notch here is black and our header is this nice gradient and it kind of looks a little bit funny that they're different fortunately we can solve this with just another meta tag so come back here to the head section of our page and we'll paste in a tag that says our status bar style should be black translucent so now let's go back and go through this song and dance again come back and add it to the home screen and check it out okay it looks a little different it is translucent but uh we can see all the text here is white and our site's content is still falling below this notch so there's one more thing we need to do to fix this and it is yet another meta tag this one is the viewport meta tag and if we save this we can see this kind of fixes it right away now our app is taking up the full screen of the phone but we have another problem here which is that our content has been pushed up so we can see we're supposed to see this fitness label right here but it's actually being hidden behind the notch well fortunately there is a media query that we can use to detect whether our site is running as a standalone app so we can just pop open our styles here and use the display mode standalone media query to see whether or not we're basically running in this mode and this is going to let us for instance set the height of our header to accommodate the space for the notch but if anyone visits our site in mobile safari or just on a desktop they're not going to get that higher header because they have no notch there so that reloaded and now we can see we have a little bit more room but our header takes up the full space and again this just makes it feel that much more like a native app now i'm using tailwind on this project so i try to avoid one-off styles like this as much as possible so if i were to delete that i can show you how over entail and config you can just add a new standalone prefix just like this so once you have this in your config we can actually come directly down to our header where we have it set to height 11 and we can just say standalone height should be 22. and just like that our header is fixed but if we were to go back to safari and reload this we'll see the header is still height 11. so that is pretty nifty uh last point about this uh the text in the status bar will always stay white so your header background color needs to be a little bit of a darker style to accommodate for that but while we're on the header let's move on to the next tip make the header fixed so this one's a simple one but it'll definitely make your site feel more like an app you can see here we've got the full header taking up the whole display we can click around the app but if the user scrolls the page the header moves and again this is just not how native apps behave usually they have a fixed header and sometimes even a fixed footer so this one's pretty easy we can just come to our header here and make it fixed and we can see it's fixed now but our content shifts up so we need to come back to kind of our main element here and accommodate that uh with some extra margin so we want to give it a margin top of 11 or if we're in standalone mode we want to give it a margin top of 22 to accommodate for the height of the header and so now we can see uh this looks just like it's supposed to but if we scroll you know now we can actually keep the header fixed and again this just makes it feel that much better when using it and again if we go back to the mobile site on safari refresh we'll have the fixed header but it's only 11 and the margin accommodates that just perfectly now let's bring it home with two more tips on user interaction the first is to disable user scaling so something you'll run into pretty quick when you and your friends are using your app is that they might accidentally scale it just by double tapping or navigating around so over here in the simulator if i hold down option we can simulate two fingers here and you'll see you know you can just zoom in very easily kind of by accident again if you're trying to tap a link or something like that this is again something that native apps don't do so we can fix this pretty easy with another meta tag so we'll come back up here to the top of our head section and right here in the viewport meta tag that we added earlier we just need to add a new rule that says user scalable equals no so we can see that this reloaded and if we come over here and try to do that again we'll see that it just has no effect so that's pretty cool and again just one more little polish that you'll really notice kind of as you use your site on your phone all right our final tip is to set our tap highlight color to transparent so you'll see as you use this and again this is much more noticeable when you're actually using your hands on your device but whenever we click a link we get this kind of gray box around it and you know this is for websites running in safari to let the user know that they've actually clicked something but when you're building something that is supposed to feel like an app usually you spend a little bit more time on the hover and focus styles to make it feel more like it's part of your brand and part of your app so this really kind of sticks out like a sore thumb but fortunately there is a vendor prefixed css rule we can use to fix this so we'll just come to where we're rendering our app and paste this in now again i'm in jsx here because this is a react app but uh if i hover this you'll see that this is just this vendor prefixed css rule webkit tap highlight color and we're setting it to transparent and just like that if i hold on these things you won't see anything anymore so now you can spend some more time you know designing these and you won't have those ugly gray boxes showing everywhere your users tap and with that that's all the tips that i have if you do all these things and tell you or your friends to go ahead and add your site to the home screen it's going to look a lot better so let's check out exactly what we did here i'll do it right here on my phone so i'm going to visit 3000 on my ip address here to pull up the site i'm going to go ahead and click add to home screen here we got the name and the icon and if i tap it we'll see the splash screen i can go ahead and sign in using my password [Music] there we see the app load and the header is fixed the status bar is white i can click around and everything feels great so those are all the tips i have for you hopefully you learned a thing or two and definitely try them out let me know how they work for you and if you have any more tips that make your websites feel a little bit more familiar for users using them as kind of these home screen standalone apps on ios devices i'd love to hear them so just let me know in the comments thanks for watching and i'll see you in the next one

Channel: Sam Selikoff

Views: 13,072

Keywords:

Id: KzvK809rl3Q

Length: 15min 43sec (943 seconds)

Published: Fri Nov 20 2020