Website name: SEO China
Client Name: SEO China
Contact person: Xue Guan, managing director for SEO China
We keep the structural of the website almost the same as our design phase, to have 6 html pages. However, we had initially planned to have 4 different javascript documents, and for the convenience of coding and modelarity, we put all javascript functions in one js file. There were also many stylistic and structural changes, and these changes are summarized below.
In the footer of the page, we deleted the link to facebook, youtube and linkedin, since two of these three pages are blocked in China. The contact information on the left and the navigation bar at the buttom will be centered. The same change will be applied to all pages.
Instead of about_our_story.html, we used about.html, as when visitors click on the "About Us" icon on the nav bar, they will be directed to this page. It makes sense to have a simpler name for this html. In addition, we also keep the navigation bar the same as that of the homepage, for the sake of a consistency in the style of design.
To simplify the name of the URL, we write about_people.html, instead of about_our_people.html. The same as the about.html, we also keep the navigation bar the same as that of the homepage, for the sake of a consistency in the style of design.
To match the name of this page on the navigation bar that SEO China requests, we changed the name of this page into programs.html from program.html. The navigation bar is the same as that of the homepage, for the sake of a consistency in the style of design. We have deleted the title on the left of the image "map.jpg", as we have already have a title "SEO-China Programs" on top of the page. "Program Overview" is a little bit too repetitive.
The navigation bar is the same as that of the homepage, for the sake of a consistency in the style of design. The "Start My Appplication" button does not link to the formal application site, as the site is not built yet.
According to the request of our client, we enlarged the screen size of the video, in order to attract more attention and therefore more donations. The title of the video seems to be repetitive with the subtitle of this page. Both are "Deepen Our Impact". Furthermore, the link to youtube video already contains a title for the video on the screenshot, so the title on top of the video will be taken away. We have also added the Venmo and Paypal account information of SEO China onto the page. Since the visitors won't be able to donate through on-line banks, so the icons of visa, mastercard or discovery wil be eliminated. We have also redesigned the look of the the Donate button, so that the color of the text "Donate" matches the color scheme of this website. Lastly, since our client want a large group photo of SEO team, so it takes a little bit more time to load this page.
We originally wanted to have a slideShow function that displays one group of texts and a image, and by clicking the visitor can see another group of profile photos and sentences. We no longer need to combine photos and texts in the javascript. SEO China has provided photos, which contain profile photos and comments in themselves.
Originally, we wanted the links of "Our People" and "Our Story" to appear under "About Us" when the user hovers over "About Us". Now we won't show two links unless the user clicks the "About Us". Also to differentiate the dropDownMenu from the black background of navigation bar, we changed the color of the dropDownMenu to white, and gray when hovered. (This change will not be repeated in the changes of css styling section.)
We originally hoped to enlarge images just a little bit, but we changed the idea to enlarge the photos to cover all space of the webpage.
In our original design, we have wanted to use "Helvetica" for main titles and texts in the navigation bar. Now we still keep "Helvetica" for the navigation bar. Most description is also "Helvetica". We specify that the font for landing_title, texts in the table, is "Arial, sans-serif", the font for the button is "Helvetica Neue", the font for For the design of the nav bar, we originally wanted the helper nav bar in the "about.html" and "about_people.html" to be underlined if hovered. As there is already a line on top of the list items in the helper nav bar, we decided to change the color of it when hovered, and abandoned the idea of underlining texts. In total, since the website design is really complicated, according to our client, we had to specify many different font-family, font-size, font-style, width, height, float etc. Thus, our css file is longer than expected.
We originally plan to keep all of our images in one folder without sub-folders. However, as we receive more photos from SEO-China, we have decided to keep photos of one page in one folder, so we created "about" folder for "about.html" and "about_people.html", "application" for "application.html", "donate" for "donate.html" and "programs" for "programs.html". The SEO_logo.jpg used in every page is placed directly under the "img" folder.
We have validated all html and css documents. There is a warning "section class="table"". It is a warning, but not a mistake. The validation of the donate page also contains an error, but it is an error from youtube video, but not from the coding of the html page.
All of the following files are gathered inside a folder, called 'beta'.
List of Files and Folders
| Filename | Description | In charge |
|---|---|---|
| homepage.html | The homepage | Shirley |
| about.html | Brief introduction of SEO China and its history | Sharon |
| about_people.html | Information about the team member of SEO China | Sharon |
| programs.html | General view of programs of SEO China | Shirley |
| application.html | Information about application process and a gateway to application page | Sharon |
| donate.html | Information about donation | Shirley |
| seoFunction.js | This document contains four javascript functions. One fuction for a roll over menu when hovered upon, one for a random display images of donation page, one that allows users to slide for the information of past intern pictures and experience, and the last one that adds an interactive size attribute. | Shirley and Sharon |
| styling.css | Checking CSS file that contains all styling for the website | Shirley and Sharon |
| Final Controls | Double checking each file for errors, checking the javascript and css | Shirley and Sharon |