Project Proposal. Developing modern E-commerce web application via Responsive Design

Project Proposal Developing modern E-commerce web application via Responsive Design Group Members Nattapat Duangkaew (5322793258) Nattawut Moonthep (5322770892) Advisor: Dr. Bunyarit Uyyanonvara School of Information, Computer and Communication Technology, Sirindhorn International Institute of Technology, Thammasat University Semester 1, Academic Year 2013 Date

Table of Contents 1 Introduction... 1 2 Background... 2 3 Objectives... 3 4 Outputs and Expected Benefits... 4 4.1 Outputs... 4 4.2 Benefits... 4 5 Literature Review... 6-10 6 Methodology... 11-15 6.1 Approach... 11-12 6.2 Tools and Techniques... 13-15 7 Project Schedule... 16 8 Project Progress (optional)... 17 9 References... 18

Statement of Contribution By submitting this document, all students in the group agree that their contribution in the project so far, including the preparation of this document, is as follows: Nattapat Duangkaew (5322793258) 50% Nattawut Moonthep (5322770892) 50%

1 Introduction World today has advance in many ways especially technologically. Human need in competition has push the technology toward up. One of the technology that most has influence and daily use is website. Almost every organization in the world needs to have websites because it is online and can access from any where with internet in the world. Nowadays website need to be better than before because people starting to get used to browsing website and they tend to like website those user friendly, fast and can view on other device that they can carry with them such as smartphones. So both website owner and website viewer need website those Responsive. Responsive has vague meaning but it really mean that the website those serve the need and purpose of users. The goal of the Web is to serve humanity. -Tim Berners-Lee There are two kind of responsive first is display responsive. Display responsive mean the response of the website layout and size to its viewport for example: computer screen, ipad screen, galaxy note 2 screen which have different in size and solution. We can approach this problem by use web-base languages those are cross-browser such as HTML5 and CSS3. And for the second kind of responsive is bandwidth responsive. Because of mobile devices mostly use wireless connection therefore there are differences in speed and availability of data transfer in connection. Data such as images also have to be resized and may have to reduce resolution to reduce the data transfer rate and reduce the time of transferring as much as possible. The remaining section will go through more deeply in to the topic of the project. Section 2 explains the problem that has emerge in details. Section 3 list aims and objective o the project. Section 4 describes about the products we are going to develop and the benefits. Section 5 reviews what other people have done in the same area. Chapter 6 explain the methodology and tools used for this project. Section 7 shows the project plan. Section 8 shows our project progress what we have done. [g] School of ICT, SIIT 1

2 Background Even the responsive web application benefit in user browsing experience such as layout change to make it more user friendly in mobile device but there are still issues in increasing the efficiency of the browsing. We have divided the problem into two main point as similar in the introduction those are display and bandwidth responsive problems. For display responsive there some problems emerge, the first problem is smooth navigation this concern the designing of web view. The original desktop website may have vertical and horizontal navigation. But when it is view on mobile device it would have only vertical navigation, this is the problem we have to study how to transform design from normal web to mobile vertical navigation view design to make the best user experience. The second problem is handling html element on webpage particularly tables. The column and rows need to transform smoothly from normal web view into small mobile screen view. The problem we have encountered in bandwidth responsive is Image Type and Quality, the images selected for responsive website are different from the normal websites. The are need of right adjustment of image size and resolution, this is also display responsive problem but the real problem is the images tend to load very slow, if the website has a lot of pictures and bad internet connection that would be very bad for the user experiences. We need to find the approach on how to make the image load faster base on connection speed to provide best experience to users. For example we can check for the device speed connection and request the appropriate version of image to match the connection requirement and provide best result. The issues about loading image is also when user reopen same webpage with same images or go back to the same webpage they want from, it would still reload the image from the website which is really time consuming and annoying to user. To solve this problem we use image caching, which it will store the already loaded images into browser local storage so when the page with the same image is refresh it doesn t have to reload the image which is very convenient and fast for user. School of ICT, SIIT 2

3 Objectives This project aim is to solve and explore the existing problem of responsive and use appropriate approach to solve those problems. The web developers will be able to easily to develop website that need to be responsive in both display and bandwidth. Also we want to increase user experience and make them happy while browsing website on their mobile device. 1. The developers will be easily to develop desktop website that can transform into many mobile viewport device with element and layout that fit the viewport device and user friendly. 2. Develop responsive website that have good responsive to the internet connection to reduce page load time and bandwidth. School of ICT, SIIT 3

4 Outputs and Expected Benefits 4.1 Outputs There are two main things to be developed from our project. 1. Developed responsive web application : The main objective of this project is to get a functional responsive social network e-commerce website. The aspect of development has been divide in two parts. The first part is to handle display of the application on how the application adjust it s layout and element to it s viewport such as mobile device and tablet. The second part is to handle with the connection of the internet and the data loaded from server have to be responsive to the efficiency of the internet to make it responsive to the users need as possible. 2. Experimental results and feed back: After finishing the application, the application, however, is needed to be test in real usage and real situation. The experiment result and feedback has to be create to show and guarantee the result and feedback of using developed responsive web application. 4.2 Benefits The complete project will be benefit in many group of people. The first group is web developers, they have short term benefit in spending less time in developing website because the new method this project have develop will provide shortcut for them to inventing their own solution. For long term benefit developers will be able to develop from already existing framework that this project has develop and be able to create better responsive framework later on. Website user also benefit in long term use because new generation of better performance web application. School of ICT, SIIT 4

5 Literature Review For literature review, the context has divided into two parts, which are development aspect and end users aspect. 5.1 Development aspect For Development aspect, we will discuss about how responsive web application developing has it s pros or cons over native application developing. And to develop an application effectively what tools or available framework we should use and what is the advantage/disadvantage between using framework and not using framework. Application developing means to develop application that can be responsive to user on many devices. And on many devices have the requirement of different platform languages. So came the problem to developers on how to developing on such different device such as iphone, Android phones which use totally different language and SDK (Software Development Kit) as seen in table 1. [a] Mobile OS Type Apple ios Google Android RIM BlackBerry Symbian Windows Mobile Windows 7 Phone HP Palm webos Meego Samsung bada Skill set required C, Objective C Java (Harmony flavored,dalvik VM) Java (J2ME flavored) C,C++,Python,HTML/CSS/JS.NET.NET HTML/CSS/JS C,C++,HTML/CSS/JS C++ Table 1 :Required developer skill sets for different platforms. These characteristics have made mobile device applications a multibillion dollar business. Because a lot of knowledge and resource are need to provide cross-platform applications for these platforms. Making application with the native tools very expensive and adding new feature or just maintaining all these different application become costly. Approach to this situation is to use application that is already on every device, that is browser. Every devices has it s local browser including Safari for ios, Browsers for Android and etc. Simply, we need to create web applications that has properties in adjusting itself into many local device browser efficiently. The server side development should be easy, time saving and efficient. We choose a framework called Ruby On Rails. School of ICT, SIIT 5

5.1.1 Server side aspect Ruby on Rails Ruby on Rails, or Rails is an open source web application framework which base on Ruby programming language. It allows developers to create pages or application those can communicate with server and render the template out of the box. Ruby on Rails use the well-known software engineering pattern such as Active Records Pattern, Convention over Configuration (CoC), Don t Repeat Yourself (DRY), and Model-View-Controller (MVC). Active records pattern is an architectural pattern in application that stores its data in relational database. It was named by Martin Fowler in his 2003 book Patterns of Enterprise Application Architecture. The interface of an object conforming to this pattern would include function such as Insert, Update and Delete. Active record is an approach to accessing data in a database. A database table or view is wrapped into a class. An object instance is tied to a single row in the table. After creation of an object, a new row is added to the table upon the object is saved. Any object loaded gets its information from the table from database. When an object is updated the corresponding row in the table is also updated. In Ruby on Rails the database used by default is Sqlite3. Convention over Configuration is a software design paradigm which seek to decrease to number of decisions developers need to make, making it more simple but doesn t lose the flexibility. The goal of this paradigm is to reduce unnecessarily complex application design. In Ruby on Rails the paradigm is used to reduce the configuration file developers have to configure to minimum, instead it has default patterns, which developer can follow. Don t Repeat Yourself is another principal in software engineering aimed to reduce repetition of information of all kind. The principal state that Every piece of knowledge must have a single, unambiguous, authoritative representation within a system. In Ruby on Rails the example can be seen in the view part or the html pages developer can create a file called partial, this file contain the redundant page pattern for example, group of buttons that appear many place in the web application and the developer can just render that file using one line of code instead of writing the redundant HTML code in many places. Model-View-Controller is a software architecture pattern which separates the representation of information from the user s usage with it. The model consists of data, logic and functions. The view is the output or anything that represent the data, such as HTML pages that show a chart or a diagram. In Ruby on Rails the Model-View-Controller concept is sharply combine with other pattern such as the Model, View and Controller are generated in three separated folders. And in Model folder generated the model files that base on the concept of Active record to accessing the database. School of ICT, SIIT 6

Advantage/Disadvantage in Ruby on Rails. Advantages of Ruby on Rails over other framework is it use the Convention and Convention paradigm that decrease the code developer have to write to see a web application run on their browser. It also decreases redundant code from Don t Repeat Yourself principles more that other framework like ASP.NET. The ruby language itself is dynamic, reflective, object-oriented, general-purpose programming language. It focus on simplicity and productivity. Ruby also has a wide set of third-party libraries. These libraries are released in the form of a gem. Gems can used to extend or modify functionality in Ruby applications. Commonly they re used to distribute reusable functionality that is shared with other programmers for use in their application and libraries. For example my website need to resize or crop image to create different version to show on different device we can use already existing gem called Rmagick which provide functions and utilities for resizing and cropping images. This saves a lot of time in writing a library from scratch. It also has gems those manage user authentication making it very easy, fast and safe to create user system and so we can focus on other part of the project. Ruby on Rails also has large community backing it. There are many developers and contributor to the project so it keep developing constantly. Disadvantages For developing aspect Rails provide less coding and decision making but that makes developers rely on the framework a bit too much. The application used rails to develop should fit the square shape of the Rails concept to reach to maximum productivity. However it can t have interaction with other application that use different framework or doesn t have framework for example, JSON or XML API. The default database Rails use is SQLite. SQLite is a popular choice as embedded database for local/client storage in application software such as web browsers. But it is not scale very well. SQLite is not suitable for client/server applications. If you have many client programs accessing a common database over a network performance will not be great. Also, the file locking logic of many filesystems implementation contains bugs. If file locking does not work like it should, it might be possible for two or more client programs to modify the same part of the same database at the same time, resulting in database corruption. Because this problem results from bugs in the underlying filesystem implementation, there is nothing SQLite can do to prevent it. Chat system using Node.js and Socket.IO Node.js Node.js is a plateform built on Chrome s Javascript runtime for easily building fast, scalable network application. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time application that run across attributed devices. [e] School of ICT, SIIT 7

Socket.IO Socket.io is a JavaScript library for realtime web application. It has two parts: a client-side library that runs in the browser, and a server-side library for node.js. Both components have nearly identical API. Like node.js, it is event-driven. Socket.IO primarily uses the WebSocket protocol. Although it can be used as simply a wrapper for WebSocket, it provides many more features, including broadcasting to multiple sockets, storing data associated with each client, and asynchronous I/O. It can be installed with the npm(node packaged modules) tool. [f] Browser support : Internet Explorer, Safari,Google Chrome,FireFox,Opera. Mobile : iphone Safari, ipad Safari, Android Webkit, WebOs WebKit [g] Why choose Node.js and Socket.IO There are a lot of platform which can run a chat application, but by choosing Node.js we don t have to learn completely different language, it s just JavaScript, but server-side. Node.js uses an event-driven, non-blocking I/O model, which makes it perfect for building realtime apps. The example of Node.js application is a famous browser game name BrowerQuest from Mozilla, an MMORPG written entirely in Node.js. 5.1.2 User experience aspect Variety of devices follows many screen size. To create good user experience we need to maximize the user comfortable use and appropriate layout for different screen size. There are many layout framework Layout frameworks Bootstrap is an HTML, CSS, JavaScript framework that developers can use as basis for creating a web sites or web applications. It provide out of the box HTML5 element such as buttons, table and etc. with designed style from twitter. Bootstrap is build to work best in the desktop and mobile browser. Older and less advance browsers might have less stylized, though fully functional, version of certain components. Supported browsers: latest version of the following. [b] - Chrome (Mac,Windows,iOS and Android) - Safari (Mac and ios only, as Windows has more or less been discontinued) - Firefox (Mac,Windows) - Internet Explorer - Opera (Mac, Windows) School of ICT, SIIT 8

Bootstrap make use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. [c] 1. <!DOCTYPE html> 2. <html lang="en"> 3.... 4. </html> Bootstrap responsive features Bootstrap use CSS3 technology. This allow bootstrap to use a feature in CSS3 called Media Queries. CSS Media Queries are a feature in CSS3 which allows you to specify when certain CSS rules should be applied. This allows you to apply a special CSS for mobile, or adjust a layout for print. [d] All modern browser support Media Queries. Internet Explorer supports it in IE9. All modern mobile browsers are supported, including Blackberry 7.0 and 10.0. [d] Media queries allow for custom CSS based on a number of conditions ratios, widths, display type, etc but usually focuses around min-width and max-width. Supported devices Bootstrap supports a handful of media queries in a single file to help create more appropriate on different devices and screen resolutions. Here's what's included:[c] Label Layout width Column width Gutter width Large display 1200px and up 70px 30px Default 980px and up 60px 20px Portrait tablets 768px and above 42px 20px Phones to tablets 767px and below Fluid columns, no fixed widths Phones 480px and below Fluid columns, no fixed widths The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically. Bootstrap has large group of users. That mean it has large community, so it is easy to find the solution to the problem develop School of ICT, SIIT 9

Foundation Foundation is a framework similar to Bootstrap. It use 12-column flexible grid layout that scale out to an arbitrary size (defined by the max-width of the row) that s also nested, so developers can build complicated layouts without creating a lot of custom element. [h] Mobility Foundation was built from the group up the support any kind of devices, any size screen, with any solution. This allows developer to create a site tailored to a specific experience. Comparison Bootstrap And Foundation Summary Browser Support Bootstrap 3 -Large user base -Grids : Fluid -UI tools: Lots of widgets; good for rapid prototyping -History: Mobile-first update to the style guide for internal tools developed by Twitter Chrome (Mac, Windows, ios, and Android) Safari (Mac and ios only) Firefox (Mac, Windows) Opera (Mac and Windows) IE8+ Foundation V4 -Medium user base -Grid: Fluid. Best in class -UI tools: Powerful and modular set of tools. More style agnostic that Bootstrap. - History: Mobile-first update to the boilerplate developed by ZURN for client projects. Desktop: Chrome, Firefox, Safari, IE9+ Mobile: ios (iphone), ios (ipad), Android 2, 4 (Phone), Android 2, 4 (Tablet), Windows Phone 7+, Surface Decision We decide to choose Bootstrap because it has many designed UI element so we don t need to design our own from scratch and it has large user base which mean if we have trouble implementing it we can easily search or ask for solution because someone might have encounter the problem before. School of ICT, SIIT 10

6 Methodology 6.1 Approach What steps will you take in the project? List the steps. This is a good place to present a highlevel system (block) diagram, showing the components of your system. Then you can describe tasks for each component. To develop this project we have to plan the mock-up of the website first in both Desktop and Mobile versions. The main different between desktop and mobile were the size of the screen so the design for both device must be difference in layout such as reduce the element in both size and bandwidth. So the implementation User Desktop Computer Mobile devices Desktop Version Mobile Version Web application Both mobile and desktop were view base on same HTML page so in the application has to be able to divide which device user are using. Mobile Version: when users access the page from mobile devices the application will detect the screen size and use the layout of the mobile version include tablet version. The application will also reduce the component such as images in mobile device to reduce the bandwidth usage. Desktop Version: when users use desktop to access the application the application will recognize the screen size and use the desktop version and adjust images size to match the screen size. School of ICT, SIIT 11

The web design: for desktop we design the layout of the application to fit the regular computer screen as seen in figure 1. This is a homepage design. Figure 1 For mobile version we have design as seen in figure 2. We minimize the element as much as we can to improve user experience. Figure 2 School of ICT, SIIT 12

6.2 Tools and Techniques We divide tool and techniques into two side which are user interface size and server side. User Interface Media query: is a technology in CSS which we use to query the CSS rule by conditions. From this advantage we can use media query to select suitable image size version that fit the device best such as select medium resolution image from large image for mobile device. Bootstrap framework: this is a framework that we use to change the layout when user use mobile device it use grid system to adjust element to proper to the screen. To use Bootstrap in our project we include CSS, JavaScript and Image from bootstrap in each HTML page of our application. Then learning the document of Bootstrap from http://getbootstrap.com/. We use the class provided by the Bootstrap in HTML class for example in the following code. <ul class="thumbnails"> <li class="span4"> <div class="thumbnail"> </div> </li> <li class="span4"> <div class="thumbnail"> </div> </li> </ul> The class thumbnails is the wrapper class. The thumbnail class the child class and the span4 is the class that determined the width of it s child component. The result is a row of contents in horizontal on the webpage and on mobile it shows vertical alignment. This happen because the use of media query in bootstrap-responsive.css. This allows change the condition of the css rule depend on the screen size. In this case it was set if screen width is less than 768 pixel it would change the rules of curtain classes and effect the display as seen desktop version in figure 2 with width of 768 pixels. Figure 3 Notice the size at upper right coner. School of ICT, SIIT 13

And as the width get smaller to 767 and change the CSS rule by the media query condition in figure 3. Figure 4 notice the size at upper right coner And it get smaller as the width decrease follows the media query rule changes. As seen in figure 4. Figure 5 School of ICT, SIIT 14

HTML5 appcache: is an HTML5 feature we use to for store the resource to the local storage so user can open the application offline or don t have to load the resource multiple times. The resource to cached should be static resource that doesn t change much such as static images,bootstrap CSS, JavaScript and images files. In the cache file we cached the example: CACHE MANIFEST css/bootstrap.min.css css/bootstrap-responsive.css Server side MongoDB : we choose MongoDB to be our database system because the NoSQL property of it. MongoDB doesn t use column and table as the MySQL database. It use unstructured data so it works good with big data which our website might become such case because growing of users and contents numbers. Ruby on Rails framework: for fast speed in system development and reduce redundancy ruby on rails provide MVC architecture which we can create a database model in classes files and add database field and relations in a single file. We also use gems which provide build in functions. Gems we use to create users system are: o Devise: this is a gem that provide library for create user login system. It automatically generate user model and we can specify user field in a single model file. o CanCan: this is a gem that use to manage permissions of users or divide user class such as admin, moderator and normal users. Others Sublime: is a text editor program, which we mainly use to code our application. The advantage of this text editor is it provides coloured text for each language elements. School of ICT, SIIT 15

7 Project Schedule Task Description Person Duration Deadline Status 1 Study and find framework that we want to use and choose the most suitable for our project 2 Study Bootstrap and how to use Bootatrap. 3 Study HTML5 and see how we can use it s properites to support our website. 4 Study Ruby on Rails and how to create our website with it. And use it s advantage over traditional PHP website. 5 Design layout of our website and it s functions ND+NM 2d 12 Sep 100% ND+NM 2d 14 Sep 80% ND+NM 1d 16 Sep 80% ND+NM 2d 17 Sep 80% ND+NM 2d 19 Nov 80% 6 Create our website ND+NM 2w 21 Sep 10% 7 Add responsive feature to our website. 8 Prepare slides for final presentation ND+NM 1w 5 Oct 10% ND+NM 2d 12 Oct 100% School of ICT, SIIT 16

8 Project Progress (optional) We have create a test application to see if we can use the responsive feature of the Bootstrap frame work the result is as seen in figure 4 the desktop version and figure 5 the mobile version. Figure 4 Figure 5 School of ICT, SIIT 17

9 References [a] Charland, A., and Leroux, B. Mobile Application Development: Web vs. Native. Communications of the ACM 54, 5 (2011), 49-53. [b] http://getbootstrap.com/getting-started/#browsers (26 sep) [c] http://getbootstrap.com/2.3.2/scaffolding.html [d] http://cssmediaqueries.com/what-are-css-media-queries.html [e] http://nodejs.org/ [f] http://en.wikipedia.org/wiki/socket.io [g] http://socket.io/#browser-support [h] http://foundation.zurb.com/docs/index.html [g]mobile HTML5: Implementing a Responsive Cross-Platform Application by Kimmo Puputti [i] http://en.wikipedia.org/wiki/ruby_on_rails [j] http://rubyonrails.org/ School of ICT, SIIT 18