Images and Tables

Designer Developer

By Posted On: Mar 17, 2012

Creating responsive images and a process of ensuring that your tables are responsive is crutial when developing sites. A developer and designer should know a few considerations when creating images for the web and have a design strategy in place for their use. Also, tabular data must also a responsive strategy must be in place to consider how the content will flow as the browsers becoming increasingly smaller. The Go Mobile team explored a number of these considerations and have suggestions to present images and tables in the most effective manner.

What is a “Responsive” Image?

A responsive image “responds” favorably to whatever device is being used to view a site. Most of the time this means scaling appropriately to the device screen or simply disappearing for smaller screens. A developer should keep in mind device bandwidth to not impede a site’s download time. Along with responsive images, content management and design strategy are key to a good responsive site. Responsiveness is about logical flow of content from device to device.

Example: Texas A&M College of Architecture

  • Image sized for Desktop

    Desktop

  • Image Sized for Tablet

    Tablet

  • Image sized for e-Reader

    e-Reader

  • Image sized for phone

    Phone

For more examples of responsive design, see mediaqueri.es.

How Do I Create a Site with Responsive Images?

The easiest and quickest way (although not the most efficient) to make images responsive is to do away with pixel width and height (pixel dimensions make things static). This allows images to respond to the container holding them. For example:

Old and Busted

.MyImg{
Width:  250 px;
Height:  175px;
}

New Hotness

.Img{
Width:  100%; (IE)
Max-width: 100%;
}

How Do I Deal with Large Images?

Several strategies address this issue, but overall there is no perfect solution to this problem.

1. Use the large images ONLY on the larger devices, such as desktops and tablets, employing media queries to determine the device (Twitter Bootstrap has ways of defining what occurs on a given device type). However, this could cause bandwidth issues since the full-size images are still downloaded. Many articles have been written with solutions for some browsers.

2. Some Javascript-based solutions help with using optimized and sized images on smaller devices. This means managing multiple versions of the same image. If the image is crucial content, this may be a viable solution. It is not a perfect solution, however. As browsers have progressed, they end up loading both images anyway.

3. Apple is using progressive JPEGs for large images. This is the solution to the retina display iPads as well.

To keep updated on the latest developments, see the W3C’s Responsive Images Community Group.

What About Responsive Tables?

Similar to responsive images, responsive tables use percentages as widths. Twitter Bootstrap has an accommodation for tables.

Data tables can be huge, wide and ugly, which makes them unsuitable for responsive design. Planning for content becomes an important factor. Displaying this data as tables only in the desktop or tablet view may be necessary. On smaller screens, a simple button providing an alert of a large table allows the user the option of viewing the table if they wish without breaking the site’s responsive design.

Back to top

Back to top