Monday, January 27, 2014

Responsive Web Design

 

What it is

A web application developed based on the responsive web design concept will adopt the layout of the application based on the screen size and orientation. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.

When designing a web in responsive manner same HTML content will be maintained, but it will be viewed in different layouts when user switches among different browser sizes. In that way website can server the users by changing the layout of the content so user can view it in more user friendly manner, without too many scrolling.

How the layout changes will be discussed under topic Design patterns

 

Pros

Rather than alienating users on a mobile or tablet device by only offering a desktop solution, a responsive website is flexible and will adapt its layout based upon the size of a user’s screen. This will ensure that your website will always provide your user-base with the richest possible experience. So this will increase your mobile audience which leads to increase your sales.

  •  Increase sales and conversion rates 

Another benefit of responsive design is that the user has an improved site experience as there is no need for redirection, use of standardized Style Sheets (CSS) across devices and unified design approach will also create a consistent look and feel.  Consistent user experience will have a positive impact on your conversion rates as people are familiar with navigation and site or system use across devices.  Responsive design removes some of the barriers that having multiple sites can present.

I.e. in functionality, performance and consistent look and feel. 

  • Consolidate your analytics and reporting

A single responsive site means that you no longer have to track user journeys, conversion paths, funnels and redirections between your sites. Site analytics tools like Google Analytics are now optimized to handle multiple devices and responsive reporting. All of your tracking and analytics will continue to function and be condensed into a single report, allowing for easier monitoring and analysis.

  • Increase your visibility in search engines

By creating one website that adjusts to multiple devices, responsive web design is a must to help optimize your website for search engines. This is because responsive design sites have one URL and the same HTML, regardless of device, which makes it easier and more efficient for Google to crawl, index, and organize content. Contrast this with a separate mobile site which has a different URL and different HTML than its desktop counterpart, requiring Google to crawl and index multiple versions of the same site.

Additionally, Google prefers responsive web design because content that lives on one website and one URL is much easier for users to share, interact with, and link to than content that lives on a separate mobile site.

  •  Save time and cost on site management

A primary benefit of adopting a responsive design is that it takes less time than creating an additional stand-alone mobile site, which has been the traditional approach. Testing across a number of websites also increases your development, support and maintenance overhead. As styles are re-used and optimized by device standardized testing methodologies can also be used.

  • Stay Ahead of the Competition

Less than 5% of websites are currently optimized to take full advantage of the mobile web through responsive web design. Your business has the opportunity to gain a significant edge over the competition by becoming an early adopter.

 

Cons

  • High Design Time

When designing a single website for all the screen sizes it takes high design time and cost as there are too many things to consider as it must be cater all the user preferences in one HTML content. So this will take time & cost at initial stage even it reduces the cost of maintaining several websites and mobile applications.

  • Loose Mobile Focus

As this is designed to cater both desktop and mobile user the mobile focus of the site might get loose when compared with a separate mobile site or mobile application. Mobile users might not see the content they focus on when they visit the site using their mobile.

  • Loose advantages of mobile specific features

Mobile device has many features exclusive to itself like two cameras; front and back, touch and multi-touch, GPS, etc. A web built especially for a mobile device is able to utilize these and other features thus resulting in a very robust web site, something which is not quite possible using the responsive web design.

Design Patterns

When designing a website in responsive manner there are some patterns used to make the site responsive in user preferred manner.

Content Area

Normally is a desktop site there are 2-3 content areas. When it is responsive when the site is browsed in a small screen those must be reduced to one content area. Most common ways of doing it are

· Provide UI Elements to change main content area to additional content

· Animate content area

Ex:-

image

image

Navigation

When making the navigation it is important to give user easy access to navigate for his need. Also those navigation patterns should be patterns which users are already familiar with. Common patterns of navigation on responsive web are:-

  • Make the menu items stacked than being horizontal
  • Show menu items in a combo box
  • Use visual menu icon-menu pops down or from left.

Ex:-

image

Text

When there are text content in the site in mobile screen it is difficult to view all the text. For that following pattern are used.

  • Reduce the font site
  • Show more Hyperlink
  • Text overflow property

Ex:-

image

Forms

When forms are responsive mainly two patterns are used.

  • Stack the form elements
  • Use place holders without labels

Ex:-

image

image

Sunday, January 5, 2014

Attribute Routing in Web API 2

With the release of Web API 2 there are few improved & new features been introduced. Those are

  1. External Authentication
  2. Enabling cross origin request
  3. Use OWIN to host Web API in an Azure worker Role
  4. IHttpActionResult, a New Way to Create Responses in Web API
  5. Attribute Routing
  6. Using $select, $expand, and $value in Web API OData

In this blog I am going to talk about Attribute routing in detail.

Before Web API 2 comes for routing in web API what we have used in conventional routing. In this normally what we have in a single API controller

ex:- Employee Controller

  1. Get(int Id) // Get Employee By Id
  2. Get() // Get All Employees
  3. Post()
  4. Put()
  5. Delete()

You can get more details on conventional routing here

The constraint here is if we want to get Leave Records by Employee Id we will have to create a different controller. We cannot have that in the same controller. Attribute Routing solves this issue. Attribute routing supports some of the URI patterns which are commonly used in REST API’s which are not supported by Conventional Routing.

Party smile

API Versioning

If you have different versions of your API you can specify that in the URI template so the request will be routed to the correct version of the code.  

ex :-

/api/v1/employees
/api/v2/employees

 

Overloaded URI segments

ex :-

/api/employees/1
/api/employees/onsite

Here first one will return employee by ID 1 and second one will return collection of employees who are in onsite.

Multiple parameter types

ex :-

/api/employees/1
/api/employees/2013/06/16

Here 1 is int and other one takes a date time as parameter.

 

Enabling Attribute Routing

Add the following code inside class WebApiConfig. You can find it here.

image

 

public static class WebApiConfig

{

public static void Register(HttpConfiguration config)

{

config.MapHttpAttributeRoutes();

}

}

 

Adding Route Attribute

Following is an example of adding routing attribute

public class EmployeeController : ApiController

{

[Route("customers/{employeeId}/leaves")]

public IEnumerable<Leave> GetLeaveByEmploeeId(int employeeId)

{ ... }

}

 

Route Prefixes

Most of the methods in the controller has a common part in all the URL Templates.

ex:-

public class EmployeesController : ApiController

{

[Route("api/employees")]

public IEnumerable<Employee> GetEmployees() { ... }

[Route("api/employees/{id:int}")]

public Employee GetEmployee(int id) { ... }

[Route("api/employees")]

public HttpResponseMessage CreateEmployee(Employee employee) { ... }

}

 

For this kind of a controller you can use Route Prefix As below.

[RoutePrefix("api/employees")]

public class EmployeesController : ApiController

{

[Route("")]

public IEnumerable<Employee> GetEmployees() { ... }

[Route("{id:int}")]

public Employee GetEmployee(int id) { ... }

[Route("")]

public HttpResponseMessage CreateEmployee(Employee employee) { ... }

}

Route Prefix Can include Parameters as well.

Ex:-

  [RoutePrefix("customers/{employeeId}")]

public class EmployeeController : ApiController

{

[Route("orders")]

public IEnumerable<Leave> Get(int employeeId) { ... }

}

If in case if you want to use a different URL template for a selected method inside a controller which has a route prefix you can override it as below.

[RoutePrefix("api/employees")]

public class BooksController : ApiController

{

[Route("~/api/employees/{emploeeId:int}/leaves")]

public IEnumerable<Leave> GetLeavesByEmployeeId(int authorId) { ... }

}

 

Route Constraints

Route constraints let you restrict how the parameters in the route template are matched. The general syntax is "{parameter:constraint}".

Ex:

[Route("users/{id:int}"]
public User GetUserById(int id) { ... }

[Route("users/{name}"]
public User GetUserByName(string name) { ... }

Here, the first route will only be selected if the "id" segment of the URI is an integer. Otherwise, the second route will be chosen.

Following are the constraints supported.




































































alpha


Matches uppercase or lowercase Latin alphabet characters (a-z, A-Z)


{x:alpha}


bool


Matches a Boolean value.


{x:bool}


datetime


Matches a DateTime value.


{x:datetime}


decimal


Matches a decimal value.


{x:decimal}


double


Matches a 64-bit floating-point value.


{x:double}


float


Matches a 32-bit floating-point value.


{x:float}


guid


Matches a GUID value.


{x:guid}


int


Matches a 32-bit integer value.


{x:int}


length


Matches a string with the specified length or within a specified range of lengths.


{x:length(6)}


long


Matches a 64-bit integer value.


{x:long}


max


Matches an integer with a maximum value.


{x:max(10)}


maxlength


Matches a string with a maximum length.


{x:maxlength(10)}


min


Matches an integer with a minimum value.


{x:min(10)}


minlength


Matches a string with a minimum length.


{x:minlength(10)}


range


Matches an integer within a range of values.


{x:range(10,50)}


regex


Matches a regular expression.


{x:(^\d{3}-\d{3}-\d{4}$)}


 

Optional URI Parameters and Default Values


If you want to make a URL parameter optional then that is also supported in Web API 2. In such a method you can set the default value of the parameter inside the URL template itself.


public class BooksController : ApiController


{


[Route("api/books/locale/{lcid=1033}")]


public IEnumerable<Book>


GetBooksByLocale(int lcid) { ... }


}


Above features have given us the same REST API URL template experience in web API as well.


Happy Coding !!!!