Adaptive Evolution: Unveiling the Dynamics of Responsive Web Design

This study looks at Responsive Web Design, which lets people easily visit websites on different devices like computers, tablets, and phones without any problems. The main goal is to help designers and developers understand Responsive Web Design better, whether they are new to it or experienced.

There are a few reasons why this study is important. More and more people are using the internet, especially on mobile devices. Websites need to work well on all devices to be successful. Also, more people are interested in learning about web design.

The study has two main parts: one where existing information is collected (like articles and books), and another where new information is gathered through a survey. The survey asks people from different backgrounds about their device use and what they like on websites. All this data is organized and shown in easy-to-understand charts and images.

Using charts and percentages helps to explain what was found in the survey. Overall, this study helps to explain Responsive Web Design in a simple way, using different kinds of information.

1. Introduction

This study focuses on "Responsive Web Designing," which means creating websites that look good on every device and screen size. Research shows that more and more people are using mobile devices to browse the internet. In 2014, there were more mobile users than desktop users worldwide. If a website does not look right on tablets and phones, it might lose all those visitors. This is especially risky for business websites.

The study aims to talk about why responsive web design is important, how to design and develop responsive websites, current trends and tools, and what users think about it. It's for people who are new to designing or developing websites, like students and beginners.

2. Aims and Objectives

• This research aims to educate web designers and developers who want to learn about Responsive Web Designing.
• It also aims to uncover the inner workings 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 in Responsive web design?
• Are users aware of the responsiveness of a website?

4. Findings

4.1 Introduction

These days, technology keeps changing all the time. What was new yesterday might not be relevant today, and what's current now might be outdated tomorrow. One area where this is especially noticeable is in IT Technology, and websites fall under this category. Websites are mainly used to share information, and nowadays, most people prefer using websites to get information instead of newspapers, radios, or TVs.

In the past, people mostly used computers to access the internet. But now, many people use tablets and mobile phones. There are lots of different types of tablets and phones out there. This is where "Responsive Web Design" comes in. It means making a website that works well on all devices – computers, laptops, tablets, and phones – without any problems.

Making a website that looks good on every device is really hard. In Sri Lanka, web designers are just starting to think about this. How many people visit a website from a mobile phone or tablet depends on how well the website is designed to work on those devices. Sometimes websites have different designs for computers and mobile devices.

4.2 Target Audience

• ?Novice Web Designers?
• ?Novice Web Developers
• ?Students who study web designing

4.3.1 Qualitative Research [Literature Review] - From Desktop to Mobile

The idea of the internet, also known as the "Network of Networks," first emerged in the 1960s. Initially, it was a secret project funded by American Intelligence. The Internet became accessible to European and Asian countries in the 1980s, and it reached Sri Lanka in 1995. The world's first website was created in 1991, marking the beginning of a journey in website design and development over the past 25 years. The main purpose of a website is to provide data and information.

Early website designs were quite complex, often filled with heavy content such as images, text, colours, and animated gifs. Many of these websites had lots of clickable images but lacked proper navigation, forcing users to click on images to access other web pages. However, these features are now considered outdated.

After the year 2000, websites began to undergo a transformation due to issues like slow page-load times and visual inconsistency. Designers started simplifying layouts by using fewer colors and adding more empty spaces. They also reduced lengthy texts and replaced linked images with buttons and navigations.

Later on, designers began to focus more on web usability, human-computer interactions, and design principles such as proximity, proportion, contrast, balance, emphasis, rhythm, repetition, and unity. Additionally, they realized the significant impact typography can have on a website.

In the past, people mainly accessed early websites using desktop computers. However, nowadays, the majority of people (around 60%) prefer to browse the internet using tablets and mobile phones. This shift marks one of the biggest revolutions in history, known as the "Digital Revolution," according to inventors and web developers.

As a result of this change, the appearance and structure of a website can vary depending on the user's device or its type. Therefore, users may encounter significant differences when accessing the same website on different devices.

4.3.2 Qualitative Research [Literature Review] - What is Responsive Web Designing?

Different devices have varying screen resolutions or widths. Tablets typically have smaller screen resolutions than desktop computers and laptops, while mobile phones have even smaller resolutions compared to tablets. The term "Responsive" stems from this diversity.

"Responsive Web Design" refers to the ability to access a website easily from all devices (Desktops, Laptops, Tablets, and Phones) without encountering any viewing issues. Technically, it can be defined as "Optimal viewing of content across all devices."

By employing Responsive Techniques, developers can create websites that cater to all devices. According to numerous web articles, the Responsive Technique gained significant traction around 2013.

If a website isn't responsive, users won't be able to access it properly from a phone or tablet. Because the resolutions of phones and tablets are smaller than desktops, only about a quarter of the website will appear on the screen.

Additionally, all the elements on the website will either collapse automatically or appear in different scales, making the website difficult to navigate and use on mobile devices.

The renowned mobile designer and developer Josh Clark aptly compares Responsive Web design to the adaptability of water in different containers.

He states, "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." This insightful analogy, originally voiced by martial artist Bruce Lee, perfectly encapsulates the essence of Responsive Web design.

In this context, the content represents the water, while the cup, bottle, and teapot symbolize the desktop, tablet, and mobile views, respectively. Just as water adapts to the shape of its container, content should seamlessly adjust to fit the various screen sizes and devices, ensuring a consistent and optimized user experience across all platforms.

Research indicates that the number of global mobile users is rising daily. In 2014, mobile users surpassed desktop users in number.

Website owners can monitor their site traffic and the types of devices used by visitors using tools such as dashboards, analytic widgets, or insight providers like "Google Analytics."

Today, most designers create websites or web templates with the aim of making them accessible across desktops, tablets, and mobile devices. To achieve this, designers rely on grids. These grids divide the page into columns or rows, allowing designers to place each element within the grid lines and remove any unwanted elements.

For example, a slideshow might capture visitors' attention on desktop or tablet views, but it may not be suitable for mobile views. Due to the small screen size, it might not display clearly or could confuse users. Additionally, designers use grid systems to plan the layout and organization of the website, providing a clear idea of the interface for the upcoming web page. Grid systems help ensure that websites are designed and organized effectively.

To enhance user experience, designers have various alternatives at their disposal. One such example is site navigation. Designers can opt for hamburger icons in mobile views instead of lengthy navigation bars.

This simple icon allows users to access website pages quickly and easily. When clicked, the icon reveals a multi-layer drop-down menu, enabling seamless navigation.

The "Less is more" concept has become a popular trend in current website design practices. By embracing simplicity, websites can effectively achieve their main objectives. Moreover, excessive content can lead to longer loading times, posing challenges for smaller devices like mobile phones.

Today, many designers prefer using pure CSS icons, also known as Icon Fonts, instead of images. Icon fonts offer several advantages, including reduced file sizes and faster loading speeds. Unlike images, which can be challenging to make responsive, icon fonts adapt easily to various screen sizes in the responsive design process.

Mr. Jakob Nielsen outlined 10 general principles for interaction design back in 1995. These principles, known as usability heuristics, serve as a guide for designers to systematically inspect interfaces for usability problems.

Additionally, Lidwell, Holden, and Butler (2003) concluded that adhering to well-established design principles increases the likelihood of a design's success.

As mentioned earlier, the proliferation of devices with varying screen widths presents a significant challenge in website design. Developers must constantly test and verify the responsiveness of websites across different screen sizes. This requires patience and careful consideration from designers, who must judiciously remove unnecessary elements like slideshows and hover effects for mobile and tablet versions.

Furthermore, older and less robust web browsers, such as Internet Explorer, may not fully support the code used for responsive design. Additionally, images with low resolutions may lose detail in mobile versions of websites. These challenges have led some to believe that making a website responsive is an exceptionally difficult task.

4.3.3 Qualitative Research [Literature Review] - Developing Process

To make a website responsive, developers rely on HTML and CSS. HTML (HyperText Markup Language) serves as the fundamental building block of a website and is indispensable for its construction.

CSS (Cascading Style Sheets), often referred to as HTML's younger sibling, enables developers to apply styles and enhance the visual appeal of the website, making it creative and visually appealing.

Developers utilize CSS3 Media Queries (@media) to specify different style rules for various devices. This allows the structure or interface of the website to automatically adapt to each device's screen size and characteristics. Additionally, the analyst plans to provide examples to illustrate this concept, focusing on two specific devices.

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

The critical aspect of responsive web design is the width of the device's screen. As per the provided data, the width of an Apple iPad is 1024px, while the width of an Apple iPhone 6 is 375px.

Moreover, there are several CSS properties that aid in making a website responsive.

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

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

{display} -?Defines the visibility. The display property in CSS has two primary values: "block" and "none." When set to "block," the relevant element is displayed as usual, occupying its own line and full width. However, when set to "none," the visibility of the element is removed, effectively making it invisible and not taking up any space on the page. This property is commonly used for hiding elements dynamically based on certain conditions or interactions.

The structure of CSS Media Query is given below.?

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

Developers must include "@media only screen and" followed by specifying the maximum and minimum width of the device using "max-width" and "min-width" properties respectively. Within the curly brackets, developers can then add the CSS styles that will only apply within the specified width range. If the device's width falls within the specified range, the styles will be applied; otherwise, they will not take effect.

If we apply this concept to the widths of the Apple iPad and Apple iPhone 6, the code would look 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 screenshots. In the desktop and tablet views (Apple iPad), three images are displayed in a row. However, in the mobile view (Apple iPhone 6), the images are divided into two rows. Additionally, the sizes of the images are too small, and the image quality has been compromised.

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

< div id = "gallery_01" >
< img class ="img" src = "a.jpg" >
< img class ="img" src = "b.jpg" >
< img class ="img" src = "c.jpg" > 
< /div>        

CSS

.img { width:25% }        

Now, the developer needs to arrange the interface structure for the mobile version. The developer can use the provided codes below to achieve a perfect display for the mobile view.

HTML

< div id = "gallery_02">
< img class ="img" src = "a.jpg" > 
< img class ="img" src = "b.jpg" > 
< img class ="img" src = "c.jpg" >
< /div >        

CSS

.img { width:100% }        

Now the interface of the website will appear like this.?

Next, the developer needs to remove the Gallery (gallery_02) from the mobile version in desktop and tablet views. As mentioned earlier by the analyst, the developer can use the "display" property with "block" and "none" values. The CSS styles should be applied like this:

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

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

@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 the mobile view (375px width – Apple iPhone 6). Gallery_01 will appear in desktop and tablet views. As a result of this query, all the photos will be set to 100% width in the mobile version.

Furthermore, all the images will be placed one after another, and the quality of the images will be preserved.

Example 02 :?

Apply the following CSS to a style sheet and examine how the code works.?

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?

Example 03 :?

Here is another example. Examine the screenshot of the Desktop view given below and type the HTML and CSS codes.?

HTML

< img id="image" src="windows.jpg" />
< p id="text" > 
Windows XP Wallpaper 
< /p >        

CSS

#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 (Galaxy S5). The interfaces of the tablet and mobile versions are given below.

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

Many web browsers come with an "Inspect Element" feature. Developers can access it by right-clicking on a web page and selecting "Inspect Element" or by pressing F12 on the keyboard.

With this tool, developers can temporarily edit codes on any webpage. They can also test or add codes and make changes, giving them a preview of the future website and helping them make decisions.

Inspect Element tools vary in interface and features, but many developers prefer Google's tool because it's user-friendly and has a simple, organized interface.

Alternatively, developers can test a website on different devices using emulation. They can set a pixel range or select any device, and the web browser will adjust automatically. This allows developers to check the responsiveness of the website without needing a tablet or mobile device. Additionally, the Inspect Element tool provides a vertical view of the device.

4.3.6 Qualitative Research [Literature Review] - Bootstrap

These days, most developers rely on Bootstrap (www.getbootstrap.com) to create responsive websites. With Bootstrap, developers can efficiently scale websites and applications across various devices, including phones, tablets, and desktops, using a single code base and CSS media queries.

Bootstrap offers 100% responsive open-source code that developers can customize to fit their needs. Thanks to Bootstrap's responsive grid system, developers no longer need to test website responsiveness pixel by pixel. This saves developers both time and effort.

In addition to the grid system, Bootstrap provides free open-source code for responsive CSS, JavaScript, and jQuery components. Examples include progress bars, tables, slideshows, navigations, buttons, forms, modals, and tooltips.

4.4.1 Quantitative Research - Online Questionnaire Results

The analyst has prepared a brief online questionnaire and analyzed the ideas, experiences, and thoughts of individuals from various social backgrounds. The primary goal of this questionnaire is to gather data and information regarding users' awareness of responsive websites.

Based on the responses from participants, it was found that over 54% of participants spend more than 6 hours per day browsing the internet. Additionally, 40% of participants indicated that they browse the internet using mobile phones and tablets.

According to the analyst's opinion, most of the participants are aware of Responsive Web Design.

This conclusion is drawn from the fact that 86% of participants have noticed differences in the structure (layout) when accessing the same website on desktop, tablet, and mobile devices. Additionally, 68% of participants have indicated awareness of the term "Responsive Web Designing."

In response to the question "What does Responsive Web Designing mean to you?" 60% of participants provided correct answers. The analyst also assessed participants' familiarity with icons by presenting a Hamburger Icon (Mobile Navigation Icon) and asking them to recognize it. However, only 50% of participants provided the correct answer.

Subsequently, the analyst presented two sets of images, each containing screenshots of desktop view, tab view, and mobile view. Approximately 75% of participants were able to correctly identify the Desktop view, Tablet view, and Mobile view.

Participants reported that Facebook, YouTube, Google, and Twitter are among the most popular and frequently visited websites on a daily basis.

They also noted that images, videos, and text are the most common elements they encounter when browsing the internet using a mobile phone.

5. Conclusion

According to the records of the online questionnaire, all the participants who provided correct answers belong to the younger generation. From this observation, the analyst concluded that the younger generation is more aware of Responsive Web Designing, likely because they use many tablets and mobile devices and spend more time on the internet compared to the older generation.

The analyst also noted that most foreign commercial websites are 100% responsive. In today's digital landscape, responsiveness is crucial for a website's existence, as thousands of visitors access these sites daily via tablets and mobile phones. Responsive Web Designing has become a metric for measuring the success or failure of a website, and it directly impacts online marketing efforts. A responsive website is perceived as user-friendly, leading users to recommend it to others.

Companies like Facebook and YouTube have specific responsive strategies. They have developed separate websites for each device. For example, when a user accesses Facebook on a desktop computer, they are directed to www.facebook.com, while on a mobile phone, they are directed to www.m.facebook.com.

The most common grid systems used in Responsive Web Designing include horizontal and vertical grid systems. Developers often use box elements (square shapes) to build the website structure easily.

In the analyst's opinion, Responsive Web Designing Techniques will become increasingly complex in the near future due to the release of various types of modern devices.

6.1 Index - References

Figure 1: Interface of Apple Website in 1997 [Image] (2015)

Available from: https://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: https://www.apple.com [Accessed 23rd March 2016]?

Figure 3: Tablet and a mobile phone [Image] (2013)

Available from: https://www.anandtech.com [Accessed 23rd March 2016]?

Figure 4: Desktop View – Responsive Website [Image]

(2015) Available from: https://www.jurassicworld.com/ [Accessed 23rd March 2016]?

Figure 5: Tablet View – Responsive Website [Image]?

(2015) Available from: https://www.jurassicworld.com/ [Accessed 23rd March 2016]?

Figure 6: Mobile View – Responsive Website [Image]?

(2015) Available from: https://www.jurassicworld.com/ [Accessed 23rd March 2016]?

Figure 7: Desktop View – Unresponsive Website [Image]

(2015) Available from: https://www.archaeology.gov.lk/ [Accessed 23rd March 2016]?

Figure 8: Tablet View – Unresponsive Website [Image]?

(2015) Available from: https://www.archaeology.gov.lk/ [Accessed 23rd March 2016]?

Figure 9: Mobile View – Unresponsive Website [Image]?

(2015) Available from: https://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: https://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/ [Accessed 23rd March 2016]?

Figure 12: Grids [Image] (2015)?

Available from: https://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: https://rrconstruction.lk/ [Accessed 25th March 2016]?

Figure 14: Hamburger icon in Mobile view [Image] (2015)

Available from: https://rrconstruction.lk/ [Accessed 25th March 2016]?

Figure 15: Hamburger icon in Mobile view (Expanded) [Image] (2015)

Available from: https://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: https://danula.me/balm/ [Accessed 25th March 2016]?

Figure 18: Website without CSS [Image] (2015)

Available from: https://danula.me/balm/ [Accessed 25th March 2016]?

Figure 25: Example 02 [Image] (2015)

Available from: https://contentio.no/ikke-responsiv-nettside-det-er-dumt/ [Accessed 28th March 2016]?

Figure 29: Inspect Element – Google Chrome & Opera [Image] (2016)?

Available from: https://nsbm.lk [Accessed 2nd April 2016]?

Figure 30: Inspect Element – Internet Explorer [Image] (2016)?

Available from: https://nsbm.lk [Accessed 2nd April 2016]?

Figure 31: Inspect Element – Mozilla Firefox [Image] (2016)?

Available from: https://nsbm.lk [Accessed 2nd April 2016]?

Figure 32: Bootstrap Website [Image] (2016)

Available from: https://getbootstrap.com/ [Accessed 2nd April 2016]?

Daniel Tolliday (2015)?

What your favorite websites looked like in the 90s [Online] Available from: https://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: https://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: https://getbootstrap.com/css/. [Accessed 03rd April 2016].?

8 RWD problems (and how to avoid them) | Creative Bloq. 2014. [ONLINE]?

Available at: https://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: https://www.bypeople.com/responsive-design-problems/. [Accessed 03rd April 2016].?

A Look Back at 20+ Years of Website Design. 2013. [ONLINE]

Available at: https://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: https://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: https://www.webdesignerdepot.com/2012/11/the-opportunities-and-challenges-of-responsive-design/. [Accessed 03rd April 2016].?

Tutorials. 2016. [ONLINE]?

Available at: https://www.tutorialspoint.com/. [Accessed 02nd April 2016].?

W3Schools Online Web Tutorials. 2016. [ONLINE]

Available at: https://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: https://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: https://alistapart.com/article/fluid-images. [Accessed 02nd April 2016].?

Mobile-first Responsive Web Design. Unknown. [ONLINE]

Available at: https://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: https://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: https://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: https://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: https://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: https://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?- View