| Index: trunk/mockups/athena/README |
| — | — | @@ -5,20 +5,42 @@ |
| 6 | 6 | |
| 7 | 7 | == Data source == |
| 8 | 8 | |
| 9 | | -Pages are loaded in an <iframe> from http://en.wikipedia.org using ?useformat=mobile. |
| 10 | | -They are currently loaded through a local .php proxy which hides the mobile-view header/footer and injects a script to modify behavior to cooperate with the parent frame. |
| | 9 | +Pages are loaded in an <iframe> from http://en.wikipedia.org using |
| | 10 | +?useformat=mobile. They are currently loaded through a local .php proxy |
| | 11 | +which hides the mobile-view header/footer and injects a script to modify |
| | 12 | +behavior to cooperate with the parent frame. |
| 11 | 13 | |
| 12 | | -This frame embedding (using HTML5 postMessage) style, if integrated into the regular raw views, could make it easier for mockups and alternate UI tools to hook in without modification in future, without exposing direct XSS vectors between the two sides... |
| | 14 | +This frame embedding (using HTML5 postMessage) style, if integrated into |
| | 15 | +the regular raw views, could make it easier for mockups and alternate UI |
| | 16 | +tools to hook in without modification in future, without exposing direct |
| | 17 | +XSS vectors between the two sides... |
| 13 | 18 | |
| 14 | 19 | |
| 15 | 20 | |
| 16 | 21 | == Screen size == |
| 17 | 22 | |
| 18 | | -CSS media queries are used to check the screen. If 640px or wider, we enable the 'tablet' mode with wider buttons, more visible entries on the top bar. |
| | 23 | +CSS media queries are used to check the screen. If 640px or wider, we |
| | 24 | +enable the 'tablet' mode with wider buttons, more visible entries on the |
| | 25 | +top bar. |
| 19 | 26 | |
| 20 | | -If smaller, we use the 'mobile' mode with more compact buttons, things folded etc. |
| | 27 | +If smaller, we use the 'mobile' mode with more compact buttons, things |
| | 28 | +folded etc. |
| 21 | 29 | |
| 22 | 30 | |
| | 31 | +Using CSS media queries lets a lot of the layout logic happen on its own |
| | 32 | +without having to ship separate code for small and medium screens. For |
| | 33 | +mobile web and PhoneGap-style apps this makes it easier to ship a single |
| | 34 | +codebase that runs on both sizes. |
| | 35 | + |
| | 36 | +Some systems may also allow dynamically resizing the screen, such as the |
| | 37 | +side-by-side "snapped" application view in Windows 8's Metro environment. |
| | 38 | +This allows the app to automatically retool itself to fit a smaller or |
| | 39 | +larger subset of the screen. |
| | 40 | + |
| | 41 | +When testing in a regular browser, you can see this in action by sizing |
| | 42 | +the browser window to wider or narrower than 640px. |
| | 43 | + |
| | 44 | + |
| 23 | 45 | == Scrolling == |
| 24 | 46 | |
| 25 | 47 | The embedding iframe is sized to match its content, so the outer document as a whole scrolls. |