Responsive design websites are a fairly new approach to Internet technology that is likely to become the standard for website design. Here are some of the most frequently asked questions along with answers.
How does responsive design technology work?
Responsive design uses CSS3 media queries to detect the display dimensions on a user’s viewing device. A web page is then re-formed — rather than reduced in size — to fit the screen dimensions of the user’s viewing device.
Why is it referred to as a liquid or fluid design?
If you watch our responsive web design demo, you will see how page elements tend to flow downward to a better position as the screen size narrows, and then flow back up as the page widens. In a real life situation, the user would only see one version of a web page that is reformatted to fit the screen dimensions of his or her viewing device.
I can view web sites through my smart phone’s browser, but the pages are very small. What is different with this?
The difference is that page elements are re-arranged, rather than reduced in size. Some page elements, such as images, are not reduced until they no longer fit on the screen. Font sizes are reduced, but only proportionally as needed to retain good readability.
Does this work with all cell phones and tablet computers?
It will work with almost all smart phones and mobile devices manufactured in the last 4 or 5 years. It will not work with cell phones that do not have built-in web browsers and older cell phones that do not have CSS3 and HTML5 compatibility. Early mobile devices use a different language that was replaced with HTML5 and CSS3 when it became obvious that this was the best path for compatibility.
Does this work with web site videos and image sliders?
It does when the video player and image slider are designed to work with responsive design. We have responsive video players and image sliders that we use with the responsive design WordPress sites that we build.
Does this work with all browsers?
Users with older browsers that do not recognize CSS3 may have problems, but those browsers are also likely to have problems with most websites built with HTML5 and current design standards.
Here is a list of the CSS3 compatible browsers. Some older browser versions are partially compatible, but all modern browsers should be fully compatible with all new CSS3 properties.
- Internet Explorer 9 and newer
- FireFox 4 and newer
- Chrome 4 and newer
- Safari 5 and newer
- Opera 10.5 and newer
I already have a mobile site. What do I do with that?
If it is working well for you and your site visitors, keep it. It is another potential entry point to introduce customers to your company. But consider the fact that with responsive design you only need one website.
How do I test a website to see if it is responsive?
There are a couple of ways to test sites.
- Resize the browser window on your desktop PC, as I did in the demo video.
- The newest versions of FireFox have a built-in responsive design viewing tool. Go to Tools > Web Developer > Responsive Design View.
- There are several browser plugins that simulate various mobile device screen dimensions.