Canvas is a theme that is near and dear to us here at Woo. Due to it’s flexible nature and myriad of styling options and possibilities, Canvas has also become somewhat of a framework or boilerplate for many of us and many members of the WooCommunity (it has, after all, become our flagship theme). Since the initial launch of Canvas on the 9th of February 2010, Canvas has received an overwhelming response and has gathered a loyal base of users who use the theme exclusively. This indicates to us that the Canvas community is strong and ever-growing.
With Canvas version 3 out in the wild, we saw it time to take Canvas to the next level. After a few months of coding, tweaking, adding new features and optimising existing ones, we launched Canvas version 4. This update brought with it a refined action and filter structure, making the main layout even more extendible and customisable than ever before, as well as the introduction of the Hook, Meta and Layout Manager features, for even more granular control over your website’s design and the elements it’s made up of.
Since releasing Canvas V4, we’ve received countless e-mails, tweets, blog comments and Facebook updates from loyal and steadfast Canvas users, eagerly awaiting our next steps with Canvas (and providing some great ideas and feedback, which we always appreciate).
Ladies and gentlemen… without further suspense and retrospective, we present to you… Canvas version 5!
Canvas is responsive!
Before diving too deep into the other enhancements, features and additions we’ve made to Canvas V5, lets discuss the one feature that’s on everyone’s minds… Canvas is now responsive.
Canvas has, from the ground up, been examined, inspected, tweaked and optimised to be responsive in it’s layouts and look great across all your devices (mobile phone, tablet, laptop, desktop and larger displays). The “Site Width” setting under the Canvas “Theme Options” (it’s in the “Layout” section) has been transformed from a limited list of pre-defined width options into a neat slider, enabling the layout to be transformed to fit any of the desired width settings (from 600 pixels wide, all the way up to 2000 pixels wide). Being responsive, the layout adjusts to suit your desired main width, and scales appropriately for smaller screen sizes.
Initial Flexslider integration
On the topic of responsive designs, we feel Canvas V5 is the best time to begin integratingFlexSlider into Canvas. While SlidesJS (the previous script used for the “Business” and “Magazine” sliders) is still in use on portfolio items (each portfolio item can have a gallery, using SlidesJS) and in the “Woo – Feedback” widget, these will be converted to use FlexSlider in a later version update to Canvas. More on that later, though.
The “Business” and “Magazine” sliders now both boast full FlexSlider integration, responding to the screen size along with the layout of your website.
A Fresh style
As you may notice, Canvas V5 looks somewhat different to Canvas V4 and it’s predecessors… crisper… fresher. This is due to none-other than the styling talents and keen eye of Mr. FRESH01 himself, Cobus.
While converting Canvas to be responsive, we discussed the release as a whole and felt that Canvas is due for a styling update. We felt that, while this may require a bit more time when upgrading from Canvas V4 to Canvas V5, that not restricting the styling updates would result in an overall better result, than boxing the theme in to it’s existing styling.
A few new features, right off the bat, include an updated navigation bar, the use of sans-serif typefaces throughout (instead of serif, as previously used), the use of @font-face instead of images for icons throughout the design, updated button styling and rounded avatars, to name but a few.
All theme options related to the styling of your website have also been updated, to ensure they work seemlessly with the updated look and feel Canvas offers.
Upgrades and support
With the features and updates now explained in detail, we arrive at the business end of this blog post. With this, there are two questions that need to be answered.
How do I upgrade to Canvas V5? Should I?
While we’d definitely recommend upgrading to Canvas V5, it’s important to note that, as this is a significant theme release (from V4 to V5, rather than a point release), we’d advise not rushing into this upgrade. We’d strongly recommend setting up a testing environment with Canvas V5, adding your customisations in and seeing what needs to be tweaked or adjusted to work with Canvas V5.
With upgrades such as this, we’d also recommend this as an opportunity to dive into using child themes (instead of customising Canvas directly). This way, your changes, tweaks and updates will all remain in one place should you ever need to upgrade again.
What if I don’t upgrade to Canvas V5 just yet? Will I still get support for Canvas V4?
The answer is, yes.
From version 4 to version 5, Canvas has undergone some major groundwork and updates. Most of these updates, however, have either been styling (CSS) related or to the PHP in the theme on a purely as-needed basis (we didn’t want to dive too deep into this, to make upgrades and transitions easier for everyone).
We have Canvas V4 on hand and are able to continue supporting V4. As we roll out new features into V5 and refine existing ones, we’d advise taking the time to setup a testing environment using Canvas V5, give it a test run and see how you like it. There’s no rush to upgrade, as Canvas V4 is still supported.
What’s on the Canvas roadmap?
While Canvas V5 is certainly a significant update to the theme, we feel it’s important to look forward as well as to restrospect on versions past and how the theme can grow. With that in mind, a few items have been intentionally left out of V5 in favour of more focussed releases to attend to these features.
V5.1
Canvas V5.1 will be dubbed the “portfolio release”. While we’ve already released a portfolio feature in Canvas, it has been intentionally left unresponsive in V5.
Due to the size of the portfolio feature and the functionality it brings along with it, we feel it important to devote a block of time (and a release) exclusively to this functionality, making it responsive and replacing the use of the SlidesJS and jCarousel JavaScripts. This is in line with our “simplify and re-focus” approach to our products and will ensure the best possible transition and experience for existing and new users of Canvas.
If you’ve got ideas for features or updates you’d like to see in future versions of Canvas, please share them with us over at WooIdeas.
What changed in Canvas V5? A summarized features list
To summarize the above features list, here’s a quick list of exactly what’s been updated in V5 and what’s to come in future versions:
Updates to Canvas V5
- Responsive CSS, using media queries.
- Removal of width-specific conditions, in favour of fluid items such as “Magazine” slider images and embedded video
- Styling refresh, including an updated navigation bar, icons using @font-face instead of images, rounded avatars and updated button styling
- Layout Manager now works with percentages instead of pixel values
Roadmap for V5.1 onward
- Responsive portfolio feature.
- Removal of the SlidesJS and jCarousel JavaScripts, in favour of FlexSlider.
