Cireson Cohesive Design Preview

[Deleted User] · May 2016

Yesterday, we received a great (and perfectly timed, I might add) comment from Peter (I hope it wasn't Peter Zerger making this comment) on one of our videos... https://vimeo.com/141798472

I gave a shot answer to his comment, because that's all I can really do on Vimeo - so here is my expanded answer with some background, updates and even - dare I say... screenshots below!

Here's a little background on this for those who may not have seen the video mentioned above, or who did not attend Cireson Innovate 15 last year.

We gave a presentation on the direction and vision of working with the Cireson Portal across many different types of devices. Specifically, we showcased what the mobile version, in particular, *could* look like. The changes we showed were very much in the beginning stages of design at that time and we knew would require significant framework updates to the Cireson Portal to put into place.

We started our efforts even before we made our presentation, and has been on-going since way back in v4 days. This has been one of our primary focus areas to complete in our current pr5.x phases. As you can imagine there are a lot of things to take into consideration when implementing our vision into reality. Specifically, we had to make a really philosophical decision; Adaptive vs. Responsive.

I won't go too deep into this other than to give you a quick example I myself used from css-tricks.com:

Responsive sites and adaptive sites are the same in that they both change appearance based on the browser environment they are being viewed on (the most common thing: the browser's width).

Responsive websites respond to the size of the browser at any given point. No matter what the browser width may be, the site adjusts its layout (and perhaps functionality) in a way that is optimized to the screen. Is the browser 300px wide or 30000px wide? It doesn't matter because the layout will respond accordingly. Well, at least if it's done correctly!

The reality is that we work with A LOT of data in the Cireson Portal, both from a Self-Service and Analyst perspective. With that in mind, Cireson chose the Adaptive approach to ensure we can actually fit all of this data into a structured context.

OK, now that we've gotten all of that out of the way. Let's get on to the reality of where we are...

We are freaking golden! All of our efforts have paid off significant dividends. Pretty much (at the time of this post) everything we have aimed to make work in an Adaptive is working fantastically.

At the beginning of this article I mentioned that the timing of Peter's comment couldn't have come any better. Well, we have just about concluded this effort so it's time for me to show off what this looks like in reality. Note, I took these screenshots from my personal mobile phone, a Samsung S6 Active using Chrome as my browser. That should give you enough information on what my screen-size and browser is for your own comparisons. Also, please note that the version I am showing below is in our development and testing environment, which as you can imagine is pretty much out of the box with no custom styling etc... so keep that in mind.

Believe it or not, screenshots off my phone are HUGE! So I had to create an album in Flickr to accommodate what I wanted to show you. I'll put direct links to the images below for those of you behind a corporate firewall that isn't friendly to social sharing sites like this.

Direct Link to Album

What the album looks like... Sorry - clicking on the image doesn't open the album, had to find out the hard way. Please use the direct link above!

Direct Link to Album

There was one quick benefit to adding all the photos to Flickr, it allows for me to provide a description for each photo. Not a bad thing so you know what you are looking at... below you can see where that description shows up:

Links to files directly for those of you not able visit Flickr
Cireson Portal Login Screen - Adaptive 01
Cireson Portal "My Work" - Adaptive 02
Cireson Portal - Digging into an Incident - Adaptive 03
Cireson Portal - Scrolling down to the Incident's Action Log - Adaptive 04
Cireson Portal - Showing off the Affected CI pickers - Adaptive 05
Cireson Portal - Checking out the navigation menu - Adaptive 06
Cireson Portal - Scrolling down the navigation bar - Adaptive 07
Cireson Portal - Self-Service Home Page - Adaptive 08
Cireson Portal - SSP Top Requests and Favorite Requests - Adaptive 09
Cireson Portal - As an Analyst, clicking the New button - Adaptive 10
Cireson Portal - Selecting Work Item - Adaptive 11
Cireson Portal - Creating an Incident - Adaptive 12
Cireson Portal - Incident Quick Create - Adaptive 13
Cireson Portal - Incident from Template - Adaptive 14
Cireson Portal - New Incident - Adaptive 15
Cireson Portal - Showing off Incident Tasks - Adaptive 16
Cireson Portal - A quick peek into the Admin menu - Adaptive 17
Cireson Portal - Search - Adaptive 18
Cireson Portal - Specifying a Search area - Adaptive 19

I hope you enjoyed this sneak peek at what is coming in the very near future, and how we are achieving our vision that was shown to you in the video and at Innovate 15!

Thanks,

Chris

Peter_Settle · May 2016

This comment was actually added by me.

We have pushed out our html 5 formatted portal, however its not best viewed on a mobile device.

However I am well impressed with the above and am now looking forward to the 5.2 release.

[Deleted User] · May 2016

Ha, thanks for that, Peter. Glad to hear you are impressed. We have a lot of great features and changes coming down the pipe now that we have this in place!