Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Using device emulators

From: Mobile Web Design & Development Fundamentals

Video: Using device emulators

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.

Using device emulators

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.

Now, of course these emulators are no substitute for testing on real devices, but they will get you a really long way as far as testing things like layout and interactivity, and how accurate your JavaScript is, and so on, as you develop your mobile applications on the web for mobile devices.

Show transcript

This video is part of

Image for Mobile Web Design & Development Fundamentals
Mobile Web Design & Development Fundamentals

46 video lessons · 24279 viewers

Joe Marini
Author

 
Expand all | Collapse all
  1. 2m 48s
    1. Welcome
      1m 2s
    2. Using the exercise files
      1m 46s
  2. 29m 25s
    1. Understanding the mobile context
      8m 5s
    2. A survey of mobile sites
      11m 44s
    3. Targeting mobile browsers
      4m 31s
    4. Previewing a complete mobile site
      5m 5s
  3. 27m 20s
    1. Designing for one web
      3m 43s
    2. Using well-defined web standards
      3m 45s
    3. Designing mobile-friendly pages
      3m 40s
    4. Being crisp, clean, and succinct
      5m 45s
    5. Minimizing input where possible
      6m 47s
    6. Focusing on the core scenarios
      3m 40s
  4. 1h 13m
    1. Installing the tools
      3m 52s
    2. Setting up a local web server
      9m 13s
    3. Installing device emulators
      17m 5s
    4. Using device emulators
      13m 9s
    5. Downloading Modernizr and Mobile Boilerplate
      6m 22s
    6. Building a first mobile web page
      5m 43s
    7. Developing mobile pages with desktop browsers
      8m 6s
    8. Exploring useful mobile web development resources
      10m 23s
  5. 53m 26s
    1. Reviewing mobile markup languages
      5m 10s
    2. Understanding content adaptation approaches
      10m 32s
    3. Controlling the viewport layout
      12m 50s
    4. Designing forms
      13m 30s
    5. Using CSS media queries
      11m 24s
  6. 1h 11m
    1. Detecting client capabilities with script
      10m 8s
    2. Caching information with local storage
      9m 16s
    3. Determining position with geolocation
      12m 52s
    4. Minimizing HTTP requests with data URLs
      7m 39s
    5. Understanding user agent detection
      9m 8s
    6. Using server-side detection with PHP
      6m 52s
    7. Using server-side detection with ASP.NET
      4m 54s
    8. Using HTML5 Boilerplate for mobile
      11m 6s
  7. 39m 22s
    1. Measuring performance
      7m 41s
    2. Creating full-screen web apps
      6m 30s
    3. Customizing the user interface
      5m 14s
    4. Detecting orientation changes
      3m 58s
    5. Detecting device movement
      5m 21s
    6. Using touch events
      10m 38s
  8. 47m 14s
    1. Taking a look at the finished site
      7m 40s
    2. Examining the header and background image style on the Home page
      10m 10s
    3. Examining the hover effect and layout styles on the Tours page
      6m 42s
    4. Examining mobile forms on the Contact page
      9m 45s
    5. Viewing and testing the mobile site on emulators
      8m 11s
    6. Viewing the site on devices
      4m 46s
  9. 2m 34s
    1. Goodbye
      2m 34s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Mobile Web Design & Development Fundamentals.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.