ptg16476052Understanding the Mechanics of RWD 46116
too big to fit in the window or too big to download quickly. Either way, the website is the
ultimate loser because Google frowns on images not optimized for mobile devices, and
mobile users simply leave the site.
The second method is appealing because it ensures that the image will fit on both mobile
and desktop machines. But if the images are too big, they take too long to download on
smartphones, and if they are too small, they look awful if they are resized above their
absolute limit.
The third method attempts to solve both the download size and the dimension problems.
By serving different images to different devices, you can ensure that customers on mobile
devices get small images that download quickly, while customers on large screen 5K
monitors get gorgeous gigantic images. The problem is you need to have a web server
that can run the programs required to test for devices, and you need a tool like WURFL
that can be used to test against.
WURFL stands for Wireless Universal Resource File. It is a
community-based effort to do mobile device detection. You can
learn more about WURFL at http://wurfl.sourceforge.net/.NOTEMost responsive websites use the second method, but if you have to have really large
images, you can use the third.
Making the images flexible is a great method for most RWD websites because it’s almost
as easy as doing nothing at all. But your images will flex to fit the width of the browser
or the width of the container. All you need to do in your style sheet is set the width to
100%, the height to auto, and the max-width to the absolute width of your images. For
example, you might have a large picture of a dog that is 1920×1142 pixels in dimensions.
If you put that straight into your web page, it would be way too wide for nearly any
mobile browser. But if you view it in a window that is wider than 2000 pixels, the image
will start to distort and look bad. You don’t want it to resize to larger than 1920, so that’s
what you set the maximum width to be. Here is the HTML I used:
Input ▼
<!doctype html>