Responsive Web Design for Mobile Devices: Boon for Technical Writers

By Abhijit Paul Choudhury and Ankur Srivastava

This document will take you through the concept of Responsive Web Design (RWD) and how RWD can be employed to develop mobile compatible content in various mobile interfaces. Here, mobile  interfaces refer to the form factor of various computing devices such as a desktop, laptop, palmtop, tablet, smart phone, or even an internet-enabled simple mobile phone. As one would agree, various web technologies and mobile computing devices have been evolving indistinctive of each other, but almost together. As soon as a new mobile computing device is launched in the market, it is loaded with a new never-seen-before web technology and this trend never seems to phase out. In fact, it won’t be wrong to say that people might buy a new mobile computing device because they want hands-on experience on a new web technology.

RWD seems to have taken a centre-stage amongst all this hoopla of mobile computing devices and ever-emerging web technologies. Something called Media Queries, embedded in this concept of RWD, helps us to identify the medium by which we are viewing the web. It also allows scalability and fluidity to accommodate content for various screen  size.

Content representation in mobile devices

In the ’90s, web pages were mostly static. With the advent of new technologies such as PHP, JavaScript etc., web page have become more interactive. Also, the form factor for computing devices (predominantly, desktops) were fixed in the ’90s and there was no need to design website based on different form factors. When various mobile computing devices thronged the international arena post-2005, the role of form factor came into picture. The manufacturers were forced to think about the way websites were designed as the end users owned computing devices of different form factors.

Ethan Marcotte, a web designer based in Boston, U.S., came up with the idea of Responsive Web Design (RWD). The main idea behind RWD is to provide an optimal viewing experience depending upon the form factor so that users do not need to pinch-in and out of their devices for reading the text. Using RWD, the designers need to maintain one repository for the content as the same URL can be used for different devices.

Need and Benefits for Responsive Web Design
Due to sudden surge in different mobile devices—tabs, smart phones, e-readers, etc—there is a need for representing the same content in different formats. RWD is designed to cater this need.

Before RWD came into picture, different websites were designed for desktops and mobile devices. So, different websites meant having two URLs which increased the cost and at the same time, maintenance was a pain. RWD helps you here by saving costs and maintenance by having a single website, in place of having multiple sites for different sizes of mobile devices.

RWD also helps you grow your business, the least it can do is to attract prospective customer to your website wherein you can provide your entire information catalog.

Consider this case – suppose you are the VP of an organization looking to procure certain products for your employees and you start looking for the same in a particular website from the warmth of your home desktop. Now, as soon as you reach office, you plan to go to the same website but the same website does not display properly as per the form factor of your laptop. You close the site thinking that the website might be malfunctioning at that point of time. Still worse, you tried surfing that website using your smart phone during your lunch time and the website still does not display properly. Chances are that you will shut the website and will never go back to that site again. Had the product website been built on the RWD concept, the product company would not have lost a prospective customer.

This is where RWD helps businesses to grow bigger and better. If you are able to keep your prospective customers happy, probably your business will thrive even by word-of-mouth publicity.

After making business sense, you need your information sites to be flexible and flexibility is the main cog in the RWD wheel. In RWD, everything, from the grid to the design, to the images, to the forms, is flexible. Depending on the design of your website, you can hide some images, tables etc. for smaller devices or may be, you can use smaller images or tables to suit every display type, be it a desktop, smart phone or a laptop.

Image quality is also an aspect which prospective customers pay a lot of heed to. Using RWD, you  can choose to use a small number of images, use large number of images in small frames or even hide some images for smaller mobile devices. In RWD, the image sizes are not fixed, they are kept flexible. The images render, based on the form factor of the device. At times, if the screen size is very small, the images can be removed from the layout and appropriate text can take its place. This flexibility helps in maintaining the layout of the website and at the same time helps a customer to enjoy the website.
Text size also plays a very important role in the way your content is represented on a website, in addition to the image quality. As you may agree, number of words used in a sentence should vary from device to device, to give the end user a comfortable reading experience. RWD helps here as well – the text density is automatically adjusted if your website is built using RWD.

Navigation is another key term that needs to be kept in mind while designing a RWD. A particular layout that looks good in 14-inch laptop may not be good for a four-inch device. Hence, the navigation buttons that are designed for websites should vary. RWD helps achieve this.

Finally, Search Engine Optimization (SEO) is the in-thing these days. There are specialized consultancies and organizations claiming to help improve your business by giving a higher rank to your business in various search sites such as Google, Yahoo!, etc. Google itself recommends that if your business has one site in place of many websites, chances are bright that it will rank your business higher in the web-enabled search done by the end user. As already mentioned, RWD does exactly the same. It helps you maintain one single website, thereby your business getting a higher rank and you saving loads of money that you would have otherwise paid to SEO consultancies. In addition, if you want to do some sort of data collection or web analytics for your business, it is always easy to do the same through one single website, as compared to having a number of websites and tracking multiple URLs.

How the concept of DITA relates to Responsive Web Design?
Darwin Information Type Architecture (DITA) is a documentation architecture in which information is developed in small snippets called topics. These topics are then combined to result a particular document (it could be a reference manual, a datasheet or an application note). These topics could be used across number of documents and this concept of using same topics or snippets of information (with some or no change) for generating different documents is called single sourcing. As the name of the concept (single sourcing) suggests, we keep the source of information same and use it across different genres of documents.
DITA also enables us to create and maintain content and formatting on different platforms. The actual text (content) and how that text will actually look like to the customer (style), are managed separately. If you are updating the content, your style will remain intact and vice-versa. Using HTML, this segregation was not possible but using XML (on which DITA is primarily based), this segregation is helping a lot of technical writers to focus mainly on the content and forget about the styling part of their content.

Many organizations have already moved to DITA and those who have not, are contemplating to do so in near future. Again, one should weigh the pros and cons of moving their documentation to DITA but as XML is perceived as the future of documentation, not many organizations would like to miss the bus.

The following table does an evaluative study of these concepts of DITA and RWD.

DITA	RWD
Unified approach to content management	Businesses have different website versions for desktop and mobile computers – RWD helps businesses to manage content using a single website version
Single sourcing	Eliminates the need to have multiple website—content   captured in one source and one website serves all
Re-usability	Same content can be re-used for different form factors
Conditional tags are used to generate content for different customers/end-users	In RWD, CSS code can be “conditionalized” for representing content for different form factors
Content and Style are managed separately	Content and Style are managed separately

 

Building a Responsive Website
The above topics explained the concept of RWD, need for RWD, and its benefits. Lets us now look at what all software languages are used for creating a Responsive website based on RWD.

RWD takes advantage of Media Queries that was introduced in CSS3. As per Wikipedia, Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution. HTML5 along with CSS3 can help in building a website based on RWD. One can use jquery too, for building a website based on RWD. In this paper, we will discuss only about HTML5 and CSS3.
While designing a RWD, you must remember that:
• RWD and mobile web design are not the same.
• In a RWD, everything should be flexible.
• A good RWD will start with a grid, the image size and quality plays an important factor while designing a responsive website.
• Navigation in RWD is critical.
• Depending on the form factor of the device, the navigation of the webpage varies.

In this section, a simple example is demonstrated on how a website can be made responsive using Media Queries. Three things are needed—image, CSS file, and HTML file. Let’s call the HTML file, CSS file as rwd.html and rwd.css, respectively.

The code of rwd.html file is:

<html>
<head>
<title>Responsive Website Design</title>
<link type=”text/css” rel=”stylesheet” href=”rwd.css”>
</head>
<body>
<div id=”container”>
<img src=”pic.png”>
<div id=”left-column” align=”center”>This is the left column.</div>
<div id=”right-column” align=”center”>This is the left column.</div>
</div>
</body>
</html>

In the HTML file, a container is defined and inside it, the <div> tag is employed to define the different sections of the webpage. It has three sections demarcated with the <div> tag as seen in the code above. Each <div> tag contains an ID which will be used as an identifier by the CSS to style the content.

The code of rwd.css is:

#container {
width: 600px;
margin-right: auto;
margin-left: auto;
}

#left-column {
width: 400px;
float: left;
background: red;
}

#right-column {
width: 200px;
float: left;
background: green;
}

Figure1: Image without the application of Media Queries

 

In Figure 1 above, we have defined a container and fixed its width to 600px and kept the margin as auto. Next, we have defined fixed width for our content in the html file as 400px and 200px. When the rwd.html file is viewed in a web browser, the following image (Figure 2) comes up.

 

Figure2: Image with fixed width

Here in the CSS code, nothing is flexible. Hence, when the screen size decreases, the user need to scroll to view all the contents. Using media queries, we can reshape the content. This is demonstrated in the following code.
@media screen and (max-width: 590px) {
#container {
width: 50%;
}

#left-column{
width: 100%;
float: left;
background: red;
}

#right-column {
width: 200px;
float: right;
background: green;
}

img {
width: 100%;
}

}

In the above code, media queries are employed and a screen size is defined for which the following style will be implemented.
@media screen and (max-width: 590px)
So, this style will be implemented if the screen width is less than 590px. In this case, the container size is being reduced by 50% whenever screen of width less than 590px is detected. The left column width is being made as 100% and the right column width a fixed width of 200px—so that responsive <div> sections and rigid sections can be differentiated.
img {
width: 100%;
}
The width of the image is also defined in terms of percentage here. So, depending on the screen size and the container width, the image size will adjust.

Figure3: Image after the application or Media Queries
(with image width of 590 px)

Lets take another example where the screen size is even smaller. Its less than 350 px. The code will look like:

@media screen and (max-width: 350px) {
#left-column{
width: 100%;
background: red;
}

#right-column {
width: 100%;
background: green;
}
}
Here, everything is being made flexible and defined in terms of percentage. The left and the right column are defined as 100% and since nothing is mentioned for the container or image, the properties that were defined in max-width: 590px, will be applicable for this scenario.

  Figure 3: Image after the application of Media Queries
(with image width as 350 px)

Lets take another example where the screen size is even smaller. Its less than 350 px. The code will look like:

@media screen and (max-width: 350px) {

#left-column{

    width: 100%;

    background: red;

}

 

#right-column {

    width: 100%;

    background: green;

    }

}

Here, everything is being made flexible and defined in terms of percentage. The left and the right column are defined as 100% and since nothing is mentioned for the container or image, the properties that were defined in max-width: 590px, will be applicable for this scenario.

Figure4: Image after the application of Media Queries

(with image width as 350 px)

Conclusion
As discussed in the details above, Responsive Web Design looks set to help the technical documentation field in letting the technical writers focus on their core strength and let the software handle the processing and formatting aspect. However, it is also suggested that technical writers should come forth, learn and apply the nuances of RWD for bettering their company’s technical documentation because they are the ones who understand the ins and outs of an organization’s documentation needs.

 

Abhijit Paul Choudhury is currently working in Cadence AMS Design India, as a Lead Technical Writer.

Abhijit is in the technical communication field for the past 7+ years. Earlier, he has worked for Freescale India Pvt. Ltd., as a Sr. Technical Writer and EFY Enterprises Pvt. Ltd as a Technical Correspondent. He wrote quite a few articles for Electronics For You and Linux For You magazine. His interest areas are Technical Writing, Web designing, Darwin Information Typing Architecture (DITA), Image editing, Content Management System, Extensible Markup Language (XML), Linux, Open source software etc.

Ankur Srivastava is currently working with Freescale Semiconductors, Noida, India, as Manager-Information Development, AMPG group.

Ankur is in the technical communication field for the past 14 years, majorly in semiconductor domain. His interest areas are in XML processing and DTP tools, DITA concepts and methodolgies, and people and project management. Earlier, Ankur has worked with organizations like STMicroelectronics India, Innodata-Isogen India.