The Role of Text in Responsive Design

More web traffic is due to mobile searches than computers and laptops. Most business websites require responsive design, which streamlines information based on screen size. In essence, think of screen size as something that scales with attention and focus. What this means is all the content is written for a desktop web browser, then information is cut as you move toward cell phone sites.

In short, mobile sites usually have less information. But how do you select what stays and what goes? After rigorous testing on demographics and whittling down all your ideas, everything seems important. This post addresses some of the text and content-oriented fundamentals involved in responsive design.


The Perils of Unresponsive Design

A smart phone that accesses a website will load what it is told. Websites that are “unresponsive” load everything. Sites not optimized for mobile devices are too big, so phones need to scroll side to side to read the text. Images are not pared down, take longer to load, and are more difficult to fit on screen.

Instead, all of the content gets dumped, as dense as a brick, onto the viewers screen. Long pages of information lower the experience of your users. Because the webpage is unresponsive, content filtering is not an option. CTAs are less effective. There are too many links to an overabundance of information.

In short, nonresponsive sites are clunky on small devices and more difficult to use.

Selecting Content

Think of content selection for your website as a campaign to focus on the vital workings of your website. It takes strategy. Smart, established sites view content selection as an opportunity to trim away the excess fat and leave only the most important bits for digestion. There are two important considerations:

  1. What content does your desktop website have? A video or two? Several images?
  2. What is your site’s function? What is the ultimate CTA?

Let us start with multimedia. Bounce rates increase dramatically on mobile devices when a website takes awhile to load. Embedded videos should (usually) be removed from your smart phone landing pages. Other information becomes superfluous and only serves to clutter up your webpage.

The what of your website is important. What is the purpose of your site? What are you selling: products or services? Both? If you already have a site, what keyword brings in the most traffic? A site selling products might want to include some manufacturer information, whereas a service-oriented site may want to provide testimonials.

The easiest way to select content is to design the entire site and work your way down. There are three stages:

  1. Desktop site. This includes every element, page of content, and line of code.
  1. Tablet site. This site is for mid-sized breakpoints. You may want to cut out embedded videos at this stage. Any recent news or business updates should be pared down, limited to only the most recent one or two events. “About Me” can be cut. At this and the mobile stage, there should be no horizontal scrolling.
  1. Smart phone site. At this level, the screen size is small and all of the webpages are single-column. This format is for small-sized breakpoints. All videos and some graphics can be cut. Many of the menu links can be cut except the important pages like “Contact Us,” “Store,” and whatever else is crucial. Business sites can remove their blog.

The landing page should be simple. Most, if not all, pages should have a CTA to direct consumers down the sales funnel. If your site’s original design was set over a single background graphic, you might want to remove it while remaining stylistically consistent to the image in your background color. Any apps or multimedia that slows the loading time of your page needs to be removed.

Finally, there should be plenty of white space around the text. The text should be large, easy to read, and easy on the eyes.


Applying Breakpoints

Now that you have selected all the content ideal for each stage of your design, next are your breakpoints. Breakpoints are defined by how much space is required to provide content on your site based on device size. In other words, it is pre-determined by content provided and what device is accessing the information. iPhones require breakpoints between 320 px and 480 px, while desktops and laptops can accommodate anything above 1024 px.

Breakpoints can be thought of like shoe sizes. You want to pick the best sized breakpoints for the screen size of the device accessing the webpage.

This process takes some trial and error. Keep changing the content size until the layout of your site looks terrible. When that happens, you want a breakpoint. This is not objective advice. Luckily, we have some numbers: according to typography expert Robert Bringhurst, 45-75 characters per line is perfect for a single column of information. This character amount averages roughly ten words per line.

One way to achieve this goal is to start design with your smallest, aimed at smart phones. Slowly increase the screen size. When the content begins pushing 80 characters or 11+ words per line, you’ve reached the optimal spot to apply a breakpoint.

Responsive Text and Typography

My final note on content regards the text itself. The text should resize based on the screen’s dimensions, but users should also be able to alter the text size themselves. As previously mentioned, line lengths are also crucial. Some web builders provide tools to automatically resize your font, or you can do it on your own. Finally, remember that special fonts may be difficult to view on some devices.

The following two tabs change content below.

Jeremy Jusek

An avid coffee drinker and woodsman at heart, Jeremy spends his free time in the Cleveland Metroparks whenever possible, sometimes pretending to film Folgers commercials.

Latest posts by Jeremy Jusek (see all)

Related Posts:

Share This