Responsive Design: Optimizing Web Content to Device Screens

Remember mainframe computers? Desktop computers? How quickly times change. Now people are accessing the Internet via PCs, laptops, tablets, smartphones, and coming up rather quickly now – glasses and watches. Who knows what is on the horizon? In other words, more challenges to presenting our content in a meaningful way will continue to be developed. We are in another tumultuous time for keeping pace with a rapidly evolving environment, and how we respond to this challenging environment can be very tricky.

A new report from Pew Research Center, “Teens and Technology 2013” states that “Smartphone adoption among teens has increased substantially and mobile access to the internet is pervasive. One in four teens are ‘cell-mostly’ internet users, who say they mostly go online using their phone.” Adults aren’t quite there yet, only 15 percent of adults are ‘cell mostly.’

Even with the proliferation of cell phones, and the multitude of other devices with which you can access a website, it’s a wonder most servers haven’t exploded in trying to please each device’s screen (or the screen’s owner). We in the web business tend to be eager-to-please people. We want you to have the best experience you can have on our website, no matter which device you use to view our website, and even if it keeps us awake at night trying to figure out just how to do that.

So how do you serve up your content to adapt to those very different sizes of screens? If you have ever tried to go to a “full” website (PC version) on your smartphone, you know how tiny the text can look, and you have to scroll left and right, or pinch or expand the page to be able to read or click on something. Mobile versions of websites can be equally annoying because they are laid out differently, can lack certain features that are available on traditional websites, and may not feature the full content of the website. Usually they have an escape route that will take you back to the full website, but then you are back to scrolling, pinching and expanding.

You have probably heard of HTML 5. It is also known as “responsive web design” or “responsive design.” It is a website design that enables a server to respond to the particular device you are using to view the website and serve up your content in the most optimal fashion. If you want to try out an example of a website built with HTML 5, check out www.boston.com, home of the Boston Globe newspaper. Depending on which device you access the site with will determine what you see. It responds to the device, the size of your browser (you can minimize or maximize your window) and even the orientation. If you are exploring what to do with advertising locations on your web pages in such an environment, you can see that there also.

Flexible construction, coding and design make for content that can be presented to all types of devices. This makes more sense than creating various websites (and duplicating efforts) for various devices. It is not without its challenges, though.

  • If you still use tables to present and contain data, their rigid structure can be prohibitive to “flexible” page construction. Deconstructing the data and presenting it in a text format can be cumbersome and not as easily digestible, especially in this age of readers who scan pages. Presenting it in a Word document or PDF via a link on the page requires someone to click on a link to get information that is normally presented within the body of the content.
  • Wide images can also challenge a smaller screen’s width. Some solutions include creating smaller images for smaller screens, or to hide the image when a smaller screen accesses it.
  • Advertising, with its premium locations “above the fold” (or viewable in the first screen) can sometimes be sacrificed to a floating position at the bottom of a phone screen, or shoved to the bottom of a tablet’s page – not really an ideal location for someone paying to be seen.

How web content is displayed will continue to evolve. For more reading about Responsive Design, check out the following stories. Feel free to list your favorite resources in the comments.

Advertisements

2 thoughts on “Responsive Design: Optimizing Web Content to Device Screens

  1. Pingback: Do It Well: Addressing the Mobile Market | Web Editors

  2. I think all your tips are wonderful! Break up as well as list it
    down. This often looks better and more readable when you write your points like that.
    Thank you for the tips! Much appreciated info!

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s