Advanced Web Page Scripting – Outcomes

The following is a movie of a sample site created by a student incorporating background video:

Coding strategy:

LESS -> CSS

Font Awesome and iconographic design

Twitter Bootstrap and jQuery


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”;
         }
    }

Design for Mobile – Student Outcomes

Projects must be country specific, and students spend a great deal of time researching the target country to ensure that the mobile app they are designing is relevant to the indended audience.

Depending on course composition, mobile design may be weighted to design, Ux, or development. Here is a sample submited from a more design-centric student:

littlebook_campion_print_edit-design-mobile

A Customer Journey from another project, in this case a job app aimed at Croatian job-seekers:

design-for-mobile-customer-journey

A completed group project, this time an app that allows visitors to Thailand locate medical services quickly and easily:

NOTE: a large file, may take some time to load!

design-for-mobile

 


Design for Mobile – Sample Assignment

Week 03 – Homework – Interaction Design Flowchart 

For this Homework, you will begin developing a Interaction Design Flowchart for presentation in week 05.

Study Examples

Study Features of Process Flowcharts

Study Features of Ux User Flow Diagrams

Download Additional Examples

  • Download from “Week 03 Homework – Interaction Flowchart Examples” under Doc Sharing

Create a Interaction Flowchart

  • Use the material from your Personas
  • Create Your Storyboard first
  • Create your Customer Journey
  • Your Interaction Design Flowchart should match the “scenes” in your Storyboard
  • Add callouts on your screens to explain
    • Design elements
    • Interaction elements
    • Where the user interacts (often with a little hand icon)

Be Prepared to Share

  • You will share your Interaction Design Flowcharts in Week 04

Design for Mobile – Competencies

Course Description:

Students will learn to create custom solutions for content delivery on mobile devices by developing web application and device application user interface tools optimized for delivery on mobile devices. Students will work in class with mobile devices to learn needs, restrictions of designing for mobile devices as well as test student-designed interfaces.

 

Course Focus:

In this course, students will learn about the unique features of the mobile audience for the web, and how to design and develop for this audience. Topics include mobile history, “mobile first” design patterns, CSS media queries, responsive design, and progressive enhancement strategies For their final students will develop a “mobile first” site with responsive breakpoints, and additional features (CSS3) leading to greater mobile usability and universal access.

 

Course Competencies:

Upon successful completion of this course, the student should be able to:

Conduct necessary research for projects
  • Become familiar with mobile technology terminology
  • Examine the history and impact of mobile computing on society

Identify properties of various delivery platforms

  • Identify different types of mobile devices and their uses
  • Design to the needs and limitations of mobile devices

 Design for specific delivery platforms

  • Design device UI for application delivery

Create user-centered navigation experience 

  • Develop web-based interface for mobile devices

Produce and deliver presentations

  • Exhibit solutions in a finished manner suitable for client presentation
  • Evaluate and organize researched information for effective presentation

 

Course Prerequisite(s):  GWDA 202 Interface Design


Web Standards – Sample Assignment

Week 03 – Lab – Standards-Based Markup & CSS

In this Lab, you will apply more advanced markup, including:

  • Meta-data

You will also set up your CSS files, including:

  • Base CSS
  • CSS Reset
  • CSS Normalizing styles
  • Responsive Design breakpoints

Create Touch Icons


Create Splash Screens


Create the Site

Make Additional Pages

  • Make other pages on the wrapper site
    • 404.html
    • contact.html
    • about.html

Add ARIA Accessibility Tags

Add Microdata

CSS Files You’ll Need

  • CSS Reset or CSS Normalizer
  • WebFonts File
  • Your CSS styles file

CSS Reset
@link http://meyerweb.com/eric/tools/css/reset/

CSS Normalize
@link http://necolas.github.io/normalize.css/

CSS Responsive Breakpoints

@link http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/


Web Standards – Competencies

Course Description: 

An investigation into the importance of adhering to web standards and following accessibility guidelines. Students gain an understanding of how these best practices enable inclusive designs that address diverse user needs, contribute to improved Search Engine Optimization, and meet legal requirements such as Section 508. Students code and test sites for cross-browser compatibility, valid markup, and compliance with accessibility guidelines.

Define Web Standards

  • Identify components of web standards and best practices
  • Distinguish between non-standard and standard script

Evaluate the role of contemporary standards (XHTML 1, CSS 2.1, etc.)

  • Write standards-based script
  • Review and edit script for compliance

Prepare for upcoming standards (HTML 5, CSS 3, etc.)

  • Recognize the challenge of designing for multiple devices
  • Implement a design solution that degrades for older standards

Employ Web Standards to solve design and technical problems

  • Apply web standards through technical solutions

Discuss the social implications of accessible design

  • Identify accessible design obstacles

Interactive Communications 3: Development and Delivery – Sample Student Portfolios

The following are some sample student portfolios developed by participants in GWDA543. Note that students are typically “hybrid” Ux and Interaction designers with a high level of Web Development skill.

Luciana Flora – http://lucianaflora.com

Xue Song – http://www.xuesng.com