Mobile Web Design - Coding Workflow For Mobile Websites

Key Takeaways

you want to talk mobile web Let's Talk mobile web shall we you've probably heard it said that it is a mobile first world and if you haven't heard it you just heard it and that's a very important saying in web development because it means that people are going to view your website on a mobile device as much or a lot more than on a desktop these days unless you're in a really unusual industry which actually I'm in uh web videos I don't get a lot of Mobile Traffic because people don't want to watch code on their phone but unless you're doing something really un usual like that it's a mobile first world uh the way your website looks on a mobile device is very important so it's said to build a great advice is to build your website for the mobile web first and then make it look good on desktop and so we're going to kind of show you some basic ways of how I'll approach some web development how I'll view the mobile experience in an easy way um and so let's get into it here's kind of my to-do list the first thing is I'm going to build it in the browser it's really nothing magical or mysterious about it let's say I have this web page which is basically I copied it from start bootstrap.css um and so once again start bootstrap.css like on the mobile experience I'm going to be using live reload I'm going to set that up up front uh not only for when I'm developing the mobile experience but later on it's going to be very useful when when I'm VI viewing it in devices you'll get to see that a little later so I have some videos in the description on how to use live reload you want to get that going it will help you out a lot it's not too hard to hit refresh here but later on when we're using multiple devices it's going to be really helpful to have live reload so I'm using Local Host 8080 I'm using live server in this example uh so you know now I can change instead of rocking new website let's just hit save rocking website uh let's say this site's going to kill it this site's going to really kill it all right cool that still fits in a mobile view and that kind of gives me an idea of what my website's going to look like so that's phase one nothing super amazing going on just resize your browser uh the next thing I'm going to do is some device specific emulating or profiling uh so what I'm going to do in Chrome Chrome's my favorite for this is I'm going to go developer tools and I'm going to click on this button right here and what this button will do is it'll allow me to select a model I can select the iPhone 6 I can toggle from portrait horizontal now whenever you select a new device it's a really good idea to reload your browser so the viewport gets updated and see it looks different after a refresh a lot of people forget to refresh when they change their device that's a very important thing that you want to do and then you can reload your Dimensions see what it looks like portrait and landscape um and another great feature is the network uh throttling which allows me to throttle my internet connection down to 3G and see what people are going to get on a 3g connection or God forbid the uh the security plagued 2G network so many security holes in the 2G network which is why the CIA loves using 2G that's another topic for another day um so there you go that's some device specific profiling what's it going to look like on an iPad and all that so that gives you a little bit of a better idea once again it's still pretty easy we're on our machine we can do some really rid development the next phase I'm going to start using an actual iOS simulator which I'm sorry you can only do on Mac if you're a PC user uh once you get into iOS development it really helps to drop that chunk of change to get a Mac so what we're going to do for this is we're going to go to the App Store and we're going to get xcode if you don't already have it it is free um but it usually doesn't come on a Mac um so that'll be an install I get the chance to update which I should do that will take forever to install because it's gigabytes of uh the the application is huge once you've installed xcode uh then we're going to go to Applications and you're going to right click or control click on xcode and do show package contents so we're now in the xcode package and we're going to go contents applications and there's an iOS simulator and we're just going to drag that out to our doc so now whenever we want we can just run the iOS simulator and this is actually going to boot up iOS on our machine so there you go it's it's huge I'm I'm not using my retina display right now but if I was this would not look so huge uh because the iOS 6 has a retina display so if I go to iOS 5 you can see it's a lot smaller there a lot more manageable um and there we go and I didn't want open pass book no go away ah Hardware home button um and so there you go I'm running an iOS I'm running a iPhone 5 uh for this sake let's run the iPhone 4 there we go and now I can go to Safari and I can go to Local Host 8080 here and I can view my website here an actual iOS exactly as it will look um I can also if I hold the ALT key I can do two finger gestures so or the alt option key so I can do two finger gestures there and if I'm holding the ALT key and I hold the shift key at any point you'll see they lock in position for like a two-finger scroll kind of thing so you can start that's kind of how you'll you'll view your website in an iOS simulator it's pretty quick uh it's still really nice to keep it on your device and another great thing is live reload will still work you can see that's kind of annoying looking uh so I can take a really back off of it hit save and live reload works on the iOS simulator which is great so in mobile view maybe I don't want the word really in there it creates an extra line that I don't like okay so that's good um the simulator for most of the time really gets the job done it's pretty accurate as to what it'll look like uh but if you want to actually look at it on your device that's pretty simple that's going to be the next step forward is I'm going to look at this on some actual devices so what I'll do is I will put those devices on the same network that I'm on I'll go to system preferences and I'll go to network here and then I will go to Advanced and I'm going to look at my IP add address which is right here 192.168.1.2 so that will be on my actual physical device iPads I you know iPhones Android devices whatever I can grab I'm going to grab them all one 192 and then I'm going to go here I'll just use the simulator for this part but this is going to work on my iPhone that's on the network as well 192.168.1 7 col 8080 so instead of Local Host I'm going to my IP address and there you go that's my actual website as well and so I can I will have sometimes five or six devices when I'm fine-tuning things I'll have the iPad up I'll have my iPhone up I'll have the Android up all on my desk um and they're all up on the website and so now when I go really going to really kill it when I hit save all those devices are going to live reload right there live reload is still going to work um and then they'll automatically just refresh my web page and I can see it and that's there's there's soft software and there's a bunch of tools that kind of simulate all this stuff for you they'll simulate your Android and they'll simulate your iPhone but honestly my favorite is is Let's do let's do it in the browser maybe pull up an emulator while we're developing this thing let's go as fast as we can and then when it's time to really check it out on devices just get the actual devices you know borrow a friend's Android and and just actually fine-tune it have one in the office if you're a company um have like your target you know five devices say we our goal as a company is we want this site to look good on these five devices and these are the ones we officially support and that's kind of how we'll do that so there's my thoughts on mobile web uh if you have any just awesome tools that you can't live without post them on here as well I would love to see them and I know a lot of people would love to see them as well so hope you're having a great day and that's my thoughts on mobile development