Browser testing

  • Test all sites with Chrome, Safari & Firefox.
  • Use iOS Simulator to test on mobile Safari (built into XCode, which is free on Mac)
  • To test IE, download VirtualBox and Windows virtual machine, both free.
  • To test Android and other mobile browsers, use something like BrowserStack
  • With any version of IE, you can test earlier versions. Invoke the F12 Develoepr Tools (found in the gear menu in the upper right corner of the window)

Conditional CSS for just IE

  • If you want to define rules that apply just in IE, create a stylesheet called, e.g., ie.css.
  • Then load it up like this:
<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="/css/ie.css" media="screen, projection">
<![endif]-->
  • If you want it to just load for versions of IE earlier than IE 9:
<!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="/css/ie-lt-9.css" media="screen, projection">
<![endif]-->

Feature support

Polyfills

  • Polyfills are tools to add modern web techniques to old browsers, usually IE 8 & 9. They're built with JavaScript, usually.
  • HTML5Shim — to make IE recognize HTML5 elements
  • Selectivizr — to make IE recognize CSS3 pseudo-classes
  • Respond.js — to make IE support min-width & max-width for responsiveness

Modernizr

Feature-by-feature compatibility

  • HTML5 Please — list of features and how to support
  • Can I use… — feature-by-feature breakdown of browser compatibility

Further reading

UI critique

Restaurant sites

Phase two sites

Usability testing

  • Come up with tasks, ask testee to complete them on your site
  • Say to testee: "There are no wrong answers. Please tell me what you're thinking all the time."
  • As tester, your role is to watch, and prod testee to talk more.
  • And take notes about what you see, where they stumble.
  • If they ask questions, respond with a question. e.g. "What do you think the answer is? What would expect to happen?"
  • The bible on this topic is Don't Make Me Think by Steve Krug