Syllabus - Responsive Web Design
Kent State University CCI Course 46001
- David Roll
- Instructor Email:
- Fall 2018
- Tue/Thur 9:15am-10:30am
- Taylor Hall, Room 331
About This Course
Responsive web design isn’t just a technical solution for web design - it’s an entire process that brings multiple disciplines together to form one product that works across multiple devices. The responsive design process includes user experience, content strategy, information architecture, visual design, development, usability testing and technical testing. Students who will succeed in this field will need to be familiar with not just one, but all of these processes, while working in a team-based environment.
In this course you will learn the fundamental principles for developing standards-based web sites from a mobile-first and content-first perspective. We will explore each aspect of an agile-inspired process, during which you’ll learn each step of what it takes to build a website and ensure its functionality for its users in terms of both usability and performance.
Just a few of the topics planned to be covered in the Responsive Web Design course include:
- Atomic Design
- Pattern Libraries and Style Guides
- User Research Techniques
- Rapid Prototyping
- Modern Web Design Workflows
- Mobile Content Strategy
- Paired and Team Coding
- Mobile-First Design
- Style Tiles and Web Design Techniques
- Modern Web Layout Tools
- FTP / File Structure
Subject to Change Statement
The syllabus and course schedule may be subject to change. Changes will be communicated via email. It is the responsibility of students to check email messages and course announcements to stay current in the course.
In this course, students will:
- Apply a modern workflow to a responsive web design, including competitive research techniques, content development, information architecture, design and development.
- Gather and architect content for the web, with a focus on prioritizing content for use on multiple devices.
- Rapidly prototype web design modules, developing style tiles and reusable patterns for colors, typography, layout and user interface elements.
- Create interactive prototypes and wireframes in HTML/CSS, using standards-compliant HTML and CSS, media queries and responsive layouts.
- Test prototypes for common performance, usability and web browser issues.
- Use version control to create a staging server on which websites will be hosted and updated.
- Work in a team environment, collaborating with students from a variety of disciplines.
- Solve common web design problems both independently and as a group, through the use of online resources, books, videos and fellow students.
Most importantly, by the end of this course, students will be able to:
- Identify and write the most common HTML/CSS properties, with proper indentation and comments, and understand how to use these properties efficiently.
- Organize and prioritize website content to fit information architecture best practices, including a mobile-first methodology.
- Speak intelligently about responsive web design and describe why it’s important to future clients, colleagues or employers.
- Analyze predefined requirements and constraints that a client or employer may ask of a web designer, and creatively apply these to the solution.
- Critique and speak intelligently about web design in terms of content, colors, typography, user interface elements and layout.
- Coordinate a web design project and work with other team members to build deliverables along the way.
- Understand the various roles that are essential to the web design process and appreciate the skills required for each discipline.
- See themselves as capable and confident when working in code, even if they are not primarily developers. Be willing to cross organizational lines and take chances.
- Be motivated to expand their knowledge of web design by following influential web designers and businesses that are currently implementing responsive design.
- Understand how the student and their current area of study fits into a web design role (and their role as a communicator) and expand on their current background to be able to take on future roles in interactive media.
- Understand how HTML/CSS prototypes integrate into large, dynamic content management systems and complex organizations.
- Develop test plans and iterate on future design and content systems after identifying usability or technical issues.
- Identify solutions to complex design/development problems and use online resources to expand knowledge of HTML/CSS processes.
Course Textbook and Materials
There are 2 required textbooks for the course. One provides detailed examples and instructions for HTML/CSS, and the other provides more practical knowledge on web design topics:
- HTML and CSS: Design and Build Websites by Jon Duckett, November 2011, Wiley. (~$19 on Amazon)
- Responsive Web Design by Ethan Marcotte, Second Edition, December 2014, A Book Apart. ($11.00/Ebook or $21.00/Paperback + Shipping)
This course will also make use of video tutorials from Lynda.com (available at no charge to students taking this course), as well as free online readings and videos.
This class will be held once a week and will have both a lecture/discussion and studio/lab component. Students will be assigned readings from a variety disciplines, authors and topics, which will be discussed during the first half of class. All students will have the opportunity to pair with a student from a different background to work on hands-on examples in class each week, as well as a long-term project that will span the semester. Short homework assignments will be given throughout the semester in order to master key topics.
Preparing for Class
Students are expected to come to class prepared. This means:
- Familiarization with the required readings or videos.
- Readiness to participate in class discussions and activities.
- Participating in class discussions and hands-on activities.
- Completing assignments on time and submitting them properly to GitHub each week.
This course will be divided into two parts. Readings, lecture notes and information on preparing for class will be posted to the class website.
Please see the Detailed Course Schedule for specific dates, times and assignments.
Part 1: Principles of Responsive Web Design
Part 2: Responsive Design in Practice
Students will apply competitive research findings to a content prototype, collecting, organizing and prioritizing the most important information. Students will begin an iterative design process using CSS, where they’ll begin by mocking up design components in digital style tiles and then turning those components into reusable HTML/CSS pattern libraries. Students will learn the importance of designing a visual language for their websites using web typography, colors, user interface elements and layouts. Finally, the content and design will begin to come together in the form of prototypes. Students will learn how prototypes are tested with usability, technical and accessibility testing. Part 2 will end with the presentation and class critique of a website prototype and pattern library.
Student learning will be assessed through three types of work: in-class participation, in-class quizzes, short assignments and a multi-stage small group/individual project.
- Graduate Students
- Graduate student assignments may include a more challenging component than undergraduate assignments to support advanced mastery of the subject. When working in collaboration with an undergraduate student, only the graduate student is required to complete this component of the assignment.
There are 100 total possible points for the semester.
|HTML/CSS Mini Exam (In Class)||20|
|CSS Advanced Layout (2 Week Assignment)||5|
|CSS Intermediate Layout||5|
|CSS Basic Layout||4|
|Fonts and Media Queries||4|
|CSS Basics 2||4|
|CSS Basics 1||4|
|HTML Basics 2||4|
|HTML Basics 1||4|
|Group and Self Assesment||5|
|Project Hub, Pattern Library, and Review Session||5|
|Style Tiles and Mockups||5|
|Content and Sketching||5|
|Research and Competitive Analysis||5|
|Semester Project (Overview)||40|
All students are required to attend class regularly and on time. Attendance will be taken at the beginning of every class meeting. Lectures, demos, etc. start promptly at the beginning of class and will not be repeated.
If you have more than three (3) unexcused absences your final grade will be lowered one letter grade, for every subsequent two absences your grade will continue to drop (for example, four unexcused absences will drop an A to a B, on the sixth unexcused absence that B will drop to a C, etc).
Please Note: If you have missed a class due to an unexcused absence it is your responsibility to obtain the information necessary to be up-to-date for the next class. Exchange contact information with a classmate just incase… It is also your responsibility to keep track of your attendance, do not rely solely on the professor to warn you if you are in danger of exceeding the limit.
If you have a combination of three (3) late arrivals or early departures they will be counted as one absence. Because the subject matter is often technical it is critical for you to attend class regularly and on time. As a courtesy, it is a best practice to communicate with the professor in advance (when possible) when you expect to miss a class.
Some assignments, such as in-class presentations, testing and quizzes, require attendance in order to receive full credit for the assignment.
Projects and late assignments can only be made up with a documented excuse (as described in the attendance policies above) for a University approved absence about which I am made aware before class. This policy is nonnegotiable. If I do not know in advance that you will not be in class, I automatically will assign you a “0” for the exam, quiz, or assignment.
This class uses team-based learning for part or all of the semester. Students must agree to follow the Group Rules & Expectations throughout the course of the project.
Final letter grades will be assigned on the basis of the following table. Graduate student assignments will take into account additional advanced components (described within the assignment), differing from undergraduate assignments.
Hardware & Software
- Although a laptop is not required, if you have a laptop you are encouraged to bring it to class, as it may be helpful for following along in class. You’ll also be viewing and testing your work on multiple devices, so phones and tablets are encouraged.
- Computers will be provided for in-class work, but you may be asked to share with another student. Students will also be permitted to work on these computers outside of class, when needed.
- We will be using a variety of free and paid software programs and tools.
- Paid software may only be used on university-owned computers and will be provided at no charge. If you would like to use paid software on your personal computer, you will need to purchase a license.
- Software programs and tools to be used in the course include: Sketch, Illustrator, Atom, GitHub, web browsers and Google Drive.
Communicating with the Instructor
The instructor will announce office hours and communication instructions during the first class.
University Policies and Procedures
The following policies and procedures apply to students enrolled at Kent State University. For a complete listing of university policies, please visit the Policy Register page on the Kent State University website.
Course enrollment and withdrawal
University policy requires all students to be officially registered in each class they are attending. Students who are not officially registered for a course by published deadlines should not be attending classes and will not receive credit or a grade for the course. Each student must confirm enrollment by checking his/her class schedule (using Student Tools in FlashFast) prior to the deadline indicated. Registration errors must be corrected prior to the deadline.
Every class has its own schedule of deadlines and considerations. To view the add/drop schedule and other important dates for this class, click the CRN link next to each course on “View or Print Course Schedule and Purchase Textbooks” or click the green clock from “Add or Drop a Course” from the Student Category/Resources Page/Courses and Registration Section in FlashLine to access course deadlines.
The administrative mark of IN (Incomplete) may be given to students who are unable to complete the work due to extenuating circumstances. To be eligible, undergraduate students must be currently passing and have completed at least 12 weeks of the semester. Graduate students must be currently earning a C or better grade and are unable to complete the required work between the course withdrawal deadline and the end of classes. The time line shall be adjusted appropriate for summer sessions and flexibly scheduled courses. Appropriate documentation is generally required to support the extenuating circumstance. The student must initiate the request for the Incomplete mark from the instructor, and it is the responsibility of the student to arrange to make up the incomplete work. Incomplete grades must be made up within one semester (not including summer sessions) for undergraduate students and one calendar year for graduate students. Unless the course is completed or an extension is granted, incomplete grades will automatically lapse to the grade designated on the Incomplete Mark Form at the end of one semester for undergraduate students and at the end of one year for graduate students.
University use of electronic mail
A university-assigned student email account shall be an official university means of communication with all students at Kent State University. Students are responsible for all information sent to them via their university-assigned email account. If a student chooses to forward information in their university email account, he or she is responsible for all information, including attachments, sent to any other email account. To stay current with university information, students are expected to check their official university email account and other electronic communications on a frequent and consistent basis. Recognizing that some communications may be time-critical, the university recommends that electronic communications be checked minimally twice a week.
Plagiarism and academic integrity
Students enrolled in the university, at all its campuses, are to perform their academic work according to standards set by faculty members, departments, schools and colleges of the university; and cheating and plagiarism constitute fraudulent misrepresentation for which no credit can be given and for which appropriate sanctions are warranted and will be applied. For more information: http://www.kent.edu/plagiarism.
Students with disabilities
University Policy 3342-3-01.3 requires that students with disabilities be provided reasonable accommodations to ensure their equal access to course content. If you have a documented disability and require accommodations, please contact the instructor at the beginning of the semester to make arrangements for necessary classroom adjustments. Please note, you must first verify your eligibility for these through Student Accessibility Services (contact 330-672-3391 or visit www.kent.edu/sas for more information on registration procedures).
Student survey of instruction evaluation
It is a standard practice of Kent State University to distribute and administer to the learners a confidential and anonymous questionnaire at the completion of the course. The results will be forwarded to the Instructor only at the completion of the class and the submission of all grades. The Instructor will then incorporate the feedback received in future course offerings and in his continual improvement of the course. Please candidly and honestly describe your opinions of the strengths and weakness you experienced as a learner in the course.
Notice of my copyright and intellectual property rights
Any intellectual property displayed or distributed to students during this course (including but not limited to powerpoints, notes, quizzes, examinations) by the professor/lecturer/instructor remains the intellectual property of the professor/lecturer/instructor. This means that the student may not distribute, publish or provide such intellectual property to any other person or entity for any reason, commercial or otherwise, without the express written permission of the professor/lecturer/instructor.Return to Course