Importance of User Experience Design (UXD)

Introduction

User experience design (UXD) is the process of enhancing user satisfaction with a product by improving the usability, accessibility, and pleasure provided in the interaction with the product. User experience design encompasses traditional human–computer interaction design, and extends it by addressing all aspects of a product or service as perceived by users.

The term User Experience was coined by Donald Norman.

The general idea of user experience is Make things easy for people.

Best Practices for Web UX Design

Understand your user

Understand what they want, what they know, and what they don’t know they want. To design a successful experience, you must research your users:

  • Interview users
  • Create user stories and scenarios
  • Map out the customer journey

See beyond the page

Nowadays, web design requires an even broader skill-set as UX techniques mature.

Related: Reimagine the user experience, create what users love, and transform your business!

Here are a few checkpoints:

  • Does the information architecture make sense?
    For example, consistency is required in labeling for top-level and secondary navigation items.
  • Does the website create an emotional response?
    The colors, visuals, and interaction design must all add up to hook the user into exploring the site deeper.
  • Is accessibility addressed correctly?
    Accessible sites have real business value: they rank better in Google, and access larger audiences.
  • Does the text and visual content go well?
    A site’s design includes all content. If the tone of the copy doesn’t match the visual style, the entire experience starts to dissolve.

Interactions remain the root of all UX

Interactions are not just about when a user clicks something on the site. The moment a user views the design, their brain processes visual interactions at the speed of thought.

Prototype early

Prototyping is the only sure way to gauge success. Usability tests at every iteration – will let you know whether you are on the right track, and what you need to change.

Device-Consistent Experiences

The only future-proof strategy is designing fluid experiences that adapt to any device.

Visual Consistency: Visual consistency ensures that site renders properly regardless of device. The same colors and graphics helps create a familiar experience wherever users log in.

Flexible Layout: When working on web designs, ensure that the layout scales appropriately. Obviously, the same site doesn’t look the same on every device. But the relative placement of menus, search functions, and key calls-to-action (like login) should match across devices. Users become accustomed to location quickly, and don’t want to relearn or switch their mental mapping.

Focus on context: Content suitable on the desktop is not always suitable for mobile. For instance, navigation can be stripped down in a mobile view to simple labels (or even shelved away in a navigation drawer), but they should certainly be fleshed out as you scale up to a tablet or desktop (e.g. horizontal or vertical menus). When you keep context in mind, you ensure that the design isn’t just consistent but also appropriate.

Responsive and Adaptive Design

Responsive Design (RWD) – Everything must be flexible: layouts, image sizes, text blocks . This flexibility, combined with smart use of CSS media queries, gives site the fluidity it needs to work on all devices.

Adaptive Design (AWD) – Design different sites for different categories of devices. Typically AWD sites have up to six variations, based on screen width: 320, 480, 760, 960, 1200, 1600

The mobile-first approach is the best strategies to create a responsive or adaptive design. Designing for the smallest screen and working your way up.

UX design checklist

Note that not all of these points apply to all products, but generally these are the ones that are most relevant.

  • Avoid more than three primary colors
  • Items on top of the visual hierarchy are the most important
  • Primary action is visually distinct from secondary actions
  • Interactive elements are not abstracted
  • Form submission is confirmed in a visually distinct manner
  • Alert messages are consistent and visually distinct
  • Navigation is consistent
  • Room for growth
  • No more than two distinct font families are used
  • Fonts used for text content are at least 12px in size
  • Reserve uppercase words for labels, headers, or acronyms
  • Different font styles or families are used to separate content from controls
  • Font size/weight differentiates between content types
  • Progress indicator for multi–step workflows
  • Foreground elements (like content and controls) are easily distinguished from the background

UI Design: Wireframe, Mockup and Prototype

There is a huge misconception about the actual meaning behind words such as wireframe, mockup, and prototype. They are considered by most as a method to show a design.

The UI design process

The UI design process goes from wireframing to mockups to prototyping, with variation in fidelity for each stage. The prototype is interactive while the wireframe and mockup are both static. Between wireframe and mockup, the wireframe is low-fidelity while mockup is high-fidelity.

UI design different stage

Wireframe

The wireframe is the visual representation of the skeletal framework of a website. Wireframes can be a freehand drawing on a piece of paper or sketches on a whiteboard. It is the fastest way to get your idea ready for brainstorming. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together. The wireframe lacks typographic style, color, or graphics since the main focus lies in functionality, behavior, and priority of content.

Wireframe rendered using Balsamiq

Tools:
Balsamiq
– List of free wireframing applications

Additional Resources:
– Wireframe Showcase
Dribbble

Mockup

Mockup provides high-fidelity, static, design representation. They are visually more appealing, has colors, fonts, text, images, logos etc., giving it final product look-and-feel. Mockups are useful to get early buy-in from a stakeholder. They are a good feedback-gatherer.

Mockup created based on wireframe

Tools:
– Adobe Photoshop/Illustrator
Sketch

Additional Resources:
250 best Photoshop resources
Freebiesbug
Dribbble
Photoshop Etiquette

Prototype

A prototype is a simulation of the final interaction between the user and the interface. It helps users to understand how the functionalities in an application will work. Prototypes help provide proof of concept, more importantly, expose any usability flaws that are not found during the wireframes and mockups stage.

Interactive Prototype

Tools:
UXPin
InVision

Additional Resources:
– ZURB Solidify
Pencil Project

Wireframe, mockup, and prototype have their own characteristics and usage scenarios in a specific stage. How they are used depends on specific requirements.

Drive engagement and enhanced customer experience with Trigent’s UX/UI capabilities. 

Angular 2 Single Page Apps using Routing – Part 5

Have you gone through the earlier four blogs, in this 5-part blog series: `Angular 2 Single Page Apps using Routing – Part 1′ and `Angular 2 Single Page Apps using Routing – Part 2′, Angular 2 Single Page Apps using Routing – Part 3 and Angular 2 Single Page Apps using Routing – Part 4‘?

Update base route configuration file app.routes.ts under app folder:

import { ModuleWithProviders } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from ‘./home/home.component’;
import { CatComponent } from ‘./cats/cat.component’;

// Route Configuration
export const routes: Routes = [
{ path: ”, component: HomeComponent, pathMatch: ‘full’}, //default
{ path: ‘home’, component: HomeComponent },
{ path: ‘cats’, component: CatComponent }, //for cats
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

Update app.module.ts to refer cat.component.ts

import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { HttpModule, JsonpModule } from '@angular/http';

import { AppComponent } from ‘./app.component’;
import { HomeComponent } from ‘./home/home.component’;
import { routing } from ‘./app.routes’;
import { CatComponent } from ‘./cats/cat.component’;
import { PetService } from ‘./pet.service’;

@NgModule({
imports: [ BrowserModule, routing, HttpModule, JsonpModule ],
declarations: [ AppComponent, HomeComponent, CatComponent ],
providers: [ PetService ],
bootstrap: [ AppComponent ]
})
export class AppModule { }


Update styles.css in the root. Media query used for mobile view UI changes.

h1 {
 color: #369;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 250%;
 }
 .navbar {
 margin-bottom: 20px;
 }
 .jumbotron {
 background:transparent url(assets/images/catsdogs.jpg) center top no-repeat;
 height:250px;
 }
 .align-center {
 display: inline-block;
 }
 .btn-hidden {
 display: none;
 }
 /*Start: Media Query*/
 @media screen and (min-device-width: 320px) and (max-device-width: 667px) and (orientation: portrait) {
 .container.page {
 padding:0;
 }
 .container.page div[class^='col-xs-'] {
 padding:0 !important;
 }
 .scroll {
 height:auto;
 }
 .navbar {
 margin-bottom: 0;
 }
 .list-group-item:first-child {
 border-top-left-radius: 0;
 border-top-right-radius: 0;
 }
 .mobile-portrait-hidden {
 display:none;
 }
 .mobile-portrait-visible {
 display:block !important;
 }
 .btn.return-listing {
 border-radius: 0;
 }
 }

@media screen and (min-device-width: 320px) and (max-device-width: 667px) and (orientation: landscape) {
.container.page {
padding:0;
}
.container.page .animal-sel-img.col-xs-12 {
width:50% !important;
padding:0 !important;
}
.container.page .col-xs-12.side-by-side {
width:50% !important;
}
.scroll {
height:280px;
}
}

/*End: Media Query*/


Update app.component.html to set navigation to ‘cats

<nav class="navbar navbar-default">
 <div class="container">
 <div class="navbar-header">
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="#"><i class="glyphicon glyphicon-briefcase"></i> Pet Care</a>
 </div>
 <div id="navbar" class="navbar-collapse collapse">
 <ul class="nav navbar-nav">
 <li [routerLink]="['/home']" [routerLinkActive]="['active']"><a [routerLink]="['/home']">Home</a></li>
 <li [routerLink]="['/cats']" [routerLinkActive]="['active']"><a [routerLink]="['/cats']">Cats</a></li>
 <li><a href="#">Dogs</a></li>
 </ul>

</div><!–/.nav-collapse –>
</div>
</nav>
<div class=”container page”>
<router-outlet></router-outlet>
</div>

Now run ‘npm start’ in the command prompt and see cat listing and details page as expected.

If the cat listing is not displayed check if proxy is blocking the API url using Console in developer tool.

Creating Dogs Component

Dog component is similar to creating cat component, so try it yourself.

Angular 2 Single Page Apps using Routing – Part 4

Do go through the earlier three blogs, in this 5-part blog series: `Angular 2 Single Page Apps using Routing – Part 1′ and `Angular 2 Single Page Apps using Routing – Part 2‘, Angular 2 Single Page Apps using Routing – Part 3.

Creating `Cats’ Component

Create Cats folder under app folder.

Create cat.component.ts under Cats folder and put the following code in it:

import { Component, OnInit } from '@angular/core';
 import { PetService } from '../pet.service'
 import { Observable } from 'rxjs/Observable';
 import { ActivatedRoute } from '@angular/router';
 declare var $:any; //declartion to use jquery $

@Component({
moduleId: module.id,
templateUrl: ‘cat.html’
})

// Component class
export class CatComponent implements OnInit {
// Private properties for binding
private sub:any;
private cat:string[];

show: boolean = true;

// Private property for binding
cats: Observable<string[]>;

constructor(private petService: PetService) { }

// Load data ones componet is ready
ngOnInit() {
// Pass retreived pets to the property
this.cats = this.petService.findPets(‘cat’);
}

display(id) {
// Retrieve Pet with Id
this.petService.findPetById(id).subscribe(cat => this.cat = cat);
this.show = false;

//Mobile – Show hide listing and details
$(‘.mobile-portrait-hidden’).addClass(‘mobile-portrait-visible’);
$(‘.pet-listing’).removeClass(‘mobile-portrait-visible’).addClass(‘mobile-portrait-hidden’);

$(‘.return-listing’).click(function(){
$(‘.mobile-portrait-hidden’).removeClass(‘mobile-portrait-visible’).addClass(‘mobile-portrait-hidden’);
$(‘.pet-listing’).removeClass(‘mobile-portrait-hidden’).addClass(‘mobile-portrait-visible’);
})
}
}

The component class extends OnInit . When it is ngOnInit method, this is overridden and is called once the component loads.

In the view (cat.html) when the user clicks on the cat’s name, the display function is called with Id of the selected cat. The Id is passed in to the PetService’s findPetById method to fetch a single pet.

this.show = true/false controls the display of ‘Select cat to get the details’ section in the view.

In mobile portrait view only the list is displayed on loading of the listing page. On clicking the name, details are displayed with ‘Return to listing’ button on the top of the details. This is achieved through jquery addClass/removeclass.

Mobile landscape view is similar to desktop view – listing and details section side-by-side. Here the pet’s image in the left is hidden due to space constraint.

Create cat.html under Cats folder and put the following code in it:

<div class="col-sm-2 col-md-3 col-lg-3 text-center hidden-xs">
 <img src="../assets/images/cat.jpg" alt="Cats" class="img-responsive img-circle grow">
 </div>
 <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mobile-portrait-hidden btn-hidden">
 <button class="btn btn-info btn-lg btn-block return-listing"><i class="glyphicon glyphicon-share-alt"></i> Return to listing</button>
 </div>
 <div class="col-xs-12 col-sm-5 col-md-4 col-lg-4 side-by-side pet-listing">
 <div class="list-group">
 <div class="list-group-item active">
 Cats
 </div>
 <div class="scroll">
 <a class="list-group-item" *ngFor="let cat of cats | async" href="javascript:;" (click)="display(cat.id.$t)">{{ cat.name.$t }}</a>
 </div>
 </div>
 </div>
 <div class="col-xs-12 col-sm-5 col-md-5 col-lg-5 side-by-side pet-details mobile-portrait-hidden">
 <div class="list-group">
 <div class="list-group-item active">
 Display details
 </div>
 <div class="list-group-item">
 <div *ngIf="cat" class="details">
 <h2>{{cat.name.$t}}</h2>
 <img src="{{cat.media.photos.photo[3].$t}}" class="img-responsive"/>
 <p><strong>Age: </strong>{{cat.age.$t}}</p>
 <p><strong>Sex: </strong>{{cat.sex.$t}}</p>
 <p><strong>Description: </strong>{{cat.description.$t}}</p>
 </div>
 <div *ngIf="show">
 Select cat to get the details
 </div>
 </div>
 </div>
 </div>

Here we are binding an observable type cat to the view and looping through it with the NgFor directive.

When the user clicks on a cat’s name, the display function is called with Id of the selected cat. The Id is passed in to the PetService’s findPetById method to fetch a single pet and details are displayed in the view.

Depending on this.show status (true/false) the section ‘Select cat to get the details’ is displayed.

The trailing .$t is as a result of the API structure and not an Angular thing.

Create cat.routes.ts under Cats folder. This contains Cat-related routes and then we import and add it to the base route:

import { Routes } from '@angular/router';

import { CatComponent } from ‘./cat.component’;

// Route Configuration
export const catRoutes: Routes = [
{ path: ‘cats’, component: CatComponent },
];


	

Angular 2 Single Page Apps using Routing – Part 3

If you have not gone through my first two blogs, this might be the right time to go through them: `Angular 2 Single Page Apps using Routing – Part 1′ and `Angular 2 Single Page Apps using Routing – Part 2′.

In this blog, I will show the process for updating app.component.html.

<nav class="navbar navbar-default">
 <div class="container">
 <div class="navbar-header">
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="#"><i class="glyphicon glyphicon-briefcase"></i> Pet Care</a>
 </div>
 <div id="navbar" class="navbar-collapse collapse">
 <ul class="nav navbar-nav">
 <li [routerLink]="['/home']" [routerLinkActive]="['active']"><a [routerLink]="['/home']">Home</a></li>
 <li><a href="#">Cats</a></li>
 <li><a href="#">Dogs</a></li>
 </ul>

</div><!–/.nav-collapse –>
</div>
</nav>
<div class=”container page”>
<router-outlet></router-outlet>
</div>

When the browser URL for this application becomes /home, the router matches that URL to the route path /home and displays the HomeComponent after a RouterOutlet (router-outlet) that is placed in the host view’s HTML.

The RouterLink directives on the anchor tags give the router control over those elements. The navigation paths are fixed, so you can assign a string to the routerLink.

The RouterLinkActive directive on each anchor tag helps visually distinguish the anchor for the currently selected “active” route. The router adds the active CSS class to the element when the associated RouterLink becomes active.

Now run ‘npm start’ in the command prompt and see the Home page looks as expected.

PetCare Service to Get Pet Data

 Create pet.service.ts file under app folder. Put the following code.

import { Injectable } from '@angular/core';
 import { Jsonp, URLSearchParams } from '@angular/http';
 import 'rxjs/add/operator/map';

@Injectable()
export class PetService {

constructor(private jsonp: Jsonp) { }

private petsUrl = ‘http://api.petfinder.com/’;

findPets(animal : string) {

// http://api.petfinder.com/pet.find?key=[API_KEY]&animal=[ANIMAL]&format=json&location=texas
const endPoint = ‘pet.find’

let params = new URLSearchParams();
params.set(‘key’, ‘[API_KEY]’);
params.set(‘location’, ‘texas’);
params.set(‘animal’, animal);
params.set(‘format’, ‘json’);
params.set(‘callback’, ‘JSONP_CALLBACK’);

return this.jsonp
.get(this.petsUrl + endPoint, { search: params })
.map(response => <string[]> response.json().petfinder.pets.pet);
}

findPetById(id: string) {

const endPoint = ‘pet.get’

let params = new URLSearchParams();
params.set(‘key’, ‘[API_KEY]’);
params.set(‘id’, id);
params.set(‘format’, ‘json’);
params.set(‘callback’, ‘JSONP_CALLBACK’);

// Return response
return this.jsonp
.get(this.petsUrl + endPoint, { search: params })
.map(response => <string[]> response.json().petfinder.pet);
}
}

Here class is decorated with an @Injectable decorator which tells Angular that this class is meant to be used as a provider to other components. Because of Cross-Origin Resource Sharing (CORS) issue JSONP (JavaScript Object Notation with Padding) is used instead of HTTP to make API request. JSONP supports cross-domain JavaScript requests.

The class has 3 members:

  1. Private property which holds the base Url of the API
  2. Method (findPets) to retrieve list of pets based on type (cat/dog)
  3. Method (findPetById) to get details of a pet by it’s Id

URLSearchParams makes it easier to set query parameters and construct URL rather than manually concatenating.

Replace [API_KEY] with key available in the source code. You can also sign-up at https://www.petfinder.com/developers/api-key and get an API key.

Angular 2 Single Page Apps using Routing – Part 2

In continuation to my earlier blog on the `Angular 2 Single Page Apps Using Routing’ blog series, in this one, I will go through the process required for creating a Home Component.

Creating Home Component

Create Home folder under app folder.

Create home.component.ts under Home folder. Put the following code in it:

import { Component } from '@angular/core';

@Component({
moduleId: module.id,
templateUrl: ‘home.html’
})
export class HomeComponent { };

Setting moduleId: module.id in the @Component decorator will use relative path else Angular 2 will be looking for your files at the root level.

Create home.html under Home folder. Put the following code in it:

<div class="jumbotron hidden-xs">
 </div>
 <div class="animal-sel-img col-xs-12 col-sm-6 col-md-6 col-lg-6 text-center">
 <a [routerLink]="['/cats']" class="align-center"><img src="../assets/images/cat.jpg" alt="Cats" class="img-responsive img-circle"></a>
 </div>
 <div class="animal-sel-img col-xs-12 col-sm-6 col-md-6 col-lg-6 text-center">
 <a [routerLink]="['/dogs']" class="align-center"><img src="../assets/images/dog.jpg" alt="Dogs" class="img-responsive img-circle"></a>
 </div>

The RouterLink directives on the anchor tags give the router control over those elements. The navigation paths are fixed, so you can assign a string to the routerLink.

Routing applications should add a <base> element to the index.html as the first child in the <head> tag to tell the router how to compose navigation URLs.

&lt;base href="/"&gt;

Create base route configuration file app.routes.ts under app folder. Put the following code in it:

import { ModuleWithProviders } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from ‘./home/home.component’;

// Route Configuration
export const routes: Routes = [
{ path: ”, component: HomeComponent, pathMatch: ‘full’}, //default
{ path: ‘home’, component: HomeComponent },
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

The appRoutes array of routes describes how to navigate. Pass it to the Router.forRoot method in the module imports to configure the router.

Each Route maps a URL path to a component. There are no leading slashes in the path. The router parses and builds the final URL for you, allowing you to use both relative and “absolute” paths when navigating between application views.

The empty path in the route represents the default path for the application, the place to go when the path in the URL is empty, as it typically is at the start.

Update app.module.ts to refer home.component.ts and app.routes.ts

import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from ‘./app.component’;
import { HomeComponent } from ‘./home/home.component’;
import { routing } from ‘./app.routes’;

@NgModule({
imports: [ BrowserModule, routing ],
declarations: [ AppComponent, HomeComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }

Update styles.css in the root

h1 {
 color: #369;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 250%;
 }
 .navbar {
 margin-bottom: 20px;
 }
 .jumbotron {
 background:transparent url(assets/images/catsdogs.jpg) center top no-repeat;
 height:250px;
 }
 .align-center {
 display: inline-block;
 }

Angular 2 Single Page Apps using Routing – Part 1

In this 5-part blog series I will go through a PetCare application to explain the concept of Single Page App using a router component.

Given below is a screenshot of how the final app output will appear  in both desktop and mobile devices:

Prerequisites

This blog is for people familiar with basic Angular 2 and Twitter Bootstrap concepts.

If you are new to Angular 2.0 check out

You also need Node.js up and running and NPM (Node package manager) installed.

Verify that you are running at least node v4.x.x and npm 3.x.x by running node -v and npm -v in a terminal/console window.

Download Nodejs: https://nodejs.org/en/download/

Getting Started

Download Angular 2 QuickStart from https://github.com/angular/quickstart, uncompress and rename the folder ‘petcare’ (you can name the folder as you wish).

If you have Git installed then you can clone the quickstart git repository using the command

git clone https://github.com/angular/quickstart petcare

If you explore ‘petcare’ folder you will find some testing related files you can ignore it.

In windows command prompt or node.js command prompt navigate to the ‘petcare’ folder and run the command

npm install

This will install all the dependencies.

 Adding Twitter Bootstrap

Run the following command to install bootstrap 3 latest version and save the dependency to package.json

npm install bootstrap@3 --save

Then run the following command to install jquery latest version and save the dependency to package.json

npm install jquery --save

Add the following in the head section of index.html above ‘Polyfill(s) for older browsers’ comment tag

 <!-- Bootstrap CSS -->
 <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
 <!-- Jquery JS -->
 <script src="node_modules/jquery/dist/jquery.min.js"></script>
 <!-- Bootstrap JS -->
 <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

 Creating root component

Create a file app.component.html under app folder and add the following HTML code

<nav class="navbar navbar-default">
 <div class="container">
 <div class="navbar-header">
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="#"><i class="glyphicon glyphicon-briefcase"></i> Pet Care</a>
 </div>
 <div id="navbar" class="navbar-collapse collapse">
 <ul class="nav navbar-nav">
 <li><a href="#">Home</a></li>
 <li><a href="#">Cats</a></li>
 <li><a href="#">Dogs</a></li>
 </ul>
 </div><!--/.nav-collapse -->
 </div>
 </nav>
 <div class="container page">
 content here
 </div>

In app/app.component.ts update ‘template’ to templateUrl: ‘app/app.component.html’

You can also use template and put the above HTML code between “ (backticks) available below the ‘Esc’ key.

Make changes in package.json

(line: 6) "start": "tsc && concurrently "npm run tsc:w"" ""npm run lite"" ""
 to
 ""start"": ""concurrently ""npm run tsc:w"" ""npm run lite"" ""

In command prompt in ‘petcare’ folder now run

npm start

If you see the output as below in your browser then twitter bootstrap is added properly to your app

This is the first part of a 5-part blog series.  Don’t miss the next four!

Reference: Based on the tutorial article Routing Angular 2 Single Page Apps with the Component Router by Chris Nwamba on scotch.io

Creating Custom Master Page Using Design Manager

Design Manager is a collective set of pages and functionality in SharePoint 2013 that guides users through the design process. It gives one the ability to map a local drive to a site’s Master Page Gallery and import HTML and CSS files into SharePoint. From there, SharePoint actually converts the HTML files into a Master page.

Given below are detailed steps on creating a Custom Master Page using Design Manager.

Please note that Design Manager is only available on sites with the publishing features enabled.

Step 1: Welcome

Welcome screen which display two useful links:  ‘Import a design package’, and ‘Pick a pre-installed look’.

Import a design package: On this screen user can upload design package and apply the branding to the site.

Pick a pre-installed look: User is directed to ‘Change the look’ screen. On this screen the user can select suitable theme and apply.

 Step 2: Manage Device Channels

This screen shows the device channels already set up on the site and gives options to set up additional device channels. Using device channels, different master pages for different devices or browsers, can be applied through the use of keywords that SharePoint looks for in a requesting browser’s user agent string.

 Step 3: Upload Design Files

Here, map a network drive to Master Page Gallery (/_catalogs/masterpage/) and move all branding assets into the SharePoint site.

 MAPPING A NETWORK DRIVE TO THE MASTER PAGE GALLERY

  • Depending on your version of Windows, the steps to start mapping a drive are slightly different:
  • Note: Internet Explorer users, right-click the link and select ‘Properties’. Copy the location displayed beside Address (URL).
  •  Copy the URL provided in step 3 of the Design Manager (marked ‘1’ in above image).
    –  In Windows 7 or Windows Server 2008/2008 R2, click Start > right-click  Computer > map network drive
    –   In Windows 8 or Windows Server 2012, open the Start Screen, type Computer.  Right-click Computer and select Map Network Drive
  • Choose your drive letter
  • Paste the URL you copied from the Design Manager into the Folder field
  • Select whether you want the drive to reconnect at logon. Click Finish and Windows Explorer opens and displays the contents of the Master Page Gallery in all its glory.

In the previous versions of SharePoint, master pages and page layouts were placed in the Master Page Gallery and custom CSS, images, and scripts in the Style Library or other document library. In SharePoint 2013, all branding assets CSS, images, scripts, master pages, and page layouts are placed in the Master Page Gallery.

Create a new folder within the mapped Master Page Gallery and copy all the branding assets into this folder.

If you are using SharePoint Designer 2013, follow the below steps:

  • Open the site
  • Select ‘All files’ from left navigation
  • Navigate to _catalogs > masterpage folder
  • Create new folder to hold all the branding assets [Example folder name ‘Trigent’]
  • Copy paste the files into this folder

Step 4: Edit Master Pages

Here are options for converting an HTML file to a master page, or creating a blank starter master page. Below that, there are two master page files (oslo.master and seattle.master, SharePoint 2013’s out-of-the-box master pages) that have successfully converted.

 CONVERTING AN HTML FILE TO A MASTER PAGE:

  1.  Click Convert an HTML file to a SharePoint master page.
  2. In the Select an Asset dialog, browse to your Trigent folder within the Master Page Gallery, and select the Trigent2013.html file. The Location (URL) field at the bottom of the Select an Asset dialog shows the filename of the selected file

  • Click the Insert button.
  • After a few seconds the Design Manager refreshes, your Trigent2013 file is listed, and its status reads Conversion Successful.

If for some reason your conversion is unsuccessful, you’ll receive a status of Warnings and Errors. If you click the Warnings and Errors link, SharePoint will try to point out where you went wrong.

Generally, it’s due to malformed HTML. Because SharePoint parses through the document, your HTML needs to be XML compliant—make sure tags are closed in the proper order and tag properties are properly enclosed in quotes; and just generally make sure your HTML has the correct syntax.

Validate your HTML using online HTML validator https://validator.w3.org/

  •  Your DOCTYPE needs to be listed in all uppercase letters.
  • Don’t include any <form> tags in your HTML document; SharePoint adds a form automatically during the conversion.

On successful conversion, click the Trigent2013 filename and you can see a preview of your master page.

 MOVING A CONTENT PLACEHOLDER

When creating your own HTML design, you might find it helpful to add a comment to the beginning of the content that will be a page layout and another comment at the end like <!– START Page Mid Content –> to <!– END Page Mid Content –>, so it’s easy to discern where you will move the placeholder at this point.

For this example assume there are 3 sections header, mid content & footer.

  •  Opened Trigent2013.html from the mapped drive in HTML editor. You should also see a corresponding Trigent2013.master file, but you’ll only be working with the HTML file. SharePoint automatically updates the master page file with any changes you make in the HTML file. If you don’t see the master page file, you may just need to refresh the Windows Explorer window by pressing F5.
  • Assuming the mid content div (<div class=”mid-content”></div>) tag is placed between comments <!– START Page Mid Content –> to <!– END Page Mid Content –>, select all the content inside mid content div tag.
  • Cut (Ctrl+X) these lines from the HTML file. (Don’t delete them!) Create a new page in HTML editor and paste (Ctrl+V) the lines in the HTML for later.
  • Save the Trigent2013.html file, and switch back to the preview of your master page in the browser. On refresh you should see the master page with the empty mid content.

  • Now its time to move the placeholder into the mid content area of the page. Scroll to the bottom of the HTML and find the following block of code.
<div data-name="ContentPlaceHolderMain">
 <!--CS: Start PlaceHolderMain Snippet-->
 <!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls"
 Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral,
 PublicKeyToken=71e9bce111e9429c"%>-->
 <!--MS:<SharePoint:AjaxDelta ID="DeltaPlaceHolderMain" IsMainContent="true" runat="server">-->
 <!--MS:<asp:ContentPlaceHolder ID="PlaceHolderMain"
 runat="server">-->
 <div class="DefaultContentBlock" style="border:medium black solid;
 background:yellow; color:black; margin:20px; padding:10px;">
 This div, which you should delete, represents the content area that your Page Layouts and pages will fill. Design your Master Page around this content placeholder.
 </div>
 <!--ME:</asp:ContentPlaceHolder>-->
 <!--ME:</SharePoint:AjaxDelta>-->
 <!--CE: End PlaceHolderMain Snippet-->
 </div>
  •  Cut this code from the HTML (Ctrl+X) and place the cursor within the <div class=”mid-content”></div> tags. Press Enter to create an empty line between the opening <div> and closing </div>.
  • Paste the code snippet (Ctrl+V) in the empty line between the mid-content div tags. Save Trigent2013.html. The preview should update with the yellow block in the mid content area.

  • Delete the text and yellow box this is simply to help you locate the div to position it properly. Select and delete the following content
<div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;">
 This div, which you should delete, represents the content area that your Page Layouts and pages will fill. Design your Master Page around this content placeholder.
 </div>
  •  Save Trigent2013.html and return to the browser and refresh the master page preview. You should see your master page with an empty mid content area.

 ADDING SNIPPETS TO A MASTER PAGE

The Snippet Gallery is a collection of code snippets for various pieces of SharePoint functionality that you can use in your master page. Each snippet is found on the gallery’s ribbon. On selecting the snippet display the actual snippet of code that you can copy and paste into your master page, and an expanding accordion set of options that you can use to make changes to the code snippet if you want.

There are actually two versions of the Snippet Gallery: one for master pages and one for page layouts.

Snippets link is present at the upper-right corner of the page, above the ribbon preview. The Snippet Gallery opens in a new browser tab, so you can easily switch back and forth between the gallery and the master page preview.

EXAMPLE: REPLACING PLACEHOLDER SITE LOGO WITH SHAREPOINT SITE LOGO SNIPPET

  1. Switch to the Snippet Gallery and click the Site Logo snippet in the ribbon.
  2. Scroll down the page to the Customization – Site Logo (SPSimpleSiteLink) section and click the Appearance header to expand it. In the CssClass properties, replace the default text, ms-siteicon-a, with logo.
  3. Still in the Customization – Site Logo (SPSimpleSiteLink) section, expand the Navigation section and in the NavigateUrl field, type ~sitecollection/.
  4. In the Customization – Site Logo (SiteLogoImage) section, expand the Appearance section and delete the default text from the CssClass field. Then expand the Misc section, and in the LogoImageUrl field, replace the default URL in the field with /_catalogs/masterpage/trigent/logo.png.
  5. Scroll up and click the Update button, then select and copy the HTML snippet.
  6. Replace the HTML with the Site Logo snippet you just copied
  7. Save Trigent2013.html, return to the master page preview in the browser, and refresh. The site logo should look exactly the same as it did before.

 Step 5: Edit Display Templates

Used for displaying search results and data. The Design Manager provides you with a view into the display templates folder in the Master Page Gallery, so you can see the available templates that can be used as a starting point for creating any custom template you want.

 Step 6: Edit Page Layouts

Page layouts are basically layout templates for displaying content on each page in SharePoint. All publishing pages are based on a page layout, and each page layout is based on a content type.

Creating custom page layouts will be discussed in detail in the next blog.

 Step 7: Publish and Apply Design

Here you will publish your design assets, page layout, and master page. Then you’ll apply the master page to the site.

 PUBLISHING DESIGN FILES

  • Click the link Go to the Master Page Gallery. The Master Page Gallery opens in a new browser tab.
  • Click the Trigent folder to display its contents and put a check in the box that appears next to the Trigent2013.html file when you hover over the filename.
  • On the ribbon, click the Files tab; then click the Publish button toward the right side.

  • In the dialog that opens, optionally type a comment in the Comments field; then click OK to publish your master page. SharePoint automatically publishes the corresponding Trigent2013.master file.
  • There’s no way to mass publish all the items in this folder from within the Master Page Gallery. We have to take different approach click the Settings menu > Site settings.
  • Under the Site Administration header, click Content and Structure to open the Content and Structure manager.

  • In the left pane of the Content and Structure page, click the + next to Master Page Gallery. Then click the Trigent folder to display its contents in the main window of the page.
  • At the top of the main body, click the icon of stacked check boxes to select all items in the folder.
  • Click the Actions drop-down in the toolbar, and select Publish. In the dialog that appears, optionally type a comment, and then click OK. This publishes all items in the Trigent folder.

  • Select each sub folders in Trigent folder and repeat the publish process for the items in each folder.
  • When everything is published, click the Back to ‘[Site name]’ link in the upper left of the Content and Structure window to return to your site.

 APPLY YOUR CUSTOM MASTER PAGE TO THE SITE

  • Return to the Design Manager tab in the browser.
  • Still on step 7, click the link Assign Master Pages to Your Site Based on Device Channels. This opens the Master Page Settings in a dialog.
  • For the Default drop-down, select trigent/trigent2013. Change the System Master Page setting drop-down to trigent/trigent2013. Click OK to apply your custom master page to your site.
  • System master page setting applies the selected master page to all page types, including settings pages.

Step 8: Create Design Package

A design package is a Windows Solution Package (WSP), sometimes called a SharePoint Solution, which contains your custom branding assets from the site and instructions on where those assets should be deployed. When a design is packaged up in a WSP, it can be imported to other SharePoint sites or farms, and the custom branding you’ve built can be applied to other sites.

 CREATING A DESIGN PACKAGE

  1. In the Design Name field, SharePoint has provided a name for you; it uses the site’s name by default. You can change it if you want. This becomes part of the filename for the design package. The other part is the version number of the design that appears directly under the name field.
  2. You have the option to include the site’s search configuration in the design package. This can be useful if you’ve spent some time customizing the search experience in the site with custom query rules, result types, result sources, and other search-related assets.
  3. Click Create to create your design package. You see a message that SharePoint is working on creating the package, and after a few moments, the Design Manager reappears with a link underneath the Create button.
  4. Click the download link Your package is ready save your WSP to your computer for importing into another site. Save your WSP file to a location on your computer, such as your desktop.

Best Practices for Responsive Web Design

As most of us already know, Responsive Web design (RWD) is an approach by which a website is rendered seamlessly when users switch from their respective desktops/ laptops to handheld devices (mobile or tablet). This is achieved by using flexible grid-based layout and media with intelligent use of CSS media queries.

Given below are some best practices to maximize the benefits of RWD:

  1. Navigation menus
    Navigation is one of the most important aspect of any website. On smaller screens, hiding the main navigation menu is a good approach.An icon, text or combination of both indicates the location of the menu.On smaller screens, the menu is displayed as a simple drop down menu, where the menu slides down and pushes the main content or is displayed as overlay covering the whole screen. If the menu items are more with multiple levels, then push menu is a good option.
  1. Large button links and clickable areas
    Large buttons improve usability. For example, in the announcement list, instead of having “Read more” link for each list item, it is better to make each announcement to block a link, so that the user can click anywhere.
  1. Font size
    The selected font should be readable and maintain the overall feel whether you scale or shrink it.The size ratio between headers and paragraph text should be well balanced.Include adequate contrast to the text, versus the background color and the color of links versus the rest of the site’s content.Also, have bigger fonts and avoid forcing the average user to zoom in.
  1. Use less images
    A recent trend has been to have gigantic screen spanning images, which increase the file size of a page. There should be a good balance between rich visuals and the overall page performance. Effects like background gradients and button hover states, can be achieved by pure Cascading Style Sheets (CSS). For mobiles, especially, this helps to load pages faster.Use fonts for your icons instead of creating images. They are scalable, have cleaner edges, load faster, and are good for retina displays. This optimization works great across devices and screens.
  1. Important information at the top in mobile
    For mobile devices, it is important to place information such as telephone numbers, contact info, ‘buy now’ call to actions etc. right on top. For example, on an e-commerce website, showing the shopping cart at the top, is a better option than placing it elsewhere on the page.
  1. Prioritize Content Differently
    When moving from larger screen displays to very small screens, different layout approaches are required. One of the approaches is to show important information in a section and hide less important portions of the section. Below is an illustration of the same content on a desktop and a mobile device.
  1. Right Reading Width
    Avoid lengthy text, because it is difficult to read. At the same time avoid very short text lengths, as this tends to break the rhythm of reading.  A common practice is to keep line lengths at about 60-75 characters as the line height also contributes to a good reading experience.
  1. Input Methods
    Desktop users use mouse/keyboard to navigate and enter information. But it is a very different experience for touch screen device users to input all information with their fingers. So make the form controls and button size bigger, and have larger clickable areas.
  1. Let content determine breakpoints
    An older approach in responsive design was to use device sizes to determine breakpoints – e.g. 320px (iPhone portrait), 480px (iPhone landscape), and so on. The problem with this approach is that the device landscape is constantly changing, and today’s breakpoint values are likely to get outdated quickly. A better approach is to adjust the breakpoints appropriately based on when the layout breaks.For example, if the navigation bar on your website has five items and this looks bad past a smaller width, then use that as a breakpoint.
  1. Test on Actual Devices for Usability Issues
    Ask some users to test the design on the actual devices for usability issues. Based on the test results make improvements or fix the issues in the design.