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.
One of the neat things about developing mobile web pages is that you can use your desktop browser for mobile web page development, and this is possible because many of the common desktop browsers now have mobile counterparts. For example, IE has IE Mobile, and Mozilla has the Fennec browser on platforms like Nokia and Windows mobile, and Safari obviously works on Mac and Windows and iPhone, and the Android system has the Chrome browser.
So a lot of those rendering engines are the same, or very close to the same, as they are on the desktop. So if you just simply set your user agent broadcasting from your desktop browser, you can fool your web site into sending you your mobile version of your code rather than the desktop version. The general pattern to do this is to change the user agent of the browser on the desktop to match that of a mobile device, and then you just resize the window down to be the same size as a device screen and use the browser's built-in developer tools on desktop to debug and test your web sites.
Remember, you should use the desktop browser that corresponds to the mobile one when possible, since the rendering engines will match up. So let's take a look at some of the tools you can use. Internet Explorer and Safari already have user agent switching built in, so there's nothing new to download there. For Firefox there is a user agent switcher add-on just as there is for Chrome. Opera is a little bit different because they've already got a pretty good desktop-based emulator that's basically a native application on the platform it runs on.
It's not really a hosted virtual machine like some of the emulators are. And the nice thing about that is you can use the Opera Dragonfly debugger with the Opera Mobile emulator, and Opera Dragonfly comes with the desktop version of Opera. So let's switch over to the browsers and see how you go about doing this. I am going to start with Safari, because Safari has one of the tools built in. There are a couple of things you need to do. First, here I am on Windows. Now on the Mac this is a little bit different, but essentially all you need to do is go into the Preferences for the application.
Now, on the Mac you'll do this under the Application name in the Application menu; on Windows here you go to the Edit menu, and Preferences is down here. So you are going to choose Preferences, and then you are going to go over to the Advanced tab, like I have here, and you're going to make sure that the Show Develop menu in the menu bar is checked. So once that's done the Develop menu will show up for you if you are on the Mac. If you're on Windows like me then when you hit the Alt key you will see that you now have a Develop menu. In the Develop menu, you will see that there is a menu in here called User Agent, and it defaults to whatever the default user agent for this version of Safari is, but I can choose a whole bunch of other user agents.
And you will notice that down here in the list I can choose Safari for iOS 4.1, 4.0.2, 3.2.2, and so on. So there's various user agents in here for iPhone, iPod touch, iPad, and so on. And if I am not happy with any of those, I can choose Other, and I can enter my own custom user agent string that I want the browser to pretend it's going to be. So let's just cancel this, and let's see how it works. So suppose I were to go to CNN.com.
Here is the CNN web site. So let's go back to the user agent string, and what I am going to do is I am going to choose Develop and choose User Agent > iOS 4.1 for the iPhone. And you'll notice that when I do that the page refreshes, and you can see that I'm now getting the mobile code. If this were my web site, I would be able to just simply start testing using the built-in Safari tools.
So I can bring up the Web Inspector, because this is WebKit, and just start inspecting the page. Let's go see how this works in another browser. Let's go ahead and try this in IE. Let's go to the CNN.com page. In IE it's a little bit different. You can see here that I have got the IE developer tools opened up. The way that you access those is under the Tools menu, if you go down here in the Tools menu, you will see F12 developer tools. If you just choose that option, this will show up and then under the developer tools, there is a Tools menu here with an entry for a Change user agent string.
Once again, there is a whole bunch of default ones, but I can set it to my own custom ones. So what I am going to do is go back over to my snippets code. Here in my snippets code, you can see I have provided a couple of things. First, here are some URLs to the add- ons you will need for Firefox and Chrome, and we will take a look at those in a moment. But I've also provided some user agent strings that you can use in your testing and inside these user agent switching tools to change the way that web sites present themselves to you. So for example, let's go ahead and get the IE Mobile user agent string.
I am going to copy that, and then I am going to switch back to IE. And then inside the tools, I'm going to do Change user agent string and go Custom, and I am going to call this 'IE Mobile 9' and I will paste in the user agent string and I will click Add. And now I can click Set. So now I have set the user agent string, and let's try going some place else. Let's see. Well, how about we go to southwest.com for Southwest Airlines, and you can see that now that the user agent has been changed to the IE mobile for Windows Phone, I'm now getting the mobile version of the web site.
So that's Safari and IE. Let's take a look at Firefox. For Firefox it's slightly different, because Firefox doesn't come with this ability built in. You have to download an add-on, and there's a really great add-on called the User Agent Switcher, and I have provided the URL here and in my snippets files, so you can just copy and paste this in. I've already added this to Firefox. So when I want to switch the user agent all I've got to do is hit the Alt button here on Windows, or just go to the Tools menu if you're on the Mac, and you'll see that once I have installed this add-on there is a User Agent Switcher. And once again there is one for default, but I can also change it to the iPhone--in this case they have one for the iPhone 3.0-- or I can choose Edit User Agents and in here I can add my own.
So let's go back to the snippets code. Here is the snippets code, and I can choose one for, say, Android. So I will just copy this and go back to Firefox, and here I am back in Firefox, and I will say New User Agent, and I'll just call this Android, and I'll paste in my User Agent code. I can leave these blank if I want to. There's no reason why I have to fill these in. You can if you want to, but I will click OK, and now I've got my Android one in the list.
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.