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.
If you're building a mobile web site and you're following the content adaptation strategy of either not doing anything to your existing content or using the multi-server approach where you're styling the content using media queries for the various form factors, you can usually get away without having to do any server-side detection. There are cases, however, where doing server-side mobile device detection is unavoidable. And if you're, for example, building a web site where you going to redirect the user to a mobile-specific version of your site based upon whether or not they're using a mobile device then doing server-side detection is something you need to look into, and we're going to cover how to do that in next few examples.
Depending on the level of detail your web site needs, there is two things you can do. You can either use the user agent information to create tiers of devices you support. In other words, you can look for devices like iPhones and Androids and Blackberries and Windows Phones and so on and put them in the top tier because they can support rich HTML5 and then detect older devices like Nokia s60's and various Samsung device and put them in the next tier down, because they support XHTML Mobile Profile. Or you can use a third part library like the WURFL, which is the Wireless Uniform Resource File, to get detail device data.
Sites like the WURFUL maintained a huge database of known devices and what those devices can do--how big your screens are, what their image capacity is all that kind of stuff--and we'll take a look that in a little bit. Based upon the user agent device, you can then redirect the user to a mobile- specific portion of your site, or you can customize the returned HTML. Now I should point out that even if you do server-side UA detection, you should do client-side detection too if possible. They're not mutual exclusive.
You can do client-side detection for features and you can do server-side detection for redirecting. Let's take a look at how user agent detection works. Suppose you're using a browser, one of these browsers here, and you've got a web server. When you make a request to the server for a web page, your browser essentially says to the server, "Hi, this is who I am, and this is the web page that I want to see," and the server takes a look at the incoming request and takes a look at the part called the user agent and can make intelligent decisions based upon what it sees in the user agent.
The user agent string identifies the browser that's making the request, so in the case of two separate browsers-- let's take IE and Safari as two examples-- the IE browser on the desktop would identify itself as MSIE 9.0, using the Trident 5.0 rendering engine, and running on this version of Windows. The mobile version looks a little bit different. You can see that the MSIE 9 tag is still there, only in this case the operating system is different--it identifies itself as Windows phone OS.
The rendering engine is the same, Trident 5.0, and it also includes a tag that says it's IEMobile version 9. It also includes some make and model information. In the case of Safari, the desktop version might identify itself as running on a particular OS. In this case, it's running on Windows, and is this version of Windows, and it's using this version of the WebKit rendering engine. And then here's the Safari version string right down here, it's the last thing, it says Safari, and this is the build number.
Now in the case of the mobile version of Safari, you can see that the user agent is slightly different. In this case, it identifies itself right upfront has being an iPhone and it's running on the CPU of iPhone type it gives an iOS version. It also says that using this version of the WebKit rendering engine, and it has the Safari version string down here at the end. So you can see that using user agent strings, they're pretty complex beasts, but by looking for key pieces, such as this iPhone keyword or this IEMobile keyword up here, you can make intelligent decisions of how to redirect the user to different portions of the web site.
As I mentioned earlier, there are some issues with user-agent-based detection, so let's take a look at those make sure we have to going to understanding of them. Although there is a generally accepted format to user agent strings, as you saw in the previous example, each one is different. And in fact, browsers can send whatever they want and pretend to be someone else. And in fact, we even saw this earlier in the course when we saw how to do mobile development using desktop browsers. Parsing user agent strings can be tricky. It usually involves writing some regular expression code, or some other advanced string manipulation code, and if you get one part wrong then you might mis-identify a browser or send the user to the wrong place.
Parsing user strings is not an exact science; there's some art involved there. It also inherently backward looking. If a new browser gets introduced, you need to update your logic to know how to look for it. So it's hard to take browser user agent detection and make it future-proofed. Because of these issues, there are some server-side detection best practices that you should follow, and I'll list some of those here. First, don't try to look for exact user agent strings. The strings may change from device to device and some user agent strings are generated dynamically, or include information that will change, based upon the device it's on.
Windows Phone, for example, sends a different user agent string with the make and model of the phone tacked onto the end of the string. So if you're looking for exact user agent string using a straight string compare, you might miss user agents that you try to look for. You should use the user information as just a first line of detection. Server-side detection is not a subject to for also doing client-side feature checking. In other words, just because you detect the fact that the request is coming in from the iPhone, you shouldn't make assumptions about what that phone can do or what features it has installed.
It may or may not have a gyroscope. It may or may not support some other feature. You should always check on the client side as well. You should use the information in user agents to try to group devices into classes of support, instead of trying to target each device with different specialized markup. You should just use different CSS if you're trying to deliver tailored experiences. So for example, if it's a business requirement that your web site look a bit more like an iPhone's native experienced when it's viewed under an iPhone and look a little bit different for Android and look little bit different for Windows Phone and look a little bit different for other phones like Blackberry, then it's okay to do that. Just make sure that you're doing it using separated CSS logic instead of specialized markup that's going to be hard to maintain.
And finally, you should strongly consider using a third-party solution instead of your own. In fact, let me show you a couple resources that are pretty good for this purpose. The first one I'm going to show you is the official homepage for the wireless uniform resource file, or WURFL and you can see the URL up here is wurfl.sourceforge.net. The WURFL database works on PHP, works on Java, works on ASP.net. It works across a verity of server architectures, and it's a pretty complex database that lets you detect features that are present on a lot of phones, by using their database.
You simply call the WURFL with the incoming user agent and the WURFL will come back and tell you what phone it is, what kind of capabilities it has, and so on and so forth. It is an open-source project and is available free for download, although there is a commercial support option if you're interested in that. Another good option is the Detect Mobile Browsers library, which you can see the URL here: it's detectmobilebrowsers.mobi. And again, this is free for personal use, and there is a slight charge for if you're using it commercially.
But again, this is code that will take incoming user agents and tell you whether or not they're mobile or not, and basically that's pretty much all it does. It doesn't do any kind of advanced database detection. It just says, "Hey this is a user agent and I know that this is a mobile device or a desktop browser or something in between." Now that we have a basic understanding of what user agent detection is and why you would use it, the next couple of examples in the chapter will show you how to implement this using PHP and ASP.net.
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.