Responsive Layout of multi-page website in Adaptive Theme

Question

I've read the book 'responsive web design' by Ethan Marcotte over the week & gone through the documentation on Adaptive Theme website, however, I'm confused about how to take responsive theming forward in Adaptive Theme when I have multiple web pages with their own CSS files.

From the documentation on Adaptive Theming, we have to split the CSS for each layout into its individual file (responsive.smartphone.landscape.css; responsive.desktop.css). Does that mean, we would have the full site CSS in one file for responsive.desktop.css? (! surely thats not right).

The way we have done thus far (in its current form, website is not responsive) is that there are small CSS files for each different regions/ areas of the page. In addition to this, we have custom modules with their own CSS files. How would we go about taking this mass of CSS files & distributing the code into responsive files in Adaptive Theme?

Answer 1

Few days ago we(team) finished responsive-design site, what we done is simply write your desctop css in your css files like(blocks.css, field.css, node.css, etc..) and for ipad/smartphone version we used another css styles for portait and landscape versions like this:

ipad-landscape.css
ipad-portrait.css
ipad.css
smartphone-landscape.css
smartphone-portaint.css
smartphone.css

And int html.tpl.php

<!--[if !IE]>-->
  <link media="only screen and (max-width : 480px)"  href="/sites/all/themes/acro/css/layouts/responsive/smartphone.css" rel="stylesheet" type="text/css">
  <link media="only screen and (min-width : 321px) and (max-width : 480px)"  href="/sites/all/themes/acro/css/layouts/responsive/smartphone-landscape.css" rel="stylesheet" type="text/css">
  <link media="only screen and (max-width : 320px)"  href="/sites/all/themes/acro/css/layouts/responsive/smartphone-portrait.css" rel="stylesheet" type="text/css">

  <link media="only screen and (min-width : 481px) and (max-width : 1024px)" href="/sites/all/themes/acro/css/layouts/responsive/ipad.css" rel="stylesheet" type="text/css">
  <link media="all and (min-width: 769px) and (max-width: 1024px), all and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape)" href="/sites/all/themes/acro/css/layouts/responsive/ipad-landscape.css" rel="stylesheet" type="text/css">
  <link media="all and (min-width: 481px) and (max-width: 768px), all and (min-width: 481px) and (max-width: 768px) and (orientation: portrait)" href="/sites/all/themes/acro/css/layouts/responsive/ipad-portrait.css" rel="stylesheet" type="text/css">
  <!--<![endif]-->

for specific pages we wrote css in this files.

Update Also we use sass and compass for css styles.

Answer 2

The more recent methods concerning responsive design is "mobile first". It's more time consuming to theme a desktop site and then bring it down it pieces to a mobile version, but some of this goes into the initial architecting as well. But, this is another topic.

You should keep your CSS as generic as possible at first, then drill down to specific items when you need to. Something you might want to look into is using a CSS preprocessor like LESS or SASS. On our projects (generally using LESS), we make CSS files for different regions of the site. Header, content, sidebar, footer, mobile, etc. and then compile them all into a few CSS files. In this screenshot, you can see the different sections broken up and they're all compiled into the global.css (the others are direct).

Answer 3

I use these css-files (e.g. responsive.smartphone.css) for the device-specific styles only, everything that applies for all devices goes into a "basics.css" or however you want to name it. The module-specific css stays where it belongs and in the css-file for a device-size are only the overrides of that...

I often work along the "desktop first" line and add the styles for the smaller devices afterwards. And if you have a complex layout, then the specific stylesheet can grow accordingly.