Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Understanding content adaptation approaches

From: Mobile Web Design & Development Fundamentals

Video: Understanding content adaptation approaches

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.

Understanding content adaptation approaches

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.

In this case, you are delivering the same page content to both mobile and desktop devices. The difference here, however, is that the CSS and other content, such as JavaScript and so on, can be tailored to the form factor. So you have your web server and you have your document, and the document gets served through the web server. But based upon what device is making the request, you can insert either a desktop styling or mobile styling into the response and then serve the appropriate page with the styling and JavaScript content back to the device.

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.

Show transcript

This video is part of

Image for Mobile Web Design & Development Fundamentals
Mobile Web Design & Development Fundamentals

46 video lessons · 24358 viewers

Joe Marini
Author

 
Expand all | Collapse all
  1. 2m 48s
    1. Welcome
      1m 2s
    2. Using the exercise files
      1m 46s
  2. 29m 25s
    1. Understanding the mobile context
      8m 5s
    2. A survey of mobile sites
      11m 44s
    3. Targeting mobile browsers
      4m 31s
    4. Previewing a complete mobile site
      5m 5s
  3. 27m 20s
    1. Designing for one web
      3m 43s
    2. Using well-defined web standards
      3m 45s
    3. Designing mobile-friendly pages
      3m 40s
    4. Being crisp, clean, and succinct
      5m 45s
    5. Minimizing input where possible
      6m 47s
    6. Focusing on the core scenarios
      3m 40s
  4. 1h 13m
    1. Installing the tools
      3m 52s
    2. Setting up a local web server
      9m 13s
    3. Installing device emulators
      17m 5s
    4. Using device emulators
      13m 9s
    5. Downloading Modernizr and Mobile Boilerplate
      6m 22s
    6. Building a first mobile web page
      5m 43s
    7. Developing mobile pages with desktop browsers
      8m 6s
    8. Exploring useful mobile web development resources
      10m 23s
  5. 53m 26s
    1. Reviewing mobile markup languages
      5m 10s
    2. Understanding content adaptation approaches
      10m 32s
    3. Controlling the viewport layout
      12m 50s
    4. Designing forms
      13m 30s
    5. Using CSS media queries
      11m 24s
  6. 1h 11m
    1. Detecting client capabilities with script
      10m 8s
    2. Caching information with local storage
      9m 16s
    3. Determining position with geolocation
      12m 52s
    4. Minimizing HTTP requests with data URLs
      7m 39s
    5. Understanding user agent detection
      9m 8s
    6. Using server-side detection with PHP
      6m 52s
    7. Using server-side detection with ASP.NET
      4m 54s
    8. Using HTML5 Boilerplate for mobile
      11m 6s
  7. 39m 22s
    1. Measuring performance
      7m 41s
    2. Creating full-screen web apps
      6m 30s
    3. Customizing the user interface
      5m 14s
    4. Detecting orientation changes
      3m 58s
    5. Detecting device movement
      5m 21s
    6. Using touch events
      10m 38s
  8. 47m 14s
    1. Taking a look at the finished site
      7m 40s
    2. Examining the header and background image style on the Home page
      10m 10s
    3. Examining the hover effect and layout styles on the Tours page
      6m 42s
    4. Examining mobile forms on the Contact page
      9m 45s
    5. Viewing and testing the mobile site on emulators
      8m 11s
    6. Viewing the site on devices
      4m 46s
  9. 2m 34s
    1. Goodbye
      2m 34s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Mobile Web Design & Development Fundamentals.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.