Use the ↑, →, ↓, ← keys.

Mobile Optimized
Websites

Performance & design, WebKit, & touch gestures

Reading Recap

Embrace Fluid Layouts

.figure {
  float: left;
  margin: 0 3.317535545023696682% 1.5em 0;   /* 21px / 633px */
  width: 31.121642969984202211%;             /* 197px / 633px */
}

"Responsive web design offers us a way forward"
- Ethan Marcotte
[article link]

Mobile Sites are the Future, but...

Today, if you are serious about creating the best possible mobile user experience, my advice is to develop apps.

"...mobile sites will win over mobile apps in the long term ... when? ... Sadly, I don't know"
- Jakob Nielsen
[article link]

“Year of the Mobile Web” (c.2011)

- DESIGN FOR SMALLER SCREEN SIZES
- SIMPLIFY NAVIGATION
- PRIORITIZE CONTENT
- MINIMIZE USER INPUT
- INTERMITTENT CONNECTIVITY
- ETC.

"As [mobile usage] evolves, so does the mobile user experience"
[article link]

Beginner’s Guide to Responsive Web Design

- FLUID GRIDS
- MEDIA QUERIES

Instead of asking "What is responsive web design?", ask "What problem does responsive web design solve?"
[article link]

Performance Checklist

Network Speed Problems:
- Reduce HTTP requests
  - image sprites
  - concatenate CSS & JavaScript
- Serve device specific content
  - smaller images on smaller screens
  - optimize for high resolution displays
  - check connection speed [link]
Device Limitation Problems:
- Fallback CSS3 transitions to jQuery animations
- Every performance issue gets amplified

Design Tips

Follow the HIG
Don't use hover states ...or maybe do
Don't use Flash
Simplify copy
Simplify forms
Use familiar UX conventions (e.g., vertical scrolling, )
Use mobile interface JavaScript libraries, such as...

Mobile interface libraries

More Resources

YSlow (Chrome or Firefox plugin)
http://validator.w3.org/mobile/ (this kind of sucks)

CSS3 → jQuery Fallback

/* -------CSS:------- */
#element{
  left: 0px;
  transition: all 1s;
}

#element:hover {
  left: 100px;
}


/* -------JavaScript:------- */
if(!Modernizr.csstransitions){
  $('#element').hover(
    function(){ $(this).animate({left:'100px'}), // over
    function(){ $(this).animate({left:'0px'}) // out
  });
}

Touch → Click Fallback

<a id="addTodo" href="#add">add todo list item</a>

$('#addTodo').on('click touchstart', function(e){
  e.preventDefault();
  addItem();
});

Apple's documentation on WebKit touch events

Other WebKit bugs/limitations/features

Large image downsampling on Retina displays [iPad link]
Quirky touch event behavior when combined with other JavaScript window modifications.
No scroll events until 'touchstop'. (Use position: fixed if possible)
Leverage graphical hardware acceleration

Week 13 Reading

Week 13 Assignment

Continue refining your websites applying new techniques learned from class.
[syllabus link]

Mobile Optimized Websites