Syllabus - Responsive Web Design
TiEEdu Responsive Web Design Course - 001
- Instructor Name:
- Anshul Dwivedi
- Instructor Email:
- Instructor Contact:
- +91 8178116799
11:00 a.m. - 4:00 p.m.
- Greater Noida, Noida
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
- Browser Testing
- Version Control
- Paired and Team Coding
- Mobile-First Design
- Style Tiles and Web Design Techniques
- Modern Web Layout Tools
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.
This class will be held for four days 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 internship. Short homework assignments will be given throughout the internship 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.
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 internship.
|RWD Case Study||4|
|HTML/CSS Mini Exam||10|
|In-Class Participation / Attendance||4|
|HTML Basics 1||4|
|HTML Basics 2||4|
|CSS Basics 1||4|
|CSS Basics 2||4|
|Fonts and Media Queries||6|
|Boxes and Layout||6|
Internship Project Assignments
We’ll be covering many topics during class, as well as working in groups on exercises to help you master web design techniques. Therefore, attending each of the classes is crucial. All absences will only be accepted for the following reasons: sickness (with medical note only), athletic event (with coach’s note), religious observation, military responsibility (with documentation) and death in the family (with documentation).
Students who miss more than two classes without proper documentation will receive a 0 for their class participation grade for the internship.
If you miss class, you are still responsible for contacting the instructor to see what was assigned that day, as well as meeting all assignment deadlines.
Some assignments, such as in-class presentations, testing and quizzes, require attendance in order to receive full credit for the assignment.
The assignments deadlines are to help you manage the workload and stay on track with the course. If an assignment will be late, students must contact the instructor and explain. We accept the following reasons for late assignments: sickness with medical note, athletic event (with coach’s note), religious observation, military responsibility (with documentation), death in the family (with documentation).
My policy for late assignments has 3 rules:
- Late assignments will be accepted so long as you contact the instructor to indicate that it will be late and provide an explanation.
- Late assignments must be submitted within 1 week of the original due date, without penalty, so long as the student meets the first rule. After 1 week the assignment will be marked as 0.
- An additional extension may be possible in exceptional circumstances, with documentation. This requires a face-to-face conversation between the student and the instructor.
This class uses team-based learning for part or all of the internship. 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.
|A||93% or higher|
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 our 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
My office hours for this semester are:
- Monday - Thursday: 10:30 a.m. - 4:30 p.m.
My email address is email@example.com. Here is my email policy:
- I will usually respond within 24 hours during the week (Mon-Fri). Do not expect an immediate response.
- I typically check email in the afternoons or evenings, not in the mornings.
- I may not respond to email on weekends.