|
Responsive Details
Make at least 5 pages/sections of your non-linear project responsively designed (optimized for multiple devices including smart phones and pads). Each of these five pages (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 three different pages -- one for each width. Instead, each of your five pages should be responsively coded to work at every width. You should design these 5 pages based on the unique goals of the non-linear experience you are trying to create. Each page 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. 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 pages 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). Bonus Responsive Requirements: 1. must be at least 5 responsive pages. 2. 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). 3. column layout, image size, font size, and font typeface vary at each state |