|
Responsive Site
Begin with your non-linear site from the first project (or modify it, or make a sequel to it, or create an entirely new and unrelated non-linear site). Turn your non-linear site into a responsive design site (optimized for multiple devices including smart phones and pads). 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 change to suit (respond to) the width, hardware device, and user context of that browser environment. So, for example, on a 4200 pixel-wide tv monitor, a T.S. Elliott-esque multimedia Wasteland-type hypertext "poem" might have back-story footnote details and a high-polygon-count bartender animation embedded as a looping video background. On a 320 pixel-wide iphone 4, you might have the dick and jane instantiation of the same page, illustrated by atari-2600-esque 8-bit animated gifs. You are not creating multiple web sites per width, but a single site, responsively coded site to work at every width. You should design your site based on the unique goals of the non-linear experience you are trying to create. The site should not merely look a certain way, it should also react to user input and be user-modifiable according to the logic of your experience. There should be at least 10 "pages" of content. Some animation and audio are required (but not at all states). 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. Your final responsive site should be cross-browser, cross platform (should work on all operating systems), and cross-device (should work on phones, pads, laptops, and wide-screen TV monitors). Put your site in a folder labeled "responsive" and upload it to the "public_html" directory of your student web site. The first page of the site should be labeled "index.html." Requirements: 1. some audio 2. some animation 3. must use text 4. must be non-linear (more than just one path) 5. must be in segments 6. must work cross-browser/platform/device 7. must contain at least 10 pages (or segments). 8. must contain at least three separate responsive states per "page" (a. 1 state at or above 1200 pixels wide, b. 1 state at or below 480 pixels wide). 9. column layout, image size, font size, and font typeface vary at each state 10. uploaded to proper location Grading criteria: 1. meets above requiremets 2. sensory aesthetics (typography, color, movement, sound, framing/presentation, use of space) 3. interactive aesthetics (reactivity, usability, code mastery) 4. inventiveness (novelty of responsive solutions, appropriateness of approach to chosen experience and to responsive environment, variability between states) |