Responsive design is the idea that one site design should be able to accommodate the increasing number of devices and viewports for accessing the web. A majority of users are accessing the internet on phones and tablets and developers should only create sites that work across the spectrum.
Standard UFT.org look & feel calls for a responsive design with a maximum width of 1200px.
While creating responsive sites and applications, some high-level principles can be adhered to in order to minimally “future-proof” sites and apps and guarantee they’ll work well in the years ahead:
DO:
- Sites and Applications should work in every supported browser and/or OS
This means the use of OS or browser-specific technology should be avoided. As users adopt different browsers and technology, sites and applications should work no matter the platform. - Use modern CSS and rely on it for page design
Good CSS should cascade gracefully and work with all browsers. Some older browsers will not recognize some modern styles, but CSS code should not break them. Incompatibilities should be invisible to the user. - Test on every major browser (desktop and mobile)
Something that works in Chrome might not work in Safari and vice-versa. Testing should be as thorough as possible. - When in doubt, play it safe
Bleeding edge cool technology may be fun to develop… Until it breaks the latest version of Chrome that was released two weeks after a site has gone live. Retrofitting a site to correct these types of mistakes is expensive, time consuming and embarrassing.
DON’T:
- Use Tables for page structure – Tables don’t accommodate different browsers and screen sizes as well as CSS. Retrofitting a page that’s built with tables is much more difficult than one structured with modern CSS. Tables should only be used for tabular data.
- Use Proprietary technology – Dead technology like ActiveX or Flash, for example, are usually blocked by modern browsers and don’t work at all on mobile. When possible, use open standards like HTML, CSS and JavaScript.