DRAFT Based on Summer 2015
UNIVERSITY OF WISCONSIN-MILWAUKEE
School of Information Studies
L&I SCI (491-206) – Responsive UI Design (Web)
SYLLABUS
Instructor: Matthew Friedel
E-mail: friedelm@uwm.edu
Office Hours: by appt.
Location: North Quad - 3565
Phone:
414-229-1750
Fax:
414-229-6699
Meeting Times & Location: ONLINE – SUMMER 2015 - 7/06 - 8/15
CATALOG DESCRIPTION:
Students will learn the basics of Responsive UI Design including user interface
designs for smartphones, tablets, and the desktop. 3 credits.
GENERAL DESCRIPTION:
Students will learn the basics of Responsive UI Design including user interface
designs for smartphones, tablets, and the desktop. Students will learn the
difference between adaptive design and responsive design. Students will develop
several basic web based applications that provide the foundations for developing
more advanced designs. Students will learn the basics of HTML5, media queries,
Story Boarding, Wire framing and GUI Graphical Interface design for mobile and
web applications. 3 credits.
TIME REQUIREMENT: The classroom version of this course meets for three hours
per week. If the student can be expected to spend two to three hours outside
class for each hour spent in class then a reasonable expectation is 12 hours of
work per week.
PREREQUISITES:
INFOST-240: Introduction to Web Design
OBJECTIVES:
Upon completion of the course, students will be able to:
1. Understand the key concepts in Responsive UI Design Development.
2. Develop basic Responsive UI Design programming skills.
3. Develop interfaces for smartphones, tablets, and the desktop.
Responsive UI Design (Web)
Page 2 of 9
METHOD:
Lectures, discussions, individual and group assignments, including in-class
presentations. Students with special test and note-taking needs should contact
the instructor as early as possible for accommodations. See policies below.
TEXTS:
Required:
Responsive Web Design by Ethan Marcotte
(http://www.abookapart.com/products/responsive-web-design)
Collaboration:
Information Technology is an evolving industry that requires individuals that are
resourceful and are able to collaborate with others to solve problems. Students
are required to learn and solve any problems with other learners, using the
instructor as a last resource.
Contacting the Instructor & Email Procedure:
1) First post your question on the Discussion Board on D2L. Your fellow
students may be experiencing the same problem. They may be able to address
issue immediately or will benefit from the discussion. Do not attach your source
code to the Discussion Board.
2) If your issue is still not resolved, then send your instructors an Email. You
may attach source code to the Email for your instructors to review. Your
instructors check the Discussion board and Message daily.
Email is the primary method of communication.
All personal communication between the instructor and student will be conducted
using the Email. Students are required to check their Email at least twice a week
on non-consecutive days.
The instructor will check Email at least once a day during the normal school week
when school is in session. The instructor will reply within 24 hours to all Email
sent Monday - Thursday and will reply by Monday afternoon for all Email sent
Responsive UI Design (Web)
Page 3 of 9
Friday - Sunday during the semester when school is in session unless notified by
the instructor.
When sending an Email it is the student's responsibility to ensure that a reply has
been received from the instructor within 24 hours if sent Monday - Thursday and
by Monday afternoon if sent on a weekend. If a reply has not been received, the
student is to resend the Message indicating that it is a resend. Example:
Student sends an Email to the instructor at 7:00pm on Monday night. If the
Student has not received a reply by 7:00pm on Tuesday night, the student must
resend the Message until reply is received.
Email Etiquette:
1. The topic of the Email must be in the Subject area of the Email. Example:
Assignment 1 Question – Responsive Design Course
2. Every Email must include your first and last names in the body of the
Message
3. Clearly indicate the problem or question that you have.
4. Provide what you think is the solution. Illustrate or attach any supporting
information.
5. When submitting a question or problem:

Clearly define the situation, question, or problem

Identify what you think is wrong, not correct, or misunderstood

Detail what you think is the solution
DO NOT give the instructor a blank page.....the instructor can only help you find
the right answer, if you know where you are and where you want to go
Personal & Professional Absences/Issues:
No late assignments or postings will be accepted by the instructor
without instructor approval prior to the date the work is listed as a
deliverable in the D2L Schedule.
Students may take vacations or travel on business during the semester.
Students are required to contact the instructor via Email before they leave if
travel for personal or professional reasons will impact their ability to participate in
the discussions or submit assignments. Students are to provide the instructor
with the travel dates, the reason for the travel, the work that it will affect, and
the dates when the affected work will be submitted.
Responsive UI Design (Web)
Page 4 of 9
Students experiencing any personal issues affecting their ability to
complete work need to contact the instructor via Email before the work is listed
as a deliverable in the Syllabus Schedule. Provide the instructor with the
situation, the work that it is affecting, and the accommodations that are being
requested.
The instructor reserves the right to refuse any request for any
accommodation or to set requirements for accepting late work due to personal or
professional absences/issues.
Responsive UI Design (Web) – Semester Project
Goal: Create User Cases, Story Board, and develop a working Responsive
Website (RWD) for Smartphones, Tablets, and Desktop Computers.
Responsive web design (RWD) is a web design approach aimed at crafting sites
to provide an optimal viewing experience—easy reading and navigation with a
minimum of resizing, panning, and scrolling—across a wide range of devices
(from mobile phones to desktop computer monitors). A site designed with RWD
adapts the layout to the viewing environment by using fluid, proportion-based
grids, flexible images, and CSS3 media queries. The fluid grid concept calls for
page element sizing to be in relative units like percentages, rather than absolute
units like pixels or points. Flexible images are also sized in relative units, so as
to prevent them from displaying outside their containing element. Media queries
allow the page to use different CSS style rules based on characteristics of the
device the site is being displayed on, most commonly the width of the browser.



Phase 1 – User Case Analysis (25% Grade of Project Grade)
Create at least 3 User Cases
Example:
o A front end user can assess site content from a smartphone, tablet, and
desktop computer.
o A front end user can share site content via social media (facebook,
twitter)
o A back end administrator can update site content via wordpress portal

Phase 2 – Storyboard / Wireframe Responsive Site (25% Grade of Project
Grade)
o Use FluidUI, MockingBird, Hand sketch, or other tools to
wireframe/storyboard site on different devices.

Phase 3 – Build Prototype Responsive Site (50% Grade of Project Grade)
o Test Site User Case Analysis.
o Final Presentation
Responsive UI Design (Web)
Page 5 of 9
CLASS SCHEDULE:
ASSIGNMENTS:
The instructor will provide any assistance upon the students’ inquiry; however,
the student is responsible for his/her own effort to complete the assignments.
Written assignments are due in the appropriate D2L drop box by 11:59 p.m. on
the specified date shown on D2L. It is your responsibility to be aware of them.
Submit zip file only! No .rar or other formats. Please check to make sure all
files where included in folder. Empty zip files will be given a zero!
Late submissions: No late work (assignments, discussion postings, etc.) will be
accepted by the instructor without instructor approval prior to the date the
work is listed as a deliverable in D2L. Students are to contact the instructor via
email before the work is listed as a deliverable in D2L. Instructor reserves the
right to refuse any request.
Responsive UI Design (Web)
Page 6 of 9
CLASS PARTICIPATION:
Class participation will be based on your regular attendance at class meetings
and substantive contributions to class discussions.
EVALUATION:
Undergraduate
Students
Graduate
Students
Individual Assignments
40%
N/A
Discussion Forum**
Individual Project
20%
40%
N/A
N/A
100%
100%
Total
** See Class Discussion Rubric
GRADING SCALE:
91-100
A
71-79
C
90-90.99
A-
70-70.99
C-
89-89.99
B+
69-69.99
D+
81-89
80-80.99
B
B-
61-69
60-60.99
D
D-
79-79.99
C+
Below 60
F
Responsive UI Design (Web)
Page 7 of 9
CLASS DISCUSSION RUBRIC:
5
Quality of
Comments
Active
Listening
4
3
2
1
Timely and
appropriate
comments,
thoughtful and
reflective,
responds
respectfully to
other student's
remarks,
provokes
questions and
comments from
the group
Volunteers
comments, most
are appropriate
and reflect some
thoughtfulness,
leads to other
questions or
remarks from
student and/or
others
Volunteers
comments but
lacks depth,
may or may
not lead to
other
questions from
students
Struggles but
participates,
occasionally offers
a comment when
directly questioned,
may simply restate
questions or points
previously raised,
may add nothing
new to the
discussion or
provoke no
responses or
question
Does not
participate
and/or only
makes
negative or
disruptive
remarks,
comments
are
inappropriate
or off topic
Posture,
demeanor and
behavior clearly
demonstrate
respect and
attentiveness to
others
Listens to others
most of the time,
does not stay
focused on
other's
comments (too
busy formulating
own) or loses
continuity of
discussion.
Shows
consistency in
responding to
the comments of
others
Listens to
others some of
the time, does
not stay
focused on
other's
comments (too
busy
formulating
own) or loses
continuity of
discussion.
Shows some
consistency in
responding to
the comments
of others
Drifts in and out of
discussion,
listening to some
remarks while
clearly missing or
ignoring others
Disrespectful
of others
when they
are speaking;
behavior
indicates
total noninvolvement
with group or
discussion
Responsive UI Design (Web)
Page 8 of 9
UWM AND SOIS ACADEMIC POLICIES
The following link will take you to UWM pages/links which contain university
policies affecting all UWM students.
http://www.uwm.edu/Dept/SecU/SyllabusLinks.pdf Undergraduates may also
find the Panther Planner and Undergraduate Student Handbook useful
(http://www4.uwm.edu/dos/student-handbook.cfm). For graduate students,
there are additional guidelines from the Graduate School
(http://www.graduateschool.uwm.edu/students/current/), including those found
in the Graduate Student and Faculty Handbook:
http://www.graduateschool.uwm.edu/students/policies/expanded/. The following
link will take you to pages/links which contain SOIS policies affecting all SOIS
students. http://www4.uwm.edu/sois/resources/formpol/policies.cfm
Students with disabilities. If you will need accommodations in order to meet
any of the requirements of a course, please contact the instructor as soon as
possible. Students with disabilities are responsible to communicate directly with
the instructor to ensure special accommodation in a timely manner. There is
comprehensive coverage of issues related to disabilities at the Student
Accessibility Center (http://www.uwm.edu/Dept/DSAD/SAC/MainOffice.html ),
important components of which are expressed here:
http://www4.uwm.edu/sac/SACltr.pdf.
Religious observances. Students’ sincerely held religious beliefs must be
reasonably accommodated with respect to all examinations and other academic
requirements, according to the following policy:
http://www4.uwm.edu/secu/docs/other/S1.5.htm. Please notify your instructor
within the first three weeks of the Fall or Spring Term (first week of shorter-term
or Summer courses) of any specific days or dates on which you request relief
from an examination or academic requirement for religious observances.
Students called to active military duty. UWM has several policies that
accommodate students who must temporarily lay aside their educational pursuits
when called to active duty in the military (see
http://www4.uwm.edu/academics/military.cfm), including provisions for refunds,
readmission, grading, and other situations.
Incompletes. A notation of “incomplete” may be given in lieu of a final grade to
a student who has carried a subject successfully until the end of a semester but
who, because of illness or other unusual and substantial cause beyond the
student’s control, has been unable to take or complete the final examination or
some limited amount of other term work. An incomplete is not given unless the
student proves to the instructor that s/he was prevented from completing course
requirements for just cause as indicated above
(http://www4.uwm.edu/secu/docs/other/S31.pdf).
Responsive UI Design (Web)
Page 9 of 9
Discriminatory conduct (such as sexual harassment). UWM and SOIS are
committed to building and maintaining a campus environment that recognizes the
inherent worth and dignity of every person, fosters tolerance, sensitivity,
understanding, and mutual respect, and encourages the members of its
community to strive to reach their full potential. The UWM policy statement
(http://www4.uwm.edu/secu/docs/other/S47.pdf) summarizes and defines
situations that constitute discriminatory conduct. If you have questions, please
contact an appropriate SOIS administrator.
Academic misconduct. Cheating on exams and plagiarism are violations of the
academic honor code and carry severe sanctions, ranging from a failing grade for
a course or assignment to expulsion from the University. See the following
document (http://www4.uwm.edu/acad_aff/policy/academicmisconduct.cfm) or
contact the SOIS Investigating Officer (currently the Associate Dean) for more
information.
Complaints. Students may direct complaints to the SOIS Dean or Associate
Dean. If the complaint allegedly violates a specific university policy, it may be
directed to the appropriate university office responsible for enforcing the
policy. http://www4.uwm.edu/secu/docs/other/S49.7.htm
Grade appeal procedures. A student may appeal a grade on the grounds that it
is based on a capricious or arbitrary decision of the course instructor. Such an
appeal shall follow SOIS appeals procedures or, in the case of a graduate
student, the Graduate School. These procedures are available in writing from the
respective department chairperson or the Academic Dean of the College/School
(http://www4.uwm.edu/secu/docs/other/S28.htm).
Examinations, Finals. The Secretary of the University is authorized to prepare
the final examination schedule. The time of the final examination for an individual
or a class may be changed only with the prior approval of the dean or director of
the respective college/school. The change will involve a postponement to a later
date. For individuals with exam conflicts, a separate week at the very end of the
exam week will be reserved to take one of the conflicting exams
(http://www.uwm.edu/Dept/SecU/acad+admin_policies/S22.htm).