Monday, 3 November 2014

Azure Portal

The new preview for Azure was announced back in April at Build but I’ve only just seen it. This is there third attempt at the UI after the initial Silverlight then HTML designs.

Demo: https://www.youtube.com/watch?v=xol4nQU3N_c

Steve Sanderson taking you through how Microsoft built the portal: https://vimeo.com/97519516

It’s starts with a Win8 style home page with customisable live tiles that Microsoft are calling the Start board.

You then select from the main menu on the left hand side which opens a drop down which a multitude of options.

Once a feature has been select a vertical pane or window appears, which Microsoft are calling blades. Once you select an item from that blade a new pane opens the right giving you more information about your selected item. This process continues horizontally, as you drill down into your hierarchy of data.

Each blade has a maximise button that full screens the blade you are working on and close button to return to the previous view. Using these techniques Microsoft has given us a wide surface area of horizontal (more blades) and vertical (tall off screen blades) working area.

You can also pin a blade to the home page from a right click context menu, giving you an easy shortcut for future use.

They’ve also used the top of each blade to give an area to action buttons (see the dark area at the top).

The blades have discoverable scrollbars so its not until your mouse is over the blade that you see a vertical scrollbar for more content. Not sure if that is effective for touch… The site generally definitely has touch in mind with big buttons, icons and menu options.

Apparently each blade runs in isolation using iFrames and talks to the host (startboard shell) via apis.

Oh and it has a splash screen on start up:

Here is a few quick screenshots from the old HTML version:

Borderless tabs are used for navigation:

Wizard accordion for multi step.

Friday, 31 October 2014

Creating a clean WebAPI project

Custom validation with DataAnnotations

You can download the source: https://github.com/stevenh77/CustomValidationWithDataAnnotations

Monday, 27 October 2014

CSS3 Show Hide Divs

Here’s an example of showing and hiding divs with a CSS3 animation.

Demo: http://stevenhollidge.com/blog-source-code/showhide/

Sunday, 26 October 2014

How to fix orphaned SQL users

Intro.js

Here’s how to add an intro to your site:

1) Download intro.js from https://github.com/usablica/intro.js/tags (which also contains lots of example usages)

2) Add the bootstrap-responsive.min.css and introjs.css files to the head of your page (see lines 6 and 7)

3) Add data-step and data-intro attributes to the sections of your page where you want the introduction to display (see lines 11, 12 and 13)

4) Add a button or link which starts the intro (see line 14)

5) Add the intro.js file to the bottom of your page (see line 16)

Here is an example runs the intro only the first time a user visits your page

http://stevenhollidge.com/blog-source-code/introjs/index-with-cookie.html

Wednesday, 22 October 2014

Mail Chimp UX

Generally I like Mail Chimp as a company and their UX so I might add to this blog post over time.

Validation

Nothing ground breaking here and it could be more responsive to the user as they insert data but I quite liked the green tick on green background to indicate a valid password. Perhaps the errors could be in a similar style.