Methodology
This chapter discusses and justifies the method adopted for this study. Ranges of techniques recommended for the addition of text to web pages were introduced in the literature review. It was necessary, then, to employ an empirical ‘trial-and-error’ process in order to test the legibility of text coded according to each technique. This would allow the combination of best practice from each method to give guidelines, which offer successful outcomes in the widest range of situations.
Description of Method
The study made use of the ‘text edit’ program, which is a standard feature of both Mac and PC. The W3C Standards for Internet coding were applied and standard HTML and CSS pages were incorporated, Figures (5 and 6) below show the layout of the HTML and CSS pages coded.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Untitled Document</title>
<link rel=”stylesheet” type=”text/css” media=”all” href=”style.css”/>
</head>
<body>
<div id=”div1″>
<h1>Header</h1>
<h2>Sub Header</h2>
<p>This is the first paragraph of text</p>
</div>
</body>
</html>
Figure 5
The layout of the HTML page including header, sub header and first paragraph. The style sheet is linked at the top between the two head elements.
@charset “UTF-8″;
/* CSS Document */
h1{
}
h2{
}
#div1{
}
Figure 6
The CSS style sheet used containing the elements to style the header, sub header and first paragraph.
The inclusion of CSS, rather than an implicit inclusion of style within the HTML page, reflects good practice in web design. A CSS sheet allows greater control over the feel and looks of web Pages and provides easier maintenance over multi page websites (Schmitt 2006).
Initially, reset codes were not included; however, pilot testing revealed browser-dependent font size anomalies and default layouts automatically set by the browsers affected the text, thus a reset code was used for subsequent tests, Figure (7) below shows the reset code.
/* reset.css */
html,body,div,span,applet,object,iframe, h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code, del,dfn,em,font,img,ins,kbd,q,s,samp, small,strike,strong,sub,sup,tt,var, dl,dt,dd,ol,ul,li, fieldset,form,label,legend, table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:Verdana, Arial, Helvetica, sans-serif;vertical-align:baseline;}
body{line-height:9px;color:#333;background:white;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
blockquote:before,blockquote:after,q:before,q:after{content:”";}
blockquote,q{quotes:”" “”;}
Figure 7
Showing reset code used that is placed at the top of the style sheet.
Each of the recommended methods for text coding were used to input identical text to the webpage, containing a header, sub header and a standard following paragraph. Figure (8) shows the finished webpage displaying in Firefox on the Mac platform, coded using ‘em’ size tags.
Figure 8
Showing the layout of text displayed in Firefox on the Mac platform.
Best practice from each technique was extracted and these were combined in several ways. The same test method was applied for each of these combinations and the font Times New Roman was used throughout. The following web browsers were used in the study across two platforms, Windows and Mac: Internet Explorer version 7.0.6, Firefox version 3.0.6, Safari version 3.2.1, Opera version 9.63 and Google Chrome version 1.
Why this method was used
The advantages of using this empirical method are that testing can be carried out in a variety of situations and contexts that simulate real world situations. The method generates extensive data that can be analysed to extract performance trends. However, the study has limitations. Firstly, it focuses on a single route to incorporating text in a webpage. Other routes such as text embedded in tables or list styles were not explored. Secondly, only a small number of the available browsers were used to view the outputs due to time constraints. However, this was mitigated through careful selection of the most popular browsers (MacDonald 2009). Finally a standard screen resolution was used throughout of 1280px by 800px.
Data Analysis
Firstly grouping the platforms together, Windows and Mac reduced the data. Then in each platform group the results were again segmented into each specific browsers outcome. From there each tried and tested piece of style code was grouped in the order of which one was initiated first following through to developments. This then allowed comparisons of the outcomes of each tested style code between all browsers on each platform looking for accuracy and consistency. The data was displayed in tables by showing the outcome of each piece of tested style code along side the browser and platform it displayed on. The first table shows the initial style code tried and developments from that, moving onto the next tried piece and displaying the developments accomplished from that and so on. Only data that showed a significant change, variation or strong development was presented in the results however all test carried out can be seen in the appendix.
This chapter has explained the methods used in this empirical study to try and achieve accurate text legibility and consistency throughout the World Wide Web. The next chapter presents the results obtained with those methods.
RSS feed for comments on this post. / TrackBack URI