Difference between Responsive Web Design (RWD) and Adaptive Web Design (AWD)

Responsive Web Design (RWD)


The key elements that make up a Responsive website are CSS3, media queries, the @media rule, and fluid grids that use percentages to create a flexible foundation. It is also fundamental to use flexible images, flexible videos, fluid type and EM’s instead of pixels. All of these key points allow the responsive website to modify its layout to suit the device.


Responsive design is client-side which means the page is sent to the device browser (the client), and the browser then modifies the appearance of the page in relation to the size of the browser window.

The definition of a responsive website is that it will fluidly alter its composition to improve the accessibility of content depending on the screen size of the browser window.



Adaptive Web Design (AWD)


Adaptive web design uses predefined layouts that have been carefully constructed for a variety of screen sizes. A particular layout is activated when the screen size of the device viewing the website is detected and matched with a style sheet.


Adaptive design is predominantly server side. This means that the web server does all of the work of detecting the various devices and loading the correct style sheet depending on the attributes of the device. As well as the layout changing depending on the size of the screen they can also change depending on conditions like whether the device has a retina display or not. The server can detect this and display high quality images for retina display devices like iPads and lower quality images for standard-definition displays.

The downsides to AWD are that initial construction is very costly as you have a lot of layouts to design. Also to maintain and update all of these layouts can be very time consuming which will therefore cost a lot of money.

Add a Download link or button after filling the contact from 7 using jQuery in wordpress

Step1:

1. Install "Contact From 7" WordPress plugin

Step2:

1. Create a from Dashboard - > Contact from 7 - > Add New
2. Copy the Short-code example:

[contact-form-7 id="658" title="Contact Form"]

Note: Change the short-code with yours

Step3:

1. Add Short-code to your page where you wanted to display your Contact from.
2. Inspect your page and you can find an div with id above the from which looks like

<div role="form" class="wpcf7" id="wpcf7-f656-o1" lang="en-US" dir="ltr">

Step4:

1. Save the ID , we will  use it as jQuery selector.

Now here comes the script

Before adding this script check weather you have included the jQuery Library before your script

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

// Ignore this if you have included the library.

<script>
$(document).ready(function() {

$downloadurl =  "http://www.webiste.com/download.pdf"; 

// File to be downloaded
// you can add this url dynimcally if you have multiple forms in different pages using ACF plugin

$('#wpcf7-f656-o1').find('.wpcf7-submit').on("click", function(){ 

// on Click of Submit button
// #wpcf7-f656-o1 is my form id which we copied earlier, use your id here

setTimeout(function()
{

if($('.wpcf7-response-output').hasClass('wpcf7-mail-sent-ok'))
{
$('.wpcf7-form').prepend("<a href="+$downloadurl+" class='download_link' target='_blank'>Download Pdf</a>");

$('.download_link').on("click", function(){

// To reload the page after downlading the file to reset the from for next download.

location.reload(true);
});
}
},2000)

// Timeout for 2 seconds

});
});

</script>

What is AngularJS?

AngularJS is an open source web application framework. It was originally developed in 2009 by Misko Hevery and Adam Abrons. It is now maintained by Google. Its latest version is 1.4.3.

Definition of AngularJS as per documentation is as follows 

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code you currently have to write. And it all happens within the browser, making it an ideal partner with any server technology.

Advantages of  AngularJS

1. AngularJS is a powerful JavaScript based development framework to create SPA (single page application).

2. AngularJS provides developers options to write client side application and it uses MVC framework.

3. AngularJS is cross-browser compliant.

4. AngularJS is open source, completely free, and used by thousands of developers around the world.

Core Features

Data-binding - It  automatically synchronizes data between model and view components.

Scope − These are objects that refer to the model. They act as a glue between controller and view.

Controller − These are JavaScript functions that are bound to a particular scope.

Services − AngularJS come with several built-in services for example $http to make a 

XMLHttpRequests. These are singleton objects which are instantiated only once in app.

Filters − These select a subset of items from an array and returns a new array.

Directives − Directives are markers on DOM elements (such as elements, attributes, css, and more). These can be used to create custom HTML tags that serve as new, custom widgets. AngularJS has built-in directives (ngBind, ngModel...)

Templates − These are the rendered view with information from the controller and model. These can be a single file (like index.html) or multiple views in one page using "partials".

Routing − It is concept of switching views.

Model View Whatever − MVC is a design pattern for dividing an application into different parts (called Model, View and Controller), each with distinct responsibilities. AngularJS does not implement MVC in the traditional sense, but rather something closer to MVVM (Model-View-ViewModel). The Angular JS team refers it humorously as Model View Whatever.

Deep Linking − Deep linking allows you to encode the state of application in the URL so that it can be bookmarked. The application can then be restored from the URL to the same state.

Dependency Injection − AngularJS has a built-in dependency injection subsystem that helps the developer by making the application easier to develop, understand, and test.

The AngularJS Components

The AngularJS framework can be divided into following three major parts

ng-app − This directive defines and links an AngularJS application to HTML.

ng-model − This directive binds the values of AngularJS application data to HTML input controls.

ng-bind − This directive binds the AngularJS Application data to HTML tags.