Error In Syntax

Presented By:

Estelle Weyl

Load Time (both mobile and desktop)

• YSLOW
• Page Speed

Mobile Performance

• Device Limitations
  • UI Responsiveness
    • Touch event: 300 – 500ms delay
      • Instead of click, use touch end
      • Disable button or some other feedback that the event was registered
    • Extra touches aren’t forgotten
  • Battery Life
    • Use JPEG over PNG and PNG8 over GIF
    • Minimize the DOM
    • Avoid reflows and repaints
    • Minimize Javascript (size and activity)
    • No JavaScript animations
    • Do you really need library/framework?
    • Use darker colors if you can (only for OLED, LCD doesn’t matter)
  • Latency
    • Reduce number of DNS look ups
    • Reduce HTTP requests
    • Don’t redirect
    • Use data URIs
    • Use sprites (not too big – memory issues)
    • Leverage localStorage
  • Memory
    • Reduce file size
      • Use tools (ImageAlpha, TinyPNG)
      • Use PNG8
    • Reduce image size
    • Serve the right image
      • Use media queries
      • Tools (sencha.io)
      • <picture>
      • srcset attribute
      • Clown Car Technique
        • Object tag loads an SVG image
        • Media queries in SVG image to serve up different PNGs
      • Use fonts when you can
  • Various screen sizes
  • Phones aren’t laptop
  • More powerful browsers, less powerful CPUs

Presented By:

Luke Wroblewski

Introduction

User interfaces abstract away the messy stuff to just give us what we care about.

User Interface Timeline

• Punchcard Interface
  • Cryptic
  • Difficult
• Command Line Interface
  • Better but still cryptic
• Graphical User Interface
  • Gap between input and output is decreased
  • Much more direct and less cryptic
• Natural User Interface
  • Content is becoming the interface
  • If you want to see something, just click on it
  • Gestures are used to make the interface more natural and intuitive
  • Less visual representation of things that we already know
  • Make use of skills learned through a lifetime of living
  • Guessable, physical and realistic gestures
  • Can basically make anything into an interface
• First Person User Interfaces
  • Allow people to digitally interact with the world as they are currently experiencing it
  • Interaction through always-on sensors
  • Instant, relevant output based on current position or based on who or what is near you
  • Use cases:
    • Navigate the space around you (think navigation)
      • Rearrange your grocery list based on the store you are in
      • Put yourself into a building using your phone’s sensors
      • Collect a list of all the places you were in a day and tell you how long they were there
    • Augment your immediate surroundings
      • Augmented realty apps
    • Interact with nearby objects or people
      • Make contacts
      • Check deposit
      • Barcode scanning to buy (ShopSmart)
      • Flow by Amazon (whoa…)
      • Translation (word lens… whoa again…)
      • card.io (scans credit card to quickly add it to payment info)
      • Facial recognition and facial detection
  • Ok cool… but this sucks on phones. Small screen and you look like a geek
    • NFC makes it so you don’t have to have your phone out and up
    • HUDs in a car
    • Google Glass
  • Need design help

Presented By:

Jason McConnell – Microsoft

Why Modern.IE

• Testing on IE is not easy
  • XP is still 40%
  • IE8 is the highest browser on XP
  • Some companies need IE7
  • Windows 7 can run 8,9 and 10 but only one version can be installed
  • IE6 is almost gone, but you still need to test that.
• The developer environment has completely changed
• Developers have been excluding IE
• How can we reduce the burden of testing on IE?
• Provide a single place to guide Front end developers

What is it?

• Site scanning tool
  • Code analysis of compatibility issues
  • Check for framework and library issues
  • Also a local scanning version
• Access to virtualized versions of IE
  • Partnership with Browserstack.com
    • 3 months of service
    • All browsers available on their Windows Servers
  • Refreshed and increased platform support of VMs
    • Parrallels, VM Ware, VirtualBox: Mac, Linux and Windows
  • Special offers with partners like Parallels
• Best practices and guidance

Presented By:

Jason Seifer – Treehouse

CSS Spriting

• Taking multiple images and making them into 1 image
• Use CSS background-position to change the position around the image to get the one you want
• Tools
  • Sprite Cow
  • SpriteMe - Bookmarklet

Minification

• cssminifier.com
• javascript-minifier.com

Asset Concatenation

• Combine all your CSS and JS into one file

Use Browser Caching

• Expires header – when should the browser fetch a new version of the file
• cache-control
• Webserver can be configured to do this for you

CDN

• Content Delivery Network
• Spreads your asset files to servers around the world so that users can download from a more local server
• CDNJS – hosted javascript libraries
• BootstrapCDN

Use a Build System

• Install components
• Keep libraries up to date
• Streamline development process
• Build and compile assets
• Build Systems
  • Yeoman

Javascript Tips

• Optimize for right to left selection
  • Rightmost selector should be very specific
  • As you move left, they are less specific
• Cache array lengths when iterating through it
  • Most modern browsers do this for you
• Use for instead of each
• Use async
• Avoid reflows
  • Changes in the dom happen and the browser has to re-render the page
  • Reduce unnecessary DOM depth
  • Minimize CSS rules and remove unused CSS rules
  • Avoid unnecessary complex CSS selectors

PageSpeed

• https://developers.google.com/speed/pagespeed/
• Google will makes suggestions on how to make the page load faster
• mod_pagespeed – apache module to install on your server

Don’t Rescale Images in Markup

• Always specify a height and width

Time to First Byte

• Measures how quickly your server responds to a request
• Controversial due to network latency

Presented By:

Jason Lengstorf – Copter Labs

Introduction

• If we are not using realtime, our app is already too slow
• Social media has spoiled us. We want our information as it is happening.
• This still isn’t good enough. We need it to be instant. Realtime.

Realtime

• Zero latency (as close as possible)
• On the web
  • Browser refresh
    • Requires the user to know there is new information and physically click
    • Not realtime
  • AJAX
    • Same thing as browser refresh, but doesn’t require a whole page reload.
    • Not realtime either
  • Polling
    • Automated AJAX refresh on a loop
    • Not efficient
    • No need for user-triggered event
    • High overhead
    • Closer, but still not realtime
  • Long-polling
    • Keeps the request open longer
    • Reduced overhead
    • Still not realtime
• WebSockets
  • HTTP won’t cut it
  • Requires full duplex client-server communication
  • No asking on the client side for new data
  • Virtually no overhead.
  • Imperceptible latency
  • This is realtime

How Do WebSockets Work?

• Client performs handshake
  • Client requests upgrade to websocket communication
  • Server sends closing handshake to let the client know they are connected via websockets
• Browser support
  • All modern browsers support, but not legacy browsers
  • Lack of support does not cause HTTP error.
    • Can use modernizer to detect WebSocket support
    • Polyfills can add support for most browsers
      • Flash is a good fallback for WebSockets

What is available?

• Node.js + socket.io
  • Steep learning curve
  • Difficult maintenance
  • Cannot use other server side languages
• Platform as a service
  • Take care of fallbacks for you
  • Don’t have to worry about maintenance
  • Simple to implement
  • Supports exists for multiple programming languages
  • Examples
    • PubNub
    • Pusher
    • Parse

How Can We Use This?

• Tracking active visitors
• Managing inventory for ecommerce
• Collaborative editing
• Social media
• Shared to-do list management

Presented By:

Bruce Lawson – Opera Software

Introduction

The web is responsive. The first website was responsive. We chose to make the web unresponsive. We chose as an industry to limit the responsiveness of the web.

It is more expensive to make a site responsive after the fact. Much cheaper to build it responsive from the ground up.

Viewport

• Problem to control presentation with HTML
• It’s a blunt instrument
• Solution from W3C in CSS3: css device adaptation @viewport
  • Can also give it a min and max width

Flexbox

• Display: flex
• flex-flow: row (or column)
• align-items
• flex – ratio of the item to the total flex number of all the items (basic grid model)
• Justification options
• Can set an order without changing the order in the markup
• Beware of the 2009, 2011 syntaxes

Media Queries Level 4

• Script media query – does this tab support javascript
• Hover media query – does this browser support hover
• Pointer media query – detect if the point is coarse, fine, or none (for targeting touch screen vs. mouse vs. speech/keyboard input)
  • primary pointer is the least capable pointing device, so it will be difficult with a touch screen laptop with a mouse

Pointer Events

• Hardware agnostic representation of input devices
• Pointerdown, pointermove, pointerup, pointerover, etc. Mimics the mouse events. Easy migration from mouse events to pointer events.
• No representation for multiple pointers

Independent UI

• Abstract user inputs regardless of hardware device.
  • Example: control+z on windows, command+z on mac, shake on mobile, sends an “undo” event

Adaptative Images

• Scalable Vector Graphics
  • You can embed media queries inside of the SVG file
• WebP
  • New image format that is 26% smaller than a PNG
  • Not supported in any browser but Chrome and Opera
• background images fallback
  • Example: background-image: image(“wavy.webp”,”wavy.png”)
  • Example: background-image: image(“whatever.webp” format (‘webp’), “whatever.jpg”);
  • Cannot do it yet with content images (should be something in the HTML spec like they have for the video tag)
• HTML5 Video element allows for media queries embedded in it
• Responsive Images Community Group – responsiveimages.org and @respimg

Presented By:

Jason Lengstorf – Copter Labs

Why APIs?

• The way you are using your data is probably not the only way the data can be used. Others may have awesome ideas of how to use that data.
• If other apps use your APIs, you have a broader reach and more exposure.
• Take you from “the [blank] app” to “the company that owns [blank]“

App + API

• Main offering is an app
• Users interact directly with the company
• Revenue is driven by app purchases, subscriptions and ads.

Create a Platform

• Calls SaaS or PaaS
• Skip the app all together and provide a service
  • Users don’t know
  • Revenue is driven by companies who use the service via subscription or other usage fees

What is an API?

• Exposes methods for developers to read, create, modify and/or delete data from within their projects.
• Abstracts data from the presentation

What is Rest?

• Architectural style – All REST APIs follow the same architecture
• Provides access to resources via a URL
• Constraints
  • Client-Server
  • Stateless – server does not remember anything. Send all the data in each request.
  • Cacheable
  • Layered System – Must pass through many servers
  • Code on Demand (optional)
  • Uniform Interface
    • Identification of resources
      • All exposed resources must have URL
    • Manipulation of resources
      • Enough info is given in the response to allow the client to modify or delete a resource
    • Self-description messages
      • Message includes information that allows the client to identify how to interpret the response
    • Hypermedia as the Engine of Application State (HATEOAS)
      • All responses include hypertext to allow navigation
      • clients should be able to navigate the API without documentation
      • Most don’t do this

Follow the basics

• Choose simple, easy to read identifiers
• Use the correct HTTP method for requests
  • GET – get something
  • POST – add something new
  • PUT – update/modify (but not exactly). Completely rewrites existing resource
  • DELETE – delete something
  • HEAD – get header
  • OPTIONS – get options
  • TRACE – traceroute
  • CONNECT – SSL (won’t be used in an API)
• Return the correct status codes
  • 100 range: informational
  • 200 range: something went right
  • 300 range: multiple choices
  • 400 range: client error
  • 500 range: server error
• Provide links to explore the API further
  • HAL specification
• Write documentation as part of the API building process

Presented By:

Mark Krupinski
Dan McGaw
Aaron Skonnard
Jason Seifer

Discussion:

In the past 2 years, people have become more accepting of online learning, as opposed to (or in conjunction with) traditional classroom learning

Technology has finally started to catch up and the content delivery is finally up to standards.

Content of courses are driven by a mix between what the consumers/subscribers want and what the authors/experts think is relevant.

Online education is complementary to higher education. Online resources can be used in between classes in higher ed to keep the student learning while they are not in class.

Study groups have started to spontaneously spring up around online learning classes. They want to try to leverage this social aspect of their members in the future.

Presented By:

Ryan McGinty – EffectiveUI
Suanne Hall – EffectiveUI

Why Experience-Driven Development?

• Can never guess how users will interpret products based on your own assumptions and experiences
• Measurable returns
  • Reduce development costs and inefficiencies
  • Long lasting and loyal customer relationships
  • Generate more conversions
  • Make more money
• Cannot be only “user-friendly”. Must also be
  • Delightful
  • Meaningful
  • personal
  • useful
  • engaging
  • etc. etc.
  • Users measure success by emotional response to the design
• Rare to give a feel that real people, with emotions, created a site, but it is very effective

Contract-First Development & Wireframe Deconstruction

• Design is implemented with continuous input from development
• User needs, budget, business needs and system constraints all come into play
• Contracts are used to further describe rules
• Contracts provide baseline for testing
• Contracts can be used for code generation and validation

Balancing Software Contracts with Experience-Driven Development

• Create a dialog around the sample responses coming from the back-end server. Start asking questions about the data that need to be answered for the front-end design.
• Design isn’t simply “chucking over the fence” to development, but involving them in the process of designing from the beginning to make technology decisions early in the design process.

Presented By:

Molly Holzschlag – Knowbility, Inc. – molly.com

Color

• HSL color
• Color is not the same in web as it is in print. Additive color vs. subtractive color.
• Color is subjective across different machines.
• Never rely on color alone.
• Perception of color based on:
  • Biology
  • neurochemistry
  • Culture influences including:
    • Heritage
    • Religion
    • Geography
    • Gender
• “Color is a mix of science and art, technology and human emotion.”

Language

• 4 times more likely to buy from a site that is in native language
• 100 million people access Internet in language other than English
• over 50% of web users speak a native language other than English
• Users stay on site twice as long if a website is in native language
• Takes a user 9 seconds or less to determine if he/she will stay on your site

Persuasive Web Design

• Requires understanding of “Place”
• Context is everything
• Content requires context