Course Overview
This online course will introduce the intermediate level designer/programming student to the wonders of the responsive website. Responsive websites have become almost a necessity, because websites are now being looked at on such a variety of screen sizes. No longer is it acceptable for a website to only look good on one screen size, and most companies don’t want to pay to have three unique sites designed. An affordable and increasingly popular option is to design one website that can comfortably scale from the widest cinema display all the way down to the smallest mobile phone display.There is a growing demand for designers who can create such sites, and students who take this course will be fully prepared to fend off job offers left and right.
Learning Outcomes
- The student will design and code a fully responsive website by the end of the class.
- The student will comfortable converting rigid pixel-based grids into percentage based grids.
- The student will understand the unique challenges of each size browser–mobile, tablet and desktop–and can design with them in mind.
Requirements
- Comfortable coding in HTML, CSS, and Javascript/JQuery
- Comfortable designing in a browser (designing on a grid, pixel based measurements, web-fonts, interactive elements etc)
Course Policy
Every student has 48 hours to complete their work. Any projects or assignments that are turned in late will be deducted an entire letter grade. Afterwards, half a letter grade will be deducted per day. If a student anticipates being late to their selected session time, they have the option to reschedule for another session, but points will be deducted for tardiness after 5 minutes. Failure to attend 3 classes will result in a full letter grade deduction. If the student misses any additional classes, they will be given an alternate assignment for whichever section to prevent them from finding answers off the original assignment. Any students who have attended all session will receive 5 bonus points awarded towards their lowest project grade.
There will be no make-up or alternates for late projects. Projects must be submitted online on the given due date. Any late submissions will not be accepted. If students anticipate an emergency, please provide necessary documents and file for an extension. Extensions should be requested 12 hours in advance. Work must be submitted within the next 24 hours.
Grading Policy
This entire course is weighed as followed:
Project 1 (20%)
– Authoring (10%)
– Design (5%)
– Process (5%)
Project 2 (20%)
– Authoring (10%)
– Design (5%)
– Process (5%)
Assignments (13 total – 6.15% each)
Total: 100%
A+ (100%-97%)
A (96%-93%)
A- (92%-90%)
B+ (89%-86%)
B (85%-83%)
B- (82%-80%)
C+ (79%-76%)
C (75%-73%)
C- (72%-70%)
D+ (69%-66%)
D (65%-63%)
D- (62%-60%)
F (under 60%)
Final grades will be posted within 24 hours after submitting your final project. Students who have filed for extensions will be given a grade of INC. Any extended projects that are not received within 24 hours will result in failure of that project. If a student has more than 3 extensions on their record, they must appeal to the course instructor.
Acceptable extensions: Family emergency, health emergencies, and court.
Gradebook
Grades for every project and assignment will be posted within 24 hours so that students have an idea of where they stand in the class. Midterm grades will be given halfway through the course before students can continue with the remaining half. Each graded work will have a provided link to the students’ submitted project and assignment to review their progress and errors.
Gradebook gives students a report of their progress while also giving them access to their previous work to reference for later projects and assignments. Students are encouraged to review them and ask questions and clarifications to the forum or live chat. While gradebook details the history of the students’ progress, it will also have a list of upcoming assignments and projects that are due along with due dates. Students will know what is due and when. This is also where they may file for extensions.
Comments Thread
Comments thread will help students find information before they refer to forums or live chat. The thread sets up comments that are rated the most by default. However, students may filter it through the search engine to find their answers quicker. The thread can also be sorted by: most helpful, least helpful, recent posts, and older posts. Under each comment, students can rate the helpfulness of the comment on a 5 star system. They can also make comments on them as well. This is encouraged so that students are able to review questions, concerns, and review of the course. It helps them engage in the material and for the designer and instructor to get feedback throughout the course on what is successful and what is not.
Students can also save comments they like so that they do not have to find it when they have to reference it. All favorited comments are added to the sort filter so that they can easily access it. These favorites will help the designer and instructor know how to revise the course so that it is more successful in the future. The comments thread, however, is separate from the forums and live chat, which is reserved for more in detail questions and concerns. Students are encouraged to use both functions.
WordPress
For our E-learning system, we will use WordPress to manage our content. WordPress gives us the flexibility to design the look and feel of our course. As a course management system, WordPress provides instructors the ease of preparing and crafting the materials. As an interactive tool, WordPress allows students to engage with their classmates and instructor.
Discussion Forum
In each lesson, we would use WordPress’s comment system as an online class discussion. Students could post their comments on the materials or ask questions if they need further assistance to understand the subject. The instructor and fellow students could reply to the comments in a threaded (nested) level.
Codepen & Browser
Codepen is a tool that allows users to “build, explore and teach the web, instantly.” Using Codepen students could write HTML, CSS and JavaScript to complete the class exercises; however, testing the codes in the actual browser is much better for responsive design. With the real browser, students can resize the window to see how their design changes in various widths. Ideally, student should test their design on real devices, but that could be expensive or impossible. An alternative solution is to use Responsive Design Bookmarklet.
Live Chat
One limitation of an online class is the difficulty in meeting fellow students. Frequently the only contact a student has in an online class is with their professor. Of course, in a traditional setting, most students ask their classmates a question first, and if they don’t know the answer, then they will ask the teacher. This encourages students to ask questions, because there is less risk involved in asking a fellow student, and if that student cannot answer the question, the original student has just built enough confidence to ask the teacher.
To imitate this dynamic, we will include a live-chat feature in our e-learning environment. There will be an indicator saying how many students are online at the time and what their names are. As long as you are enrolled in the course, you can initiate a chat with any of the online classmates. Additionally, the teacher herself will also show up in this list whenever she is online. This will encourage active class participation and mitigate any possible confusion regarding assignments.
Student Work Gallery
Similar to the structure of AVT 420, there will be a student work gallery on the website. Each student will be required to create a course page and publish their assignments on the course page. The student gallery will be where students can go to look at their fellow classmates’ work. This will be square thumbnails of the students websites, to highlight the visual design of each students’ site.
Example of Class Materials
Creating a Flexible Grid
Many graphic designers use a grid system to begin making their layout. 960.gs is one of the most popular systems for creating web layout because it fits nicely on a 1024px screen resolution. Here is an example of a 960-grid layout.
While fixed-layouts give designers the illusion of pixel perfect control, they also pose many limitations. Nowadays, users come to the web with different devices; therefore, a fixed width doesn’t scale to fix all. Accord to Ethan Marcotte who coined the term responsive web design, “Our canvas, the browser window, can bend and flex to any shape or size, whether changed at the whim of the reader, or fixed by the phone or tablet they’re using to view our content.”
The layout of design.gmu.edu is divided into two areas. The main content area is 700px. The navigation is 220px. The gutter between the two areas is 20px. The padding on both sides is 10px each.
So here’s the breakdown of 960px:
700px (main area)
220px (right navigation)
20px (gutter)
20px (padding)
Our markup would be something like this:
Our CSS would be:
#page {
margin: auto;
padding: 10px;
width: 940px;
}
.main {
float: left;
width: 700px;
}
.menu {
float: right;
width: 220px;
}
To convert our CSS from pixel to percentage, we use the following formula:
target ÷ context = result
Think of context is the whole layout, in this case is 940px . Target is the specific width for each section. In our example, the main target is 700px. So let’s do the math.
700 ÷ 940 = 0.74468085
Let’s round that up to 74.5%
Let’s do our menu as well:
220 ÷ 940 = 0.23400255
Let’s round that up to 23.4%
Here’s our new flexible CSS:
#page {
margin: auto;
padding: 10px;
width: 100%;
}
.main {
float: left;
width: 74.5%;
}
.menu {
float: right;
width: 23.4%;
}
Now our layout is stretch to 100% width. On large monitor, the text could become hard to follow if the width is too wide. So if we want the page to stop expanding when the browser is wider than 1024px screen, we could but put a max-width on the page. Like this:
#page {
margin: auto;
padding: 10px;
max-width: 940px;
}
With just these simple conversions, you have created a fluid, flexible layout.
Conclusion
This e-learning website will be responsive, and the students themselves will be learning the intricacies of a responsive website. We hope the students will learn more than just code and design, but also how to think critically about what type of website fits the needs of the client best.