CS 318 Lab 13 – Responsive Design
Dear students, Today we begin our investigation into responsive design, of which designer Ethan Marcotte had this to say: Recently, an emergent discipline called “responsive architecture” has begun asking how physical spaces can respond to the presence of people passing through them. Through a combination of embedded robotics and tensile materials, architects are experimenting with […]
CS 318 Lab 12 – Mockups
Dear students, The next milestone of your project is to create mockups of your pages. The intent behind a mockup is to create a visual sketch of your page that can help you create a feel for the overall layout. Its audience is both you, your collaborators, and your client. There’s a great temptation to […]
CS 318 Project – Mockups – due on March 27
Your next milestone in the project is to create mockups for each page of your site. You will then present these mockups to your client for initial feedback. Task 1: Create Mockups Use Moqups. As we did in lab, follow these guidelines to construct your mockups. Thoroughly communicate the structure, but not the content. Generally […]
CS 318 Lab 11 – Two-column Layout
Dear students, Today we visit the canonical two-column layout. We’ll use the float property to allow other content to flow around it. We’ll do a quick example together of adding drop caps to a page. Suppose we have this paragraph: A writer—and, I believe, generally all persons—must think that whatever happens to him or her […]
CS 318 Lab 10 – Absolute and Relative Positioning
Dear students, There’s immense power in the position property. It is your vehicle for anchoring elements relative to another, animating them on user interactions, providing a heads-up display that is always on screen, and achieving a fluid layout that can bend and flex with the browser window. Today we will explore absolute and relative positioning. […]
CS 318 Lab 9 – Box Model, Part 2
Dear students, Today, we will continue to explore the box model. But let’s add some colorful flavor through gradients. Gradients have some nice properties: They eliminate the flatness of solid background colors. They automatically scale to fill the background of an element. Unlike images, they are generated by the browser. They require no expensive downloads. […]
CS 318 Lab 8 – Box Model
Dear students, Let’s stop a moment to reflect upon what we have done so far this semester: We’ve organized information in a hierarchy and represented it in plain old text. We’ve seen how to make our text “hyper” through the use of images and links. We’ve added style to established elements of this hierarchy. We’ve […]
CS 318 Lab 7 – Images
Dear students, I first offer a brief list of recommendations about things I’ve seen you doing that will cause you unnecessary headache: Avoid using spaces in file names. Spaces are not allowed in URLs, so it’s best to just avoid them. They often get translated by our browser into %20, but they will cause issues […]
CS 318 Project – User Study and Sitemap – due on March 1
Your next task in the semester project comes in two pieces: Conduct user studies on several existing websites similar to the one you will design. Compose a sitemap to describe the overall architecture of your site. We describe each of these in turn. Task 1: Comparable Site Test Identify and familiarize yourself with three sites that […]
CS 318 Lab 6 – Div, Classes, and IDs
Dear students, Last time we dropped into the world of CSS as a means of applying style to our information hierarchies. Learning CSS is a little like learning how to conjure springtime. You suddenly have the power to make things bloom and look beautiful. But it will take a lot of practice. This class spins […]