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.
Unless you're building web sites that are only ever going to work on desktop browsers or on mobile browsers, you're probably going have to deal with the situation where you need to adapt content from one form factor to the other, such as from desktop to mobile. Or if you're developing a web site that's going to work on both form factors, you're going to have figure out how you serve content from the server to both desktop and mobile devices. So, in this movie we're going to take a look at strategies you can follow to adapt your content so that it works well on both form factors.
We're going to examine that by looking at the amount of effort involved and the results produced along spectrum, from the least amount of effort and probably the less optimal results to the most amount of effort and best results. So the first approach you can take is the Do Nothing approach. In this case, you basically just serve existing desktop content right to mobile devices without making any changes. You don't change the layout. You don't do any optimizations. Essentially, you just put in the viewport, tag, and the other handheld optimization meta tags that we looked at earlier and just serve the content to both desktop and mobile devices as it is.
The next step up from there is the Multi-Serve approach. In this case, the same page content is served to both desktop and mobile devices, but the styling and script content is appropriate for whatever the target form factor is, whether it's desktop or tablet or mobile. The next one from there of course is Mobile-Specific development. And in this case you create web pages that are designed specifically for mobile devices and then serve them to mobile devices while the desktop browsers receive content that is appropriate for the desktop.
And this usually involves some type of server-side logic to detect what kind of browser is coming in and then redirect the user to the right page. Okay, let's begin by taking a look at the Do Nothing approach. In the Do Nothing approach, you're basically serving desktop-class content right to the mobile device unchanged. So if you have your server here and you've got your web page, that web page is going to be served right through the server to both desktop and mobile devices un-altered.
Now you might be asking yourself, "Well, why would I ever do this?" Well, there are advantages and disadvantages to this approach. The first advantage of course is that there is less work to do. You're simply taking one page and delivering it to both form factors. And there is no need to maintain separate copies of the content, or style sheets, or script, or anything else. Now clearly there are some disadvantages. This may not result in an optimal experience for the web site user. It may not be horrible. If the web page is designed to have flowing content, or it's a very simple page that's mostly text, this might not be so bad, but large, complex content can cause poor performance.
So it's okay for lightweight pages that have flexible, flowing content; pages that are arranged in traditional vertical columns; so on and so forth, but it's not good for pages that have complex layouts or pages that have large content items, you know, large images, Flash content, video, that kind of stuff. However, it can be done well. So let's take a look at a couple of examples where the Do Nothing experience is actually not that bad, and in some cases is pretty acceptable. Okay, I'll come over here to my emulators, and we're going to take a look at a couple of different examples.
Here in Opera Mobile, I've got the Home page for the Reno Gazette-Journal, and this is a traditional newspaper web site. And you can see that when you load it up, it's zoomed out, so the desktop-class content is being served directly to the mobile device. However, if I just double-click on one of these columns, you can see that it's arranged in a traditional newspaper column format. If I just double-click, you can see that the content zooms in and just becomes pretty readable, and it's pretty simple. I can scroll vertically and read these columns. In fact, I'll just click on this title right here, and you can see that when the article comes up, if I just double-tap on the column text, you can see that it's organized into a column format that's pretty readable right here on the screen.
And I can just vertically scroll through the content and read it without any changes, and I can pan around the page to see other content. And if I double-tap, I just zoomed right back out again. So in this case the experience is actually not that bad. And over here I can zoom on the links, get the same kind of experience. And the reason why this works is because each of these columns is arranged in a size that adapts to the mobile device pretty well. So, mobile browsers are smart enough to recognize that when you double-tap on a column element, that the page resizes and looks pretty good when it zoomed in.
Okay, let's take a look at another example. Over here in my Windows Phone emulator, I have the Home page for The American Grilled Cheese Kitchen, which is one of my favorite places to eat in San Francisco. So once again, same kind of experience, and if I just double tap on this column, you can see that it zooms in and it's pretty readable. I can just scroll normally, look through the menu, and if I double-tap, I scroll back out. I can scroll back up here, double-tap on the column for where they're located, what their hours are.
And it's not a bad experience, because once again it's arranged in a traditional column layout, and the browser recognizes that when I double-tap on what is in this case probably a div, it just zooms into the block-level page element, and I can just read it in a nice zoomed-in fashion that is suitable for vertical scrolling. Okay, so that's the Do Nothing approach. Let's go back and take a look at some of the other approaches. All right, the Multi-Serve content approach is a step up from Do Nothing.
And we will take a look at how to do that later on in this chapter. Now, the advantages and disadvantages of multi-serving are a little bit different from the Do Nothing approach. The advantage here is that the same content in the page reduces the amount of development work that you need to do, and it provides pretty good experiences for multiple form factors, because the desktop user gets the content styled for the desktop form, whereas the mobile user gets the content, but styled for mobile devices.
There are some disadvantages, however. It can be difficult to convert existing content to use this model based upon how complex the page is. So for example, if you've got a page with a whole bunch of embedded image tags and other complex media, that can be a lot of work to convert that over to use this model. The other disadvantage is that if you're not careful in the use of your style sheets, you can defeat the benefits of using this approach. So for example, unless you design your style sheet correctly, you could end up downloading large media content without realizing it, resulting in a slower performance for mobile users.
This approach is okay for pages that are mostly semantic markup-- in other words, you are using markup that doesn't specify specific media types or other markup that has no semantic meaning, but is mostly just media. So it's good for pages that are mostly semantic markup and use style sheets and scripts to define appearance, such as images, layout, and so on and so forth. Now it's not good for complex pages that have a lot of embedded images or video, or pages whose content is going to differ greatly between the desktop and mobile contents.
So for example, if you have a web page that has a whole bunch of complex animations--suppose you're building web site that highlights a video game, for example--that's probably going to take a different approach to mobile than on the desktop. Finally, there is the Mobile-Specific content adaptation approach, and in this approach the mobile-specific content is built and then delivered to mobile devices. Now in order to do this, you usually have to do some kind of server-side detection and redirection.
And the way it works is this. You have your web server and you have the incoming request--in this case, either from a PC, and in this case the PC gets the PC version of the page, because the server redirects the PC browser to the desktop version of the page. If a request is coming in from a mobile device then the server recognizes that and serves back the mobile page instead. Now this approach also has its advantages and disadvantages. The advantage is that each form factor gets the best possible experience because you're delivering a page that's optimized either for the desktop or the mobile user, and the pages can be developed independently from each other.
So you can develop your desktop page, you can develop your mobile page, and you don't have to take into account both form factors when you're developing one set of content. Now, there are disadvantages too. This obviously increases the development work since you have to build pages more than once, and it usually relies on some kind of server-side detection, which unless you do it right, can be unreliable and has other downsides which we'll look at later. This is good for pages that are complex and in cases where the experience is going to differ from one form factor to another, and it's also good for sites where you maintain the mobile and desktop versions independently.
It's not good for simpler pages that can be more easily addressed with one of the other content adaptation approaches, such as the Do Nothing approach or the multi-serving approach. Okay, so those are the three approaches, and we'll take a look at how to do each one of those as we go through the course.
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.