Responsive HTML Tutorial. Part 4 – Responsive Styles

This article continues our post series on creating responsive online documentation. In the previous parts of this series, we have learned about mobile emulators and typical issues related to screen sizes. Now, it is time for some practice. We suppose that you have already identified issues in your content and in this post we will focus on specific ways to solve them with CSS.

Note: Although we consider responsive markup in the context of online documentation, this blog post also applies to general web pages and web sites. Even if you are not a technical writer, you may find this information useful.

Planning Changes

Here are some options you have when dealing with responsive content:

1. Use different styles. This means that you can show, hide or change your page elements with conditional CSS depending on device screen size. This is what this post series is all about, so we will focus on this solution.
2. Use different content. If you have control over the server-side engine of your documentation and the engine is smart enough, you can configure it to display different content for different devices or even use totally different pages with different URLs for mobile and desktop users. But what if you don’t? Well, there are still two other ways. One of them is conditional content, which is supported by the majority of documentation tools, including ClickHelp. You can have different versions of your documentation published for mobile and desktop users. However, making readers choose the needed version manually is annoying and therefore a more realistic option is to handle content changes with JavaScript, which gives you great flexibility and allows changing every piece of your pages. You can even render both mobile and desktop elements on a single page and then hide, show or move them as necessary from JavaScript on the client. However, we strongly recommend that you consider using CSS first as your customers may have scripts disabled in their browsers. Besides, CSS can help you hide multiple elements at once if you apply a special class to them (call it “screenOnly” or “mobileOnly”, depending on the approach you choose).
3. Use different master pages.
   Actually this should be a part of #3, but we decided to make it a separate option to stress its importance. Having special navigation elements for mobile version of your content is a good practice due to specifics of mobile navigation described above like missing hover events or taps which are less precise than mouse pointer clicks.

In reality, you are likely to use a combination of these options depending on your specific scenario. And now, let us focus on option #1, which is the most commonly used approach for creating responsive HTML.

Responsive CSS

In CSS 2, you could only apply different styles based on device type with the @media rule. For example:

@media screen
{
.test {font-size:14px;}
}

@media print
{
.test {font-size:20px;color:gray;}
}

@media screen,print
{
.test {font-weight:bold;}
}

You can find a description of this rule here at W3Schools: CSS Media Types.

However, with CSS 3 you have a much better mechanism to control your styles. Instead of focusing on device types (which do not actually guarantee anything, because screen sizes may vary greatly for devices of the same type) you can focus on specific device characteristics. Some of the commonly used are max-width, max-device-width, min-width and min-device-width. The difference between max-width and max-device-width is that the former applies to the browser display area size, while the latter applies to the entire device screen. Also, there are similar properties for height values too.

Note that these conditions can be applied not only to specific pieces of your CSS, but also to your entire stylesheet files. For example:

<link rel="stylesheet" type="text/css" media="all" type="text/css" href="default.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1000px)" href="bigscreen.css" />

The first stylesheet will always be loaded while the second one will load only if device type is “screen” and the screen width is more than 1000 pixels. You will see more examples in the next section.

Choosing Screen Resolutions

Unfortunately, there is no “one size fits all” solution for how many CSS files you need to have and what conditions you need to check. This depends solely on your layout and specific issues you need to handle. However, if you are dealing with existing content and this content was originally designed for specific width, it can be a good idea to apply special CSS rules for widths which are less than that width. Another tip is to check Google Analytics or other similar stats for your content to see the most common screen sizes. Many documentation tools including ClickHelp provide integration with Google Analytics to help you gather statistics for your online documentation.

If you do not want to spend time figuring out what screen sizes are specific for your content, you can use some common threshold size values. Twitter Bootstrap can give a good example of threshold width values for both approaches.

For example, here are conditions used in Twitter Bootstrap 2 where they used the Graceful Degradation approach back then:

/* Landscape phones and down */
@media (max-width: 480px) { … }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { … }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { … }

/* Large desktop */
@media (min-width: 1200px) { … }

As time went on and trends changed, Bootstrap 3 switched to the “mobile first” approach, also known as Progressive Enhancement:

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { … }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { … }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { … }

The last but not the least point worth mentioning in regards to conditional CSS is that mobile phones will not treat your *-width conditions the way you expect by default. The width can be affected by device position (portrait or landscape), pixel aspect ratio (you do not want to treat a 1920×1080 mobile phone screen like a 1920×1080 monitor, right?) and zoom.

The good news is there is “one magic tag to rule them all”. Just add it to the section of your pages and you will get predictable logic for your conditional CSS:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

For example, in ClickHelp, you can use global or project settings to specify any number of custom meta tags which will be appended to the <head> section of your help topics. And if you want to learn more on the magic tag and the problems it solves (like virtual viewports and pixels which are not really pixels), you can find more information here:
The Viewport Metatag (Mobile Web Part 1)
Using the viewport meta tag to control layout on mobile browsers

Conclusion

Now when you have the tools and learned some theory, you should be ready to adapt your content for different screen sizes. However, some specific tasks like creating responsive navigation elements can still be tricky, so we are going to help you with them too.

If this post was helpful, and you don’t want to miss the next one, subscribe to our ClickHelp Blog RSS.

Happy Technical Writing!
ClickHelp Team