Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
This course surveys the core principles and techniques essential to building web sites for mobile devices. Author Joe Marini introduces the mobile context, sheds light on its unique coding requirements, and discusses interface design techniques that enhance existing sites for mobile viewing. The course shows how to approach designing for mobile form factors such as smaller screens and finger-based interaction, along with how to incorporate CSS3 and HTML5 capabilities, such as geolocation, local storage, and media queries.
All right. So now that we have the emulators installed and we've verified that they are able to access the localhost server, let's take a deeper look at some of the features each emulator gives us to test our mobile web pages. We're going to start off by looking at the Windows Phone Emulator. When I move my mouse over the emulator here, you'll see this little ghost toolbar shows up, and the toolbar gives us access to a couple of things. First, it allows us to rotate the emulator. So I can rotate the emulator to the right, I can rotate the emulator to the left, and so on.
Let me go ahead and launch IE. IE is the only application that comes installed by default with the emulator, and I will just click through these screens. So that's how you use the Rotation toolbar over here. The other thing I am going to show you really quickly is when I put the cursor in the Edit field down here, you'll see that the virtual screen keyboard comes up by default, and I can use that for testing, but it's also kind of tedious. I'd really rather just use the hardware keyboard that's here on my computer.
So the way that you turn that off is by pressing the Page Up key. You can see that when I press the Page Up key, that the keyboard goes away, and the way that you turn it back on is by pressing Page Down. So I'll press Page Down, and that takes me out of the focus there, but when I put the focus back in, you will see that the keyboard comes back. So one of the things I want to point out, there is a little quirk in the emulator that you should be aware of. When the virtual keyboard is up and I rotate the emulator, it just works correctly.
The screen rotates along with the keyboard, and I'll go back the other way you will see that it works just fine. When the virtual screen keyboard is turned off--so I am going to press Page Up to turn this off-- now when I try to rotate the emulator with the virtual keyboard turned off, you'll notice that it's a little bit of a quirk that the screen does not rotate when you have the focus in there. So just something to be aware of that when the virtual keyboard is turned off, rotation is a bit quirky. All right! A couple of other things to show you in the Windows Phone Emulator.
First, let's bring up the Application bar down here. So if I click on these three dots, you'll see that I get the Applications bar and menu down here and if I click on the Tabs item, I get the interface for letting me open up a new tab. So by clicking on the Plus button, I get a new tab, and I can give it a web address to go to. I will just send it to Microsoft homepage, and you can see that that works.
So in the tab UI, you can see that these are the different tabs I have open, and I can have up to six tabs open in the emulator. All right! So let's go back to the previous page, and you can see that the soft keys down here work as well for Back, Start, and Search. Let me bring up the settings. So if I click on the ellipsis there and I scroll down to Settings, this is the Settings page and just like in the real browser, I can do things like turn on and off access to the Geolocation settings.
I could determine whether or not I want cookies allowed, or get suggestions from Bing as I type, and so on. You can also set the web site user agent string. You can tell IE Mobile to browse the web as a mobile browser or as the desktop version. What this does is when you change this between mobile and desktop, it changes how IE identifies itself to the web server that it's getting the files from. It can either identify itself as a desktop browser or as a mobile browser.
So you can use this setting to test how your web site will look and respond on the phone when users are browsing as mobile or desktop browsers. One of the things I want to point out is that between run sessions of the Windows Phone Emulator, the browser state is not maintained. So if I were to quit this emulator session right now and then restart it again later, things like cookies and my browsing history and all that stuff that's not kept in memory for me. It's all flushed each time I stop the emulator and then restart it again. All right! So that's the Windows Phone Emulator. let's take a look at Android now.
Okay, so here is Android SDK Manager, and you can see here are the virtual machines I created from earlier on in the course. And I am going to go ahead and start up my 2.3.3 machine. Click on Start, and I am going to leave everything alone except make the screen large enough where we can see it. All right, and we'll just go ahead and wait for the Android virtual machine to start up, and here's my machine.
It's now started up. This is the Android emulator and just like a real Android phone, I am going to click on this and just go ahead and unlock it. And this is the Home screen for our 2.3.3 device. So a couple of things I want to just point out. Unlike on the Windows Phone Emulator, there is the screen over here for the phone and then there's the soft keys over here on the right-hand side, and there's a couple of things I want to show that don't have onscreen equivalence, and the first is rotation. To rotate the Android emulator, you use some of the Function keys.
Use Ctrl+F11 and Ctrl+F12. So by using Ctrl+F11, you can see that when I do that, the emulator rotates into Landscape mode and if I do F11 again, it will go back into Portrait. Ctrl+F12 just basically goes back to whatever the previous orientation you had was. So I can just Ctrl+F11 and Ctrl+F12 to rotate. There are some soft keys on the phone, on the keyboard. These all work as you would expect. This is the Home key. This is the Menu key. This is the Back key. This is Search.
These keys up here control things like volume and power. Let me go ahead and show you what the settings look like. So I am going to press menu and when menu gets pressed, you'll see that this little virtual screen comes up. I am going to click on Settings, and I'm going to scroll on down to the Keyboard settings, and that's right here, Language & Keyboard. One of the things you may have noticed that when you bring up the Android emulator and you click in an edit field, the Japanese IME and the other ideographic settings are turned on by default.
So one of the first things I usually do is just click off the Japanese IME setting and click off these other ideographic settings, just so that while I'm testing, the soft keyboard that comes up will be the English version. So now when I press the Home button, and when I click on this little world icon, that's what launches the browser. When I scroll up to the address bar and I click in here, you can see now I am getting the English language version of the keyboard. Okay, so that pretty much takes us to the end of the Android emulator.
Now let's bring up the Opera Mobile emulator and see how that works. Okay, so recall that when you launch the Opera Mobile emulator there are a series of choices that you can choose from on the kind of emulator you want to launch. There are preset profiles for phones out there that have the Opera Mobile emulator on them, so things like the Galaxy S and the HTC Wildfire and so on. Or you can just leave it as Custom and change the various settings to suit your own needs.
Now under the Resolution area, I can choose what size resolution screen I want, and I can choose various screen resolutions. What I am going to do is choose HVGA Portrait because it fits on the screen pretty well, and I am going to leave Pixel Density alone, and I am going to click the Launch button. Okay, so there it is. You can see I can go to various web sites and everything works just fine. Now the launcher gives you the ability to specify the input type for the various different phones.
So if you look back over here in the launcher, you'll see down here under the Input section, there is an input for Touch, Keypad, and Tablet because the different phones that the Opera Mobile emulator runs on, not all of them are touch enabled. Some of them use keyboards, some of them use soft keys and so on, and we'll get to that just in a moment. But let's go back here to the browser for a second, and let me show you how you can do some of the same things on the other emulators that you do here. So to rotate the browser using the Opera Mobile emulator, you use Ctrl+Alt+R, and you can see that as I type Ctrl+Alt+R, the orientation of the emulator is changing. And on the Mac, this is going to be Command+R; on Windows, it's Ctrl+Alt+R. So Command+R on the Mac for that.
You can see here that if I put the insertion point in an edit field you see that the soft keyboard comes up. You can suppress the soft keyboard by pressing F6. So if I press F6, you'll see that the soft keyboard goes away, and if I press F6 again, it comes back. And I can type on the hardware keyboard here on my computer at any moment I want to, but if I want to see more of the screen, I just press F6 and the virtual keyboard goes away. Let's go back and take a look at launching the Opera Mobile emulator with different input types.
So I am going to close this one down and come back over to the launcher, and now this time I am going to choose Keypad and when I choose the Keypad launch option, watch what happens. When I click Launch, notice how this time the emulator looks a little bit different. Down here on the bottom of the screen, there are these soft keys that you would find on traditionally a more feature-phone kind of device rather than a smartphone. To navigate among the UI elements, I use the arrow keys on my keyboard. So I can use left, and right, and up and down, and this will navigate among the various things on the screen. And using this version of the emulator, I can also click on an item, and that still works. I can click back.
Let's go back. But the arrow keys work as you'd expect them to. The way that you simulate pressing the virtual or the soft keys is by using different Function keys. So the F1 key will simulate the left function key. So in this case, that's the menu item down here. So I hit F1, that's like pressing menu. And let's go ahead and click back. And F2 simulates pressing the right soft key over here. So if I were to press F2, it would exit the browser, which I don't want to do just yet.
Let's go ahead and press F1, and now if I press F2, that will be like pressing the Back key right there, and you can see that works. Then the middle key, in this case it would be Edit, or if I move down here that would be open, that is the Enter key. So if I go, say, down to this web site right here and press Enter, that would be the same as pressing the middle activation key right there. Okay, so that shows how to use the Opera Mobile emulator and some of its features.
Let's go, take a look now at how the iPhone Simulator works on iOS. Okay, so back over here on the Mac, I now have my iOS Simulator up, and for the purposes of doing mobile web development testing, you're mostly going to focus on the Safari application that we have here on the simulator. So I am going to go ahead and launch Safari, and I'm going to go back to the homepage, our localhost server again. All right! You can see that it's still working.
Now most of the time, you'll probably be working with Safari just as you see it here. However, you can also do things like test out things like rotation and other effects by going to the Hardware menu. So first, under the Hardware menu, you will notice that there is a submenu named Device and under the Device, we can choose whether we were testing on the iPad, the iPhone, or the iPhone with a retina display--and this is pretty useful to test out high-resolution images and so on. Under the Version menu, you'll notice that we have a choice of which version of iOS we want to test on.
It's currently set to 4.3.2, but you can choose any one of the other versions of iOS that you want to test on. You can also do things like rotate device left. You can see that Safari automatically reorients, and you can rotate right and I will rotate it to the right. And you can do things like simulate a shake gesture, which we'll take a look at the accelerometer later on. All right! So now we've explored the emulators on both Macintosh and Windows, and having these tools available to us is going to be really helpful as we develop mobile web applications for testing.
There are currently no FAQs about Mobile Web Design & Development Fundamentals.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.