Last month I previewed the long awaited release of Headway 3.0; the drag and drop framework that lets you design your websites visually.
Version 3.0 looks to simplify the website creation process. Whilst the previous version had some great features, in practice many simple tasks were overly complicated and time consuming. I also found the loading times of 2.0 to be very poor.
This week I’ve been testing it out to see if the latest release of the framework lives up to its expectations. Before I proceed, let’s look at the new features that Headway 3 has:
* Their words, not mine 
- Headway 3 has been completely rewritten from scratch. It features an entirely new codebase that’s fast.
- You can now do more than ever without ever having to write a single line of code: even things like drop shadows and rounded corners in your designs.
- Headway now has child themes, some of which are ports of well-known themes from major theme developers such as Press75, Allure and Organic Themes. Many others come from Headway directly and we’ll have new ones constantly. Any theme developer can create child themes for Headway, and even sell them in the Headway Marketplace.
- You can design your website just by drawing rectangles live on the page. We call them Blocks. Just click and drag, tell Headway what kind of Block you want (header, navigation, content and more) and hey presto: you’re creating a custom layout without coding.
- They’ve added in rel=author for author links, a new SEO feature based on Google’s announcement they were going to factor in that xfn information into their rankings more heavily.
- For developers, the Live CSS editor now features syntax color-coding and there is a Blocks API so developers can create their own custom block types and even sell them in the Headway marketplace.
Setting Up Headway 3.0
The options area isn’t very different to it was in Headway 2.0. You can add a favicon in this section and set whether the headway admin link opens up the getting started, visual editor or options pages.
In the SEO area you can get the title structure and meta description. Advanced options include settings for page indexing, archiving, snippets and whether links are do follow.
Header and footer scripts can be added in the options area. Your feed URL can be added too and you can exclude certain categories from your feed if you want.
There is a ‘Getting Started’ page available. It simply links to the support forums, the codex and the visual editor.
The New Visual Editor – The First 5 Minutes
In version 2, the visual editor showed a small admin bar at the top of the page with all the editor functions at the left hand side. Your live site was displayed to the right, taking up around 60%-70% of the page.
Headway 3.0 is very different. The visual editor has been completely revamped though the layout is a little similar. The top admin bar and left column area remains. There is now a global control panel area at the bottom of the page too. This changes depending on what you are working on.
For example, on the home page the bottom area allows you to change the global width settings of the grid and the wrapper. The area can be minimised when it is not being used, giving you more space to work on your design.
Using any framework for the first time can be a little daunting. Thankfully Headway gives you brief introduction to the main areas of the visual editor. I’m sure many will be tempted to skip this part but I recommend reading each part so that you have a basic understanding of how to navigate the visual editor.
Intro
Grid Mode
Manage Mode
Design Mode
Layout Selector
Panel Options
Visual Editor Search
Getting To Grips With The The New Visual Editor
Headway 3.0 still uses the block system that was so popular in previous versions. At the top left hand side of every block is the block ID. At the top right hand side is an X button to delete the button and a button to show the control panel for the block in the bottom area. The bottom options area saves the last blocks you have edited, which is useful if you are switching between the settings of the same blocks frequently.
To the right of the block ID icon is an option to change the block type. There are 8 block types to choose from: header, navigation, breadcrumbs, content, widget area, footer, media and custom code.
Through the layout manager you can move things and resize blocks just like before. Any layout that you design can be saved as a template so that it can be applied to other areas of your site easily.
The layout has been greatly improved. Before you had to create a design and then copy it to other areas of your site. With version 3 there are 4 main areas: index, single, archive and a 404 page. It uses a parent system so if you edit single, the layout of your posts, pages and media will also be changed i.e. modifying the parent layout will affect all layouts below it unless they are changed too.
All settings for blocks are controlled through the control panel at the bottom of the page. It’s very straight forward and allows you to adjust most settings you can think of.
In the previous versions of Headway you changed the design settings in the left column. This area has been moved to the control panel at the bottom of the page.
I’m not sure if the control panel is the best area for the design section. It works well for changing basic settings but it feels a little ‘squashed’ for changing all of your design elements. There is a good chance I am just too familiar with how Headway 2.0 worked.
Overview
It takes a while to get used to any framework and get the most out of it. I built a few websites with the previous version of Headway so I was able to get around the new visual editor after 30 minutes of testing it. As I haven’t built any websites with Headway 3.0, I can’t commit to saying whether Headway 3.0 is a huge improvement over the previous version. In my opinion, you have to build a website with a framework and spend a few days working with it in order to notice that little subtle differences.
My first impressions of the new script are generally good though. The layout manager seems much better; in particular the way that parent layouts are used for children unless the children layouts are edited. I’m also sure that I will get used to the design manager being at the bottom in the control panel after using it more. It does seem to work a little quicker too.
When I originally wrote this review I believed that Headway 3.0 was still in the beta stage of development. Whilst there is currently no way to upgrade from previous versions as yet, a future release will have this functionality. We should see more features added to the framework over the next months.
Thanks,
Kevin
Links: Headway 3.0 Framework | Headway 3.0 Preview Videos
Kevin - Great review. Thanks. I was with you until one point. You mentioned that "Headway 3.0 is still in the beta stage of development." in your last paragraph. Headway 3.0 is NOT in beta, it is released. Yes, it's true you can't upgrade from 2.0 (That's coming), but if you are building a new site that is not coming from Headway 2.0, or you want to do a complete redesign from your Headway 2.0 site, there is no reason why you can't install Headway 3.0 on a live site.
- spam
- offensive
- disagree
- off topic
Like