Home » Home » The Future: How to Use CSS Media Queries to Create Mobile and Tablet Versions of Your Content

The Future: How to Use CSS Media Queries to Create Mobile and Tablet Versions of Your Content




Cascading Style Sheets 3—or CSS3—has a new functionality called Media Queries, and it allows you to look at the capability of a device to determine how to display your information. Media Queries creates very exciting possibilities for the future of CSS3 documentation. CSS3 is designed to work with HTML5 to increase usability and potential for information rich websites (which will work on many types of mobile internet devices). There is a lot of support for CSS3 with small devices—like the Android and iPhone mobile devices (though not with Internet Explorer 8).

Media Queries meets the criteria of high usability standards: to create effective programs that will enable communicators to reuse documentation and avoid redundant copy-work. Media Queries allow the stylesheet design to be separate from the content. Previously, other types of web documentation have the design style commingled with the text content, and that means that the documentation needs to be recreated for each new device type—usually for tablets and for mobile phones. Having the content in a separate discrete section means that we can write CSS to react to certain conditions of the user’s device capability and adjust the layout accordingly.

For example you can check for the following conditions:

  • Width and height (of the browser window)
  • Width and height (of the device)
  • Orientation (landscape or portrait mode)
  • Screen resolution

This includes the ability to choose exactly how the picture, fonts, and layout will change, and it will not be necessary to worry about usability issues that Neil Perlin discusses in his article, “Future-Proofing” Our Visual Information. Perlin talks about the difficulties of shrinking graphics to fit into a certain space, but then having to deal with fitting the same graphic on different sizes of other mobile devices. This problem will be solved with the new CSS3 Media Queries, because we can now define exactly how the content can be restructured for each device.

The content is written separately from the style, and this saves us from having to recreate content for each type of device. CSS3 is not written in a programming language; it is well within the abilities of Technical Communicators to learn to use. It is likely that future Technical Communicators will be working with advanced tools like CSS3 to future-proof our visual information for websites, tablets, and mobile devices!


[1] Smashing Magazine. How to Use CSS3 Media Queries to Create a Mobile Version of Your Website [Online]. Available: mobile.smashingmagazine.com/

[2] Neil Perlin (2011). Future-Proofing” Our Visual Information [Online]. Available: http://intdev.stc.org/2011/01/future-proofing-our-visual-information/


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: