Responsive web design is built on several principles to work properly. Below are the three most essential principles of a responsive website to get you started.
- Fluid grids
- Media queries
- Flexible images and media
NOTE: This article was originally posted at iStar’s blog, read the full article here
Fluid Grids – Old websites were based on print media like newspapers and magazines. Columns were positioned and displayed in absolute size and position (pixels). Mobile devices changed all this, instead of solely relying on pixels for measurement, responsive design incorporated percentages to the mix to accommodate the growing number of resolutions. Fluid grids or “flexible grid” is the backbone of responsive design. It uses relative sizing to fit content to the device’s screen size. The grids are based on percentages. By basing text size, widths, and margins on percentages, a fixed size can be turned into a size relative to its display space. The name is a little misleading because a grid is not the only thing that makes it flexible, it relies on CSS to position the content.
Media Queries – Also known as breakpoints, it can be used to apply different styles based on what the screen can handle. The website detects the type of device you’re using (resolution/viewport) and correctly displays the content. This can be observed by resizing your desktop browser to different sizes, you will notice how a responsive site adjusts to best display the content. It can be customized to control the width, height, max-width, max-height, device-height, orientation, aspect ratio, etc.
Flexible images and media – Aside from the layout and text, images also needs to respond correctly. This allows your images and other media to load differently for every resolution. It can be achieved through scaling(CSS max-width) or cropping (CSS overflow property). With scaling the media element’s max width can be set at 100 percent so the browser will make it shrink or expand depending on the container. Cropping on the other hand hides portion of the image and still fit it to the container.
There are other things that come into play with responsive design, the above items will get you started and is enough if you know what you are doing. If you would like assistance regarding responsive design or if you are interested with any of our services, please don’t hesitate to contact us, our programmers are always ready to help.
