⌂ ◅ Classes + teaching

GDES-220 fall 2023 / David Ramos, American University Design

Layout + image exercise

Explore modern CSS layout techniques and explore the use of images for websites, by making a screen-based poster for a talk about rising sea levels and urban resilience.

Design a typographic and image treatment that expresses the structure and meaning of the content. Explore solutions that use the whole browser window. Your layout should scale for viewports of 800 px to 1980 px width. Your layout should scroll vertically when content and window sizes require.

Choose three images, of your creation or freely licensed, that support and expand on the ideas behind the poster—you can speak to the text literally, allusively, or through abstraction and form.

See individual panels of the Google Web Fonts Typographic Project and poster studies at Jen Simmons Labs.

Deliverables: a working one-page website in HTML/CSS, with images and citations for the sources of those images. Turn in the entire folder as a ZIP file.

Phases of work

1. Think, search for images, and sketch

Reflect on the poster’s message, and search for freely licensed images (see suggested sources), noting the sources.

Make thumbnail sketches on paper, working small and emphasizing type hierarchy.) Your sketches should provide a firm idea about what the layout and type will be, but by now, your command of CSS might let you resolve the details in code, later.

2. Write HTML markup and create CSS layout

Download web1-basic (ZIP) to start the project.

Mark up the example content as HTML. Create CSS for type and layout for your page. Remember‚ you can use DIVs, nest DIVs, and add classes to elements. You should probably specify widths, heights, margins, and padding in em, %, or vw/vh units, and fr units for grid columns and rows.

Choose fonts from the class font list.

3. Crop and export images

Crop your images and save them at an appropriate size using Photoshop’s “Save for Web (Legacy)” function. Add them to your project, providing alt tags as needed. Remember, you can insert images with the img tag or as CSS background images.

Content

Text for the poster follows:

Spring Tide
Conversations about how coastal cities and their environs are meeting the new reality of rising seas and strengthening storms

October 20, 2023
7:00 p.m.
National Building Museum
401 F St. NW, Washington, D.C.

Featuring:

  • Kate Orff
  • Bill McKibben
  • Janette Sadik-Khan
  • Moderator: Alissa Walker

By way of background (not required content): Kate Orff is a landscape architect, principal of SCAPE, and 2017 MacArthur Fellow. Janette Sadik-Khan works as an urban transportation advisor, and was New York City transportation commissioner under Mayor Bloomberg. Bill McKibben is an environmentalist, founder of 350.org, and author of Deep Economy and The End of Nature. Alissa Walker is the urbanism editor at Curbed.

A warning about layout methods

Our textbook and most references will suggest building layouts using the float property. We aren’t using float-based layouts in this class. Instead, use CSS Grid (or Flexbox, if you would like to learn it).

It is possible, but unlikely, that some small parts of your site would benefit from floats. Nevertheless, for this project, you should not use floats for any purpose other than wrapping text around another object. Learn Grid.

Incidentally, be careful about heedlessly doing web searches for solutions and borrowing whatever code you find. Be able to explain every line of code that you add to your project. If you can’t explain it, don’t use it. That undermines the learning objectives for this class, and it will also likely make your task harder.

Learning outcomes