Adaptive mobile CSS

[ndarville]

Articles:

1. http://twitter.github.com/bootstrap/scaffolding.html
2. http://msdn.microsoft.com/en-us/magazine/hh653584.aspx
3. http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
4. http://broadcast.oreilly.com/2010/04/using-css-media-queries-ipad.html
5. https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

Books:

1. http://www.abookapart.com/products/responsive-web-design
2. http://easy-readers.net/books/adaptive-web-design/
3. http://www.abookapart.com/products/mobile-first

   iPhone

Navigation:

• Position: top
• Text and icons: icon-only

Threadbar:

• Hidden

  iPad

• Smaller left and right margins between containers

  Portrait

Navigation:

• Position: left (default)
• Text and icons: icon-only
  • Include width of #content and #board correspondingly

@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait) {
    ...
}

Landscape

As-is

@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape) {
    ...
}

Retina

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
    ...
}

---

The adaptations of the navigation bar (and icons) will mess up page.html-based, home, and category templates, though.

Problems

iOS Behaviour

• Having to rezoom on every rotation is annoying and should happen automatically. Happens on DF, too, though.
• Automatic iOS zoom into <form> elements can’t be trivially disabled. Suggested fix here.

---

page.html Lists and user.html

• <li> elements are out of view in page.html templates

---

Margins in add View

.op Too Narrow

.left-buttons off to the right on iPhone

[ndarville]

Get bigger, touch-friendly pagination buttons inspired by Twitter Bootstrap at some point.

[ndarville]

Decreased font-size on iPhone and decreased text in .op/.user field even more while increasing their margin in 808dd9a42a0e1eea95d9d8ba32d67f2a094783a7.