Developing Responsive Web Applications with AJAX and jQuery

4.3 (3 reviews total)
By Sandeep Kumar Patel
    Advance your knowledge in tech with a Packt subscription

  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Introduction to a Responsive Web Application

About this book

AJAX is a web development technique that allows a web page to be updated with new information without having to reload the page. jQuery is a JavaScript library that harnesses AJAX interactions to allow rapid web development. Together, they are a powerful combination, and are generally considered by frontend web developers as technologies that complement each other perfectly.

Developing Responsive Web Applications with AJAX and jQuery will empower you with the skills required to create responsive web applications in a quick and efficient manner. The book begins by identifying the key benefits of a responsive application for a commercial site, and then covers how to develop a layout using Bootstrap 3 and adding dynamic visuals to your web application using AJAX calls.

By the end of this book, you will be able to develop responsive web applications by combining AJAX development techniques with the jQuery JavaScript library.

Publication date:
July 2014
Publisher
Packt
Pages
248
ISBN
9781783286379

 

Chapter 1. Introduction to a Responsive Web Application

In this chapter, we be introduced to responsive web design followed by an understanding of technology stack that made responsive web application development possible.

The current trend of technology revolution has led us to a point where we can see many wireless devices with different screen size, resolution, and processing capabilities. It is really challenging and difficult to create different versions of web applications for each and every device type. To address this challenge, it needs a design solution that can address these problems. Responsive web design provides the platform and flexibility where we can write code once and publish the application everywhere.

Designing a website to look good at one particular resolution was the standard and that standard was adequate for almost all purposes. Now, more and more people are viewing web content on smartphones and tablets. The most successful websites must have content designed to fit on any size screen or any type of device. Designing content in this manner is also known as responsive web design. We need to give all users, regardless of their access platform, a seamless experience, and responsive web design offers a cost-efficient way of achieving that. Responsive web content can dynamically change size, fonts, and colors to match whatever device your customers might be using.

The most important dimensions of a responsive design are as follows:

  • An adaptive grid-based layout that must be responsive enough to the client-side environment. There are two different approaches for an adaptive layout: the first one is a fixed layout and the other one is a fluid layout. Fluid layouts are always proportional to the screen size.

  • Fluid images must maintain the aspect ratio. To maintain the aspect ratio, we can go for two approaches, either setting the max-height to 100 percent or max-width of 100 percent. This makes the images overflow in either direction. The other way of handling the images is to clip a portion of the image, though it is not recommended.

  • The new CSS3 media queries make the browser more intelligent. Now, browsers can make the decision to load the appropriate CSS at runtime. This makes them adaptable to the client environment.

Note

Responsive design is made possible through the use of three core ingredients: a flexible grid-based layout, flexible images and media, and CSS media queries.

 

Benefits of a responsive design


The most important benefits of responsive web application are as follows:

  • Pleasant user experience in each type of device

  • Reduced development cost compared to developing different applications for each device type

  • Reduced cost on advertising and marketing compared to maintaining campaigns for every application for each device

  • Better indexing in search engines and improved search engine optimization (SEO)

  • Increased conversion rates and lead generation as SEO is increased (visibility of a web application in search engines)

Responsive web design uses a single code base, but in reality, different devices have to be accounted for. While a desktop version can display a lot of content at once, for smaller screens, you need to know exactly what content truly matters. To create a great experience for all users, you need to consider that people will use different devices in different circumstances and with different goals. With a responsive web design, more effort and time will be involved to get the right user experience for your target audience.

If you look into different applications present online such as blogs and sports applications, then you will notice that the end user behaviors are similar and follow a common pattern. To provide the same experience for the end users, the layout and other elements in the application must be designed for customization. This needs more effort and time in developing the layout and the code.

 

Server- versus client-side detection


Addressing the issue of developing applications for different media types and devices can be solved in two ways. The first one is the server-side detection where middleware is responsible for reading the request header sent by the browser and redirects the request to the appropriate version of the application. This requires you to develop a different version of the application. It means an e-commerce site must have a separate code base for each type of device.

The second one is the client-side detection. It should be done by the browser and apply relative CSS based on the device or screen type. With this idea, the responsive design is born. The real benefit is that one has to maintain a single code base for this.

 

The technology stack


The following diagram shows the building blocks for responsive web application development. Each block in the diagram represents a technology that enables responsive web application development.

HTML5

HTML5 is the latest version of HTML, released by the W3C foundation with more modern features included such as more semantics and usability features. This helps in responsive web application development with more ease and less effort. Some of the key points that highlight why HTML5 is a better candidate than other versions of HTML are as follows:

  • Inclusion of new HTML5 elements such as video and audio as native reduces the use of an additional third-party plugin

  • Enhanced existing elements such as form element reduce the need for an additional amount of code to be written

  • Inclusion of Canvas and SVG for graphic rendering and drawing adds additional capabilities

CSS3 and media queries

Features such as media type detection and layout manipulation of media queries are useful to build a responsive layout. Some of the key points of CSS3 are as follows:

  • CSS3 animations and transitions reduce the need for JavaScript processing, favoring, instead, a native implementation that can vastly improve performance on mobile devices where processing power can be quite limited, while falling back gracefully to immediate changes in browsers that do not support them.

  • Support of new measuring units such as rem helps in building a logical relationship among elements' dimensions present inside a page.

  • Ultimately, the vw and vh units will greatly enhance the ability of a developer to size elements relative to the viewport.

  • FlexBox provides numerous benefits with direction-based alignment and element ordering inside a layout. For a responsive design, this means that a default ideal order can be established via the document order to provide greater SEO benefits, while different ordering can be provided based on viewport size, device orientation type, and so on, to display content in the best format for a given use case.

JavaScript

JavaScript brings the capability of feature detection for the browser. It helps in choosing the right component for the end user and makes the browser responsive to its environment.

Some of the key points about JavaScript are as follows:

  • Browser feature detection helps you to find features that are supported by the browser. This helps in helps you to execute the appropriate code in the application.

  • Rendering behavior of the site can be altered using JavaScript.

 

Measuring responsiveness


There are many parameters for measuring the responsiveness of an application. Layout, content, and navigation are the three most important parameters for a responsive web application development. The following diagram shows the three different building blocks of a responsive web application:

  • Layout: While developing a responsive web application for all kinds of devices, the layout should be developed based on the available size. Based on the breakpoints for each device size, the layout gets altered. This includes show and hide of a section in the layout.

  • Content: For small screens, the available viewing space is very small. While developing a responsive web application, the text content must be responsive. It includes the typography, images, and other media elements present inside the page.

  • Navigation: For touch-enabled devices, the navigational elements will be different to those on medium devices. How these navigational items are to be presented to the end user is really a design challenge. It should be rendered seamless to the end user while navigating in any devices.

 

Devices and screens


If you look at the gadget market for handheld devices, you can find a wide range of devices with different screen sizes. If you ask me what the optimal size for a device screen is, I probably could not answer you without knowing the purpose. Each and every device is good for a specific use. So, the optimal size of a screen is directly dependent on the end user.

A wide screen with good graphics and pixel density may be the best fit for a gaming end user. For a regular end user, a small device is a good fit. The web application design must support all these screen sizes. The usability and the user experience must be equivalent to all types of screens. Also, it is much more important when it comes to an e-commerce site. If the end user is browsing the site on a mobile device and the e-commerce device is only designed for a desktop, then it does not generate the same pleasant experience that will lose the leads.

The soul of an e-commerce site is lead generation and it is only possible when the application will provide seamless access to the end user irrespective of the browsing device. This clearly requires the application to be responsive to its environment or adapt itself based on the screen or device.

 

Media types


All these devices (desktops, tablets, mobiles, and laptops) fall in one of the following media types. The following figure shows all the media types listed in the W3C specification:

  • Braille: This is used for braille tactile feedback devices.

  • Embossed: This is used for paged braille printers.

  • Handheld: This is used for handheld devices. Smartphones and tablets do not fall to this.

  • Print: This is used for paged material and for documents viewed on screen in the print preview mode.

  • Projection: This is used for projected presentations, for example, projectors.

  • Screen: This is used primarily for color computer screens and smartphones.

  • Speech: This is used for speech synthesizers.

  • TTY: This is used for media using a fixed-pitch character grid. It includes teletypes, terminals, or portable devices with limited display capabilities.

  • TV: This is used for television type devices. It includes low resolution, color, limited-scrollability screens, and audio.

  • Grid: This is used for visual and tactile media types.

Available expressions for media queries to filter the CSS rules are as follows:

  • width: This is the width of the current window

  • height: This is the height of the current window

  • device-width: This is the width of the device

  • device-height: This is the height of the device

  • orientation: This should be either landscape or portrait

  • aspect-ratio: This is the aspect ratio of the current window

  • device-aspect-ratio: This is the aspect ratio of the device

  • color: This is the number of color bits per color component

  • color-index: This is the number of available colors on the device

  • monochrome: This is the number of bits per pixel in a monochrome frame buffer

  • resolution: This is the resolution of the device

  • scan: This should be either progressive or interlace

 

Media queries


Media queries are one of the best features of CSS3. Using this feature, we can decide which style sheet should be applied on the web page at runtime.

Media queries can be used as external or internal style sheets. An external style sheet is easier to organize; it is not downloaded by browsers that don't support it, but it uses an extra HTTP request. An internal style sheet, on the other hand, does not require an extra HTTP request, but the whole style sheet is downloaded for browsers even if they do not support media queries, and it can be harder to organize.

The following code is an example of an external media queries call:

<link rel="stylesheet" type="text/CSS" media="screen and (max-device-width: 480px) " href="abc.css" />

The following code is an example of internal media queries:

body {
    background: gray;
}
@media all and (max-width: 480px){
body{
    background: blue;
    }
}

Tip

Downloading the example code

You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.

 

Role of media queries


CSS3 provides a new set of features called media queries for responsive web application development. These media queries are helpful for conditional CSS3 used on a page based on the media type, device width, and other parameters. Generally, the following parameters help in applying the correct CSS3 to the web page:

  • Height and width of the device refers to the size of the device

  • Height and width of the browser refers to the viewable area

  • Screen resolution refers to the pixel and color depth of the screen

  • Orientation of the device refers to the portrait or landscape mode

Using media queries, the layout can be designed in the following two ways:

  • The adaptive layout: This is based on a pretty simple idea: instead of using percentage, we will give our layout fixed sizes. The layout will adapt those sizes depending of the width of the browser/viewport, thus creating a layout with different breakpoints.

  • The responsive layout: This is a mix between fluid and adaptive layouts. It will use the relative units of the fluid layout and the breakpoints of the adaptive one.

 

Responsive frameworks


There are many frameworks available from different vendors for responsive web application development. Some of the popular libraries are explored in the following sections.

Bootstrap

Some of the key points about the Bootstrap framework are as follows:

  • Twitter's Bootstrap library is the most popular responsive framework.

  • It is based on mobile-first design strategy. The source code of the projects is available in the SASS and LESS format.

  • Bootstrap 3, SASS, and LESS really helps in customizing modules needed for the project.

  • There are many resources and plugins available on the Internet for the Bootstrap framework.

  • You can get more information from http://getbootstrap.com/.

The Foundation framework

Some of the key points about the Foundation framework are as follows:

  • Foundation framework is yet another popular responsive framework by ZURB foundation

  • Foundation Version 5 follows mobile-first design strategy (designing your site or app for the small device first, and then expanding that to include larger displays and more full-featured devices)

  • The major benefit of Foundation framework is that the rem unit is used for its sizing of fonts and positioning

  • You can get more information from http://foundation.zurb.com/

The Cascade framework

Some of the key points about the Cascade framework are as follows:

  • The Cascade framework is lightweight and modular.

  • The code packages in the Cascade framework are done based on their features.

  • For example, for coloring purpose, there is a color module to be invoked and used. All features of Cascade framework support Internet Explorer from IE6 upwards or degrade gracefully.

  • The whole library comes under four different modules: grid, typography, icons, and components. It has also some reusable web page templates in a different section.

  • You can get more information from http://www.cascade-framework.com/.

The Pure CSS framework

Some of the key points about the Pure CSS framework are as follows:

  • Pure CSS is a lightweight responsive framework by Yahoo Inc.

  • The Pure CSS library is very tiny in size, and is about 4.4 KB minified and compressed version. This library targets mobile devices.

  • The core of this library is Normalize.css. The Normalize library provides layout and styling of the HTML elements.

  • You can get more information from http://purecss.io/.

The Gumby framework

Some of the key points about the Gumby framework are as follows:

  • The Gumby framework is incredibly customizable

  • It's as easy as download, tweak, and deploy

  • Gumby is built on the SASS authoring framework

  • Most eye-catching features in Grid modules such as Basic Grid, Hybrid Grid, Nested Grid, Sematic Grids, Tiles, and Fancy tiles are part of the Gumby framework

  • You can get more information from http://gumbyframework.com/

 

Bootstrap 3 for a responsive design


There are many components and utilities available for responsive web application development in Bootstrap. Bootstrap features are available in the following three different modules:

  • CSS: This module has a lot of standard classes to use and is easily extendable for customization

  • Component: This module has all the reusable built-in components

  • JavaScript: This module has the jQuery plugin in Bootstrap style

Some important features that we are going to use in our web application development are presented in the following diagram:

  • Grid layout: This module has different grid classes for xs, sm, md, and lg type devices. The details of these grid classes are listed as follows:

    • xs stands for extra small devices. For example, a phone's screen resolution is less than 768 pixels.

    • xm stands for small devices. For example, a tablet's screen resolution is greater than or equal to 768 pixels.

    • md stands for medium devices. For example, a desktop's screen resolution is greater than or equal to 992 pixels.

    • lg stands for large devices. For example, a desktop's screen resolution is greater than or equal to 1200 pixels.

  • Typography: This module has different classes based on the font size requirements.

  • Responsive utilities: This module contains classes for conditional classes based on the types of devices.

  • HTML5 elements: This module has default style classes for all HTML5 elements.

  • Helper classes: This module has classes for frequently used alignment and positioning issues.

  • JS components: This module has additional components such as carousel, tooltip, popover, and so on.

 

What are we building?


We are going to use the Bootstrap 3 framework for responsive web application development. In the following chapters, we will build an e-commerce web application that will be responsive in design.

The plan is as follows:

  • Building the layout for the application

  • Populating the content in the layout

  • Integrating the application with social media sites

  • Integrating a payment system with the Add to Cart feature

  • Building a currency converter

  • Debugging and testing the web application for responsiveness

 

Summary


In this chapter, we have learned about the need for a responsive web application and what challenges it brings to a web developer. We have also learned about the latest responsive libraries available for development. We have understood how a responsive layout can increase the user experience. In the following chapter, we will learn to develop a responsive layout using CSS3.

About the Author

  • Sandeep Kumar Patel

    Sandeep Kumar Patel is a senior web developer and the founder of www.tutorialsavvy.com, a programming blog that has been widely read since its inception in 2012. He has over 5 years of experience in object-oriented JavaScript and JSON-based web applications development. He is GATE-2005 Information Technology (IT) qualified and has a master's degree from VIT University, Vellore. You can get to know more about him by looking at his LinkedIn profile (http://www.linkedin.com/in/techblogger). He has received the DZone Most Valuable Blogger (MVB) award for technical publications related to web technologies. His article can be viewed at http://www.dzone.com/users/sandeepgiet. He has also received the Java Code Geeks (JCG) badge for a technical article published on the JGC website. His article can be viewed at http://www.javacodegeeks.com/author/sandeep-kumar-patel/.

    His other books are listed as follows:

    • Instant GSON
    • Responsive Web Design with AngularJS

    Browse publications by this author

Latest Reviews

(3 reviews total)
Purchase process is convenient and support kindle reader
Still working through the book and I found the book to be exactly watt I needed.
it 's ok. No comment. The book is usefull and find easly by the newsletter
Book Title
Unlock this book and the full library for FREE
Start free trial