Laboratory 8: User interface design and implementation

Here are some tasks to extend your knowledge of CSS and Smarty to use it in some more complex user interface designs.

Background

Remember that some of the goals of user interface design are the following:

1. Consistency with best practice: Two or three column layout; header containing site identification, user registration and login links, help links, possibly search link; main content section; secondary navigation or news section; footer containing site "fine print"; use of grid-based layout within sections; subtle but nontrivial graphical elements, including colour.
2. Flexibility as screen size and aspect ratio changes.
3. Responsiveness as screen size and aspect ration changes dramatically from desktops to laptops to tablets to (smart) phones.

Tasks

1. Modify and extend one of your applications with two or more pages to use CSS and Smarty to provide a well-designed, fluid, two-column layout (refer to Lecture 1) with header and footer, as described in point 1 above.

   For pages that share the same content, e.g. header or footer, use include file or template inheritance in Smarty (Lecture 3) to avoid code duplication.

2. Use media queries in CSS so that the appearance and content of your application behaves appropriately for both desktop-sized screens and (smart) phone-sized screens.

Milestone

Complete Task 1. (It would impress us to complete Task 2 as well.)

Task 1 is required for Assignment 2.