This is a guest post by Eric Portis – a proud member of (and newsletter-writer for) the Responsive Issues Community Group. The RICG formulated, championed, and standardized the new HTML features presented in the article.
Five years ago, Ethan Marcotte coined the term “responsive web design” and gave it three defining ingredients: fluid grids, flexible media, and media queries.
That second ingredient, “flexible media” turned out to be a bit of a bugbear.
Even though the image format animated GIFs are gaining popularity, their file size is usually large, causing slow loading and incurring high bandwidth costs. Besides, the GIF format is old and not optimized for modern video clips. The developer’s job of effecting fast loading of animated GIFs and delivering optimized images is complex and time-consuming.
Responsive web design is a method of designing websites to provide an optimal viewing experience to users, irrespective of the device, window size, orientation, or resolution used to view the website. A site designed responsively adapts its layout to the viewing environment, resizing and moving elements dynamically and based on the properties of the browser or device the site is being displayed on.
Web development was much simpler only a few years ago, when we were building HTML pages that included images and photos, and all elements shared the same resolution units. If for example, you aimed at a standard 1024x768 screen, you knew these were exactly the number of pixels available for displaying HTML elements and images.