Advanced Web Page Scripting – Sample Assignment

Project Specifications

  • Responsive Design for a “Web App”
  • Multi-user game with avatars
  • Application “User Profile” Screen containing
    • Screen name
    • User ID
    • Location
    • Reputation
    • Status for the last five days
    • Battle Wins
    • Battle Losses
    • Alliances

Apply Progressive Enhancement Design Strategy

  • Download “Week 04 Lab – Media Queries Wireframe” from Doc Sharing
  • Start with the content in the 1-column wireframe
  • Apply Progressive Design Principles
    1. Design for content breaks rather than device breaks
    2. Start small, then work up
    3. Add minor breakpoints as necessary
    4. Text is king, should always be optimized (and trump images) for display
    5. Never completely hide content

Determine Content Breaks

  • Determine design breaks based on content (e.g. typographic principles)
  • Define at least 4 distinct screens
  • Draw screens as a “paper prototype”
  • Estimate at which pixel width each screen breakpoint should be placed

Polyfills (to enable adaptive design for CSS Media Query support)

  • Example of Modernizr feature detector code:


<!–load Modernizr library–>
<script src=”js/lib/modernizr.js”></script>
    <!–use Modernizr to load respond.js, if needed–>

<script>
if(!Modernizr.mq(‘only all screen’)) {
modernizr.load(“js/lib/respond.matchmedia.addListener.min.js”);
}
</script>

References

Create Your Code Prototype

  • Use your default “boilerplate” from Week 03
  • Add the page viewport
  • Size the page to fill the viewport
  • Add HTML markup corresponding to the wireframe
  • Add Webfonts
  • Add default JavaScript file as js/avatar.js
  • Sample code implementing “module pattern”
  • var avatar = (function () {
    //functions and variables go here

    //return stuff into “avatar”
    return {
    init:false
    }; //return “init” as false into avatar
    })(); //immediate execution
    //see what was left in avatar, elevator-like
    console.log(avatar.init); //will print ‘false’

Create Media Queries

  • Create CSS media queries for each breakpoint
    • In the <head> region, or
    • In the CSS file
  • Test the breakpoints by loading and resizing the browser window
  • Add css :before and :after to label the breakpoints
  • Sample CSS Code:
  • /* non-retina iphone, landscape */
    @media only screen
    and (min-width : 479px)
    and (orientation : landscape) {

         body {
             background-color:yellow;
         }
         #reporter:after {
             content: “iphone landscape, 480px”;
         }
    }