Beefy Boxes and Bandwidth Generously Provided by pair Networks
Pathologically Eclectic Rubbish Lister

comment on

( [id://3333]=superdoc: print w/replies, xml ) Need Help??
Ditto on that. Doesn't PM bare cover most of the smartphone concerns already?

Before I get into your question I would like to thank you for pointing out that version of PerlMonks, I did not know about that and here are some screenshots on Opera Mobile and Android. After taking a few minutes to try it out on the desktop and cellphone I can now answer this question. The 'bare' mode does make the browsing experience better in certain cases but other tasks are now harder to complete. Let me explain by going through some of the interconnected design considerations for mobile devices (this is also largely applicable to regular websites as well).

Emphasize content over navigation. The bare mode takes this to the extreme by removing everything except the main site content. This does make the content first but it also makes navigation harder. With no menu at the top there is no clear way to navigate to other sections. The only available links are the ones intermixed with the content which are targeted at said content not exploring the site in general. This method is also called the "hide n' cry" method. Just remember: "Mobile users will do anything and everything a desktop user will do, provided itís presented in a usable way."

Pivoting and Exploring a website are common tasks all of us do when using a website. The bare PM has no main navigation visible and no way to access it. The design I am working on compresses the navigation into a drop down select menu that it accessible via a single click. The technique I am using borrows ideas from Convert a Menu to a Dropdown for Small Screens and Unobtrusive Dropdown Page Changer. The goal is not to bury the content in navigation bars but have navigation easily accessible from a central point, usually at the top of the page. Here are some mobile screenshots of a select option and a toggle menu:

Align with how people use their mobile devices and why. The book "Mobile First" does a great job explaining this:

  • Lookup/Find - I need an answer to something now--frequently related to my current location in the world
  • Explore/Play - I have some time to kill and just want a few idle time distractions.
  • Check In/Status - Something important to me keeps changing or updating and I want to stay on top of it.
  • Edit/Create - I need to get something done now that can't wait.
XKCD did a comic on how University Website(s) are doing it wrong. PerlMonks is a community of people who discuss and disseminate information that relates to the Perl ecosystem in the form of forum posts, tutorials, scratchpad, private messages, chatterbox, etc... with or without a login account. The bare version does not address all of these tasks. The prototype as seen in this Opera Mobile above the fold shot has a search box and the main navigation immediately discoverable. This handles the lookup/find and Explore/Play tasks. Check In/Status is either reloading a specific page or using a nodelet. A link was added to the main navigation to jump to the nodelets which are below the main content but still accessible. Edit/Create is already handled by the PerlMonks design with the ability to reply and send private messages when viewing content nodes.

Maintain clarity and focus. This idea ties back into "how people use their mobile devices". If you look at the mobile usage reports like this report from 2010 you see that 84% of users use their smartphones at home and who really focuses all their attention on doing something on the phone while at home? Looking into the other times cell phones get browsing use it is easy to draw the conclusion that the end user's full attention is not focused on the web page being consumed. This leads to a browsing habit known as "one eyeball and one thumb" which means the design needs to take into account external distractions. Removing excess navigation options from pages and removing visual clutter are the two main vectors for solving this problem.

The bare version addresses some of these problems but how it is accomplished degrades other browsing tasks. This is why we still need a better mobile experience since the mobile market is growing and projected to grow even faster.

Also let me re-iterate the desktop version of Perlmonks is going to be laid out just like the current version and will function exactly the same as it does now with javascript turned off except for Internet Explorer 6-8 which need a shiv to run HTML5. Also there will be no excessive use of whitespace, I like to use as much of the screen real estate as possible for content.

In reply to Re^3: PM redesign: the mobile experience by kimmel
in thread PM redesign: status update by kimmel

Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post; it's "PerlMonks-approved HTML":

  • Are you posting in the right place? Check out Where do I post X? to know for sure.
  • Posts may use any of the Perl Monks Approved HTML tags. Currently these include the following:
    <code> <a> <b> <big> <blockquote> <br /> <dd> <dl> <dt> <em> <font> <h1> <h2> <h3> <h4> <h5> <h6> <hr /> <i> <li> <nbsp> <ol> <p> <small> <strike> <strong> <sub> <sup> <table> <td> <th> <tr> <tt> <u> <ul>
  • Snippets of code should be wrapped in <code> tags not <pre> tags. In fact, <pre> tags should generally be avoided. If they must be used, extreme care should be taken to ensure that their contents do not have long lines (<70 chars), in order to prevent horizontal scrolling (and possible janitor intervention).
  • Want more info? How to link or How to display code and escape characters are good places to start.
Log In?

What's my password?
Create A New User
Domain Nodelet?
and the web crawler heard nothing...

How do I use this?Last hourOther CB clients
Other Users?
Others avoiding work at the Monastery: (5)
As of 2024-05-29 17:48 GMT
Find Nodes?
    Voting Booth?

    No recent polls found