This article by Sandeep Kumar Patel, author of Responsive Web Design with AngularJS we will explore the role of AngularJS for responsive web development. Before going into AngularJS, you will learn about responsive “web development in general. Responsive” web development can be performed “in two ways:

• Using the browser sniffing approach
• Using the CSS3 media queries approach

(For more resources related to this topic, see here.)

Using the browser sniffing approach

When we view” web pages through our browser, the browser sends a user agent string to the server. This string” provides information like browser and device details. Reading these details, the browser can be redirected to the appropriate view. This method of reading client details is known as browser sniffing.

The browser string has a lot of different information about the source from where the request is generated. The following diagram shows the information shared by the user string:

Details of the parameters” present in the user agent string are as follows:

• Browser name: This” represents the actual name of the browser from where the request has originated, for example, Mozilla or Opera
• Browser version: This represents” the browser release version from the vendor, for example, Firefox has the latest version 31
• Browser platform: This represents” the underlying engine on which the browser is running, for example, Trident or WebKit
• Device OS: This represents” the operating system running on the device from where the request has originated, for example, Linux or Windows
• Device processor: This represents” the processor type on which the operating system is running, for example, 32 or 64 bit

A different browser string is generated based on the combination of the device and type of browser used while accessing a web page. The following table shows examples of browser “strings:

AngularJS has features like providers or services which can be most useful for this browser user-agent sniffing and a redirection approach. An AngularJS provider can be created that can be used in the configuration in the routing module. This provider can have reusable properties and reusable methods that can be used to identify the device and route the specific request to the appropriate template view.

To discover more about user agent strings on various browser and device combinations, visit http://www.useragentstring.com/pages/Browserlist/.

CSS3 media queries approach

CSS3 brings a “new horizon to web application development. One of the key features” is media queries to develop a responsive web application. Media queries uses media types and features as “deciding parameters to apply the style to the current web page.

Media type

CSS3 media queries” provide rules for media types to have different styles applied to a web page. In the media queries specification, media types that should be supported by the implemented browser are listed. These media types are as follows:

• all: This is used” for all media type devices
• aural: This is “used for speech and sound synthesizers
• braille: This is used “for braille tactile feedback devices
• embossed: This” is used for paged braille printers
• handheld: This is “used for small or handheld devices, for example, mobile
• print: This” is used for printers, for example, an A4 size paper document
• projection: This is” used for projection-based devices, such as a projector screen with a slide
• screen: This is “used for computer screens, for example, desktop and “laptop screens
• tty: This is” used for media using a fixed-pitch character grid, such as teletypes and terminals
• tv: This is used “for television-type devices, for example, webOS “or Android-based television

A media rule can be declared using the @media keyword with the specific type for the targeted media. The following code shows an example of the media rule usage, where the background body color” is black and text is white for the screen type media, and background body color is white and text is black for the printer media type:

@media screen {
body {
   background:black;
   color:white;
}
}
 
@media print{
body {
   background:white;
   color:black;
}
}

An external style “sheet can be downloaded and applied to the current page based on the media type with the HTML link tag. The following code uses the link type in conjunction with media type:

<link rel='stylesheet' media='screen' href='<fileName.css>' />

To learn more about” different media types,visit https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_types.

Media feature

Conditional styles can be “applied to a page based on different features of a device. The features that are “supported by CSS3 media queries to apply styles are as follows:

• color: Based on the” number of bits used for a color component by the device-specific style sheet, this can be applied to a page.
• color-index: Based “on the color look up, table styles can be applied “to a page.
• aspect-ratio: Based “on the aspect ratio, display area style sheets can be applied to a page.
• device-aspect-ratio: Based “on the device aspect ratio, styles can be applied to a page.
• device-height: Based “on device height, styles can be applied to a page. “This includes the entire screen.
• device-width: Based “on device width, styles can be applied to a page. “This includes the entire screen.
• grid: Based “on the device type, bitmap or grid, styles can be applied “to a page.
• height: Based on” the device rendering area height, styles can be used “to a page.
• monochrome: Based on” the monochrome type, styles can be applied. “This represents the number of bits used by the device in the grey scale.
• orientation: Based” on the viewport mode, landscape or portrait, styles can be applied to a page.
• resolution: Based” on the pixel density, styles can be applied to a page.
• scan: Based on the “scanning type used by the device for rendering, styles can be applied to a page.
• width: Based “on the device screen width, specific styles can be applied.

The following” code shows some examples” of CSS3 media queries using different device features for conditional styles used:

//for screen devices with a minimum aspect ratio 0.5
@media screen and (min-aspect-ratio: 1/2)
{
img
{
   height: 70px;
   width: 70px;
}
}
//for all device in portrait viewport
@media all and (orientation: portrait)
{
img
{
   height: 100px;
   width: 200px;
}
}
//For printer devices with a minimum resolution of 300dpi pixel density
@media print and (min-resolution: 300dpi)
{
img
{
   height: 600px;
   width: 400px;
}
}

To learn more" about different media features, visit https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features.

Summary

In this chapter, you learned about responsive design and the SPA architecture. “You now understand the role of the AngularJS library when developing a responsive application. We quickly went through all the important features of AngularJS with the coded syntax. In the next chapter, you will set up your AngularJS application and learn to create dynamic routing-based on the devices.

Resources for Article:

 Further resources on this subject:

• Best Practices for Modern Web Applications [article]
• Important Aspect of AngularJS UI Development [article]
• A look into responsive design frameworks [article]