Learn it fast with expert-taught software and skills training at lynda.com. See what you can learn

By Chris Converse | Wednesday, July 23, 2014

Optimize Web Content for Mobile

figure_3_loading_crop

Your site’s performance can make as much of an impression as its content. When considering the many ways users will be accessing your site, it’s also important to consider what content you show, based on screen size. The two techniques discussed below will allow you to tailor content, animation, and overall user experience.

Condensing content for small screens

CSS lets us clip, truncate, and hide content on a web page. When considering the hierarchy of your website content, CSS can be used to reduce the content displayed in your page. Consider CSS options for optimizing the reading experience of you mobile site, as well as the layout.

One unobtrusive, SEO-friendly technique is to use the text-overflow property. This CSS3 property allows you to truncate any text content into a single line of copy while adding an ellipsis character (…) into the available space. This gives your readers an indication that the content continues, and you don’t need to write alternate content into your page.

To achieve this technique, you must have a width property assigned to the text container, as well as a white-space, overflow, and text-overflow properties. Use the code below in your project, making sure to replace the “x” with your class or element name.

<style type="text/css">
     .x {
          width: 250px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
     }
</style>

figure_1_truncating_code

Combining width, white-space, overflow, and text-overflow CSS properties allows you to truncate content dynamically.

Truncating extraneous content on small screens can result in huge amounts of screen space. In Figure 2, we set the promo descriptions to one line with CSS. This gave us the visual opportunity to shrink the promo images a little while keeping the integrity of the small screen layout. Overall, this simple change resulted in the small screen view requiring nearly 23% less space than it had previously.

figure_2_truncating_example

A simple CSS rule allows us to save nearly 23% of the screen size needed for our mobile view.

Conditional content loading

A more effective technique for mobile optimization is to load content based on screen size. This approach allows you to maximize the screen real estate available to your visitors. While CSS media queries allow us to rearrange layouts for varying screen sizes, we’re still limited in the fact we have a set amount of content.

Using JavaScript and AJAX lets us load content into the page based on screen size. This powerful technique gives us the added benefit of controlling the data in our page. What’s more, interactive and animated aspects of our site can be minimized, or even eliminated, when small screens are detected.

figure_3_loading

Text, animation, and imagery are loaded into large and medium screens once the browser width has been determined.

When the initial page is loaded into the browser, we use JavaScript to “ask” the browser about its dimensions. We store that value in a variable, then load additional files from the server based on that number. In the figure above, we load large screen content above 801 pixels, medium content between 800 and 501 pixels, and small content at 500 and under.

Watch a video
See how a single line of jQuery code allows you to load additional content into a web page.

Learn it from the experts.

With online video courses at lynda.com, you can reach your goals faster. Learn software, improve your skills, and get an inside look at how the professionals work.

See what you can learn


Share this article:

Tags: , , ,

Get the latest news

  •   New course releases
  •   Pro tips and tricks
  •   News and updates
  
New releases submit clicked

You can change your email preferences at any time. We will never sell your email. More info

Featured articles

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Become a member

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.