^zhurnaly   -   Random   -   Recent   -   Running   -   Mantra   -   Tarot   -   Help

Small Screen CSS Optimization

On an iPhone's small screen the zhurnaly.com main pages, the ^zhurnaly archive pages, and many ZhurnalyWiki pages are hard to read and/or unæesthetic. The architect of the Oddmuse Wiki, Alex Schröder, has a blog which sometimes comments on mobile device issues, and that recently led me to think about how to improve the zhurnaly.com Cascading Style Sheet (CSS) which advises browsers how to render a wiki page. The Oddmuse CSS discussion was extremely helpful. Changes to http://zhurnaly.css were guided by three principles:

Key modifications of http://zhurnaly.css were focused on making the font used on most pages a reasonable size on the mobile device screen, keeping embedded quotation blocks readable, and handling tables more gracefully. A CSS file can detect an iPhone browser by the logic "@media only screen and (max-device-width: 480px)". In words, the zhurnaly.com CSS now asks an iPhone to:

That iPhone-specific section of the CSS thus looks like:

@media only screen and (max-device-width: 480px) {
    body { font-size: 300%; }
    table.user { font-size: small; }
    span.gotobar { font-size: small; }
    div.footer { font-size: small; }

The only other change to the Zhurnaly CSS, which applies to all browsers (not just iPhone's Safari) was to tell browsers to make the font used in quotation blocks relatively "smaller" than normal, rather than the absolute "small" size: "blockquote { font-size: smaller; }". These changes seem to improve the presentation of >80% of ^zhurnaly pages. Bug reports and suggestions for further improvements are welcome. So are comments on how other small-screen devices render pages. Thank you!

(cf. http://www.oddmuse.org/cgi-bin/oddmuse/Small_Screens ...) - ^z - 2012-04-30