DrupalCon Session Review: Creating Responsive and Mobile-First Drupal Themes

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.

About Us

Experienced Drupal Development from Des Moines, Iowa.

We do Drupal websites great and small – tailored to fit your needs. Reach out to us so we can begin. Our clients are in Des Moines, Iowa and across the world. If you have a large scale custom web project, we can be the reliable web partner to make those dreams a reality. But, if you need a simple brochure site or an e-commerce platform for your business, we can come alongside and make that happen too.