This article will delve into mobile first responsive web design - what it is and how you can execute mobile first design using the tools provided by Adaptivetheme 7.x-3.x. I will assume you know something about theme or front end development and probably have a reasonable grasp of Drupal theming concepts and responsive web design.

This is a multi-part article. Due to the length and complexity of the subject matter in this first installment I will first cover mobile first design basics, and then delve into the CSS tools Adaptivetheme 7.x-3.x provides to site builders and themers, look briefly at front end performance and Internet Explorer tools. In later parts I will cover respond.js, Modernizr, how to reduce asset loading, and a very big separate article on Panels and Display Suite and how you can leverage these modules along with Adaptivethemes responsive Panels layouts to take full control over your page and content layouts.

"More often than not, the mobile experience for a Web application or site is designed and built after the PC version is complete. Luke Wroblewski"

What is Mobile First?

Mobile first is both a design process and development methodology. In terms of design it means focusing on the mobile experience first, then on the desktop. In terms of development it means building the theme for mobile devices first, then progressively enhancing the user experience on other devices, such as desktops.

Why Mobile First?

The proliferation of devices that provide an adequate to rich web experience has fuelled an explosion in mobile web usage. In fact we can no longer call it the "mobile web", its the just "the web" experienced in different ways. This increase in usage is providing new markets, new opportunities and new challenges to site owners and developers. Traditionally mobile has been an afterthought in the development process. Mobile first flips this around and places it front and centre, focusing squarely on the needs and wants of mobile. Even if you are not experiencing large volumes of mobile traffic now its beneficial to have this focus - you can gain unique insight into the needs of your users and discover value where it otherwise remained hidden. Mobile first is the way of the now, not the way of the future - the mobile web is here, so lets provide an optimal experience for all users, not merely an OK experience tacked on as an afterthought.

Adaptivetheme Mobile First Tools

The rest of the this article is about Adaptivetheme and the tools it provides to aid the theme developer during the theme development phase of your project. It should go without say that we are talking about RWD here, or Responsive Web Design. This is not about building seperate mobile web sites or applications, although Adaptivetheme can certainly be used for this, its not the focus of this article.

Adaptivetheme 7.x-3.x has been designed from the outset to be a mobile first development framework. In short it provides a bunch of tools that support this methodology. You do not have to use them, or take advantage of them, but they are there for you to leverage, and they are enabled by default in the themes settings.

"Doing mobile first in Adaptivetheme essentially comes down to one simple decision - where to put your CSS"

Doing mobile first in Adaptivetheme 7.x-3.x essentially comes down to one simple decision - where to put your CSS. Hold that thought because I am going to come back to this point over and over - its all about CSS and where you put your declarations. Remember, this is about mobile first responsive design, and at the moment we don't have much beyond media queries and capability detection to help us out - I will get more into mobile context discussions later on, for now lets concentrate on what the theme provides to designers out-of-the-box.

As a quick overview the tools we are going to look at include:

• CSS Structure
• Front End Performance
• IE and Mobile

CSS Structure

If there is one section to read in this article, this is it. Its all about the structure and naming of the CSS files - understanding the structure will give you access to the big tool you need for doing mobile first in Adaptivetheme. Its crucial to understand how this works. Lets look at the actual CSS files loaded from the sub-theme and what each of them is used for.

There are two "types" of stylsheets - Global and Responsive. Put simply:

• Global styles always load.
• Responsive styles load in media queries.

All stylesheets are in adaptivetheme_subtheme/css.

Global Stylesheets

These load by default. Using a mobile first approach you would only place styles that are going to be used for all devices. You need to be ruthless about this and cut down on what is going into these files - its very easy to assume you will use this or that everwhere, but in reality you are merely falling into the familiar routine of desktop first theming. On your average site these files will be rather small. If they start getting really big, and if you find yourself overriding stuff later in the responsive sheets - then you know you have a problem and need to re-think what you are doing.

Adaptivetheme uses modular stylesheets. This means there are lots of small stylesheets, rather than one very large stylesheet. All modular stylesheets are loaded via the global.css file which uses @import to pull them all in. You can add or take away as many of these "global stylesheets" as you like, and updating the global.css @imports is a familiar and easy way to include or exclude a stylesheet. Drupals CSS aggregation will resolve these @import's later on, when you go live and turn on aggregation, there is no performance overhead for live sites in using @import in this way. Note also that if you using the SCSS versions of the files (SASS) you can update global.scss and it will automatically update the .css version.

Lets look at the default set of global stylesheets. All global CSS files are prefixed with global.

• global.css
• global.base.css
• global.blocks.css
• global.comments.css
• global.fields.css
• global.nav.css
• global.nodes.css
• global.pages.css
• global.panels.css
• global.tables.css
• global.views.css
• global.panels.css

About these files:

• These stylesheets use media="screen". They are aggregated into one large file when CSS aggregation in on.
• All files include empty selectors (including the SCSS files), so you can use Firebug, FireSASS or Webkit inspector etc to easily start building styles via your browser.

If you are using SASS and SCSS versions the empty selectors are removed automatically when using Compass watch, however for standard CSS files you will want to remove unused selectors, just delete them during development or when you are done. Drupal CSS aggregation will not remove empty selectors.

Responsive Stylesheets

Adaptivetheme provides five responsive stylesheets - one for each breakpoint set in your theme settings. During development (see sidebar Development and Production Modes) each of these files is loaded in a link element and places the media query inside the link element itself, as opposed to inside the actual file as an @media declaration. The media queries are those you set in the Appearance settings for each device type. Adaptivetheme automatically uses these so your styles will match to your layout breakpoints.

Development and Production Modes

Adaptivetheme has two modes, this is set in the Appearance settings under "CSS". When in Development mode the responsive styles are loaded seperatly in link elements. In Production mode the files are aggregated into one large file and the media queries are embedded. This is done for performace reasons - so only one responsive stylesheet is loaded when the site is live.

...only add to each stylesheet what is required for that device range...

OK, lets talk about progressive enhancement because this idea is going to get really important from here on in.

As you can see in the following list there are five responsive stylesheets. The idea is to only add to each stylesheet what is required for that device range. The really big question you will start asking yourself right away is how much duplication is acceptable - and in that should all duplications be ported back to one of the Global stylesheets. Only you can answer this, I tend to do a bit of both, you may feel that all duplications should be back ported. A lot of that decision may come down to images - will you push the same background images at all devices, or use better quality images for desktops and lower-fi images for mobile and tablet devices? Maybe you will use no images for mobile and instead use CSS3. It all depends on your design and your requirements. The point here is the tools are there to leverage, either way.

Here are the responsive stylsheeets, you will find all these in adaptivetheme_subtheme/css.

• responsive.smartphone.landscape.css
• responsive.smartphone.portrait.css
• responsive.tablet.landscape.css
• responsive.tablet.portrait.css
• responsive.desktop.css

Front End Performance

Adaptivetheme goes to great lengths to optimize front end performance. Two of the key ways it does this is by:

1. Only generating and loading what CSS is required.
2. Controlling how CSS files are loaded.

We have already covered the Development and Production scenarios where Adaptivetheme changes what stylesheets are loaded, how they are loaded and what is loaded in those files. This is just one example of how Adaptivetheme reacts to theme settings. There are many other settings, or conditions, that will fundamentally alter CSS loading.

"Adaptivetheme ensures your site is loading the smallest possible amount of CSS, in the smallest number of CSS files, it does not generate or load by default stuff you do not need"

By and large you do not need to worry about what is going on under the hood. Adaptivetheme is merely rejigging the content and loading of the stylesheets to support what you are setting in the front end UI. At any time you can look at the generated files and read the comments being printed in them, they will tell you what is going on.

These changes are made to optimise CSS loading, always, in nearly every case, this is about performance.

CSS settings

Under CSS settings there are four settings:

Mode (development and production mode toggle)

Enabling Production mode reduces HTTP requests by aggregating the responsive stylesheets into one CSS file and uses embedded media queries. Enable this after you have finished writing your CSS styles. If you later change any styles in the responsive stylesheets you will need re-save the theme settings to re-write the aggregated CSS file.

Mobile First or Desktop First

Adaptivetheme supports both mobile first and desktop first design approaches. This setting fundementally alters what CSS is loaded and how it is loaded. At the most basic level if you select Mobile first the Smartphone portrait layout will load as the default, if you select Desktop first the Standard layout will load as the default. Many other changes take place regarding loading of CSS for Internet Explorer, Responsive Gpanels and Panels as well.

Cascading Media Queries

Setting/feature to enable the use of overlapped media queries. These are are in a seperate file: themeName/css/responsive.cascade.css, you must set the media queries in this file manually. Checking this setting tells Adaptivetheme to load this file, and to aggregate it with the other responsive stylesheets when in Production mode.

Disable Responsive CSS

By checking this setting the site will use only the Standard layout and the global styles. In other words, no responsive styles or layout will load.

Polyfills

Under Polyfills there are two relevant settings that will change what CSS gets loaded, and how:

Fix CSS rounding errors in IE6-7

This will inject additional CSS rules that will load just for IE to fix rounding percentage rounding errors. Adaptivetheme makes heavy use of percentages in its layouts and always allows values to add up to 100%, so if you need to support IE6/7 then you can enable this setting. This is not an additional stylesheet, Adaptivetheme will retrieve and inject this CSS into a stylesheet that is already being loaded and use the IE conditional body classes to target IE6/7.

Media query support for IE6-8

This will enable Respond.js. When respond is NOT loading IE8 and below are supported by a conditional stylesheet that loads the Standard layout. When Respond.js is turned on this file will no longer load, instead IE8 and below will rely on Respond.js and the normal responsive layout CSS.

Gpanels and Panels CSS

The CSS for the responsive Gpanels and Panels layout is entirely generated. There are no CSS files for the Panels plugins or Gpanels. Instead the CSS is held in data structures - when you save the theme settings Adaptivetheme will look at what layouts you have selected, retrieve only the data it needs, optimize it so CSS rules are only printed once (concatenates selectors per rule), and prints this out to file. This ensures your site is loading the smallest possible CSS file to drive the responsive panels layouts.

IE and Mobile

I won't go into too much depth here, some is already covered above. A very nice feature in Adaptivetheme 7.x-3.x is the ability to define both IE conditional stylesheets and scripts in the info file. you can read about this more here: http://adaptivethemes.com/documentation/ie-styles-and-scripts

That's all for this installment, in the next chapter I am going to cover in more depth - respond.js, Modernizr, how to reduce asset loading, and a very big separate article on Panels and Display Suite and how you can leverage these modules along with Adaptivethemes responsive Panels layouts to take full control over your page and content layouts.

If you have questions regarding features in Adaptivetheme please feel free to contact Jeff. You can also find me in IRC #drupal-adaptivetheme (Freenode) or add me in Skype: jmburnz.