It has long since passed the time where we should be saying R.I.P to non-responsive websites. Your ecommerce site must present its information in a format that suits the device it’s being seen at. If not, you’re gonna get left in the dust…
Packt Publishing have this time sent us a copy of Magento Responsive Theme Design by Richard Carter – a Magento Web Developer residing in Tyneside (that’s Newcastle if you’re not from UK). This book focuses on some key techniques and important considerations when making a responsive theme from scratch.
The Contents
The book is spread over 4 chapters and 86 pages, so there’s plenty to sink your teeth into. The chapters are as follows:
- Beginning a Responsive Magento Theme
- Making Your Store Responsive
- Responsive Checkout & Cart in Magento
- Enhancing Your Responsive Magento Theme
Chapter 1 -Â Beginning a Responsive Magento Theme
This chapter deals with all the basics of theme setup, such as what files you need to create a theme and where they should go. Richard begins with the CSS reset in your stylesheet before adding your media queries – ensuring all browsers are singing from the same hymn sheet. There’s also a section explain how theme fallbacks work in Magento, ensuring you fully understand the theme hierarchy before you continue.
Using a CSS reset in your stylesheet ensures all browsers are singing from the same hymn sheet
The book then goes through the process of how to add your media queries to your stylesheet, correctly starting with mobile-first, then using min-width values to determine the breakpoints. Special attention is paid to using ems rather than pixels for your breakpoint dimensions as testified on this blog post.
If you’ve done responsive design before, none of this will be news to you but it’s all very important for beginners to understand.
Chapter 2 -Â Making Your Store Responsive
With the basics out the way, the next chapter focuses on how to make certain elements of your store responsive. Magento’s header, footer, category pages, product pages and search results in particular bring out a lot of information that needs to be organised correctly in order to look good on all browsers and devices.
The end result is traditional responsive fare: 2/3 columns for desktop, 1 for mobile, but this is only really meant as a guide. There’s no reason why you can’t move the elements around as much as you’d like once you get the hang of it. There’s also a good tutorial which goes into best practices for making your product images responsive.
The end result is traditional responsive fare, but this is only really meant as a guide
Chapter 3 -Â Responsive Checkout and Cart in Magento
If there’s any part of this whole process that puts people off making their Magento site responsive, it’s the cart, checkout and customer account area. These pages contain some of responsive web design’s worst enemies, such as tables and description lists.
Richard goes through the process of removing parts of the HTML and adding percentage widths to a whole host of elements in order to get it to play ball. What we end up with is a responsive solution which works and would give a great starting point for styling up the rest of your site as needed.
Magento has pages that contain some of responsive web design’s worst enemies, such as tables and description lists.
Speaking of the customer account area, the author decides to remove certain elements from the navigation rather than styling the pages up, which is fine if you don’t need them. If you do however, hopefully the book will have taught you enough to deal with these pages yourself!
Chapter 4 -Â Enhancing Your Responsive Magento Theme
The final chapter begins with the author acknowledging that you should now have a basic, un-styled responsive layout with which to use as a starting point for developing the rest of your theme.
There are further sections on using custom fonts, making sure your form inputs are HTML5 and how to add JavaScript through layout XML. In terms of backwards-compatibility, Richard has opted for CSS3-MediaQueries.js rather than my choice of respond.js. I guess it’s all just means to an end, right?
Who’s the book for?
I would say that this book is specifically for beginner responsive web developers who already have a basic understanding of Magento’s theme architecture. Those going into Magento for the first time will find quite a steep learning curve, but this book will certainly help.
This book is specifically for beginner responsive web developers
There’s not much in here that an experienced responsive developer will not already know – most of what’s in here is responsive web design food & drink. The book never gets too technical, always focuses on CSS and HTML without dipping into PHP or any business logic.
Summary
What this book does not do it is introduce you to some of the latest responsive web design techniques, such as using off-canvas navigation, LESS and Bootstrap which can all offer greatly improved user experiences on all devices. What it does do is cover the basics, the stuff you need to know if you don’t already.
Overall, this is a fine addition to Packt’s ever-growing catalogue of Magento guidebooks. There’s nothing groudbreaking in here, it just does what it needs to do. Magento can be fiddly and convoluted at the best of times, so for anyone doing this for the first time you can greatly benefit from this book.
Oh and one last thing for newbies…. before starting development, remember to disable the cache!