MULTI-STYLE WEB CONTENT RESTRUCTURING FOR EFFICIENT MOBILE WEB BROWSING A Paper Submitted to the Graduate Faculty ofthe North Dakota State University of Agriculture and Applied Science By Xiaojun Xia In Partial Fulfillment of the Requirements for the Degree of MASTER OF SCIENCE Major Department: Computer Science April 2011 Fargo, North Dakota North Dakota State University Graduate School Title MULTI-STYLE WEB CONTENT RESTRUCTURING FOR EFFICIENT MOBILE WEB BROWSING By XIAOJUNXIA The Supervisory Committee certifies that this disquisition complies with North Dakota State University's regulations and meets the accepted standards for the degree of MASTER OF SCIENCE North Dakota State University Libraries Addendum To protect the privacy of individuals associated with the document, signatures have been removed from the digital version of this document. ABSTRACT Xia, Xiaojun, M.S., Department of Computer Science, College of Science and Mathematics, North Dakota State University, April 2010. Multi-Style Web Content Restructuring for Efficient Mobile Web Browsing. Major Professor: Dr. Jun Kong. Mobile devices such as smart phones, PDAs, and tablets are getting more and more popular every day. As a result, more people tend to use mobile devices to access Web contents. Therefore, mobile browsing becomes an important means of Internet access for daily life. In order to have smooth and user-friendly Web browsing experiences, Web designers should consider the limitations of mobile devices, such as a small screen size. However, most Web sites do not provide a mobile version, which makes it difficult to browse the contents on the small screens of mobile devices. This study presents a novel approach that restructures the important information from a full Web page to fit for mobile browsing. Unlike existing adaptation approaches, my work supports user customization on the information restructuring. In other words, the adaption engine can restructure information according to a user's personal favors. My approach consists of two sub-systems. The first sub-system is responsible to discover the organization of information underlying a Web page, and the second sub-system receives the structured information and uses a user-friendly interface to present the information. My approach also provides users with some customization options in order to improve the user experience. The first sub-system is out of the scope of this paper. This paper mainly focuses on the second sub-system. In order to produce a user-friendly interface, firstly I analyzed existing mobile Web sites, 1Il which are specifically designed for mobile devices. In this analysis, I summarized the patterns and the functionalities of these mobile sites in order to customize the design to support a wide range of different Web pages. For these purposes, I have designed an adaptive layout that the users can customize how the information will appear on the mobile device screen easily. Keywords: Mobile Web Browsing, Multi-Style, Adaptive Layout. IV ACKNOWLEDGMENTS This research project would have not been possible without the support of many people. The author wishes to express his gratitude to his supervisor, Dr. Jun Kong, who has offered invaluable assistance, support and guidance. Deepest gratitude is also due to the members of the graduate committee: Dr. Changhui Yan, Dr. Jing Shi, and Dr. Wei Jin, for without their suggestions and assistance this study would not have been successful. The author wishes to express his love and gratitude to his family for their unconditional understanding, support and endless love through the duration of this study. V TABLE OF CONTENTS ABSTRACT ......................................................................................................... iii ACKNOWLEDGMENTS ....................................................................................... v LIST OF TABLES .............................................................................................. viii LIST OF FIGURES ............................................................................................... ix CHAPTER 1. INTRODUCTION ........................................................................... 1 CHAPTER 2. RELATED WORK .......................................................................... 4 2.1 Server Side Approaches ................................................................................ 5 2.1.1 Mobile specific markup languages .......................................................... 5 2.1.2 Automatic mobile Web site creating tools ............................................... 6 2.2 Client Side Navigation Techniques ................................................................ 7 2.3 Web Content Restructuring ........................................................................... 9 2.3 .1 Approaches of client-side restructuring ................................................... 9 2.3 .2 Approaches of server-side restructuring ................................................ 10 2.3.3 Comparing with my approach ............................................................... 11 CHAPTER 3. EVALUATION OF MOBILE WEBSITES AND MOBILE WEBSITE GUIDELINES ..................................................................................... 12 3.1 NavigationFacility ...................................................................................... 13 3.2 Information Presentation ............................................................................. 18 3.3 Evaluation Analysis ..................................................................................... 19 3.4 Guidelines for Mobile Web Design & Development.. .................................. 21 CHAPTER 4. RESTRUCTURING ....................................................................... 25 VI 4.1 Multi-style Information Presentation ........................................................... 26 4.2 Module Design ............................................................................................ 30 4.3 Class Design ............................................................................................... 33 4.4 Class Diagram ............................................................................................. 35 CHAPTER 5. CONCLUSION AND FUTURE WORK ....................................... .40 5.1 Conclusion .................................................................................................. 40 5.2 Future Work ................................................................................................ 41 REFERENCES ..................................................................................................... 42 vii LIST OF TABLES I. Evaluation ofNavigation Facility ............................................................. 17 2. Evaluation ofl nformation Presentation ..................................................... 20 Vlll LIST OF FIGURES 1. 2 Level Navigation Menu of cnn.com .................................................... 14 2. 3 Level Navigation Menu of amazon.com .............................................. 14 3. Table of Contents of Pox news and Staples ............................................ 15 4. Navigation lists of m.yellowpage.com and mobile.dominos.com ........... 16 5. Collapsing Layout in YouTube.com ...................................................... 19 6. Display Option for Table of Contents .................................................... 26 7. Layout Options for Detailed Page .......................................................... 27 8. Anchor Link Layout Screenshot ............................................................ 29 9. Single Page Layout Screenshot.. ............................................................ 30 10. Collapsing Layout Screenshot. ............................................................. 31 11. The Prototype Architecture .................................................................. 32 12. The Activity Diagram of AsyncTask .................................................... 36 13. The Activity Diagram of PhotoLoader Class ........................................ 37 14. Class Diagram ..................................................................................... 38 IX CHAPTER 1. INTRODUCTION Advanced mobile devices such as smart phones, personal digital assistants are getting more and more popular every day. These mobile devices are normally equipped with a wireless network connection and a Web browser through which users can access the Internet from anywhere and at any time. As a result, more and more users tend to browse the Web using their mobile devices. A large number of users use the mobile devices to read news stories, find production information, search nearby restaurants, or even online shopping. The mobile access to Web information, however, raises a new challenge to the Web page presentation. The small screen of mobile devices is one of the major reasons why many users still hesitate to use such devices to access the Internet. Users have to zoom in/out & scroll both vertically and horizontally to find the information of interest since most of the Web pages are designed for desktop, which is equipped with large display. Those Web pages are referred to as full Web pages in this paper. Without an adaptation, it is frustrating to browse those pages on mobile devices because of the limitations of mobile devices. Hence, it is necessary to provide a more user-friendly way of mobile Web browsing. Markup languages, such as WML and XHTML Mobile Profile