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.
Before we can get started developing our mobile web pages, we first have to set up our development environment, and here are the steps we are going to go through. First we're going to need to install some development tools, and you can use whatever HTML/CSS/JS editor you like to use, whether it's Dreamweaver or whether it's BBEdit or TextWrangler on the Mac, or TextPad or whatever on Windows, it doesn't really matter. I am going to be using a tool called Aptana Studio because it's free, and it works cross-platform on both Windows and Mac, but again you can use whatever editor you like, or already used to using.
Your also going to need a web server to test your pages on, and it can either be local or it can be hosted, and we'll show you a quick way to get that installed on your machine. And then there are some additional script libraries and templates that we'll need to download, and you need to save those into your Exercise Files folder. After we get the tools, we'll install the device emulators. Device emulators are really good for testing layout and functionality of web pages, but they're not really good for testing performance because they're running on a hosted computer, and as a result the performance, you're seeing is not really the performance of the real device in the user's hand.
For that you really need to have access to a physical device to test on, or use one of the testing services that are available. But emulators are really good, especially for mobile web development, because in many cases you need to just make sure that your layout and the web page are functioning properly, and emulators are great for that. Emulators are available for Windows phone, Android, iPhone, Opera, and of course many others, like BlackBerry and Palm. In this course, I am going to be showing the Windows phone, Android, iPhone, and Opera ones simply because those are the most popular, and you can get really good platform coverage with those. For example, with Android and iPhone you can get mobile WebKit coverage, which is what BlackBerry and Palm use anyway.
So I'll just be downloading those and using those. After we install the device emulators, we'll see how to set them out and explore how they're used. Then we'll take a look at some really good resources and documentation out on the web for building mobile web pages, and then we'll build and run our first mobile web page. But to start, let's go ahead and get the development tools we're going to need. So I am going to jump over my browser. So here's the web site for Aptana Studio, and this is Aptana version 2. They may be on a different version by the time you get here, but that's the version I am going to use.
To download Aptana Studio--and again this is cross-platform, you can use whatever platform you're using whether it's Mac or Windows, and it runs because it's based on Eclipse. So you simply click on the Download Aptana Studio button and Aptana Studio will download to your machine. So once you've installed it and it's on your computer, you can run it and let's take a quick look at it. Okay, this is Aptana Studio, and you can see that it's pretty much probably like many other web-based IDEs that you're used to using.
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.