Ever wondered how to make your website look good on a smartphone while also looking really nice on a desktop monitor? Responsive CSS is the answer. In the past websites would handle this problem by setting up a completely separate version of the website for mobile devices. However, doing this takes a lot of extra work and does not provide the ideal experience for users of all of the different mobile devices out there with different screen resolutions. Responsive CSS solves this problem by allowing you to specifically tailor the CSS of the site based on the resolution of the user's browser window or several other parameters.
The video presentation gives a great overview of what responsive website design is, how to implement it in Drupal, the benefits and pitfalls, and an explanation of the Omega Drupal theme.
The video provides a good list of different screen widths to consider when developing a responsive website theme:
- 1200px: larger screens (laptop/desktop)
- 1024px: small desktops/laptops, large tablets in landscape
- 768px: portrait on large tablets, landscape on small tablets
- 600px: portrait/landscape on small tablets
- 480px: landscape on most smartphones
- 320px: portrait on most smartphones
- 240px: really small mobile browsers
One important thing to remember is that responsive website design requires CSS3. This means that older versions of IE (8 and before) will not recognize you CSS3 media queries. There are many ways to work around this problem as mentioned in the video.