Our Blog - Brief Analysis of Responsive Web Design
I. Acknowledgement
I would like to express my deep sense of gratitude to Ms. Sandamali Edirisinghe (Programme Director and Lecturer of National School of Business Management) for guiding me to complete this Final Dissertation. In addition, I would like to express my deepest gratitude to Mr.Dakshika Jayathilaka (Former Director of MAYA Creations (Pvt) Ltd, Software Engineer and Head of the UX Team at WSO2, and Former external lecturer of NSBM) for teaching me about CSS and Responsive Web Designing. Furthermore, I would like to express my thanks to my batch mate; Melan M Yapa (CEO of Design Nine Solutions, Former Employee of MAYA Creations (Pvt) Ltd, and UX Designer of Ideahub (PVT) Ltd for encouraging me and to all the participants who helped me to do Primary Data Collection.

II. Abstract
This research is about Responsive Web Design. As a result of the responsiveness of a website, users can access a website from using all the devices (Desktops, Laptops, Tablets, and Phones) very easily without any physical presence or viewing issues. The main objective of this report is to provide some facts and knowledge to designers and developers who are willing to learn about Responsive Web Designing. Furthermore another main objective is to state the behind the scenes of the responsive technique. The analyst has taken both novice web designers and web developers as target audience.

Analyst had taken some few facts to justify this report. The increment of demand in Web Designing, The increment of Tablets and mobile phone users, Straightly connects to the success and existence of the website, The increment of people who are willing to learn about Web Designing are some of the few examples. From this report readers will get a quick idea about the difficulty of designing and developing a responsive website.

This report contains two main sections; Secondary Data Collection (Literature Review) and Primary Data Collection. Analyst had analyzed several Web articles, Tutorials, E-books, Related dissertations, Images, Lecture notes and Slides to complete Secondary Data Collection. Secondary Data Collection includes History of internet and devices, Technological terms and brief description about Responsive Web Designing, Designing and Developing Processes, Online tools, Frames etc.

Analyst had prepared a small online questioner to get data and information for Primary Data Collection. All the participants of the questioner are not related to IT industry. Participants are various kinds of people who lives and works in different social backgrounds. From this questioner, analyst had analyzed the Users' device usage, Users' knowledge about responsiveness, Users thoughts about icons and elements etc. Subsequently analyst had organized all the data and information that gathered from secondary data collection and primary data collection in a well-organized manner. Analyst had used images to explain some of the concepts; hence readers can quickly get an idea from images before reading the content. All the data and information collected from Primary Data Collection had been presented by using percentages (%) and pie charts.

1. Introduction
This research is based on "Responsive Web Designing" which means; designing a website, suitable to every device and every screen size. According to the researches, the numbers of global mobile users are increasing daily. In year 2014, the number of Mobile users exceeded the number of Desktop users. If a website is not displays properly in tablet and mobile devices, the site will lose all the tablet and mobile visitors. If it is a commercial website, then it will be a huge risk. The analyst expect to discuss about The importance of responsive web design, Designing process and Developing process, Trends, Tools, Frames, and Users' experiences targeting novice designers, developers and students.

2. Aims and Objectives
To provide knowledge to web designers and web developers, who are willing to learn about Responsive Web Designing.
To state the behind the scenes of the responsive technique

3. Key Research Questions
What is Responsive Web Designing?
Is it compulsory to develop a "Responsive" website?
What are the new trends of Responsive web designing?
Are users aware about responsiveness of a website?

4. Findings
4.1 Introduction
In now a day, technology is not a static area. Technology is updating daily. Yesterday's technology is not valid for today. Today's technology will not valid for tomorrow. Hence technology is an amazing fact that updates in every second. One of the best example for technology is IT Technology. Websites can categorize under IT Technology. The main objective of a website is to provide data and information. Today most of the people use websites to get information and knowledge rather than newspapers, radios, televisions and other Medias.

In earlier days, people were accessed internet using computers. But today most of the people use tablets and mobile phones to browse internet. There are various kinds of tablets and mobile phones. The term of "Responsive Web Design" comes with this reason. The meaning of "Responsive Web Design" is "To access a website from using all the devices (Desktops, Laptops, Tablets, and Phones) very easily without any physical presence or viewing issue.

Designing a website to all the devices in the world is a huge challenge. But Sri Lankan web designers have just begun to concern about this technique. The visiting rate from using mobile phones and tablets in a website is depends on the responsive structure of the website. In addition, users can access various kinds of structural websites (One structure for the desktop version. Another structure for the mobile version).



4.2 Target Audience
Novice Web Designers
Novice Web Developers
Students who studies web designing



4.3.1 Qualitative Research [Literature Review] - From Desktop to Mobile
The concept about internet or "Network of Networks" first came to the world in 1960s. It was a secret project handled and sponsored by American Intelligence. Internet was released to European and Asian countries in 1980s and it was introduced to Sri Lanka in 1995. Worlds' first website was created in 1991. The history of designing and development process came a long journey in past 25 years. The main objective of a website is "To provide Data and Information".

The designs of the earlier websites were very complex. The most common feature in old websites was heavy content. This means full of images, texts, colours, and animated gifs etc. Most of the early websites contained with lots of clickable images without proper navigations. As a result of that, users have to click on the images to view other web pages. But these features are now outdated.

Figure 1 : Interface of Apple Website in 1997
Source: (www.news.com.au 2015)


After year 2000 due to the low page-load times and visual inconsistency, the structures and designs of the websites have been started to transform into simple layouts. Designers have started to use simple colours and lot of breathing spaces, reduce lengthy texts, create buttons and navigations instead of linked images etc. Later, designers have started to examine and concern about Importance of Web Usability, Human Computer Interactions and Design Principals such as Proximity, Proportion, Contrast, Balance, Emphasis, Rhythm and Repetition, Unity etc. Furthermore, designers have learnt that Typography can play a major role in a Website.

Figure 2 : Interface of Apple Website in 2016
Source: (www.apple.com 2016)

People were explored early websites via only desktop computers. But today most of the people refer or browse internet through tablets and mobile phones (60%) rather than desktop computers. This is one of the biggest revolution in the history. Inventors and Web Developers call this as a "Digital Revolution". As a result of this incident, the preview or the structure of a website can be different due to user's device or its type. Therefore users can experience a great multiplicity in each website.

Figure 3 : Tablet and a Mobile Phone Source: (www.anandtech.com 2012)



4.3.2 Qualitative Research [Literature Review] - What is Responsive Web Designing?
Different devices have different screen resolutions or widths. The screen width or resolutions of Tablets are smaller than the screen resolutions of Desktop Computers and Laptops. The screen resolutions of mobile phones are smaller than the resolutions of Tablets. The word "Responsive" comes as a result of this reason.

The meaning of "Responsive Web Design" is "To access a website from using all the devices (Desktops, Laptops, Tablets, and Phones) very easily without any physical presence or viewing issues". The technical term can be describe as "Optimal viewing of content across all devices".

Using Responsive Technique, developers have the ability to develop the website targeting all the devices. According to most of the web articles, Responsive Technique was expanded in year 2013.

Figure 4 : Desktop View (Responsive Website)
Source: (www.jurassicworld.com 2015)

Figure 5 : Tab View (Responsive Website)
Source: (www.jurassicworld.com 2015)

Figure 6 : Mobile View (Responsive Website)
Source: (www.jurassicworld.com 2015)

If a website is not responsive, users can not access the website from a phone or tablet. Hence the resolutions of phones and tablets are smaller than the desktop, only ¼ of the website will appear and all the elements in the website will collapse automatically or appear in different scales.

Figure 7 : Desktop View (Unresponsive Website)
Source: (www.archaeology.gov.lk 2015)

Figure 8 : Tab View (Unresponsive Website)
Source: (www.archaeology.gov.lk 2015)

Figure 9 : Mobile View (Unresponsive Website)
Source: (www.archaeology.gov.lk 2015)

The famous mobile designer and developer Josh Clark concludes that "If you put water into a cup, it becomes the cup. You put water into a bottle and it becomes the bottle. You put it in a teapot, it becomes the teapot." [Seven Deadly Mobile Myths] It was originally said by the famous martial artist, Bruce Lee. But according to the analyst's opinion, this is the best statement to describe the real meaning of Responsive Web Designing. The content is like water. Cup, Bottle and Teapot can represent Desktop, Tablet and Mobile views.

Figure 10 : Content is like Water
Source: (www.wikipedia.org)

According to the researches, the numbers of global mobile users are increasing daily. In year 2014, the number of Mobile users exceeded the number of Desktop users. Users can examine their site traffic and types of visitors' devices from using Dashboard, Analytic Widgets or Insight Providers like "Google Analytics".

Figure 11 : Desktop Users Vs. Mobile Users
Source: (www.smartinsights.com 2015)

Today most of the designers are designing websites or web templates targeting all the desktop, tablet and mobile devices. To do this task designers uses grids. This means the page is divides into columns (Horizontal or Vertical lines). After that, designers have the ability to place each element in between the grid lines and remove the unwanted elements.

For an example, a slideshow can get site visitors' attention in Desktop or Tab views. But it's not preferable for the mobile view. Hence the resolution is too small; it will not display 100% clearly or confuse the users. Furthermore designers can get an idea about the interface of upcoming web page. Grid system helps to design and organize the website in a proper way.

Figure 12 : Grids
Source: (www.tutorialrepublic.com)

To give a better view for users, designers can use many substitutes. Site navigation is a beneficial example. Designers can use Hamburger icons to mobile view instead of lengthy navigation bars. It's a very simple icon and users can select the web pages of the website very easily and quickly. When the user clicks on that icon, a multi-layer drop-down will appear.

Figure 13 : Lengthy Navigation Bar in Desktop view
Source: (www.rrconstruction.lk)

Figure 14 : Hamburger icon in Mobile view
Source: (www.rrconstruction.lk)

Figure 15 : Hamburger icon in Mobile view (Expanded)
Source: (www.rrconstruction.lk)

"Less is more" concept is a popular trend in current days. The main objective of a website can be achieved by using simplicity. Furthermore if the website contains lot of content, the site will take lot of time to load. It will create a big issue for smaller devices like mobile phones.

Today most of the designers use pure CSS icons (Icon Fonts) instead of images. Icon fonts help website to reduce the file size as well as reduce the loading speed. In responsive process, some images might difficult to responsive. But icon fonts are not.

Figure 16 : Icon Fonts
Source: (www.fontawesome.github.io/Font-Awesome)

Mr.Jakob Nielsen states 10 general principles for interaction design (1995). He had listed 10 usability heuristics from using the main designing concepts (Design principles). This is the process to systematically inspect the interface for usability problems.

Lidwell, Holden and Butler (2003) conclude that, "The use of well-established design principles increases the probability that a design will be successful" (p.13).

As mentioned previously, there are many numbers of devices with different range of screen widths. Designing a website that works for every device is a huge challenge. As a result of this reason, developers have to always check and test the screen width of the website. To do this, Developers must have patience. Designers must think twice about removing unwanted elements like slideshows and Effects like hover effects for the mobile and tablet versions.

Old and weak web browsers like "Internet Explorer" do not support the codes that use for responsive matter. Images with low resolutions will lose details in mobile version. Due to these massive challenges, some may think "Making a website responsive is the hardest task in the world".



4.3.3 Qualitative Research [Literature Review] - Developing Process
To responsive a website, developers need HTML and CSS. HTML (HyperText Markup Language) is the main foundation of a website. Developers cannot build a website, without HTML. CSS (Cascading Style Sheets) can be defined as the younger brother of HTML. From using CSS, developers can add styles and make the website creative or wonderful.

Figure 17 : Website with CSS
Source: (www.danula.me)

Figure 18 : Website without CSS
Source: (www.danula.me)

Developers use CSS3 Media Queries (@media) to define different style rules for different devices. As a result of that, the structure or interface of the website will automatically adjust in each device. Furthermore the analyst hopes to apply some examples to explain this concept using two specific devices.

The resolution of an Apple IPad = 1024 x 768
The resolution of an Apple IPhone 6 = 375 x 667

The most important fact in responsive web designing is "Width". According to above data, the width of an Apple IPad is 1024px and the width of an Apple IPhone6 is 375px.

In addition there are some CSS properties that help to responsive a website.

{min-width} -
Defines the minimum width of a device

{max-width} -
Defines the maximum width of a device

{display} -
Defines the visibility. Display property has two values. If the value is set to "Block", the visibility of the relevant element displays as usual. But if the value is set to "None", the visibility of the relevant element will disappear.

The structure of CSS Media Query is given below.

@media only screen and (max-width: ) and (min-width: ) { }

Developers must mention "@media only screen and". Next developers must type the maximum and minimum width of the device, inside of the "max-width" and "min-width". Next developers have to type the codes or styles within curly brackets. These codes are valid only to the set range. If the device exceeds the maximum and minimum width, it will not work.

"max-width" must equals to Maximum width of the device. "min-width" must equals to the minimum width of the device or maximum width of the next device, that developer is going to responsive. If the analyst substitute this concept to the above code (Using widths of the Apple IPad and Apple IPhone6), the code will looks like this.

@media only screen and (max-width:1024px) and (min-width:375px) { }
@media only screen and (max-width:375px) and (min-width:0px) { }

Example 01 :
Examine the following screen shots. The desktop view and tablet view (Apple Ipad) contains three images in a row. But in mobile view (Apple Iphone6), images are divided into two rows. The sizes of the images are too small and the image quality has been lost.

Figure 19 : Example 01 - Desktop View
Source: (Analyst's local files)

Figure 20 : Example 01 - Tab View
Source: (Analyst's local files)

Figure 21 : Example 01 - Mobile View
Source: (Analyst's local files)

According to this situation, the developer has to write media queries only for the mobile view (Apple Iphone6). The HTML and CSS codes of the desktop version are given below.


HTML CSS
< div id = "gallery_01" >
< img class ="img" src = "a.jpg" >
< img class ="img" src = "b.jpg" >
< img class ="img" src = "c.jpg" >
< /div>
.img { width:25% }

Now developer has to arrange the interface structure for the mobile version. Developer can write the codes given below to get a perfect display for the mobile view.

HTML CSS
< div id = "gallery_02">
< img class ="img" src = "a.jpg" >
< img class ="img" src = "b.jpg" >
< img class ="img" src = "c.jpg" >
< /div >
.img { width:100% }

Now the interface of the website will appear like this.

Figure 22 : Example 01 – View after @media
Source: (Analyst's local files)

Next developer has to remove the Gallery (gallery_02) of Mobile Version from Desktop and Tablet Views. As the analyst mentioned earlier, developer can use "Display" property with Block and None values. The CSS styles must apply like this.

#gallery_01 {display : block}
#gallery_02 {display : none}

Now gallery_02 (Mobile Version) will disappear. Subsequently, developer has to make gallery_02 visible and remove gallery_01 in mobile version. To do this, developer has to write the CSS that given below.

@media only screen and (max-width: 375px) and (min-width: 0px)
{
#gallery_01 {display : none}
#gallery_02 {display : block}
}

Now gallery_02 (Mobile Version) will appear only in mobile view (375px width – Apple Iphone6). gallery_01 will appear in desktop and tablet views. As a result of this query, all the photos will set to 100% width in mobile version. Furthermore, all the images will place one after another and quality of the images will safe.

Figure 23 : Example 01 – Mobile View : Before Responsive
Source: (Analyst's local files)

Figure 24 : Example 01 – Mobile View : After Responsive
Source: (Analyst's local files)


Example 02 :
Apply the following CSS to a style sheet and examine how the code works.

HTML CSS
@media only screen and (min-width : 320px)
{
body { background-color: brown }
}
@media only screen and (min-width : 480px)
{
body { background-color: yellow }
}
@media only screen and (min-width : 768px)
{
body { background-color: grey }
}
@media only screen and (min-width : 992px)
{
body { background-color: green }
}
@media only screen and (min-width : 1200px)
{
body { background-color: orange }
}

The background colour of the web page will appears in different colours, due to the screen width of various devices.

For 000px - 0320 px = Brown
For 321px - 0480 px = Yellow
For 481px - 0768 px = Grey
For 769px - 0992 px = Green
For 993px - 1200 px = Orange

Figure 25 : Example 02
Source: (www.contentio.no) Edited!


Example 03 :
Here is another example. Examine the screen shot of Desktop view given below and type the HTML and CSS codes.

Figure 26 : Example 03 – Desktop Version
Source: (Analyst's local files)

HTML CSS
< img id="image" src="windows.jpg" />
< p id="text" >
Windows XP Wallpaper
< /p >
#image {
width:50%;
box-shadow: 0 0 3px 0 black;
}

#text{
background-color: black;
width: 50%;
text-align: center;
color: white;
font-size: 1.5em;
padding: 10px;}


Next type the CSS Media Queries given below.

@media only screen and (max-width: 964px) and (min-width: 361px)
{
#image {width: 90%;
box-shadow: 0 0 100px 0 #086F00;
transform: rotate(10deg);
}

#text {background-color: #00CA6A;
width: 78%;
text-align: center;
color: black;
font-size: 3.5em;
padding: 10px;
font-style: italic;
margin-top: 100px;
margin-left: 4%;
text-decoration: underline;
}
}

@media only screen and (max-width: 360px) and (min-width: 0px)
{
#image {width: 80%;
box-shadow: 0 0 30px 0 #FF7C7C;
}

#text { background-color: #CA0000;
width: 78%;
text-align: center;
color: white;
font-size: 3.5em;
padding: 10px;
font-style: italic;
}
}

The maximum and minimum width of the tablet version is set to 964px – 361px (Blackberry Playbook). The maximum and minimum width of the mobile version is set to 360px – 0px (Gallexy S5). The interfaces of the tablet and mobile versions are given below.

Figure 27 : Example 03 – Tablet Version
Source: (Analyst's local files)

Figure 28 : Example 03 – Mobile Version
Source: (Analyst's local files)



4.3.4 Qualitative Research [Literature Review] - Very Important!
Always use % (Percentage sign) to define width instead of em,pt and px
Always use "min-height" or "max-height", when defining the height
Use "em" to define font sizes instead of pt, % and px
Use % (Percentage sign) to margins and paddings
Try to reduce margins
Do not set widths to images


4.3.5 Qualitative Research [Literature Review] - Inspect Element
Most of the web browsers contains "Inspect Element" feature. Developers have to right click on a web page and select "Inspect Element" or Press F12 in the keyboard to open this tool.

By using this element, developers can temporarily edit codes in any webpage. Furthermore, developers can test or add some codes and do some changes. As a result of that, developers can have a vision of the future website and developers have the ability to take decisions (Whether I apply this code or not? Whether I do this change or not?).

Each inspect elements contains different interfaces and features. But most of the developers use Google Inspect Element Tool. Hence it is very user friendly and contains a simple and well organized interface.

Alternatively, developers can test a website on any device with emulation. Developers can set a pixel range or select any device. Afterwards web browser will adjust to that size automatically. As a result of that, developers can examine the responsiveness of the website without using any tablet or mobile device. In addition Inspect Element Tool shows the vertical view of the device too.

Figure 29 : Inspect Element – Google Chrome & Opera
Source: (www.nsbm.lk)

Figure 30 : Inspect Element – Internet Explorer
Source: (www.nsbm.lk)

Figure 31 : Inspect Element – Mozilla Firefox
Source: (www.nsbm.lk)


4.3.6 Qualitative Research [Literature Review] - Bootstrap
Today most of the developers use Bootstrap (www.getbootstrap.com) to build responsive websites. By using bootstrap framework, developers can easily and efficiently scales the websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.

Bootstrap provides 100% responsive open source codes and developers can customize the codes. Because of the responsive grid system of Bootstrap, developers do not need to test the responsiveness of the website, pixel by pixel. As a result of using Bootstrap, developers can responsive their websites for every device in the world and it saves developers' time and strength.

Not only the grid system, but also Bootstrap provides free open source codes for Responsive CSS, JavaScript, jQuerry components. Progress Bars, Tables, Slideshows, Navigations, Buttons Forms, Modals, Tooltips are some of the examples.

Figure 32 : Bootstrap Website
Source: (www.getbootstrap.com)



4.4.1 Quantitative Research - Online Questionnaire Results
The analyst have prepared a small online questionnaire and analyzed some ideas, experiences and thoughts of people who belong to different social backgrounds. The main objective of this online questionnaire is to get data and information about whether users are aware about responsive websites or not.

According to the participants' responses, more than 54% participants browse internet more than 6 hours per day. 40% participants browse internet from using mobile phones and tablets.

Figure 33 : Internet Browsing
Source: (docs.google.com/forms)

Figure 34 : Device Usage
Source: (docs.google.com/forms)

According to the analyst's opinion most of the participants are aware about Responsive Web Design. Because 86% of participants have noticed a difference in the structure (layout), when they access the same website using desktop, tablet, and mobile devices. 68% of participants have answered that they are aware about the word "Responsive Web Designing".

Figure 35 : Difference in websites?
Source: (docs.google.com/forms)

Figure 36 : Heard of Responsive Web Designing?
Source: (docs.google.com/forms)


To "What does Responsive Web Designing means to you?" question, 60% of participants have wrote correct answers. The analyst wanted to know how far that users familiar with icons. Analyst have placed a Hamburger Icon (Mobile Navigation Icon) and asked to recognize the icon. 50% of participants have failed to give the correct answer.

Afterwards analyst has present two sets of images. Each set contains three screenshots of desktop view, tab view and mobile view. Approximately 75% of participants have been able to recognize Desktop view, Tablet view and Mobile view correctly.

Figure 37 : Interface Recognition - 1
Source: (docs.google.com/forms)

Figure 38 : Interface Recognition - 2
Source: (docs.google.com/forms)


Facebook, YouTube, Google, Twitter are the most popular and common sites, participants browses daily. Images, Videos and Text are the most common elements that participants have seen in a website, when they browse the internet using a mobile phone.

5. Conclusion
According to the records of the online questionnaire, all the participants who gave correct answers are belongs to younger generation. From using this fact, analyst had concluded, most of the younger generation are aware about Responsive Web Designing; hence youngsters uses many tablet and mobile devices as well as the internet rather than elder generation.

The analyst has noticed most of the foreign commercial websites are 100% responsive. Without responsiveness there is no existence; hence the sites have been viewed by thousands of visitors daily via tablets and mobile phones. Today Responsive Web Designing is a measurement that can be measure the success or failure of a website. Furthermore it will straightly affect to the Business (Online Marketing). If the website is responsive, users will identify the website as a user friendly website and users might recommend the website to others.

Websites like Facebook and Youtube have specific responsive trends. These companies have developed several websites for each device. For example if the user logs to Facebook using a Desktop computer, the web browser will direct to www.facebook.com. But if the user logs to Facebook using a Mobile phone, the web browser will direct to www.m.facebook.com.

Most common grid systems uses in Responsive Web Designing can be identifying as horizontal and vertical grid systems. Most of the developers have used box elements (square shapes); hence it helps to build the website structure very easily.

According to the analyst's opinion, Responsive Web Designing Techniques will too much complex in near future due to the releasements of various types of modern devices.


By : Danula Randika Wickramaarachchi
From : Sri Lanka
Published Date : 2016.09.01


6.1 Index - References
Figure 1: Interface of Apple Website in 1997 [Image] (2015)
Available from: http://www.news.com.au/technology/online/social/what-your-favourite-websites-looked-like-in-the-90s/news-story/02473e22453b9aba12378c737f598df1 [Accessed 23rd March 2016]

Figure 2: Interface of Apple Website in 1996 [Image] (2016)
Available from: http://www.apple.com [Accessed 23rd March 2016]

Figure 3: Tablet and a mobile phone [Image] (2013)
Available from: http://www.anandtech.com [Accessed 23rd March 2016]

Figure 4: Desktop View – Responsive Website [Image]
(2015) Available from: http://www.jurassicworld.com/ [Accessed 23rd March 2016]

Figure 5: Tablet View – Responsive Website [Image]
(2015) Available from: http://www.jurassicworld.com/ [Accessed 23rd March 2016]

Figure 6: Mobile View – Responsive Website [Image]
(2015) Available from: http://www.jurassicworld.com/ [Accessed 23rd March 2016]

Figure 7: Desktop View – Unresponsive Website [Image]
(2015) Available from: http://www.archaeology.gov.lk/ [Accessed 23rd March 2016]

Figure 8: Tablet View – Unresponsive Website [Image]
(2015) Available from: http://www.archaeology.gov.lk/ [Accessed 23rd March 2016]

Figure 9: Mobile View – Unresponsive Website [Image]
(2015) Available from: http://www.archaeology.gov.lk/ [Accessed 23rd March 2016]

Figure 10: Content is like Water [Image] (Unknown)
Available from: https://en.wikipedia.org/wiki/Responsive_web_design [Accessed 23rd March 2016]

Figure 11: Desktop Users Vs. Mobile Users [Image] (2015)
Available from: http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/ [Accessed 23rd March 2016]

Figure 12: Grids [Image] (2015)
Available from: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-grid-system.php [Accessed 23rd March 2016]

Figure 13: Lengthy Navigation Bar in Desktop view [Image] (2015)
Available from: http://rrconstruction.lk/ [Accessed 25th March 2016]

Figure 14: Hamburger icon in Mobile view [Image] (2015)
Available from: http://rrconstruction.lk/ [Accessed 25th March 2016]

Figure 15: Hamburger icon in Mobile view (Expanded) [Image] (2015)
Available from: http://rrconstruction.lk/ [Accessed 25th March 2016]

Figure 16: Icon Fonts [Image] (Unknown)
Available from: https://fortawesome.github.io/Font-Awesome/icons/ [Accessed 25th March 2016]

Figure 17: Website with CSS [Image] (2015)
Available from: http://danula.me/balm/ [Accessed 25th March 2016]

Figure 18: Website without CSS [Image] (2015)
Available from: http://danula.me/balm/ [Accessed 25th March 2016]

Figure 25: Example 02 [Image] (2015)
Available from: http://contentio.no/ikke-responsiv-nettside-det-er-dumt/ [Accessed 28th March 2016]

Figure 29: Inspect Element – Google Chrome & Opera [Image] (2016)
Available from: http://nsbm.lk [Accessed 2nd April 2016]

Figure 30: Inspect Element – Internet Explorer [Image] (2016)
Available from: http://nsbm.lk [Accessed 2nd April 2016]

Figure 31: Inspect Element – Mozilla Firefox [Image] (2016)
Available from: http://nsbm.lk [Accessed 2nd April 2016]

Figure 32: Bootstrap Website [Image] (2016)
Available from: http://getbootstrap.com/ [Accessed 2nd April 2016]

Daniel Tolliday (2015)
What your favorite websites looked like in the 90s [Online] Available from: http://www.news.com.au/technology/online/social/what-your-favourite-websites-looked-like-in-the-90s/news-story/02473e22453b9aba12378c737f598df1 [Accessed 23rd March 2016]

Danula Wickramaarachchi (2015)
CSS Lesson - Chapter 09 [Online] Available from: http://danulawickramaarachchi.weebly.com/------css-35083535349735123530-346134583482-09.html [Accessed 23rd March 2016]

Marcotte, E. (2011) RESPONSIVE WEB DESIGN

Aryal, C.S, 2014. Design Principles for Responsive Web. Finland: Helsinki Metropolia University.

Responsive web design - Wikipedia, the free encyclopedia. Unknown. [ONLINE]
Available at: https://en.wikipedia.org/wiki/Responsive_web_design. [Accessed 23rd March 2016].

What is Responsive Web Design? | Mobile1st. 2016. [ONLINE] Available at: https://mobile1st.com/responsive-web-design/. [Accessed 02nd April 2016]. Inspect Element: How to Temporarily Edit Any Webpage. 2016. [ONLINE]
Available at: https://zapier.com/blog/inspect-element-tutorial/. [Accessed 03rd April 2016].

CSS Bootstrap . 2016. [ONLINE]
Available at: http://getbootstrap.com/css/. [Accessed 03rd April 2016].

8 RWD problems (and how to avoid them) | Creative Bloq. 2014. [ONLINE]
Available at: http://www.creativebloq.com/rwd/responsive-design-problems-12142790. [Accessed 03rd April 2016].

11 Reasons why responsive web design isn't that cool!. 2012. [ONLINE]
Available at: http://www.bypeople.com/responsive-design-problems/. [Accessed 03rd April 2016].

A Look Back at 20+ Years of Website Design. 2013. [ONLINE]
Available at: http://blog.hubspot.com/marketing/look-back-20-years-website-design. [Accessed 14th March 2016].

What is Responsive Web Design? | Mobile1st. Unknown. [ONLINE]
Available at: https://mobile1st.com/responsive-web-design/. [Accessed 03rd April 2016].

Mobile marketing statistics 2016. 2016. [ONLINE]
Available at: http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/. [Accessed 01st April 2016].

The Opportunities And Challenges Of Responsive Design | Webdesigner Depot. 2012. [ONLINE]
Available at: http://www.webdesignerdepot.com/2012/11/the-opportunities-and-challenges-of-responsive-design/. [Accessed 03rd April 2016].

Tutorials. 2016. [ONLINE]
Available at: http://www.tutorialspoint.com/. [Accessed 02nd April 2016].

W3Schools Online Web Tutorials. 2016. [ONLINE]
Available at: http://www.w3schools.com/. [Accessed 02nd April 2016].

Responsive Web Design (RWD) and User Experience. 2014 [ONLINE]
Available at: https://www.nngroup.com/articles/responsive-web-design-definition/. [Accessed 04th April 2016].

Nielsen, J (1995) 10 Usability Heuristics for User Interface Design [Online]
Available from: http://www.nngroup.com/articles/ten-usability-heuristics/ [Accessed 01st April 2016]

Lidwell W, Holden K, Butler J (2003) Universal Principles of Design, Rockport Publishers

6.2 Index - Bibliography
Fluid Images - An A List Apart Article. 2011. [ONLINE]
Available at: http://alistapart.com/article/fluid-images. [Accessed 02nd April 2016].

Mobile-first Responsive Web Design. Unknown. [ONLINE]
Available at: http://www.headfirstlabs.com/books/hf-mw/hfmw_ch2.pdf. [Accessed 02nd April 2016].

6 Web Design Trends You Must Know for 2015 & 2016. 2015.[ONLINE]
Available at: http://www.awwwards.com/6-web-design-trends-you-must-know-for-2015-2016.html. [Accessed 02nd April 2016].

Be Careful About These 6 Web Design Trends in 2016. 2015.[ONLINE]
Available at: http://www.awwwards.com/be-careful-about-these-6-web-design-trends-in-2016.html. [Accessed 02nd April 2016].

10 Responsive Design Problems and Fixes | UX Magazine. 2014. [ONLINE]
Available at: https://uxmag.com/articles/10-responsive-design-problems-and-fixes. [Accessed 02nd April 2016].

Why 2013 Is the Year of Responsive Web Design. 2012. [ONLINE]
Available at: http://mashable.com/2012/12/11/responsive-web-design/#lptTBRh585qu. [Accessed 04 April 2016].

Butterworth, A , Unknown. Marrying Inbound Marketing with Usability Best Practices.

LukeW | An Event Apart: Rolling Up Our Responsive Sleeves. 2012. [ONLINE]
Available at: http://www.lukew.com/ff/entry.asp?1494. [Accessed 03rd April 2016].

Seven Deadly Mobile Myths: Josh Clark Debunks the Desktop Paradigm and More. 2012. [ONLINE]
Available at: http://www.forbes.com/sites/anthonykosner/2012/05/03/seven-deadly-mobile-myths-josh-clark-debunks-the-desktop-paradigm-and-more/#31a1386d5270. [Accessed 03rd April 2016].

LaGrone, B , 2013. HTML5 and CSS3 Responsive Web Design Cookbook.

Alija, M.K, 2015. Project Review on Implementation of Responsive Web Design on SharePoint 2013. Finland: HAMK.

7. Appendix
Online Questionnaire Form

8. Comments
Thanks for reading. Leave a comment to let us know what you think...