We have just published our new website built using Microsoft SharePoint 2013. I’m pretty sure you’re very curious to hear how we built it.
A word of introduction
One of the things that we aimed at with our new website is to have it published as soon as possible after the public release of SharePoint 2013 and to use it during the upcoming weeks as a platform for us to show you what can be achieved with regard to building great public-facing website on SharePoint 2013. SharePoint 2013 has been released just a few hours ago, so I guess we did it. Keep in mind that it’s only the very first release of our website and we will be changing it and adding new functionality to it in the next weeks. With that, please be understanding but also have your eyes open, be critical and curious and, what’s most important, tell us what you think of our effort and the result.
The Requirements
When we were designing for our new website we defined some requirements to help us decide what we wanted to achieve. Some of those requirements are functional and some are technical. Following is an overview of the most important requirements that made it to this release.
Highly-optimized
On our previous website we used Mavention Flex Layout and other products from our WCM suite to optimize the site for the Internet. With the new version of our website we wanted to achieve at least the same result: being able to use all of the content management capabilities offered by the SharePoint platform and yet have a highly-optimized public-facing website.
All devices-friendly
When building our previous website we didn’t really spend time on optimizing the experience for mobile devices. A year and a half later, given the continuously increasing usage of mobile devices and the near release of Microsoft Surface, we thought that we could no longer get away with a single user experience.
Multilingual
In the last year and half we noticed that nearly the half of our visitors come from countries other than the Netherlands. In comparison, none of our content except for the majority of blog posts was presented in English. With that we decided that we had to provide better experience to our foreign visitors.
Fresh
Although our previous website didn’t feel dated yet, we thought that it was time for a new design: one that would allow us to support new devices and better present our corporate identity.
SharePoint 2013 showcase
Here at Mavention, SharePoint is the only thing we do: it’s our only focus and we strive to excel in it. With that we decided that we had to have a website that would showcase what SharePoint 2013 offers and to what extent we understand the new capabilities and can leverage them for building great public-facing websites.
How we did it?
We worked hard to have our new website released so quickly. So what did we and how did we do it?
We’ve done quite some work to achieve what you can see now and which is way too much for a single article. In the upcoming ‘Mavention.nl v3: How we did it?’ series we will step-by-step walk through what we’ve done: from the architectural choices to the implementation. Stay tuned!
In the meanwhile, check out http://www.mavention.nl
July 19th, 2012 at 4:42 pm
I like the dropdown to show a picture on the tiles – before you realize you're looking at their movements mindlessly for over a minute…
July 19th, 2012 at 4:56 pm
Hi Waldek,
Was the new site done without using Flex Layout? The HTML seems far too clean to be SP out of the box. If this is possible with just SP2013 I'll be a happy boy.
James.
July 19th, 2012 at 10:20 pm
Hoi Waldek,
Wat een prachtig resultaat hebben jullie opgeleverd.
Mooie dropdowns, overzichtelijk en intuïtief.
Siebe
July 20th, 2012 at 1:44 am
Hi Waldek
Did you have access to SP2013 during the private beta, and therefore have some prior development done on the new site?
Or have you done a full redesign in just a couple of days?
Dave
July 20th, 2012 at 6:53 am
We haven't used Flex Layout at all. In fact we used very little custom code. SharePoint 2013, even though it's a Preview, offers great capabilities out of the box and just by leveraging them you can get great results.
July 20th, 2012 at 6:53 am
Dankjewel, Siebe :D
July 20th, 2012 at 6:55 am
We had some things done in advance, such as the UI design and content migration, but we built the website using the B2 bits made publicly a few days ago.
July 20th, 2012 at 7:04 am
I also wonder about the clean code. Also nice to see responsive design.
But I have to disagree with Nico, the design is very bad. It is ugly — I generally don't like Metro style tiles, but in this case it is even worse, because the color is hard on the eyes (try to actually read whats written on them!) and way too big.
The dropdown tiles is a terrible idea. For example in http://www.mavention.nl/mavention it is pointless. Better to reverse it — picture should be the default background ant the text drops on mouseover.
In other pages it disrupts the reading experience (hard enough in it's own right due to the small font) when the tile suddenly "drops".
July 20th, 2012 at 7:54 am
Thank you for your feedback. We appreciate your feedback and will take it into account for future releases of our website in the upcoming months.
July 20th, 2012 at 9:16 am
If that's out of the box this is great news. Hopefully you'll reveal how you've done this in your blog posts. There's no evidence of SharePoint (or ASP.Net) at all. Apart from the odd web part div and style library reference. Nice work.
July 21st, 2012 at 3:46 pm
Thank you and I will definitely be blogging about how we built our site so stay tuned!