While it is very nicely done, I still prefer the current design over any new ones. Plus, PM does not use any javascript(in most, if not all places) at the moment, which is a big plus for me, personally. There are reasons why I don't use StackOverflow, and this is one of them.

In addition, it seems more geared to mobile users, but I seldom use PM on any mobile device. I don't know what you're planning on doing, but if I am limited to only 320x400px of content with the rest being empty space, I will not be impressed.

Just my opinion, take it with a grain(or perhaps a kilo for some) of salt.

Ditto on that. Doesn't PM bare cover most of the smartphone concerns already?

Elda Taluta; Sarks Sark; Ark Arks
My deviantART gallery

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:

• TinyNav.js
• Five Simple Steps
• Starbucks
• Mobile Web Best Practices

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.

I believe you can also address incompatibility of old versions of IE by using IE-specific conditional-on-IE-version HTML comments (thus avoiding the need for JavaScript).

The linked screen shots show very little to have much opinion on unless you are trying to design a layout for use only on "mobile". They don't even appear to cover what it looks like to read a thread even just on "mobile".

The "before" screen shots on small devices don't use any of the pre-existing features for supporting small geometries.

I believe you can also address incompatibility of old versions of IE by using IE-specific conditional-on-IE-version HTML comments (thus avoiding the need for JavaScript).

What issues with IE I can fix with HTML comments, I did. Here is the head element of one of the two design templates I am working on. This head example has all the IE comment support stripped out. As you can see it is very short and to the point. Now lets look at a head with IE support included, it is longer and more complex. Here is just the IE fixing code:

<!--[if lt IE 7 ]> <html lang="en-us" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en-us" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en-us" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en-us" class="no-js ie9"> <![endif]--> 
+  
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en-us" class="no-js"> <!--<
+![endif]-->

<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">


  <meta name="viewport" content="width=device-width, initial-scale=1.0
+, maximum-scale=1.0" />

<!-- Fixes for IE -->
    <!--[if lt IE 9]>
        <link rel="stylesheet" href="css/ie.css" type="text/css" media
+="screen" />
    <![endif]-->

<!-- use "fixed-984px-ie.css" or "fixed-960px-ie.css for a 984px or 96
+0px fixed width for IE6 and 7 -->
    <!--[if lte IE 7]>
        <link rel="stylesheet" href="css/fixed-984px-ie.css" type="tex
+t/css" media="screen" />
    <![endif]-->

<!-- Fixes for IE6, only needed if IE 6 will be supported - width must
+ match 984px or 960px of css file used above -->
<!-- Use .imagescale to fix IE6 issues with full-column width images (
+class must be added to any image wider than the column it is placed i
+nto) -->
    <!--[if lte IE 6]>
        <link rel="stylesheet" href="css/ie6-984px.css" type="text/css
+" media="screen" />
    <![endif]-->
<!-- End fixes for IE -->


<!--[if lte IE 9]>
  <script src="js/modernizr_shiv.js"></script>
<![endif]-->
</head>
[download]

That fixes a whole mess of trouble for us concerning IE. To get HTML5 semantic elements and CSS3 Media queries is more complicated. The Story of the HTML5 Shiv does a great job explaining the development landscape that lead to html5 shiv. Of note is the following:

Fast forward to 2008, HTML5 is gaining momentum. New elements have been specified, however in practice, Internet Explorer 6-8 pose a problem as they do not recognize unknown elements; the new elements cannot hold children and are unaffected by CSS. This sad fact was posing quite a big hinderance to HTML5 adoption.

John Resig wrote a nice post on HTML5 Shiv that walks through an example of IE's behavior and how a simple javascript call can fix this problem. This is the only known method to get IE to recognize new elements, like HTML5. If there is another method that does not require javascript please let me know.

The linked screen shots show very little to have much opinion on unless you are trying to design a layout for use only on "mobile". They don't even appear to cover what it looks like to read a thread even just on "mobile".

I get what you are saying. I updated my post with more refined questions of what I am asking for.

The "before" screen shots on small devices don't use any of the pre-existing features for supporting small geometries.

Do you mean preexisting features in the PerlMonks design? Those screens are just after the page loaded. Do I need to append data to the url to get a different design or something else?

I think you need an iPhone version, and to stop wasting time on IE :-)

IE has always been a problem for web design, I have been doing this for over 13 years now and I always spend more time getting things to work correctly on IE than all the other browsers combined. Looking at different browser market share reports the really bad versions of IE (anything less than 9.x) are still getting wide use.

As for an iPhone version I am testing the site on an iPhone emulator. Specifically I am trying out iphone4simulator which is web based. Anyone have recommendations for an iphone testing service? I have no way to determine if the simulator I am using now even acts like an actual iphone. Android and Opera have emulators and browsers I can run locally that are the real thing. For the iphone I have only seen something like that on an actual MacOS X system.

++ to stop wasting time on IE. Does the monastery have any browser numbers? If the IE numbers are low (and I sure hope they are), a link to google chrome frame is all you need.

-derby

Does the monastery have any browser numbers? If the IE numbers are low (and I sure hope they are), a link to google chrome frame is all you need.

I have done some asking around about PerlMonks stats but so far I have found nothing. In terms of chrome frame the markup I have does use it.

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

That meta tag tells IE browsers to do 2 things. First if chrome frame is installed then use it to render this page instead of IE. If that fails IE will use the newest rendering mode it has based on version (IE 7 using strict instead of IE6 quirks mode for example).

As an unIE user, I support the above notion.

So what do the fellow monks think of the navigation style on mobile phones?

Is this a general question or specific to this site?

Generally speaking, navigation on mobile phones gets worse every new generation. And now Microsoft and Ubuntu are porting that abysmal experience to the desktop, so you can be unhappy and miserable no matter which of your devices you are currently using.

Specifically speaking: The site renders pretty much in standard layout on my Blackberry Torch (the one with the keyboard). It looks a bit cluttered, but it renders very fast (but has the usual wait-very-long-for-EE-to-load-from-database delay), zooming and scrolling is much smoother than most other forums i visited. And i really like it that the site uses the standard layout on BB instead of some adapted make-it-look-like-a-toy layout used for the other phones ;-)

So what do the fellow monks think?

put a noscript tag in there :)

I have added a noscript section to the design. Here is an Android 4.0.3 screen showing noscript in action.

To me, links currently do not stand out much (from rest of the darker text and the lighter background) at least in Opera 12* and above Android screen shots.