3.4. Structure
3.4.1. CMS layout This site needs three custom Cascading Style Sheets for each device: desktop/laptop, tablet and mobile phone to be fully responsive (custom.css, custom_tablet.css and custom_phone.css). Custom.css is used for the devices which screen width is larger than or equal to 1103px. Custom_tablet.css is used for the devices with screen width between 800px and 1102px. Custom_phone.css is designed to be fit mobile phones which screen width is between 300px and 799px. There are two template PHP files (html.tlp.php and page.tlp.php) which need to be mobile ready as well as the PHP file for the theme (template.php).
3.5. Design Considerations This website should be fully responsive and accessible for the nature of the website (commnuty service oriented). The font size is set to 1.2em or larger, and the line height is set to 1.3em to
…show more content…
The second progress report document includes the description and the screenshots of all pages on the website, and how the site has been adhered the security protocols, web standards other best practices in Web development. Development considerations was also listed.
4.1. Template Page Layout All pages have the header and the horizontal navigation bar on the top and the vertical navigation system and the user login form on the left hand side. The little red apple icon with "Top" sign in the middle is an image icon on the right bottom on the screen to bring the screen back to the top. The header has a logo on the left hand side, the site title and the site slogan (screen width 800px or larger) in the middle, the social media icons on the top right corner (they may be below the title if the screen width is really narrow), and the navigation form on the right-bottom corner or the middle-bottom, depends on the screen width or devices. The logo and the site title have links to the home page, and the social media icons have links to the corresponding social media