Discover innovative tools, design features, unique websites, and code structure curated by the GoWeb community.
View the resources by category or by monthly GeekOut! Compilations. Check out the latest compilation below.
< Back to
Images and Tables
Creating responsive images and a process of ensuring that your tables are responsive is crucial 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
Desktop
Tablet
e-Reader
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.
- CSS Media Query for Mobile is Fool’s Gold!
- Media Query & Asset Downloading Results – About testing of browser downloading
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.
- Example of Photography on the Retina Display
- How Apple.com will Serve Retina Images to new iPads
- Optimizing Web Experiences for High Resolution Screens
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.