Centriq Training Print Logo

Tuesday

July 23 06:58 AM

  • Ways to Train:
  • Live Classroom
    Class is delivered at a Centriq location with a live instructor actually in the classroom.
  • Live Virtual Class
    Class is delivered live online via Centriq's Virtual Remote technology. Student may attend class from home or office or other location with internet access.
  • HD Class
    Class is delivered via award winning HD-ILT at Centriq's facility. Students view the live instructor utilizing a 60'' HD monitor.
  • Ways to Buy:
  • Retail
    Class can be purchased directly via check, credit card, or PO.
  • CV Centriq Vouchers
    Class is available for students using Centriq Vouchers.
  • AP AP Eligible
    Class is available to students utilizing Centriq's unique Annual Pass program.
  • SA SATV Eligible
    Class is available for students utilizing Microsoft Software Assurance Training Vouchers.
  • CLC Cisco Learning Credit
    Class is available for students using Cisco Learning Credits.
Start Date End Date Duration Days Start Time End Time Time Zone Location Ways to Train Ways to Buy Price
Request a Date

Working with a screen that is smaller and can drop an internet connection provides the web designer with new problems to solve. The design approach recommended for a mobile environment is one that should start with the basics and adapt as the screen size enlarges. This course is a design workshop and does not involve any coding.

Audience

Any designer who wants to understand how to create a better user experience for a web user on a mobile device.

Prerequisites

The student should be familiar with html design and layout including CSS used in the web page development cycle. No coding will be necessary but HTML5 and jQuery skills are recommended.

Course Completion

The student will have encountered the goals of a successful mobile design and learned to apply them to a web site through the use of analysis exercises and design prototypes.

View Course Outline

Business Case

  • Recent statistics
  • Mobile index by country
  • So what changed?
  • All devices are not created equal
  • The time is now

Capabilities

  • The mobile app
  • Extending your capabilities
  • W3C working groups
  • Location detection
  • Device orientation / accelerometer
  • Touch
  • Other

Constraints

  • Intro
  • Device constraints
  • Screen size
  • Mobile user behaviors
  • Time and place
  • Align with mobile behaviors
  • Getting back
  • Sticking to the bottom
  • Constraints - user
  • Constraints - developer

Requirements

  • Requirements - user
  • Use cases - myth
  • Use cases - real
  • Accessibility

Design Strategy

  • A mobile web experience
  • Kneejerk design
  • Design goals
  • Developer design goals
  • Context
  • Native vs. web question
  • Web design strategy - deal with it
  • Web design strategy - dumb it down
  • Web design strategy - alternative site
  • Web design strategy - responsive design
  • Web design strategy - proxy server
  • Web design strategy - server side
  • Web design strategy - hybrid
  • Web design strategy - CMS
  • Frameworks
  • Frameworks - publishing

Actions

  • Touch
  • Go small by going big
  • Where do we touch?
  • Learn the language of touch
  • NUI is natural
  • Hover - a no-touch event
  • Multi-touch

Inputs

  • Overview
  • Embracing input
  • Mobile asks
  • Mobile answers
  • Masking the hard stuff
  • Laying out the options
  • Beyond forms and input fields

Layout

  • Intro
  • Flexible / fluid design
  • Responsive design
  • Reduce

Content

  • Intro
  • Content process
  • Mobile First
  • Progressive enhancement
  • Text
  • Flexible images & media
  • Ads
  • Performance

Process

  • Ethan Marcotte at the Boston Globe
  • Process - Jeremy Keith
  • Process - Bryan & Stephanie Rieger
  • Process - Stephen Ray
  • Process case study - Drupal
  • Site map
  • Design guides - docs
  • Design reviews - Ethan Marcotte
  • Tips
  • Best practices

Prototypes

  • Purpose
  • Context
  • Types
  • Wireframing
  • Wireframing - content reference
  • Types - experiential
  • Better UX
  • UX patterns
  • UX sketching
  • UX sketching - process
  • UX sketching - techniques
  • Sketching tips
  • Sketch to mobile
  • Sketchbooks
  • Sketch sheets
  • Keynote / Powerpoint
  • Wireframes
  • Tools - Balsamiq
  • Tools - wireframing
  • Designing in the browser
  • Prototyping - Ethan Marcotte

End matter

  • Galleries
  • Conferences