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

Advanced Web Page Scripting – Competencies

Course Description:

An exploration of advanced methods for styling websites and creating page layouts. This course will examine the practical application of styling web page content, understanding cross-browser compatibility, and creating designs that display effectively on various devices.

 

Course Focus:

This course considers how CSS and JavaScript may be use in conjunction for creating web page layouts, both static and dynamic. It includes standards-based HTML, CSS2 and CSS3, and a basic introduction to JavaScript used in page layouts in order to enhance User Experience. Design patterns (e.g. adaptative design and responsive design) will also be considered.

 

Course Competencies:

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

Define advanced terms and methods for styling web pages

  • Articulate the concept for a web page design
  • Investigate strategies for designing for multiple devices and browsers
  • Identify methods for writing semantic and valid markup

Apply various advanced methods for styling web pages

  • Utilize relative, absolute, and fixed positioning methods to control the placement of web page elements
  • Utilize floats and clearing
  • Redesign existing web sites to display on various screen resolutions and devices

Solve information architecture and communication problems with effective web site styling

  • Identify ways to use on-line resources for problem solving
  • Implement advanced solutions for common information architecture principles through advanced web page styling

 

Course Prerequisite(s):  GWDA223 Intermediate Web Page Scripting


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


Information Architecture – Outcomes

Early on in the course, students conduct content inventories on existing websites:

After choosing a project, they do user testing (card-sorting methodology) to generate a folksonomy, here shown as a mindmap:

Further development includes wireframes:

toprint_1

All the results are organized into a final presentation:

camopion_homekeeping_presentation

Information Architecture – Sample Assignment

Week 06 – Lab – Group Content Inventory of Existing Site

In this Lab, you will find a website with a structure suitable for content analysis. You will then scan the site with auditing software, and group classify the data under High-Level Categories. Finally, you will determine a set of meta-data to further classify the content by, and create a scoring system defining content quality.

Scan a Website

Calculate Meta-Data for the Links

For a Content Value Check, you would use

  1. High-Level
    • Page Title
  2. Low-Level
    • Media Type
    • Source (site, 3nd-party, user-generated)
    •  Completeness
    • Writing quality
    • Labeling of information (titles, headers)
    • Findability via the site Search functions
    • Accessibility to the disabled and “browser-challenged”
    •  Relevance to audience
    • Currency (is information up-to-date?)

Develop a Scoring System

  • For each Low-Level content entry, figure out a scoring system
  • The content should suggest likely ways of scoring
    • 1 (ok), 0 (not ok)
    • 1-10
    • 1, 0, -1
    • 3, 2, 1, 0


Get Templates


Map Your Content Scan into the Templates

  • Check the pages for each link, and analyze content
  • Estimate meta-data values for each unit of content
  • Create a column which converts your scoring system to 0-100 (Excel formula)
  • Determine an overall score for each content “chunk”

Determine an Overall Quality Score

  • Based on your meta-data, classify the site according to content quality
  • Use the scoring system you developed for individual meta-data

Upload to your Process


Information Architecture – Competencies

Course Description:

An examination of content structures, navigation paths, and asset organization.

 

Course Focus: This course introduces key concepts in information design – design in the abstract, used to break blocks of information into categories that can be understood by the user. Organization, nativation, information taxonomies, folksonomies, and other aspect of information design will be applied to the construction of a complex interactive website.

 

Learning Outcomes:

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

Describe the relationship between different stages and components of information architecture

    • Identify terms used by information architects in the industry
    • Define information architecture documentation

Define client, project, and user requirements

    • Identify behaviors and needs of a target user population
    • Apply research methods
    • Conduct competitive analysis
    • Create user personas

Develop the components for effective information architecture

    • Design flow charts
    • Produce site maps and navigation structures
    • Create information ontologies and labeling systems
    • Develop Wireframes

Solve content organization problems

    • Assess information architecture requirements for a design project
    • Produce information architecture documentation

 

Course Focus Competencies:

  • Explore “folk” information design as seen in dynamic social networks
  • Study the relational between navigational information layout and visual layout
  • Explore “web ecosystems”
  • Understand the relation of information design for usability, accessibility, sustainability

 

Course Prerequisite(s): GWDA101 Applications and Industry


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/