Mobile Theme Wishlist

spasticdonkey · Posted: Thu Jan 12, 2012 5:44 pm

I have made good progress towards a touch enabled ajax powered mobile theme for RN, but have a backlog of questions that have come up, so any feedback is appreciated.

What to do with Blocks?
Struggled a bit with what to do with blocks. It would be fairly easy to not display any blocks, but you do lose functionality that way. At current this is what I'm doing:
Center Top Blocks are displayed in a content accordion with the first block revealed and the other Center Top Blocks collapsed
Other Center blocks are displayed in a content accordion with all blocks collapsed
Left/Right Blocks a contained in dialog pages which are linked at the bottom of the page

Only registered users can see links on this board!
Get registered or login to the forums!

If you have better terms than "left blocks" and "right blocks" speak up Smile

Limitations: Since left/right blocks are nested in an embedded page they will not update (in most cases) as the user navigates the site. This is necessary from a performance perspective since any pages visited are dynamically added to the DOM, and it's size would get to large to add the output of the side blocks to every page. At least certain events such as login/registration/logout should trigger a page refresh and update blocks accordingly. Left/Right blocks are generated for all pages regardless if they are displayed or not, since they need to be available if the user navigates to a page where they can be viewed... Otherwise they would not exist in the DOM and the links to the block "dialogs" would have no effect.

In theory left and right blocks could be displayed for all modules if desired, using this technique...

Is this a good mobile strategy for blocks? Any suggestions?

What Resolutions?
Although this theme should adapt to variety of resolutions, I can certainly tailor it toward more popular screen sizes. What resolutions are you using for mobile browsing?

Colorbox?
Do colorbox modals work on mobile devices? Is it worth the weight of the required files, considering this is intended to be a lightweight and fast mobile ap?

That's a good start for now, look forward to some feedback, because more questions await Smile

unicornio · Involved Joined: Aug 13, 2009 Posts: 432

This is what I was talking already before and thanks for bringing this important topic. In my opinion all what belong to social, login download etc can be in one block. We need to kick Joomla out of this adictive circle. it is getting so far that almost nobody wants to know about nuke. Anyway this will be a big step. I would like to see more quality themes like Joomla has already but actually I don't like Joomla. It is really slowly.

Block should never be so long. Small and wide with a nice CSS colors. that will be the best.

I like more the third block. The first and the second block should be more wide and the third one is perfect.

Guardian2003 · Posted: Fri Jan 13, 2012 2:34 am

I can see what your doing and understand your concerns and questions.
Unfortunately, not having a phone myself, I have nothing to test with. I have used several sites that purport to display your site as it should appear on a mobile phone at different resolutions/landcsaped etc but they seem to give conflicting results; possibly because mobile browsers are advancing much faster than the software they are using.
Since nukeDH and thw whole "header" thing should really be part of the theme IMHO (the theme controls the layout ergo META, HEAD, BODY should be theme driven). It would also enable you to switch to HTML 5 DOCTYPE for a specific theme.

I DO have a question though given the constraints we have to work around;
Would it be better to use a module and theme together to present a mobile friendly website?
At the module level, we already have the capability to turn on/off side blocks, present the module IN_HOME, override core header and footer functions and although it would mean more or less duplicating existing modules (at least using the the existing SQL and forms code) into this new module.
If you look at the source code of any RN homepage, there is a ton on CSS and JS that is loaded ALL the time and I'm pretty sure most of those are not needed for every page BUT you could potentially alter that at the module level rather than changing tons of core code.

If you look at the Jobs Module I recently released (shameless plug) you'll see how I'm actually using module specific 'blocks'. The basic design is in preperation for running the module IN_HOME with core blocks disabled, so currently it gives a 5 column layout; core left blocks, module left blocks, main content, module right blocks, core right blocks.

nuken · Posted: Fri Jan 13, 2012 7:57 am

One thing I would like to see is a style switcher to allow the site to be viewed as non mobile even if a mobile device is being used. With all the android tablets out there now, having the option to view a standard layout would be nice.

Palbin · Posted: Sun Jan 15, 2012 11:37 am

nuken wrote:

One thing I would like to see is a style switcher to allow the site to be viewed as non mobile even if a mobile device is being used. With all the android tablets out there now, having the option to view a standard layout would be nice.

I completely agree. Even on my phone there are times when I want to view the normal page.

spasticdonkey · Posted: Sat Jan 28, 2012 1:40 pm

Just a quick recap of where I left off. Y'all are right that a method to turn on/off is needed. Altered the approach a little, and you can set it in 2 modes:

Passive: Mobile Users are presented with a slide-out side tab offering to enable the mobile theme. The tab course can be styled by theme.

Force: Force the mobile theme with an option to disable, or if disabled use slide-out tab to get back to the mobile site

While I don't plan on doing too much more of this, came up with a method to override blocks for mobile; with a minor tweak to any given block. Will include pre-edited examples for some blocks that don't format real well within the theme. For instance, the forums collapsing and survey block

In some cases the formatting issues are simply too much info to fit in a narrow display (forums collapsing), other times there are edits required to make them html5 friendly (survey)

I have to say the ajax loading is pretty slick and look forward to getting this out there for RN mobile users. The jQuery Mobile site claims speed increases of 30%-50%, and I would tend to believe them. The end result will probably be even better than that, as I will only be loading 2 js files and 2 css files instead of the menagerie of files normally loaded... and since this is ajax and the <head> does not refresh, these only need to be loaded on the first page hit. Very nice for phones that have cache restrictions and would have to re-download the files every page hit. Both css files should be small enough to be cache-able on most devices.

Note: There are some areas that Ajax has to be disabled (login/registration/admin), but for the most part is enabled sitewide.