Overview
In this unit, you will create web sites that provide an optimal viewing experience across a wide range of devices. The basics of developing web pages will first be discussed, along with the theory and practice to support this development. Then, using responsive design, you will develop solutions that adapt the layout of the viewing environment by using fluid grids, proportional images and layout rules. A mobile-first approach is taken, where you will learn problem solving and programming skills to provide progressive enhancement, producing innovative and engaging digital content for mobile devices and for desktop systems.
Details
Pre-requisites or Co-requisites
Pre-Req: COIT20245 Introduction to Programming, COIT20248 Information Systems Analysis & DesignAnti-Req: COIS21001 Web Applications for Business
Important note: Students enrolled in a subsequent unit who failed their pre-requisite unit, should drop the subsequent unit before the census date or within 10 working days of Fail grade notification. Students who do not drop the unit in this timeframe cannot later drop the unit without academic and financial liability. See details in the Assessment Policy and Procedure (Higher Education Coursework).
Offerings For Term 1 - 2025
Attendance Requirements
All on-campus students are expected to attend scheduled classes - in some units, these classes are identified as a mandatory (pass/fail) component and attendance is compulsory. International students, on a student visa, must maintain a full time study load and meet both attendance and academic progress requirements in each study period (satisfactory attendance for International students is defined as maintaining at least an 80% attendance record).
Recommended Student Time Commitment
Each 6-credit Postgraduate unit at CQUniversity requires an overall time commitment of an average of 12.5 hours of study per week, making a total of 150 hours for the unit.
Class Timetable
Assessment Overview
Assessment Grading
This is a graded unit: your overall grade will be calculated from the marks or grades for each assessment task, based on the relative weightings shown in the table above. You must obtain an overall mark for the unit of at least 50%, or an overall grade of 'pass' in order to pass the unit. If any 'pass/fail' tasks are shown in the table above they must also be completed successfully ('pass' grade). You must also meet any minimum mark requirements specified for a particular assessment task, as detailed in the 'assessment task' section (note that in some instances, the minimum mark for a task may be greater than 50%). Consult the University's Grades and Results Policy for more details of interim results and final grades.
All University policies are available on the CQUniversity Policy site.
You may wish to view these policies:
- Grades and Results Policy
- Assessment Policy and Procedure (Higher Education Coursework)
- Review of Grade Procedure
- Student Academic Integrity Policy and Procedure
- Monitoring Academic Progress (MAP) Policy and Procedure - Domestic Students
- Monitoring Academic Progress (MAP) Policy and Procedure - International Students
- Student Refund and Credit Balance Policy and Procedure
- Student Feedback - Compliments and Complaints Policy and Procedure
- Information and Communications Technology Acceptable Use Policy and Procedure
This list is not an exhaustive list of all University policies. The full list of University policies are available on the CQUniversity Policy site.
Feedback, Recommendations and Responses
Every unit is reviewed for enhancement each year. At the most recent review, the following staff and student feedback items were identified and recommendations were made.
Feedback from Unit Evaluation
More practical examples should be provided during workshops.
Tutors will provide extra sets of exercises followed by a top-down solution to demonstrate each concept taught in class to help build understanding.
Feedback from Unit Evaluation
The lecturers and tutors were excellent and passionate in delivering the unit.
The teaching team will continue to commit, improve and work towards maintaining this positive outcome.
Feedback from Unit Evaluation
The assessment materials were well organised, providing students to build upon previous concepts as they complete each weekly design requirements, working towards a complete portfolio that accumulates into the final assessment.
The teaching team will continue to commit, improve and work towards maintaining this positive outcome.
- Develop web pages tailored for a range of screen resolutions, incorporating text, images, audio and video
- Apply principles of progressive enhancement to optimise content for the limited memory and processing power of mobile devices, whilst simultaneously delivering a richer experience on non-mobile devices
- Critically assess given cases and apply problem solving techniques to create mobile-first solutions using web technology
- Critically review the mobile content industry, mobile technologies and characteristics of mobile devices, and likely future trends.
Australian Computer Society (ACS) recognises the Skills Framework for the Information Age (SFIA). SFIA is in use in over 100 countries
and provides a widely used and consistent definition of ICT skills. SFIA is increasingly being used when developing job descriptions and
role profiles.
ACS members can use the tool MySFIA to build a skills profile at https://www.acs.org.au/professionalrecognition/mysfia-b2c.html
This unit contributes to the following workplace skills as defined by SFIA. The SFIA code is included:
(1) User experience analysis (UNAN)
(2) User experience evaluation (USEV)
(3) Information content publishing (ICPM)
(4) Program ming/software development (PROG)
(5) Testing (TEST)
Alignment of Assessment Tasks to Learning Outcomes
| Assessment Tasks | Learning Outcomes | |||
|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |
| 1 - Practical and Written Assessment - 30% | ||||
| 2 - Written Assessment - 30% | ||||
| 3 - Practical and Written Assessment - 40% | ||||
Alignment of Graduate Attributes to Learning Outcomes
| Graduate Attributes | Learning Outcomes | |||
|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |
| 1 - Knowledge | ||||
| 2 - Communication | ||||
| 3 - Cognitive, technical and creative skills | ||||
| 4 - Research | ||||
| 5 - Self-management | ||||
| 6 - Ethical and Professional Responsibility | ||||
| 7 - Leadership | ||||
| 8 - Aboriginal and Torres Strait Islander Cultures | ||||
Alignment of Assessment Tasks to Graduate Attributes
| Assessment Tasks | Graduate Attributes | |||||||
|---|---|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | |
| 1 - Practical and Written Assessment - 30% | ||||||||
| 2 - Written Assessment - 30% | ||||||||
| 3 - Practical and Written Assessment - 40% | ||||||||
Textbooks
There are no required textbooks.
IT Resources
- CQUniversity Student Email
- Internet
- Unit Website (Moodle)
- Notepad or Notepad ++
- Zoom.us
- Web browser: FireFox, Chrome, Safari, etc.
All submissions for this unit must use the referencing style: Harvard (author-date)
For further information, see the Assessment Tasks.
a.bokani@cqu.edu.au
Module/Topic
HCI and Usability Heuristics Principles
Chapter
Resources provided via Moodle.
Events and Submissions/Topic
Module/Topic
Interaction Design and Personas
Chapter
Resources provided via Moodle.
Events and Submissions/Topic
Module/Topic
Design and Prototyping & HTML
Chapter
Resources provided via Moodle.
Events and Submissions/Topic
Module/Topic
HTML Part II
Chapter
Resources provided via Moodle.
Events and Submissions/Topic
Module/Topic
Getting Started with CSS
Chapter
Resources provided via Moodle.
Events and Submissions/Topic
Module/Topic
Vacation week
Chapter
Events and Submissions/Topic
Module/Topic
Styling navigation with CSS
Chapter
Resources provided via Moodle.
Events and Submissions/Topic
Module/Topic
Advanced CSS and Responsive Design
Chapter
Resources provided via Moodle.
Events and Submissions/Topic
Module/Topic
Media Query
Chapter
Resources provided via Moodle.
Events and Submissions/Topic
Module/Topic
Evaluating Interface Designs
Chapter
Resources provided via Moodle.
Events and Submissions/Topic
Module/Topic
JavaScript Intro and Web Forms
Chapter
Resources provided via Moodle.
Events and Submissions/Topic
Module/Topic
JavaScript Part II
Chapter
Resources provided via Moodle.
Events and Submissions/Topic
Module/Topic
JavaScript Part III
Chapter
Resources provided via Moodle.
Events and Submissions/Topic
Module/Topic
Chapter
Events and Submissions/Topic
Module/Topic
Chapter
Events and Submissions/Topic
Unit coordinator:
Dr. Ayub Bokani
a.bokani@cqu.edu.au
1 Practical and Written Assessment
This assessment involves designing and developing a website prototype that adheres to web design principles. Students will choose a topic from a provided list for both Project Part A and Project Part B. The project aims to demonstrate the feasibility and user acceptance of the website's user interface. The task is divided into two phases:
Project Part A (Assessment 1): This phase requires conducting user and task analysis to gather user and system requirements based on demographic and psychographic information. These findings will inform the design process.
- Preliminary Design: Develop a low-fidelity prototype of the user interface, including two personas representing different user types, each with a name, a photo (optional), and a brief description of their background, goals, and challenges.
- Scenario Design: Describe three interaction scenarios, using techniques such as UML use cases, storyboards, or task analysis to showcase each scenario.
- Digital Prototype: Create a digital prototype of the website using HTML, focusing on one of the scenarios described to test initial design concepts.
- Documentation: Submit a report documenting the design process, including the prototype, user research, personas, scenario design, wireframes (paper and digital), and overall presentation.
Week 6 Friday (25 Apr 2025) 11:45 pm AEST
Week 8 Friday (9 May 2025)
The assessment for Project Part A will be evaluated based on the following categories:
- Report: Introduction and Motivation (10%):
Provide relevant background information, outline the advantages of the proposed solution, and discuss the findings from the analysis of previous solutions. - User Research and Personas (20%):
Detailed identification of potential users, including demographic and psychographic information, and the creation of two detailed personas representing different user types. - Scenario Design (20%):
Description of three interaction scenarios, showcasing each using UML use cases, storyboards, or task analysis. Each scenario must include clear goals, steps to achieve them, and potential challenges. - Paper Wireframe (10%):
Design a low-fidelity prototype using paper wireframes for the scenarios described. This includes sketches or scans of hand-drawn wireframes. - Digital Wireframe (30%):
Development of a digital wireframe using HTML for the home page or one of the scenarios. This should include screenshots and HTML code demonstrating the design. - Overall Presentation (10%):
Evaluation of the report's structure, clarity, writing quality, formatting, and citation.
Note: The report should include a PDF with the student's name and ID, along with a zipped folder containing prototype screenshots and HTML code.
- Develop web pages tailored for a range of screen resolutions, incorporating text, images, audio and video
- Knowledge
- Cognitive, technical and creative skills
- Self-management
2 Written Assessment
This assessment requires the critical evaluation of a specific website in relation to the principles of responsive web design. The evaluation should focus on the website’s usability and responsiveness, assessing how well it adapts to different devices and screen sizes. Students will be required to analyse various aspects of the website, such as design, layout, user interaction, and performance across devices. The aim is to provide actionable recommendations for improving the website’s responsiveness and usability, ensuring a better user experience for diverse audiences.
Note: More details and guidelines will be available on the Moodle site.
Week 9 Friday (16 May 2025) 11:45 pm AEST
Week 11 Friday (30 May 2025)
The assessment for the Website Evaluation will be evaluated based on the following categories:
- Research and Analysis (40%):
Comprehensive research into the chosen website’s current design and usability, including an analysis of how well it adheres to responsive web design principles. - Evaluation of Website Design and Layout (30%):
An in-depth evaluation of the website’s design and layout, assessing the effectiveness of its structure, visual appeal, and navigation across various devices. - Recommendations for Improvement (20%):
Clear and well-supported recommendations for improving the website’s responsiveness and usability, ensuring the design works seamlessly across mobile, tablet, and desktop devices. - Writing and Presentation (10%):
Evaluation of the clarity, structure, writing quality, formatting, and citation of the report. The report should be well-organised and properly referenced.
Note: More details and guidelines will be available on the Moodle site.
- Critically assess given cases and apply problem solving techniques to create mobile-first solutions using web technology
- Critically review the mobile content industry, mobile technologies and characteristics of mobile devices, and likely future trends.
- Knowledge
- Communication
- Cognitive, technical and creative skills
- Research
- Self-management
3 Practical and Written Assessment
This assessment requires the development of a high-fidelity prototype based on the low-fidelity prototype created in Project Part A. Students will use HTML, CSS, and JavaScript to build a proof-of-concept prototype. The project will involve evaluating the prototype and conducting a user acceptance test to gather feedback. The aim is to demonstrate the application of responsive web design principles, including progressive enhancement for mobile devices while delivering a richer experience for non-mobile devices. The project does not require a fully functional system but should include key functionalities like placeholder outputs to illustrate the system’s capabilities.
Note: More details and guidelines will be available on the Moodle site.
Week 11 Friday (30 May 2025) 11:45 pm AEST
Review/Exam Week Friday (13 June 2025)
The assessment for Project Part B will be evaluated based on the following categories:
- Recap of Your Idea (10%):
Clear explanation of the project idea, demonstrating how it aligns with the goals of responsive web design and the requirements set in Project Part A. - Prototype: Including HTML and CSS (50%):
Development of a high-fidelity prototype using HTML and CSS, with an emphasis on responsive design principles. The prototype should demonstrate the use of fluid grids, proportional images, and layout rules across different screen sizes. - JavaScript (10%):
Implementation of JavaScript functionalities as needed, demonstrating the integration of dynamic features into the website prototype. - Usability Study Results (20%):
Results from the user acceptance test, including feedback gathered and analysis of how well the prototype meets user needs and expectations. - Limitations & Overall Presentation (10%):
A discussion of the limitations of the prototype and the project as a whole. The overall presentation of the report, including clarity, structure, writing quality, formatting, and citation.
Note: More details and guidelines will be available on the Moodle site.
- Apply principles of progressive enhancement to optimise content for the limited memory and processing power of mobile devices, whilst simultaneously delivering a richer experience on non-mobile devices
- Knowledge
- Cognitive, technical and creative skills
- Self-management
As a CQUniversity student you are expected to act honestly in all aspects of your academic work.
Any assessable work undertaken or submitted for review or assessment must be your own work. Assessable work is any type of work you do to meet the assessment requirements in the unit, including draft work submitted for review and feedback and final work to be assessed.
When you use the ideas, words or data of others in your assessment, you must thoroughly and clearly acknowledge the source of this information by using the correct referencing style for your unit. Using others’ work without proper acknowledgement may be considered a form of intellectual dishonesty.
Participating honestly, respectfully, responsibly, and fairly in your university study ensures the CQUniversity qualification you earn will be valued as a true indication of your individual academic achievement and will continue to receive the respect and recognition it deserves.
As a student, you are responsible for reading and following CQUniversity’s policies, including the Student Academic Integrity Policy and Procedure. This policy sets out CQUniversity’s expectations of you to act with integrity, examples of academic integrity breaches to avoid, the processes used to address alleged breaches of academic integrity, and potential penalties.
What is a breach of academic integrity?
A breach of academic integrity includes but is not limited to plagiarism, self-plagiarism, collusion, cheating, contract cheating, and academic misconduct. The Student Academic Integrity Policy and Procedure defines what these terms mean and gives examples.
Why is academic integrity important?
A breach of academic integrity may result in one or more penalties, including suspension or even expulsion from the University. It can also have negative implications for student visas and future enrolment at CQUniversity or elsewhere. Students who engage in contract cheating also risk being blackmailed by contract cheating services.
Where can I get assistance?
For academic advice and guidance, the Academic Learning Centre (ALC) can support you in becoming confident in completing assessments with integrity and of high standard.
What can you do to act with integrity?
