Site Grading Criteria Documentation
Design and Quality of Content
My site incorporates the CRAP principles with a clear contrast between the background and text for readability, repetition in design elements for cohesion, alignment for a structured layout, and proximity in related content for logical grouping. The content is well-researched, focusing on Japan's travel destinations with accurate historical information and recommended spots, ensuring an engaging user experience.
Quantity of Content
The website is comprehensive, covering four main cities in Japan: Tokyo, Kyoto, Osaka, and Hiroshima. Each city has a dedicated page that provides in-depth information about must-see spots and historical insights, totaling over a week's worth of travel content.
Code Design Requirements
My HTML code is properly indented for readability, using semantic tags to structure the content meaningfully. The CSS is consolidated in a global file to ensure consistency in styling, with class and ID selectors used thoughtfully to style elements effectively without inline styles.
Interaction Design & Navigation
Navigation through the site is intuitive, featuring a global navigation menu accessible from all pages. Each page features a unique title and breadcrumbs or active state indicators to inform users of their current location within the site. The inclusion of a 'hamburger menu' with sub-menus enhances navigation on mobile devices or smaller screens.
HTML & CSS Validates / Cross Browser Compatibility
All HTML and CSS code has been validated using W3C validators, with no errors found. The website has been tested across multiple browsers including Chrome, Firefox, and Safari to ensure compatibility and a consistent user experience.
Responsive Web Design
The site is designed with mobile users in mind, featuring a responsive layout that adapts to various screen sizes from desktops to smartphones, ensuring content is accessible and readable across devices.
Reference Page
A separate reference page has been created to document all sources of information, including detailed references to Wikipedia for historical data and descriptions of tourist spots, fulfilling the requirement for accurate citation.
Advanced JavaScript and DHTML Elements
The site incorporates advanced JavaScript and DHTML functionalities to enhance interactivity and user engagement. Features include interactive bars on the destination pages that respond to various user inputs, an image carousel on several pages, and a dynamic gallery where images pop up and can be viewed in full screen upon interaction.