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