Responsive web design is a common requirement in the mobile age. Laptops, smartphones and tablets have varying screen resolutions. With responsive design, our website will be able to adjust itself automatically based on specific configurations. One of the most important concept is fluid grid. In general, fluid grid is the basis for flexible structure of our web design. Instead of using fixed pixel values, fluid grids use percentage values. It means that these grids will be adjusted based on the users’ screen resolutions. The website will look big on a desktop 1080p monitor, but smaller on a smartphone display. Because our website needs to fit on so many different screen, percentage-based design is obviously more appropriate.
Grids in our design could be divided into different columns. Each column may have different height and width, also based on percentage of the screen resolution. The simplest structure is design with only two columns, which accommodate a sidebar and the main content. However, many designs can maintain simplicity with four columns. Regardless of the number of columns, we should make sure that the design will look good on devices with smaller screens. It is not so useful to have fluid grids, if our content is static. Fluid images are essential to maintain the flexible nature of our design. The size of the image is usually determined by a line in the CSS code that also adjust the size based on screen resolution.
However, we should also make sure that images still look good even on high resolution displays. If we use small images, they could be stretched out beyond proportion. Even so, we should optimize images, to make sure that they will have reasonable file sizes. This is something that we need to be sure of. When implementing fluid design, we should also use breakpoints. They allow content layout to automatically change at predefined points. Breakpoints are usually added at sentence breaks. Major breakpoints are needed for layout that may change significantly. With proper addition of breakpoints, we will be able to prevent under-utilization of space on our design. Everything will be rearranged in a proper manner. One big concern is whether should choose mobile or desktop first.
If we choose mobile-first concept, we start from designing layout for low-resolution smartphone screen, which is expanded to tablet or desktop resolutions. The mobile version of our web design should be equipped with absolute bare essentials. Although latest smartphones have fast processor and 4G LTE connections, simple web design will provide users with snappier experience. Although we may use bitmap images on responsive design, it is a good idea to use vectors whenever possible to improve the responsiveness of our design. Vectors are smaller in size and they are based on mathematical formula. Web browsers render the image based on the coding instructions. Vectors are usually represented by icon font or SVG files. However, vectors are not as flexible, in terms on how content is added. As an example, there’s no way we can use vectors to create detailed infographics.