Quick Tips | Responsive Web Design
Having your web app look good across every device has become a standard part of front end development. While libraries like Bootstrap have greatly simplified responsive web design, they come with many bells and whistles that not every website needs. By understanding a few key principles of CSS, you can easily achieve responsive design without relying on third party libraries. In this article, we discuss a few quick CSS tips for making responsive web design easy and understandable.
Container Divs
By wrapping your page's content in a container div, you can more easily control the sizing and positioning of child elements across different screen layouts. Specifically, if you set a max-width on your parent <div> then you control the maximum width of the page itself. This prevents things from looking too stretched for larger devices and controls relative sizes/positions of child elements for smaller screens.
This same concept can be applied to images. By setting a max-width:100% on image elements, you allow the image to adjust for different screen sizes without stretching beyond it's original dimensions for larger screens.
Use Percentage Based Widths
Give child elements percentage based widths. This alone will make your site more responsive as elements adjust proportionately to different screen sizes. Although mobile devices can render pixel based widths accurately, it's harder to consistently make things look good when a fixed width is defined.
For element height, it's usually best to let the content dictate how much vertical space an element needs on the screen. This is not to say that setting fixed heights won't render well. Just remember that the less you give your elements fixed dimensions the more responsive they will be!
Develop for mobile first
It's much easier to make a mobile design look good on desktop than it is to make a desktop design look good on mobile. If you begin with the mobile design first then you will be better positioned to adapt it for larger devices later on.
Conclusion
While Bootstrap and other libraries make responsive design easier, by adhering to these principles you will find that responsive web is easily achievable without these libraries. By understanding what makes elements responsive, you can more effectively control the layout of your pages without relying on external classes and style sheets to make your site responsive.
