- COM 372 D01, 10243, MWF 10:10 – 11:00, Merion Hall 174
- Office: Bronstein Annex (The B:Social Building) 202
- Office Hours: TH 12:30 – 2:30 and by appointment
- email: wwolff [at] sju [dot] edu
- Twitter: @billwolffsju (note new Twitter account)
- Instagram: @billwolff
COM 372 Web Design & Development is a required course for all Communication Studies majors that serves as an introduction to the theory and practice of web design and development. Students will learn about web technologies and standards while building accessible and usable web sites. No previous experience is necessary, and the course will center on beginner/intermediate aspects of web design and markup languages–specifically, HyperText Markup Language (HTML5) and Cascading Style Sheets (CSS3).
Readings will focus on the Web’s architecture and its history, the basics of site development, and current conversations about best practices (such as responsive design, grid systems, user experience, digital video, and mobile technologies). Students will study web technologies and apply best practices to their own goals or interests–creating, for example, a personal web portfolio or a basic client project–while developing a rhetorical and technological understanding of web-based communication.
The course is split into three units, with each major project building on the knowledge and skills honed in the prior project. The major projects are:
Project 1: Responsive, Standards-Compliant Resume and Statement
In this project students will learn the basics of composing for the web through the process of coding their web site in standards-based HTML5 and CSS. Students will compose screen and print versions of their resume and an associated professional statement. Following the tenants of Responsive Web Design and Mobile First theories, students will create versions that are optimized to be viewed on computer screens and smartphones. While completing this project, students will learn a little about the history of the internet and web design and how to compose HTML and CSS in text editor; how to transfer files to and from a server using FTP software; how to use a file versioning system with Github, and how to use validation tools to ensure their site is standards-compliant and accessible for people with disabilities. (Associated Course Objectives: 2, 3, 4, and 5)
Project 2: CSS Zen Garden Design
In this assignment we are going to be working with the CSS Zen Garden, a site where designers have an opportunity to create beautiful pages and experiment with the possibilities offered by CSS beyond the basics learned for Project 1. Many of the sites on the page are intricate and far beyond anything expected of the class in the short space of time we have. The goals of this assignment are to play, experiment, and take risks with your ideas, imaginations, and style sheets. I do not expect that all of your ideas will come to fruition. What I do expect is for you to look closely at CSS, its design possibilities, and consider how you might be able to use it more fully in the future. This is an exiting time in web design, and in this project we will be jumping head first into the discussion. (Associated Course Objectives: 2, 3, 4, and 5)
Project 3: Grid-Based, Responsive, Standards-Compliant Professional Site
In this project students will design a professional web site using HTML5 and CSS3 code that is standards-compliant and follows Mobile First, Responsive Web Design, Grid-based Design, usability, and accessibility theories and practices. The site will have multiple pages, including a portfolio, about page, resume, and blog. It will link to and bring together your professional online presences and will be optimized to be viewed on a variety of web-enabled devices. The site will be designed in the following stages: sketching, wire-framing, prototyping, developing. (Associated Course Objectives: 2, 3, 4, and 5).
As a way to enhance course collaboration and community and create a history of their team’s work, students will share and use design ideas in a class-wide online Design Journal and tweet their thoughts and work using the #wdds17 hashtag. (Associated Course Objectives: 1, 2, 4, and 5).
Students will also individually complete a midterm and final Story of Learning that presents and reflects on work completed during the semester in terms of each of the Course Learning Objectives (Associated Course Objectives: 2, 4, and 5).
Should any aspect of class confuse/concern/trouble you, or if you have questions about any of the assignments, readings, or anything else, please do not hesitate to contact me.
Course Learning Objectives
This course embodies the Saint Joseph’s University mission to “prepare students for personal excellence, professional success, and engaged citizenship” and “model [a] lifelong commitment to thinking critically, making ethical decisions, pursuing social justice.” It is informed by several Core Objectives created by the Communication Studies department, as well as the importance of Reflection advocated by the Office for Mission and Identity.
Objective 1: Collaboration
Students will develop their ability to work collaboratively in a variety of in- and out-of-class activities and settings.
Objective 2: Effective Communication
Students will be able to identify and employ a range of effective communication strategies to navigate audience, purpose, and context.
Objective 3: Human-Centered Design
Students will understand and apply human centered design approaches to communicating through digital media.
Objective 4: Reflection
Students will develop their understanding of the important role of reflection during the investigation, design, and communication process.
Objective 5: Risk-taking
Students will know what it feels like to step out of their comfort zones and take risks with their approaches to and understanding of web design.
Texts, Software, and Materials
Required Print Texts
Duckette, J. (2011). HTML & CSS: Design and build websites. Indianapolis, IN: John Wiley & Sons, Inc.
Required Print OR Digital Texts
Cederholm, D. (2014). CSS3 for web designers, Second Edition. New York: A Book Apart.
Keith, J., & Andrew, R. (2015). HTML5 for web designers, Second Edition. New York: A Book Apart.
Marcotte, E. (2011). Responsive web design. New York: A Book Apart.
Walter, A. (2011). Designing for emotion. New York: A Book Apart.
- An SJU email account that you check regularly
- A Dropbox account
- A GitHub account
- A touch-screen device (phone, tablet, etc.)
- The domain of your name (e.g., williamwolff.org is the instructor’s; you should have purchased one in COM 200; if not, you may buy one from Reclaim Hosting)
- A personal computer, with the following software installed:
- Brackets plain-text editor (free)
- Firefox Developer Edition (free)
- Github Desktop (free)
- Image-editing software (such as the free and open-source GIMP)
- As many different browsers as your operating system supports (e.g., Chrome, Opera, Firefox; all free)
- various articles in PDF format and videos (found on the Readings page)
- a graph paper notebook
Grades are determined on the basis of a Story of Learning, presented in the form of a GoogleDoc, which incorporates statements about your learning, links to work completed throughout the course, important moments of reflection about the course, and social media tweeted, blogged, or other media that you have sent out in to the internets throughout the semester. Students will present their Story of Learning at the midterm and at the end of the semester. In each case, each student will assess their own performance according to a predetermined grading criteria using their own work as evidence to justify a possible grade. At the midterm, we will meet in individual conferences to discuss your self-assessment and make plans for the rest of the semester.
A note on in-class discussions: Contribution to in-class discussion is expected in this class. That is, I expect all students in all class meetings to contribute thoughtful insights into the texts and the ideas discussed in class. Each member of our community of learning needs to be actively engaged in the learning process. Each student is here to contribute to the exchange of ideas. Ask questions. Be curious. As a student in this course you will create your own communal context for learning by engaging in conversations with others. As such, being prepared to participate in discussions and activities is paramount. This entails having read, annotated, and thought about the required materials carefully before class starts. The more you as students shape the conversations by engaging with each other, validating each others ideas, pushing each other, and asking each other questions without my prompting, the more this class will feel like a community and not just another class. No grade will be assigned for in-class participation; however, if your participation is lacking, it will seriously impact the Collaboration section of your Story of Learning. There may be times when the class meets in an online space rather than in the classroom. You’ll be notified ahead of time if this is the case.
A note on collaboration. All design is collaborative, as we will see in this class. Though our projects will be completed individually, we will be leaning on each other throughout our design processes for ideas, help, and feedback. I, too, will be learning from you, as you uncover new design tips and techniques found online. You are expected to be collegial, professional, thoughtful, mindful, polite, and open-minded in all of your interactions in the course, especially when visiting with clients. Significant moments that show a lack of collegiality, etc., can result the a reduction in your grade.
A note about grades: Grades in the A-range are those that show the student working at levels significantly higher than what is expected. Grades at the B-level are those that show the student working at levels at or just above what is expected. Grades at the C-level and below are those that show the student working at levels below what is expected.
All major assignments must be completed to pass the course. It is better to complete an assignment late then not to complete it at all.
A Note on Academic Technology
Because this is an upper-level course, you are expected to be familiar with the department’s approach to using digital technologies: experiment, take risks, and play.
However, as much as technology makes life easier, at times it can also be difficult (computer crashes, deleted work, slow internet connection, etc.). Plan accordingly: “the computer ate my homework” or “the internet was down” are not reasons to forgo doing the assigned work. It is in your best interest to leave extra time, and back up frequently, especially at first to ensure that technology does not get in the way of your work.
That being said, I will never mark down or refuse to accept a project because of difficulty using academic technology. The software and applications we use are a means to complete the work, not the work itself. The software is often new and sometimes still has bugs. I am aware of this and am aware that problems can happen. If you run into trouble, let me know as soon as possible so I can help you work through it. There is no reason to sit for hours getting more and more frustrated. Send me an email with as detailed a description of your problem as possible and we’ll figure out what is going on.
If you are having trouble getting a project completed on time (for whatever reason) please let me know about your delays as soon as possible. It is better to complete an assignment late then to not complete it at all, and I am more than happy to work with you so you can compete the best project you can.
I am committed to the principle of universal learning. This means that our classroom, our virtual spaces, our practices, and our interactions be as inclusive as possible. Mutual respect, civility, and the ability to listen and observe others carefully are crucial to universal learning.
Any student with particular learning needs should contact the Student Success Center at 610-660-1041. The Center is located in Bellarmine Hall. The staff is available to answer questions regarding accommodations or assist you in your pursuit of accommodations. Then you and I can work out the details of any accommodations needed for this course.
Students with Disabilities
Requests for Accommodations: Reasonable academic accommodations may be provided to students who submit appropriate documentation of their disability. Students are encouraged to contact Dr. Christine Mecke in the Office of Student Disability Services, Bellarmine, B-10, at email@example.com; or at 610.660.1774 (voice), or 610.660.1620 (TTY), for assistance with this issue. The university also provides an appeal/grievance procedure regarding requested or offered reasonable accommodations through Dr. Mecke’s office. More information: www.sju.edu/sds.
Grievance Procedures for Students with Disabilities, Appeal Process: The Office of Student Disability Services will seek to provide reasonable accommodations to qualified students with disabilities. However, there may be times when a disagreement as to what is considered a reasonable accommodation will occur between the student and the University. The student has a right to file a grievance for complaints regarding a requested or offered reasonable accommodation on the basis of a disability under Section 504 and the Rehabilitation Act of 1973, Title II of the Americans with Disabilities Act (ADA) and University policies. If you have any questions regarding the appeals process, please contact Dr. Christine Mecke, Director Student Disability Services – Bellarmine – Room G10 – firstname.lastname@example.org.
For further information regarding accommodations, please see: www.sju.edu/int/studentlife/studentresources/thesuccesscenter/ssd.
As this course is highly interactive with complex coding discussed nearly every meeting, your success is absolutely tethered to your presence and participation. The course will move quickly, and each successive meeting will build upon the concepts of the previous. Missing a class puts you at a serious disadvantage in terms of the larger semester arc. This is not the type of course where you can “ask for the notes” from a classmate and get the same learning experience. If you miss class you will miss something important.
Please come to class on time, prepared, having completed the assigned reading and writing, and ready to contribute to class discussions, to listen seriously and respectfully to the thoughts of others, and to participate in all in-class activities.
According to the 2015-2016 Academic Catalog, “Credit and degree-seeking students are obliged to attend all classes and take all examinations. Absences totaling twice the number of hours the class meets a week will be permitted for illness or serious reasons” (p. 513). For our section of COM 372, this means students may miss up to 6 classes “without danger of failure due to absence” if—and only if—there is a “serious cause” (p. 513). This excludes common colds, car break-downs, etc. Absences for religious purposes do not count against the permitted number (as long as prior notification is given).
Except for “serious reasons,” missing more than 1.5 classes will affect your grade. More than 6 absences will result in failing the course. Lateness counts as .5 of an absence. Leaving early will count as .5 of an absence. The grade reductions after 1.5 absences:
2 absences = -1/4 grade
3 absences = -1/2 grade
4 absences = -3/4 grade
5 absences = 1 full letter grade
6 absences = 1.25 letter grade
6.5 or more = FA (failure due to absences)
Your primary responsibility is to be in class and fully present.
We will have several required conferences throughout the semester where we discuss your progress in the class and questions you have. Missing a conference equals missing a day of class.
Many of the assignments throughout the semester will require participation in online spaces. Students should work to preserve the same atmosphere of respect and consideration that occurs in the classroom. Disagreements may arise and consensus is not always possible (indeed disagreements are productive). However, name calling, bullying, harassing, shaming, flaming, trolling, etc. is antithetical to the goals of this course and decent humanity.
There will be times during the semester when I will need to contact the class and you will need to contact me. I will contact you via your SJU email account, so please be sure you are checking it regularly and/or forwarding it to the email service you use most regularly. I do not recommend calling me on my office phone.
I strongly suggest you contact me via Twitter (@billwolffsju—note new Twitter account) and/or email. Email, however, tends to be seen as an informal medium. This, however, should not always be the case. All emails that I send to you will have a meaningful subject line and a proper salutation (“Hi Class,” or “Hi Jane,” etc.). The first sentence will notify you of the purpose of the email, and then will get to the heart of the matter. It will end with a formal closing (“Thanks, BW”). (See this article on contacting a professor when going to be absent.) I expect the same from any email you send. Twitter is less formal, so feel free to just tweet me questions. Please add the course hashtag (#wwds17) to all course related tweets.
I’ll get back to your tweets and emails as soon as possible—usually within half a day. With two small children at home, during the week I tend to be offline 5:00pm – 9:00pm and after 11:00pm and during the weekend I’ll be online sporadically, so don’t expect an immediate response during those times. If I don’t get back within a day, it may be that I did not see your tweet or email for one reason or another, such as an email going in my spam folder. Send me a polite reminder and/or ask me in class if I got it, and I’ll get back immediately.
Computer Classroom Etiquette
These general guidelines will help make your overall course experience more effective, productive, and educational:
- When someone is speaking and you are not asked to be following on your computer, please turn and face that person. Everything the instructor is doing on the computer will be projected onto the screen in the front of the classroom.
- Class is made up of students with widely varying levels of computer expertise. If you have technical experience, please be considerate of those who do not. Do not act bored during these times of instruction, since that will distract others and alienate you from them. Instead, offer what help you can to others if they seem lost or confused. You will not only help your colleague, but you will create a collaborative atmosphere in the class, both of which are only to your advantage.
- If you are a novice computer user, do not be afraid of asking questions, even when it seems that everyone around you is “getting it.” I will not know what areas are mysterious unless someone asks for clarification, and they will be more than happy to answer your questions. The chances are good that if you don’t understand something that others don’t either, and your I need to know this. Don’t be intimidated into silence.
- When communicating with classmates online please pay special attention to how you word things. Electronic communication is wonderful for many reasons, but because tone is not readily apparent, oftentimes things are misinterpreted and people can get quite hurt.
- Be sure to bring to class all your required materials. If you have time in class to work on projects, don’t work on other courses or personal business. Make use of your limited time in the classroom, ask me and your classmates questions, and take advantage of the opportunities the course and the classroom offers you. Always log out of the computer before leaving for the day.
There will be times when I ask you to put your phones, tablets, and computers away so we can focus on the discussion.
Writing center: You will write in this class. If you are particularly concerned about your writing or think you might benefit from extra support, SJU has a writing center with peer tutors trained to help with all kinds of assignments. Locations are in Merion Hall (room 162) and Post Learning Commons (room 128). You can drop in during open hours or make an appointment online.
Digital Media Zone (DMZ): The DMZ is a great resource if you need help working through the technical aspects of this class, such as Google docs or image editing. They have trained staff and fancy computers. The DMZ is located on the second floor of the library. http://www.sju.edu/int/academics/resources/atdl/dmz.html
Academic Honesty: Please familiarize yourself with the University’s Academic Honesty Policy.
The carrying, or presence, of a firearm is not permitted on University property, including, but not limited to, one’s vehicle, office, residence or locker, except when the firearm is carried by a deputized law enforcement officer and/or agent who is conducting official business on University property.
The University policy concerning the prohibition against the carrying, and presence, of firearms on campus, is intended to conform to applicable statutes of the Commonwealth of Pennsylvania. Such statutes define firearms as any pistol, revolver, shotgun, or any weapon which is capable of firing a projectile.
Portions of this course are borrowed from and inspired by Karl Stolley‘s courses.