This page shows the source for this entry, with WebCore formatting language tags and attributes highlighted.


Introducing Mobile Mode for earthli Apps


A couple of years ago, I wrote some documentation on <a href="{app}view_article.php?id=3436">How to browse pictures and albums on earthli</a>. The article below extends those instructions to explain how to use a new mobile mode. <h>New Features</h> <dl dt_class="field"> Mobile Mode There is a new browsing mode on earthli that provides a read-only view of individual entries (like articles, pictures, journals, etc.) that is much more mobile-friendly. This mode is available for all applications (e.g. <a href="{root}/recipes">Recipes</a> or <a href="{app">News</a>) but is most useful for the <a href="{root}/albums">Albums</a> where the mode is now the default for picture-browsing. Each application tracks mobile mode separately. Better Photo-sizing Full-size pictures are now sized to the browser window without artificial constraint. Instead of clicking a picture to see the full-size view, use "Open Image in New Tab" on a device with a mouse or trackpad or pinch-to-zoom on a mobile device. Key Photo per Day The calendar now includes thumbnails of the key picture for each day with pictures. An editor can set any photo to be the key photo for the day from the photo's command menu. </dl> <h>Browsing thumbnails</h> The basic thumbnail browser is already mobile-friendly enough.<fn> You can see the thumbnail browser in the screenshot below. In it, you can see that the calendar button is more prominent on each album home page. <img src="{att_link}show_calendar.jpg" href="{att_link}show_calendar.jpg" align="none" caption="Opening the Calendar" scale="20%"> <h>Calendar View</h> If you click that button, it takes you to the calendar view, shown below. The calendar now shows the key photo for each day.<fn> As before, the calendar shows the number of journals and pictures on a given day, showing the full title of a picture or journal if it's the sole entry of that type for that day. <img src="{att_link}calendar.jpg" href="{att_link}calendar.jpg" align="none" caption="Calendar View" scale="25%"> <ul> Click “# Pictures” at the bottom of a day to jump to the thumbnail browser for that day. Click a day's key photo to jump directly to the full-size picture navigator. Click the title at the top of the day for the journal entry (you can get to the pictures for day from there, too) </ul> <h>Navigating in Mobile Mode</h> Once you get to a picture, you're in the mobile-browsing mode, by default. This mode clears away the standard header, breadcrumbs and toolbar, replacing it with just the title of the item (e.g. a picture) and a small drop-down menu with navigation commands and a command to get back out of mobile mode. <img src="{att_link}mobile_navigation.jpg" href="{att_link}mobile_navigation.jpg" align="none" caption="Mobile-mode Menu" scale="25%"> Since the navigation toolbar is hidden, you can't use the mouse to navigate. Instead, swipe to move back and forth on a mobile device<fn> or use the <kbd>left</kbd> and <kbd>right</kbd> keys on a device with a keyboard. Click the little down-arrow button in the top-left corner to show a menu. <ul> The top button closes mobile-browsing mode and goes back to the "classic" browsing mode (shown below) The other links go back to<ul> the thumbnail browser for that day or the calendar or the thumbnail browser for the main album or other albums</ul> </ul> <h>Navigating in Classic Mode</h> <img src="{att_link}classic_navigation.jpg" href="{att_link}classic_navigation.jpg" align="none" caption="Navigating in the Classic View" scale="25%"> From here, you can use the regular breadcrumbs above the toolbar to navigate as you would with the menu in mobile mode. Click the “Show Mobile Mode” button in the toolbar buttons to get back to the mobile mode. <hr> <ft>Earthli has two copies of each picture: the uploaded original and a generated thumbnail. The generated thumbnail is already a certain size. To support a browser with dynamically sized thumbnails, the page would have to load all of the originals, which is not a good strategy for mobile.</ft> <ft>A user can select the command menu from any picture and set it as the key photo for the entire album or the key photo for its day. This allows a user to customize the appearance of the calendar for multi-day albums.</ft> <ft>Unfortunately, Safari on MacOS captures the swipe left and right events and directs them to "back" and "forth" in the browser history. While it is possible to <a href="">disable these gestures</a>, it's not very easy and it applies to all web sites. It would be nice if they funneled those touch events to the browser page, but they don't. There doesn't seem to be a web standard for touchpad events vs. mobile swiping events. Since the <kbd>left</kbd> and <kbd>right</kbd> arrow keys work, that's a decent fallback.</ft>