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.

Objectives

Students will learn how to build a complete responsive web site from scratch. The course will focus on planning, workflow and implementation. By the end of the semester, students will have a responsive web site to add to their portfolio.

Required Text

• Implementing Responsive Design by Tim Kadlec
• Content Strategy for Mobile by Karen McGrane
• Mobile First by Luke Wroblewski

Prerequisites

Sufficient skills of HTML and CSS are required. If you need to catch up on HTML and CSS, read HTML5 for Web Designers by Jeremy Keith and The Book of CSS3 by Peter Gasston.

Requirements

• Access to a web server
• Text Editor such as Dreamweaver, Coda, BBEdit, Sublime Text or simple TextEdit for Mac or NotePad for PC.

Week 1: Why Responsive Design?

• History: “The Dao of Web Design”
• The rise of mobile devices
• Progressive enhancement
• Web standards
• The way forward

Week 2: Planning

• Context: Different devices; different environments
• Content negotiation: Structuring contents on various devices
• Time investment: Responsive design takes more time
• Content audit

Week 3: Web Site Proposal

Students will present their ideas to class on the responsive web site they would like to build. The presentation will take place on Google Hangout.

Week 4: Content Strategy

• Appropriate: Right for the user
• Useful: Specific purpose
• User-centered: Meet real user needs
• Clear: Easy for the user to understand
• Consistent: Consistency of language acts as a consistent interface.
• Concise: Omit needless content

Week 5: Workflow

• Wireframes
• Mockups
• Style guides
• Responsive structures

Week 6: Web Site Mockup

Students will present their mockup to the class using the browser. Students will also get feedback from their classmates and instructor. The presentation will take place on Google Hangout.

Week 7: Mobile First

• Why mobile first?
• Screen size
• Constraints
• Capabilities
• Touchscreen

Week 8: Layout

• Flexible grid
• Flexible typesetting
• Convert pixels to percentages
• Creating a flexible grid
• Flexible margins and paddings

Week 9: Media

• Flexible images
• Flexible SVG
• Flexible Video

Week 10: Media Queries

• Viewports
• Structure
• Order
• Breakpoints
• Navigation
• IE supports

Week 11: Design Critique

Students should have a working site that is closed to the final product for review and critique.

Week 12: Preprocessors

• Why preprocessors
• Sass
• Compass
• LESS

Week 13: Pollyfills

• Modernizr
• Response.js
• CSS3-mediaquery.js

Week 14: Performance

• Images
• JavaScript
• CSS

Week 15: Final Project Due

The growth of online learning provides many exciting opportunities as well as challenges to instructional, interface and web designers. Unlike the traditional, face-to-face classroom, in which the instructors have control of their environment, online classroom depends on the learning style, experience and discipline from the students.

As witnessed in our class discussion on various online learning web sites, each student has different learning styles. While one prefers watching video, the other prefers visual animation. While one prefers hands-on learning, the other prefers reading texts. The best way for me to learn is to turn my assignment into a real-world project. For example, when I wanted to learn MODX, a content management system, I did so with a client project. Reading online tutorials and books were informative, but I learned much more when building the site. Last semester, my classmates and I created marketing materials (posters, brochure, email newsletter and a landing page) to promote the graphic design graduate program at George Mason University School of Art.

The advantages of online education are instant access to resources and information. Learning is a collaborative effort in a student-teacher relationship rather than the teacher is the center of attention in a traditional setting. In contrast, the lack of face-to-face engagement puts a huge constraint of online education. In “Curtailing Dropouts at Online Universities,” Brian Burnsed cited:

A study released [in October 2010] by professors at Kennesaw State University in Kennesaw, Ga., indicates that online students that commonly used retention strategies such as friendly E-mails from professors aren’t enough to keep the students from giving up and dropping out. “Students’ expectations are misaligned with what online learning actually is,” says Elke Leeds, assistant professor of information systems at Kennesaw State and one of the study’s authors. “They come in thinking that it’s easier. While it can be more convenient, the truth is you have to be self motivated; you have to be dedicated.”

Without a doubt, effective online education depends on learning experiences. As designers, we play an important role in shaping the experience. We need to take usability, accessibility and content strategy into consideration. We need to present the information not only in a logical way, but also in an engaging way. Most important of all, we need to take ful advantage of the web’s capability to deliver our materials. For example, we should embrace the fluidity and flexibility of the web in designing our courses. Our contents should be accessibility not only on desktops and laptops, but also on mobile devices. Content strategist Karen McGrane has a great piece in A List Apart on content parity titled, “Windows on the Web.” She writes:

When people start a task on one device and then complete it on another, they don’t want different content or less content, tailored for the device. They want the same content, presented so they can find it, navigate it, and read it. They imagine that their devices are different-sized windows on the same content, not entirely different containers.

Our job as instructional designers is to provide a good experience in delivering our materials to students who want to learn or complete the assignments across multiple devices. That is the future of online higher education.

Responsive Web Design

With the rapid increase of new mobile devices hitting the market, responsive web design is here to stay. While responsive architecture is not the best solution for every project, it is one of the most reliable practices that meets the COPE (Create Once, Publish Everywhere) model.

Responsive design is a great skill set, if not required, to acquired for designers; therefore, I would like to propose making an e-learning course, for our advanced web design project, to teach the fundamental concepts through three core principles:

1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries

Web Accessibility

For web designers, making our web sites accessible is as important as creating beautiful visual design. All web sites should meet the Web Accessibility Standards specified in Section 508 of the Rehabilitation Act.

Web accessibility is a must-have knowledge for every web designers and developers; therefore, I would like to propose making an e-learning course on accessibility focusing on the implementation of ARIA (Accessible Rich Internet Applications) Landmark Roles such as banner, complementary, contentinfo, form, main, navigation and search.

In retrospect, design was not something I intended to do with my life. I actually didn’t even know what design was. When I started college, I picked the path my cousin thought I was good at. She sold me on communication major at La Salle University. In my mind, communication sounded cool and I would be controlling the board in a TV station or a music production. In my freshman year, reality struck. Communication was the least that I wanted to do. I hated public speaking. I still hate doing it now unless I have to.

After getting through the first year, I wanted out. I was going to switch to Computer Science, even though I didn’t have any passion for it. Ms. Cross at the Upward Bound Program got me into Millersville University with a major in Computer Science. I was ready to move back to my mom’s house, but then I heard about a new major coming out at La Salle called Digital Arts & Multimedia Design. The new major sounded way cooler than Computer Science so I decided to stay.

The very first class of the program was learning Photoshop and I was hooked. In my sophomore year, I landed a paid internship at Trump Maria as a graphic designer. I got to stare at a computer screen all day. I didn’t even know how to use Mac OS 9. I told my mentor that I had decided not to become a graphic designer. Not sure what prompted me to tell him that. Maybe it was out of frustration. It turned out to be a good decision. I was able to focused my time and effort on web design.

In my junior year, I landed another paid internship at Unisys. Once again I was geting paid for doing nothing. I got bored, quit and joined my classmates at WePlayIt, a startup gig. We made the site and created some Flash comic strips. The site launched all of us was let go.

After graduation, I bounced around advertising agencies. They wouldn’t hire me fulltime. They just called me in whenever they needed me. I ended up working at Staples and Donnelley. One day I got a call from Vassar and that when design took off for me. I spent five years at Vassar working with a handful talent designers on both print and web. I also took on small freelance gigs on the side.

Then I moved to the George Washington University School of Business as a web developer. As my full-time job moved me further and further away from design, I took on more freelance projects to keep my design in the game. When I took on the web services developer at George Mason School of Law, I am moving even further away from design. In addition to maintaining the school’s various CMS, I am also responsible for server administration.

Then I learned about the graduate graphic design program at George Mason School of Art, I handed in my application and was accepted. Now I am back learning where I started in graphic design. I still have no passion for graphic design. It costs way too much money and papers. The design concept, however, would help me tremendously in my web design. I really hope that the Art School would include more web design classes in its curriculum. I will be taking advanced web design next semester. We’ll see how that goes.

In the second half of the graduate seminar class, we ditched the textbook and picked up a real design project. Between myself and three other graduate students, we decided on making a marketing campaign to promote the MA & MFA degree at George Mason School of Art. Right now the school has one MFA and four MA students.

After many brainstorm sessions, we came up with a tagline: “Real World Design.” Here is the message we want to send out to potential students:

Here at Mason, our design programs are taught by and for real world professionals. People who eat, drink and live this stuff. From websites to environmental graphics to ad campaigns seen by millions, a Mason MA or MFA in Design means your portfolio will be filled with real world work. Because it’s not just a design degree. It’s your profession.

Once we had that down, we agreed that featuring recent graduate students would be the best strategy. So we picked out two students and created our campaign around them. After we came up with the branding (look and feel, typography and images), we split up the work. One student created the posters. One created the brochure. One created an email postcard. I was responsible for the landing page.

We presented the project to the dean of the School of Art and she immediately wanted to use the materials to promote the graduate program. I am so glad that we got to do a real world design project in our class. So if you’re a graphic design and looking to get a master, join us!

Just wrapped up another project for my Advanced Typography class. I didn’t think I would like it, but the annual report turned out quite well. Accor was one of my selections, but I didn’t know why I picked it. Luckily it has many content I could work on. I focused on the sustainability theme and made it into a mini annual report. Here’s the original (PDF) and here’s my redesign version. Now I have three more projects for two classes to complete the semester.

In another update, I reworked my resume once again using san-serif typeface. I actually got a few calls from recruiters after the found my resume. Microformat seems to work well for findability. I encourage you to make a Microformat resume if you look for a job.

Just finished putting together the process book for my Advanced Typography project. We had to create a dining out guide to showcase the restaurants we picked. The guide (pdf) came out pretty nice. Each restaurant gets its own theme. The guide was created using Illustrator. I have been using Illustrator quite a bit for this class and I am loving it even though I am still suck at drawing and illustrating.

Introducing the new rating system is a project for my Advanced Typography class. It was quite challenging project. Although I had done twenty designs, I am satisfied with the final version. The flyer tells you a bit more about the thinking behind the rating system.

I have a horrible sense of direction; therefore, I don’t drive anywhere without my GPS navigation device. Prior to the GPS, I used MapQuest or Google Maps to get around. Even with turn-by-turn directions printed out on a piece of paper, the proximity of the distance always confused me. For instance, when the direction said drives 6.3 miles and makes a right turn on Main Street. Did I miss the turn? Had I gone too far? Why don’t I see the street sign? I either looked for road signs or found a gas station to figure out where I was. It just occurs to me now (as I am writing this essay) that I never used a map to orient myself because I also don’t have a good sense of using the maps. Somehow following a set of instructions always appealed to me over a map. Even with the GPS, I rather listen to the instructions than look at the map.

Because of my horrible sense of direction, I became a much better web designer. If I can’t figure my way around a website my users probably can’t either; therefore, I always try to make the site navigation as clear and simple as possible. In Inventing the Medium’s chapter six on “Spatial Design Strategies,” Janet Murray writes:

Websites also create a sense of place, using consistency of style sheets to unite the page displays, and including the homepage as a landmark to which other pages are all related. When the space is well designed the organization is reinforced through the experience of navigation. Each time I go to a page I get a concrete experience of the relationship of one topic to another. Designers can reinforced the experience of an information space, and make it more memorable, by using clear labels and a navigation pattern that follows a logical information hierarchy. Creating a separate “site map” is poor substitute for creating a navigation menu that provides a clear, logical, and memorable map of the site organization.

While I agree with Ms. Murray that using clear labels and logical navigation patterns would make websites easier to use, I totally disagree with her that creating a sitemap is a poor substitution. In fact, I would argue that a sitemap is a design choice on the part of the creators to make the web site easier to use. A site map can’t replace an intuitive navigation system, but it could enhance the experience. For example, if users want to know everything on a particular web site and they don’t have time to navigation through the menu, the sitemap is a good place for them to see every page on the site. Furthermore, sitemap tells search engines like Google about the pages on the site they might not otherwise discover. Having a sitemap not only enhances the user experience, but also increases search engine optimization.

Design choices such as images, type and space make a web site welcoming. If the images are well designed, chosen and optimized, they can attract visitors and make them want to explore further. If the typefaces are legible and readable, visitors might want to stay and read. If the space is balanced with breathing room, visitors might want to learn more. The homepage is the space that could lure visitors into exploring the site; therefore, the space on the homepage has to be well executed. For example, the homepage of Apple.com uses big open space to promote the company’s latest product.

With social media sites like Facebook and Twitter, the virtual world is perhaps an improvement over reality. Facebook allows users to connect with friends and acquaintances from that past that might not be possible in the real world. If it weren’t for Facebook, I would never discover friends from middle school. As much as Facebook and Twitter would like their users to stay in their network, they can’t force them. The way that they signal users that they are leaving or entering their network is to make them sign in. Once inside the network, users can still leave to other sites by opening up a new window. For instance, I can view a YouTube video in Facebook or open up a new window on YouTube site.

(Fifth essay for Graduate Design Seminar)