Chris Converse |
Wednesday, July 23, 2014
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.
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.
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.
A simple CSS rule allows us to save nearly 23% of the screen size needed for our mobile view.
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.
Text, animation, and imagery are loaded into large and medium screens once the browser width has been determined.
Watch a video
See how a single line of jQuery code allows you to load additional content into a web page.
Tags: Mobile Device, Mobile Web, Web Design, Web Graphics
Check out these popular Web courses.
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:
Keep up with news, tips, and latest courses with emails from lynda.com.
We've updated our terms and conditions (now called terms of service).Go Review and accept our updated terms of service.