Owain is an Umbraco MVP, an Umbraco certified master and works on Umbraco projects on a daily basis. When not coding, he enjoys running, spending time with his wife and building lego!
Umbraco Uno - A first glance
Umbraco Uno - The one-stop website platform for creative agencies.
That's the tag line Umbraco have given their latest product. I thought I'd take it for a spin and write my initial thoughts.
Firstly, you can read all about Umbraco Uno on their website, however, what I felt was lacking was some screenshots and some poking around the product to show it off. Maybe that will come later.
Just now you can sign up for a free 14-day trail of Umbraco Uno so I'd highly recommend taking Umbraco HQ up on this offer. No credit card is needed, you just enter in your details and within a couple of minutes a site is ready for you to use.
Umbraco Uno isn't a replacement for Umbraco Cloud or Umbraco Heartcore, this is a third product which IS hosted on Umbraco Cloud, confused? I'll try and explain.
Umbraco Cloud is in very simple terms, an option for hosting an Umbraco CMS website on Umbraco servers. This website is no different to one you could host on your own server or on a clients server, you can install packages, built your own plugins etc and the bonus is Umbraco look after the maintenance of the cloud server and you also get upgrades at a click of button, nice! There are other features but I just wanted to make it clear that Uno isn't Cloud.
Umbraco Uno isn't Umbraco Heatcore either, Umbraco Heartcore is a headless CMS which again is hosted with Umbraco.
Lets look at Umbraco Uno.
Firstly I want to say, I'm typing this up as I am going through the trial. I haven't used Uno before and all these thoughts and things I'm finding out are as it happens. (that's the disclaimer out the way!).
When you setup Umbraco Uno, it spins up a project which is hosted on Umbraco Cloud. You log in via Umbraco.io and you get the Umbraco Cloud dashboard. With the free trial Umbraco also gives your project a unique name, my project was named "Owain's Placid Cow". I kinda like it, I might use the name for something in the future.
I'm going to skip the rest of the cloud dashboard because, well, it's a bit boring, you don't need to know about it and I'm guessing you are here to read about Uno, not Umbraco Cloud!
Umbraco Uno comes with a starter kit which has been branded 'The Unicorn Hotel and Spa' - it looks a rather nice place to stay!
Having a quick look at the source code of this homepage, I was pleased to see it's not full of junk markup. Nothing that jumps out at you and says "This is an Umbraco website", unlike some other CMS offerings out there. I've always liked how Umbraco gets out of the way when it comes to making templates or any frontend rendering and Uno is no different. Another disclaimer, I'm not a frontend developer and my initial look was quick! If you spot something you don't like, take it up with Umbraco HQ :)
Logging in to the backoffice is where you start to see how things are a little bit different from Umbraco Cloud or any other Umbraco CMS install.
Umbraco Uno Backoffice
When you first land on the backoffice, you get the usual prompt to take a tour around and work out how things work. I like this, especially if you are brand new to Umbraco. Tours are of course not just limited to Uno, they are available on all Umbraco 8 setups, but still, it's a nice touch.
One thing I would have liked the option to do was to click on the 'Things you could try' section and jump between each item, unfortunately, it seems you need to watch each section in order. Below is the list that is on the home welcome screen.
On the Content area of your site, the starter kit has already setup pages, a blog, a search results page and a sitemap. It's also added a section called Settings and a section called Global Content. See below:
Lets explore each section in a bit more detail.
Home - Unicorn Hotel
The home node is made up of content widgets, each widget has some customisation options on it and this is where you really start to see the difference between Uno and a standard Umbraco CMS install. The first thing I did was I went to dig around, I wanted to check if the widgets were Nested Content. I clicked on the info tab, navigated down to the document type and oh, wait, I can't click on it, I can't access the document types. Ok, I'll just go to the settings section of the backoffice to....oh, no Settings section either!
Yip, Uno is locked down, even as a project owner. You are basically given things to build a website with. You can't make your own document types, you can't make your own templates, you build the site with the widgets that Umbraco have given you out of the box. You are given the option to create a Search item, Feed item (blog / news), a Page item, a Sitemap item and a Settings item. I'm surprised you can add a sitemap and a settings item to be honest though, once you have them, do you really need more than one?
So you're locked down but don't let this put you off, you are still given a load of options on each widget, for example, alignments, container widths, background colours, text colour and you get a number of widgets available to use. I was surprised that I was limited to what text colour I could have and also what colour the background colour was. Black, Grey, White and Blue seems a bit limited!
Below is a list of all the widgets available to you on a page:
Most items are self explanatory but I wanted to highlight that these are not all the widgets available, there are some more hidden away within the Grid widget - these seem to be more content driven. You can add images, quotes, vidoes, even code which I tested because I thought it was going to be a code styler but it's not. You can actually just paste any code you like in there and it will be rendered on the front end, for example a '<a href="link.html">Link</a>' will render a link on the page.
Next up is the new settings node. I mentioned you can't customise your colours but then I got excited when I then saw the Settings tab, maybe I'd spoken too soon, maybe I could edit everything in here. Lets have a look. Within the Settings node itself, there is nothing you can do. It's really just a folder to organise the General and Theme nodes.
Below is a gif of the General and Theme nodes:
In the General node, you get the usual things you'd maybe expect, some SEO settings some generic site wide settings. Nothing too exciting but then I noticed you can also hook in to a newsletter provider like MailChimp, add Instagram details, I'm guessing to allow the Instagram widget to work, and also setup a Cookie Consent popup. I also liked that you can add your Google Analytics ID or Google Tag manager ID and you can also add your Google Maps API Key and enable comments on your site via Disqus. Nice touches, although, I would have liked the Google API key to maybe be concealed rather than be plain text. Just a person preference.
Moving on to the theme node, I changed the theme colour to something bright that I can spot. A nice option would be to have a colour picker rather than needing to know the hex code for the colours. You can't click on the colour and pick a colour which is a shame.
There are some colour options that you can adjust for the theme but it is limited and none of the colours that you change impact on the grid colour options so it looks like just now you are stuck with Black, Blue or White.
EDIT: If you change the Theme colour, save and publish the site, then navigate away from the Theme node, come back to it, the colour is now an option for other parts of the site! The Background colour is also now available on your grid cards. Phew!
One other thing to note is, if you save and publish this node, it seems to rebuild the website, I presume because it needs to update all the css files with the new colours. Not a big deal but something to keep in mind if you are making changes to see what the colours look like. The site doesn't go offline, it just takes a while to reload.
I'm going to gloss over the next phew sections because they are mostly just content pages. You're given a Feed Item which could be used for a blog or maybe a news article section, basically something that has a list of pages. Each individual page has the same information on it for you to complete, Content widgets, SEO settings, hide page from Navigation, hide page from search, all that sort of stuff.
Now, section caught my eye as soon as I spun up the project. I've come across something like this in the past where a client wants to enter in a bit of content but then use it all over the site. They want to have one original item where if they need to update, they can and they know the site will update everything linked to it. This is exactly what this does.
One thing that did confuse me initially though was the Global Content that is pre-installed with the project is Menu and menu gallery. When you think about a website, you think the menu is your navigation, or maybe that's just me. Remember this starter kit is for a Hotel, menu in the Global content is a restaurant menu! Another very minor thing that I noticed was, everything else in the entire setup starts with a capital letter, the menu gallery doesn't! Small thing but it really jumped out at me.
It's a nice feature to have built in to the starter kit.
I've waffled on enough I think, so I'm going to finish up here and give you my final thoughts on Umbraco Uno.
The grid editor is nice, you could really customise a page to look different from the starter kit. It's easy to use and makes sense. There are a lot of options though for each page and if you are looking to have a consistent feel across your site, it might be nice to have a Global Setting option that a page can inherit from.
No doubt about it, Umbraco HQ have put ALOT of time in to the backoffice setup and the starter kit looks pretty nice. If you were to build your own website by just replacing the images, tweak the colours, you'd have a website built in no time and it would be built on top of a great CMS.
When clicking along the main navigation in the backoffice, you have access to Content, Media, Users, Members, Forms and Translations, so no access to Settings or the ability to add any packages.
I wasn't sure why you are prompted to view Umbraco training videos when you visit the Members section though and could the videos cause more confusion for users who think they can do more with Uno than they actually have access to?
EDIT: Just read that a feature coming soon is to allow for you to move away from Uno, I'm guessing this might mean you can upgrade your Uno account on to Umbraco Cloud and then you could really customise your setup. Sounds interesting! But still, should Umbraco.TV be advertised in Members section? Maybe better suited on the welcome screen.
I'm also reading between the lines that in the features list, Uno Themes is mentioned. Just now, it's just the Hotel Spa theme but in the future you may get the option to pick from a couple of themes, this could also be a nice feature. Maybe even a theme which shows off a multilingual site?
A full list of features and pricing can be found on the Umbraco website.
You can start an Uno project for £27 a month which for a business to get a quick website up and running, isn't too bad.
I do think the strap line needs to be changed though : Umbraco Uno - The one-stop website platform for creative agencies. - I'm not sure it is a platform for creative agencies, maybe a strap line of "Umbraco Uno - The one-stop website platform built on the Umbraco CMS", not as catchy I give you that but more accurate.
I know the announcement of Uno has some people scratching their heads about why Umbraco have released it. There are some people with some really strong views for and against it, for me, it looks like another way for HQ to support the open-source project that we all love to use. HQ need to pay their staff, they need to pay the bills and if this helps, then fair play. I don't think it's going to take jobs away from Umbraco Agencies or developers, I think there is space in the market for Uno and I look forward to seeing how things progress with it.
Maybe this is the launch of a new game, Umbraco Uno - spot the Umbraco website built on the starter kit.
As a side note, I will be doing a quick demo of Uno at the Edinburgh Umbraco Users Group virtual meetup next week too. If you want to have a glance, come along, everyone is welcome, just RSVP so that you get a Zoom meeting request nearer the time.
I hope you found this useful and feel free to leave a message below or contact me on Twitter. @scottishcoder
Since publishing the blog, I was tweeted about a really sweet feature which actually fixes some of the things I was moaning about with regards to colour pickers etc. If you preview any page you are working on and then click on the Pencil icon, you get a theme customisation pull out. It's so much faster than using the Theme section in the backoffice!
Here is a quick screencast of me messing about with it.
Thanks Tim for pointing this out to me!