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


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

Intermediate Web Design – Outcomes

During this course, students need to work in a codeschool to improve their scores.

For the Final, students have to present a coded HTML5/CSS3 website. The image below is a screen capture. The actual site uses CSS3 animation to highly the cards in the grid:


Intermediate Web Design – Sample Assignment

Week 06 – Lab – Final Project DeReConstruct

In this Lab you will study what is needed to complete the Final Project in this course.

This is NOT a graded assignment, but you will need to complete this project by Week 11

Site Selection

  • You should have reviewed sites between Week 05 and Week 06

The Role of Your Process Book

You are expected to keep a Process Book during your site DeConstruct and ReConstruct

  • Formats
    • Written notebook
    • Online blog/discussion area/website (WordPress is good)
  • Check weekly with the Instructor
  • Turn in in Week 11

What to include in your Process Book this week

  • What you’re looking for in a site
  • The top ~5 sites which appeal to you
  • Why you chose your Final Project Site

Download Final Project Descriptions

  • Download from “Week 06 Lab – Final Project Timeline” under Doc Sharing
  • Download “Week 06 Homework – Strategy for Site De-ReConstruction” from Doc Sharing

Site DeConstruction is…

  • Things you don’t (yet) understand in the HTML, CSS, JS
  • Interesting CSS selectors
  • A description of the strategy for how the site layout was created
  • Quality of the site code

Site DeConstruction…

  • Site should be “ripped” apart to its basics
  • A wireframe should be generated, listing code features and Interaction Patterns

Site ReConstruction

  • What you changed in the site
  • Elements left out or added