If you haven't heard of Responsive HTML yet, you will. It is quickly becoming one of the more important website technologies today. If you plan to build or update a website in the near future, then responsive HTML should be part of your game plan.
Gone are the days where you just had to build a website to work in multiple browsers. Now, you also need to support a wide variety of screen sizes.
Responsive HTML solves this by allowing a website to "respond" differently based on the screen size of the device that is viewing it. For example, if you're looking at a website on your desktop monitor then you can view it in its full glory. But on a mobile phone, things often need to be re-positioned—small links become touchable buttons and other elements disappear all together.
Responsive HTML is essentially three key pieces of technology: CSS3 media queries, which identify the screen size of devices viewing the site; fluid image scaling, which allows an image to fluidly shrink its dimensions so that it stays within the viewable area of the screen without requiring viewers to scroll; and adaptive images, which allow the website to return an optimally sized image based on the screen size.
- CSS media queries—initially introduced in CSS2.1, and later expanded with CSS3—feature the ability to test conditions on the device such as resolution, minimum height, maximum height, orientation and aspect ratio. You also have the ability to combine queries and test for multiple conditions using AND, NOT and ONLY as logical operators. By creating media queries you can determine which CSS style to display to that device, which is critical to achieving responsive design.
- Fluid grid layout using div-based HTML and CSS is the magic behind allowing the page to expand or contract as needed and relative to the display space available. By avoiding fixed-pixel sizing within the page, the design is free to adjust itself by percentages and can dynamically change positioning without breaking other areas.
- Fluid image scaling allows an image to fluidly shrink its dimensions down so it stays within the viewable area of the screen without requiring scrolling. When images are sized using CSS relative to their container, they work in conjunction with the fluid grid layout to achieve design flexibility.
Another related technology being explored is adaptive images. While image scaling is a great effect, it still has to download a higher resolution image. Adaptive images send the appropriate-sized image file for the space, thereby saving bandwidth. This is especially important when the user is on a mobile device with slower or limited connectivity.