Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
Well, we've installed our local web server and we've downloaded our emulators and made sure that we can contact our local web server so that we can see files in the emulators, and we've downloaded some tools that we are going to be using in the course. We've reached the point now where we can go ahead and try out our first mobile web page. So here I am in my code editor, and I've got my first_mobile_start.html file open from Chapter 3, and this is the ExampleSnippets file that I'll be using so you can follow along.
Now before we actually go ahead and edit our file and try it out in the emulators, let's take a look at how the workflow is going to work. So let's go to the file system really quick. Okay, here in the Desktop I've got my Exercise Files folder right here, and I've got it open in this window here. And then remember earlier when we were setting up the local web server we copied the example files over to the local web server's root folder so that we can try them out in the emulators, because the emulators can't open files from the local file system.
They have to access these web pages through a web server. So here on my boot drive for My Computer, this is C:. I'm using IIS, so I've got an inetpub folder, and again based upon what server you're using, this folder might be different. And in here, I've got a folder named wwwroot. This is the root folder from which all the HTML files are going to be served. And in here, I've created a folder named MobileWebDevFund, which, if we look inside, contains copies of all of the exercise files.
So the way the workflow is going to work is I'm going to modify the local versions of the exercise files in this Desktop folder and then each time I modify it, I am going to copy it from the folder here into the corresponding folder on the local web server, so that we can try them out in the emulators. So let's take a look at how that works. Let's go back to the code. So before we actually fix this file and edit it and try it out in our emulators, let's see what it currently looks like.
So, let's bring it up an Opera. All right, here is Opera Mobile, and we'll just go to http://localhost/MobileWebDevFund/ and the chapter is 03_sittingup/first_mobile_start.html. And you can see that when I bring the page up in Opera, it looks really, really zoomed out.
This is clearly not how we want it to look in the finished version. Let's take a look in Android, and we'll do the same thing. Now remember, on Android we don't simply type localhost. We have to use the special localhost keyword code, which is 10.0.2.2, and we're going to go to MobileWebDevFund/03_settingup and it's first_mobile_start.html, and you so we'll go out.
And you can see same result here. The page looks very zoomed out. It's not laid out ideally for the mobile browser. Let's try Windows Phone. Okay, same thing here. Let's do localhost and same story. Okay, so now you can see that these pages are pretty zoomed out, and they are not laid out ideally for the mobile browser's page width. Let's go fix that. So let's go back to the code. So over in the snippets file, I am going to copy these three lines-- 1, 2, 3, copy--and we are going to go back to the code over here and paste them into the head section.
So these three meta tags we'll paste in and we'll save. So what these three meta tags do and we'll learn more about them as we go thorough the course, these three meta tags are the first step in telling the mobile browser that the web page that it has loaded has actually already been laid out for the screen width of the mobile device, so that the mobile browser should not display the page as if it were a desktop page in the fully zoomed-out fashion. It's saying, "Hey, this is a web page that's actually the same width as one of your screen is.
You don't have to worry about trying to zoom it out or do any kinds of layout optimizations to the page." So let's save. Now let's go back out to the file system. I'm going to go into my folder here, and this is the file right there, first_mobile_start,and this is the folder where it's going to go to. So I am just going to copy this over here. I'll just copy and yes, go ahead and replace it. So now I've replaced the file in wwwroot/MobileWebDevFund/03_settingup. So let's go back to the browsers and see how it works.
Let's start off with Opera. So here it is. Now I'll refresh, and you can see now that the page is zoomed in properly. This is an h1 tag here with a paragraph that's much more readable. Let's try it in the Android browser. Okay, so let's go ahead and just refresh this, and you can see same results. Now the page looks much better. And finally, on Windows Phone, let's just refresh this page by pressing the Refresh button, and much better. So using those three meta tags, we were able to take an existing HTML page and make it lay out much better in mobile web browsers, and we'll learn more about that as we go through the course, but for now that's it.
We've built our first mobile web page.
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.