1 CHAPTER 1 INTRODUCTION 1.1 Background For

CHAPTER 1 INTRODUCTION 1.1 Background For years, a lot of web designers have been used graceful degradation principle to make the visitors who use older browser at least can see the content in their website [1]. Graceful degradation designs a website with fully functional in modern browsers, but it will degrade gracefully to the lower level of user experience that is using older browsers or outdated browsers. It means that the websites will not view with fully functional since the features of modern browsers cannot be understood by older browsers, but they still provide basic functionality of a website. There is a better solution for designing website which is progressive enhancement. Progressive enhancement is similar to graceful degradation, but it starts from the basic level of user experience to higher level of user experience that at least should be compatible to all browsers. On the other hand, graceful degradation starts from the complexity and try to fix it in older browser. Progressive enhancement focuses more on the improvement of the design, interaction, and user experience while graceful degradation is more focusing on browser technology. The benefits of progressive enhancement are not only for those using regular desktop or browsers but also for those browsing the content via their mobile devices. It will display the content clearly in the mobile 1 browsers although the browsers do not support the CSS or JavaScript. It means that the structure of the HTML will work regardless the CSS on it. The other benefits are the website can easily corporate with mobile version and easier to maintain. It will be easier to maintain because the basic content and functionalities are separated each other. For example, making changes of the appearances will not affect the content and functionality of the website, and vice versa. The way to build a website with progressive enhancement principle: Well-Structured Semantic HTML Well-structured semantic HTML is the design of the content in HTML that can still be read with or without the presentation layer (CSS). It means that all of browsers especially basic mobile browsers will be able to view the content as the example below [1]. Figure 1 – Well Structure HTML 2 Presentation Layer(CSS) After creating the well structured semantic HTML, the presentation layer is the next. This is useful to make the readers easier to view, use, and improved user experience. JavaScript should be the last JavaScript can greatly contribute to the usability and user experience of the website [1]. Even JavaScript can greatly contribute, but make sure that the site also usable without JavaScript. Although almost all browsers have JavaScript enabled, some of mobile browsers are not supported with JavaScript. And this is called as unobtrusive JavaScript. Here is the example of JavaScript that has no functionality lost between JavaScript enabled and JavaScript disabled. Figure 2 - Here’s the fully functional version of the site, with the modal window [1]. 3 Figure 3 - Here’s the version with JavaScript disabled, with the Terms & Conditions appearing just above the footer. It is still linked from the same place in the content [1]. The goal of this thesis is to implement a website with the techniques that are best in web enhancement performance such as maintainability, flexibility, compatibility, accessibility, and response time. 1.2 Scope The scopes of this thesis are: To create a portfolio website for MoStudio using Progressive Enhancement and Unobtrusive JavaScript principles. To examine the techniques based on enhancement performance such as easy to code, maintainability, flexibility, compatibility, accessibility, and response time 4 To compare graceful degradation and progressive enhancement with unobtrusive JavaScript principles for creating a website. To compare normal technique to add backgrounds inside HTML, normal technique to add backgrounds with CSS, and CSS-Sprite technique for adding backgrounds. To compare normal technique with fixed text, normal technique with changeable text, and sliding doors technique for creating image button. To compare table-based design and CSS-based design for creating layout of the webpage. To compare flash and JavaScript for creating animation. This thesis does not examine the HTML5 technology due to emerging nature hence limited available resources. This thesis does not examine the AJAX technology due to the requirements of the project and will make the thesis too broad. 1.3 Aim and Benefits The aim of this thesis is: To seek the technique that is the best in enhancement performance such as maintainability, flexibility, compatibility, accessibility, and response time. The benefit of this thesis is: 5 To show which techniques are the best in enhancing performance. Since there are emerging technologies that web developers can choose, web developers are riddled to choose which one is the best. 1.4 Structures The thesis will be written in seven chapters as listed below: Chapter 1. Introduction It contains a background of the problem, the scope of activity, and the aim and benefit of this activity. Chapter 2. Theoretical Foundation It contains theory, opinion, principal, and other sources that can be proven scientifically as the comparison and reference in discussing the problem. Chapter 3. Problem Analysis It contains the company profile, organizational structure, the current existing system and the conclusion of the current system. Chapter 4. Solution Design It contains the steps of designing the solution for the problem and the final solution that made by student. Chapter 5. Testing and Implementation 6 It contains the result, observations or implementation of the solution given. Chapter 6. Discussion It is to evaluate and clarify the results. It contains what the result means to the student. Chapter 7. Conclusion and Recommendation It is summarize all-important aspect starting from what causes the problem, the problem itself, the solution, and the result of implementing the solution. 7 .

Load more