So why, and more importantly how did we build this site using Office 365? Let’s start with the why first. Office 365 and SharePoint sites are not typically know for their cutting edge design. Functionality is what normally comes to mind, the need for a new intranet site that can store documents and other media content on a large scale. The aim of this website was to challenge the usual perceptions of Office 365 by using the latest design trends to showcase what is possible to create.
I mentioned the use of design trends and this ultimately brings us to the how. One of the first things you will notice is that this website is built as a single page application. This means that everything is dynamically loaded as the user scrolls down the page. We also included animations through simple JavaScript and CSS libraries, which, along with the use of video media, quickly transform pages from static to dynamic. For this particular site we have also used parallax scrolling to provide a sleeker design for the home page. All of these elements bring the site together and make it look modern, elegant and glossy.
As always, user experience and usability of the site were always at the front of our minds. A single page design means site visitors are more likely to view all the content instead of viewing just the home page. Mobile platforms also benefit from this design as the time spent loading multiple pages is diminished. By providing all the superficial information a user might need when they first reach the site we are giving the user a better experience right from the very beginning. There are of course pages that feature more in depth content and these can be accessed through the navigation bar or through the relevant section of the home page.
Responsive design really is a trend that is here to stay. Responsive sites allow users greater flexibility as it suits whatever device and screen size they are using. With the large majority of people now owning more than one device (desktop, laptop, iPhone, iPad etc.) it means that developers need to keep this in the back of their minds when creating new sites. Because of this, we made sure our mobile site looked as sleek as the larger screen version. Elements from the desktop site that aren’t compatible have been changed to allow for a smaller screen, e.g. the video banner being converted to a static image to improve load time. Consistent design and layout mean the branding and overall feel of the site can remain the same, even on the smallest screen.
The main reason we decided to include all the aforementioned design aspects was that these are the kind of features that clients are asking for more and more. We wanted to show what is possible to do with Office 365 and how intranets can be styled creatively and with elegance. If all this is possible, it might be time to start thinking differently about Office 365.