Tactical Media & Democracy:
Responsive Site

Introduction

We are nearing the end one of the most media-hyped US Presidential elections to date. In fact, the due date of this project is one week before the vote! 🇺🇸🇺🇸🇺🇸

As a reaction to the fervor of American media and the 24 hour news cycle (on TV, online, sattelite radio, etc.) this project challenges you to use the technical skills in responsive design that we have been developing in this class to design and code a website under the theme of tactical media and democracy.

Conceptual Background

Artists and designers have used tactical media to disrupt the singular and powerful voice of the mainstream media in a variety of ways. We will look at examples of this in class and in our readings (see the Tactical Media links below to get a head start on these examples).

For this project, you will create a responsive website that uses tactical media strategies to comment on a particular political event, situation, occurance or undercurrent. You may interpret the word 'political' in your own way, but the piece must fall under the definitions of tactical media discussed in class.

Instructions

1. Create a responsive website of at least 6-8 pages (if you prefer long scrolls, your page count can be flexible/negotiated with the instructor).
2. Your site should be coded responsively to work correctly across various screen and devices.
3. Each page (section/state) of your site should vary via responsive design. As your user resizes the width of her browser, not only do the layout and design of the page change, but the complexity and nature of the content also changes to suit (respond to) the width, hardware device, and user context of that browser environment.*
4. In order to be considered responsive, your project should have at least three state changes (it should look and behave more than superficially different at 3 different screen widths). The largest width should work at 1680 pixels wide (min-width break point 1200px). The smallest width should work at 320 pixels-wide (max-width break point 480px). Column layout, image size, font size, and font typeface should vary at each state. Note: You may design for more than 3 states (in other words, you may have more than three break points), but you are only required to have three states.*
5. Your final responsive site should be cross-browser, cross platform (should work on all operating systems), and cross-device (should work on phones, tablets, laptops, and wide-screen TV monitors).*
6. Submit this project on the New Media server by the deadline.

Suggestions and Resources

• Start your designs on paper in your sketchbook for this class. These designs will allow you to work through your text, link, and page layout.
• Once you are happy with a design on paper, create a wireframe (at different media sizes) and site map of your site.
• Test your code at various browsers (start with the key structural elements such as page widths, divs, and media queries)
• Continue designing and coding each of the pages for the site, adding links to the other pages (be sure no page is left out of the link structure).
• Tactical Media Links:
• https://temporaryculture.wordpress.com/a-question-of-tactical-media/
• http://www.tacticalmediafiles.net
• Marcus Baram, Why Gil Scott-Heron Wrote “The Revolution Will Not Be Televised”
• The Yes Men, Bhopal Disaster
• The Yes Men, Bhopal Disaster: Created a fake Dow Chemical Website and intervened live on the BBC
• Shepard Fairey, 'Obey'
• Guerilla Girls Broadband
• Critical Art Ensemble
• Samantha Raut, Art is Atrocity, GB
• NYU Casebook on Tactical Media
• Jonah Bruckher-Cohen, 'Please Like This', 'Email Miles' and other projects
• Inspiration from Xtine Burroughs' 'Net Works' Exercises: 'To complete this project, you should have focused on one aspect of the government. What makes this aspect of government difficult to understand? How is the public currently passive in relationship to this element of government? Aside from increasing awareness, what would a civilian be motivated to do after interfacing with your project? What were the design influences for this project? How does your project visually relate to official government media?'**

Grading Criteria

1. Meets the criteria in the Instructions section.
2. Inventiveness, creativity.
3. Planning.
4. Execution of the design, aesthetics including typography, color, use of page, use of images (if any).
5. Interactive experience including link structure, navigation, user experience, reactivity, implementation of code learned in class.
6. Demonstrates an increased understanding of the techniques learned in this class.

*from Curt Cloninger's Responsive Site project description

*this project is inspired by the exercise of the same name in Xtine Burrough's text 'Net Works' text.