Customer Happiness via Responsive Web Design
By Robert Patrick
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, from smartphones to televisions and tablets. Enter responsive HTML.
Responsive HTML allows you to design a website so that it automatically "responds" to 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 (e.g.) small links need to become touchable buttons and other elements need to disappear all together.
Responsive HTML is essentially three key pieces of technology all working together to seamlessly "resize" a website for any viewing device.
1. CSS3 media queries identify the screen size of device viewing the site. Initially introduced in CSS2.1, and later expanded with CSS3, this technology features 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.
2. 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.
3. Fluid images scaling allow an image to fluidly shrink its dimensions so that it stays within the viewable area of the screen without requiring the need to scroll. 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 that is being explored is adaptive images, which allows the website to return an optimally sized image based on the screen size. While image scaling is a great effect, it still has to download a higher resolution image. Adaptive images gives us the appropriate-sized image needed based on the space, thereby saving bandwidth. This is especially important when the user is on a mobile device with slower or limited connectivity.
What are the benefits of responsive HTML?
Get ahead of the game - With mobile Web browsing growing at a tremendous pace, it is increasingly important to provide viewers with a well thought out Web experience, regardless of what device they are using to view your website. As new devices come out with different resolutions and screen sizes, responsive HTML will allow your Web design to work properly on those devices right out of the gate. There will be no need to make any development changes in the future, which will save you money.
Save money with fewer platforms - A responsive website can also save you the time and cost of building and maintaining separate mobile apps because it offers many of the same advantages. For example, if you run a business where your customers often need to find you on the go, such as a restaurant, coffee shop, or hotel, a responsive website experience can be the difference between a customer choosing you over a competitor. Mobile browsing has already surpassed desktop browsing in some areas of the world, and a responsive website is the gateway to those users.
About the Author
Robert Patrick is founder and chief architect of PhD Labs, a Southern California company that specializes in social media, mobile applications and Web development solutions. Visit www.PhDLabs.com.
