Magento CE 1.9 – Responsive Theme Base Information

If you pop open the app/design/frontend/rwd/default/layout/catalog.xml file you'll find this:

76. <block type="catalog/navigation" name="catalog.leftnav" after="currency" template="catalog/navigation/left.phtml">
77.     <block type="core/text_list" name="catalog.leftnav.state.renderers" as="state_renderers" />
78. </block>

As you can see, there is an added block state_renderers which the template the PHP error is turning up in is relying on being present. Now, it would have been much better for this template to verify the result to the getChild() call was not null before doing anything with it, but unfortunately it doesn't. Maybe the handful of places this occurs in the new rwd/default templates will have this resolved in the next version of EE 1.14. :)

I would suggest making sure your catalog.xml layout includes the new child blocks found in the core. If you have other blocks using this template, they'll need a similar child block inserted into their layout.

Alternatively, you could alter the template within your custom theme to implement a check for the block before it uses it like this (disclaimer: this patch is untested, use at your own risk):

diff --git a/app/design/frontend/rwd/default/template/catalog/layer/state.phtml b/app/design/frontend/rwd/default/template/catalog/layer/state.phtml
index 0b90407..e8998fd 100644
--- a/app/design/frontend/rwd/default/template/catalog/layer/state.phtml
+++ b/app/design/frontend/rwd/default/template/catalog/layer/state.phtml
@@ -33,16 +33,17 @@
 ?>
 <?php
 $_filters = $this->getActiveFilters();
-$_renderers = $this->getParentBlock()->getChild('state_renderers')->getSortedChildren();
+$_renderers = $this->getParentBlock()->getChild('state_renderers');
 ?>
 <?php if(!empty($_filters)): ?>
 <div class="currently">
     <p class="block-subtitle"><?php echo $this->__('Currently Shopping by:') ?></p>
     <ol>
     <?php foreach ($_filters as $_filter): ?>
+        <?php if ($_renderers != null): ?>
         <?php
         $_rendered = false;
-        foreach ($_renderers as $_rendererName):
+        foreach ($_renderers->getSortedChildren() as $_rendererName):
             $_renderer = $this->getParentBlock()->getChild('state_renderers')->getChild($_rendererName);
             if (method_exists($_renderer, 'shouldRender') && $_renderer->shouldRender($_filter)):
                 $_renderer->setFilter($_filter);
@@ -67,6 +68,7 @@ $_renderers = $this->getParentBlock()->getChild('state_renderers')->getSortedChi
             <span class="label"><?php echo $this->__($_filter->getName()) ?>:</span> <span class="value"><?php echo $this->stripTags($_filter->getLabel()) ?></span>
         </li>
         <?php endif; ?>
+        <?php endif; ?>
     <?php endforeach; ?>
     </ol>
 </div>

No, there is not a responsive grid system in the new CE 1.9/EE 1.14 RWD theme unfortunately. Grid systems create a number of reusable classes often named using numbers for the amount of columns available, for example in a 12 column grid a grid system will often use something like .col1, .col2, .... .col12 each corresponding to a fixed (px) or fluid (%) width. It then adds media queries to tell those numbered columns when to become full width of the screen a.k.a when to "stack" vertically.

The RWD theme instead takes what I would call an "as needed" approach meaning when an element needs to change its width based on screen size it is listed out individually in the CSS.

For example in styles.css:

@media only screen and (max-width: 770px) {
  .col2-set .buttons-set .button,
  .col2-set .buttons-set .button2 {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

While there is debate about using a grid system for the entire layout of a Magento site if you are building a new responsive theme based on RWD you most likely will benefit from a grid system if your design will use a number of CMS pages.

You can use any grid system out there but I would recommend going with the smallest and simplest solution possible. One option is: http://www.responsivegridsystem.com/calculator/

Choose the number of columns you want (12 is most likely the popular choice) and your margin. The calculator will produce the CSS you need for a small light weight grid system. This one uses 480px as its only break point but you can easily customize this in the CSS and add additional break points as your design requires.

You can choose to place this in your own CSS file (and then load it only on the pages you require it on) or add it to an existing CSS file depending on your organizational preferences.