Magento’s newest version includes exciting updates for designers and front-end developers. As an extension of Joel’s post on the Magento 1.9 release, I am going to cover some of Magento’s newest updates, with a focus on design and front end development.
Layout Updates to Default Theme
The latest release of Magento, 1.9, is the first Magento theme that is Responsive by Default. The update includes updated technologies that can come in handy for developers, buy may be new or unfamiliar.
In order to create a better mobile user experience, the new Magento theme has rearranged some elements so that they take their proper place when sized down to mobile. A new left_first block was added to account for left sidebar elements that need to display above, rather than below, the main content when sized down to mobile. This area is for important information like the My Account section, where the left-hand navigation should appear first on mobile devices for a better user experience.
CSS customization
Magento highly recommends customizing the Magento default responsive theme using Sass stylesheets with a Compass compiler. Sass stylesheets are used to generate traditional CSS, but are built to be smarter. With Sass, developers can import styles from other elements, or use math to calculatebr fluid widths. You will also need to configure a compass watcher to detect changes in the CSS and JavaScript files and compile them. I highly recommend reading Magento’s Knowledge Base as an excellent resource when setting up your theme to reflect this change. To read more about Sass, start here with the basics. If you are working with a child theme, consult the documentation before making any style changes to see the theme developer’s notes regarding this update.
HTML5
Magento has updated it’s Doctype to HTML5 by default, and removed some of the layouts and organization that wasn’t working well with mobile design. The default theme no longer uses fieldset elements, which were problematic for developers in a responsive setting, and also makes some form updates for better HTML5 compliance.
Mobile-Friendly Images
Images will be more mobile-friendly with this update, and Magento has made changes to simplify tasks that developers have already been doing manually. For example, Magento now allows the upload of two separate logos into the admin field, so that a mobile-friendly version will replace a larger logo at smaller screen sizes. Magento’s default sprites also include an @2x version which is larger, and therefore more pixel-dense when sized down. This is a typical way of catering to the “retina-display”, or higher-resolution screens.
An example of different logo use for desktop and mobile devices
Responsive Emails
Magento’s default email templates are now also responsive by default to reinforce your brand with mobile-friendly emails. Email templates also have separate header and footer files, which is a welcome improvement over updating the branding on several email templates individually.
Magento 1.9 supports the following browsers:
Magento will look great in most browsers, but is recommended for use on the following:
On your Desktop
- Internet Explorer 9 and later
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
On your iPhone and iPad
- Safari on iOs7
On your Android phone or tablet
- Chrome on Android 4.0 and higher
Configurable Swatches
The ever-popular configurable swatch is now default functionality, so shoppers can choose color swatches on the grid view, in the main sidebar, or of course on the product page. This is great for front end developers because most of us were already using extensions to add color swatches. While the Magento default swatches don’t have all the bells and whistles of similar extensions (like a price slider), it will certainly get the job done a bit more simply.
The latest version of Magento offers exciting updates for designers and front-end developers. These updates allow us to more easily implement great responsive design on the website and it’s associated emails. As always, it’s important to read over your theme’s documentation if you’re skinning a child theme. Some elements of your theme may have changed with the new upgrade.
Customer Success Manager
