Mobile Theme Wishlist

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!

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

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

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

Posted: Thu Jan 12, 2012 6:18 pm

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.

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.

registered · 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.

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.

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.

registered · Site Admin Joined: Jun 04, 2004 Posts: 6437

Hi Spasticdonkey,

Jumping in late on this, unfortunately...

I'd skip both blocks and colorbox. And suggest keeping all JS to a minimum, except of course, to support the mobile interface (e.g. jQuery mobile). Like most, a switch should allow mobile users to see the normal site (especially useful for tablet users).

Although I agree with Guardian that the theme should control this, the title and META tags have nothing to do with appearance - keep them separate. In fact, since those tags are primarily intended for search engines and desktop browsers anyway....

My question is: how to detect mobile devices? I did some research (not done yet) on this and posted it Only registered users can see links on this board! Get registered or login!. I'd definitely be interested in everyone's thoughts on that.

registered · Posted: Wed Sep 05, 2012 6:13 am

Haven't had a ton of time to research, but have tried to absorb as I go along. In reality, what is it about mobile, whether phones, tablets, etc., that is different than our desktops? Essentially screen size. So, instead of trying to keep up with all the differen User Agents, is screen size not a way to determine what you need to do with the presentation?

This is where my lack of research time comes in: I have no idea the pitfalls. Pretty sure someone will tell me not every user agent will pass accurate screen dimensions?

I have seen many implementations of late of separating CSS by this. It seems to be checking for widths of 600px or less.

BTW, if I have a 10 inch+ tablet, the last thing I want the site to do is default to a smaller mobile view as the default... but, that is just me.

Posted: Wed Sep 05, 2012 9:32 am

kguske:
Regarding blocks, I have it setup at current so you can enable/disable the various block columns. Side blocks only appear in a "simulated" modal when active. My thought was that there may be some functionality that a given site might need out of blocks, but if you don't want them they can be disabled. You can also disable specific blocks for mobile by adding the block id to an array within the theme config file.

In terms of colorbox I've tried to replace it where possible as JQM has built-in modals, but in most cases it would require editing core files which I'm trying to avoid.. I wish there was an established method for a theme to override the use of colorbox... I was striving for as fully functional as possible and actually got the nukeDH modals working within JQM, but still unsure I can get the admin area to work 100% correctly. The problems are more AJAX related than any issues with the mobile framework itself..

For page titles the JQM framework does some magic to insert page titles, as the head of the document doesn't actually refresh as you navigate the site (AJAX). There is a mobile googlebot so not sure yet what to think about meta tags. I only got involved in adjusting things normally outside of a themes' control because, A: I had to in order to use html5 with rn2.5; and B: To truly optimize a RN site for mobile you need to strip out alot of unneeded page weight... Responsive design alone is not enough, and imo only really works for mobile if you have a lightweight site to begin with. I'm seeing more and more sites nowadays using the "mobile first" design approach, and many look like stretched out mobile sites when viewing on a desktop at 1920px.. Not a direction I will ever use unless the site is very basic.

Very nice work on the detection of mobile devices. At current I'm using a function based on the regex provided by detectmobilebrowsers.com, but curious to hear your choice on the best method to detect mobile devices, as nothing I have is cast in stone... I tested the current method with a UA switcher with no failures, but I have not taken the time to test every UA provided by the tool as of yet; simply because there are alot of them.

Just FYI, the current browser detection function I'm using serves several purposes:

A: Set the mobile theme: MobileDeviceCheck('YourMobileThemeName');
I.E. any theme can be set as the default mobile theme

B: Check for a mobile device: if (MobileDeviceCheck()) echo 'Mobile Device!';
Found there were instances I needed to check if the user is on a mobile device or not, since the theme can be viewed as a standard theme, and for various other applications. Similar to the way get_theme() is used to retreive a theme. Using static values so the regex only has to be run once.

C: Force mobile friendly settings
When the mobile theme is initally set (A) a handful of settings are overridden which would otherwise cause issues within the mobile framework. The advanced editor is turned off, pagination settings are adjusted, and a couple other things which may be added to as I progress.

montego:
There are a bunch of cool things you can do with CSS3 media queries, which allow you to target specific screen resolutions, and are pretty reliable on modern browsers/devices.. However, as I touched on in my response to kguske, to truly optimize for mobile, responsive design is not enough. The core RN probably loads 20+ CSS/JS files, which is way too much for a pleasant browsing experience on a mobile device. Also, while it is easy enough to hide content at narrow resolutions via display:none, a mobile user still has to download and process the code while using potentially limited computing power. However, on the flip side, I'm a big fan of responsive design for customizing your site for large displays, I've done a small amount of this on my site... Smile

In regard to tablets, I think they still deserve a mobile optimized experience, but have not tested how reliably they are identified by mobile detection. If they are ultimately supported by my mobile theme, they will get a full screen experience Wink

Posted: Wed Sep 05, 2012 3:50 pm

spasticdonkey, I'm not finished evaluating them yet (I added a promising new DDR tool this morning). I like your approach for setting and checking for mobile devices. I haven't gotten to "how to react once you determine it's a mobile device" yet, but definitely look to your experience on that. One question: have you considered the possibility of a simple WYSIWYG editor that would work in a mobile setting? I'm not sure, but if that's viable, it *could* be nice. I haven't seen anything like that (and I've looked at hundreds of, if not a thousand, Android apps), so it's probably a safe assumption at this point... I've been checking out your site (and the ABBC mod), and really like the design experience!

montego, please point me to some examples of CSS3 media queries. I've seen only 1 or 2 JS / CSS approaches, and wasn't impressed by the 1 I tested (which enabled screen size settings, but was horribly inaccurate). I do have a 10+ inch tablet, so I'm definitely interested in distinguishing those... I think the providers of DDRs and mobile detection scripts will need to address that (some do, but most don't). BTW, I almost have the accordion version of RN admin working...

Some other thoughts on the 20+CSS/JS files - in addition to further minimizing these (though many are only loaded as needed), which would benefit the desktop experience, too:
- enable RN to use CDNs
- minify the remaining - this could be done on-the-fly and cached

Posted: Thu Sep 06, 2012 10:38 pm

kguske, look forward to your completed evaluation Smile

Took a look at some of them as I realized the current method I'm using is lacking tablet detection. The Only registered users can see links on this board! Get registered or login! class looks kinda promising; but I'll await your analysis... A simple WYSIWYG editor for mobile is a good idea, not sure there are many out there. Provided it doesn't need live preview capability I might be interested in investigating that Wink

In terms of CSS3 media queries, this was written awhile back but is the general idea. CSS Tricks also has a shiny new theme today, and as usual is an excellent example of layout and responsive design Smile

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

I've also heard good things about 320 and up which may have a more recent method incorporated within
http://stuffandnonsense.co.uk/projects/320andup/

For those who are curious how the jQuery Mobile framework will function on your particular device (mobile or tablet), you can get a pretty good idea by viewing the docs. Although it features a responsive 2 column layout in some areas, which to my knowledge is not part of the default framework, the rest is similar to how a JQM theme would function; albeit a little vanilla in the style department.
http://jquerymobile.com/demos/1.1.1/

Posted: Mon Sep 10, 2012 1:56 pm

Forgive me if I have already posted this once - just back from almost 2 months away and trying to catch up (could catch up faster if my PC was working) but do we really even need side blocks in a mobile theme view?
To my mind, side blocks a just snippets of information from specific modules. Provided the mobile user has a menu to access active modules, I don't see why side blocks are even needed, save possibly for a revenue generating advert.

Posted: Mon Sep 10, 2012 3:26 pm

Well you and kguske seem to agree there, so maybe I should listen to you guys Smile

It would reduce the workload on this project, as many blocks wouldn't work properly out-of-the-box anyway. At the very least I'll look into disabling side blocks as the default setting and end-users can open that door and do the related work to any blocks, if they desire. BTW, at current, when side blocks are enabled they are initally hidden from view, and it may even violate some advertising programs to place ads there. I know Adsense doesn't want you doing that....

In terms of ads, an end user can figure out where to put those if they like, but I've done alot to make the theme as lightweight as possible, and it seems somewhat counter-productive to display ads.. Normal advertising will not be displayed due to size restrictions and the likelihood of breaking the mobile layout.

Thrilled you are back, we missed you around here. Smile

Worker Joined: Sep 28, 2006 Posts: 241

Watching this topic intently as i too want to have a nice mobile theme for my site. Thanks for the time and huge effort spastic.

Posted: Wed Sep 12, 2012 8:16 pm

I do need a little help from users that have mobile devices, as i do not; which has made for an interesting development exercise.

1. Side Tab on Mobile Devices
Is this tabSlideOut plugin usable on a mobile device? At current it is the method used to enable the mobile theme if in "passive" mode where the mobile theme is not forced on the user. It is also the method to get back to the mobile theme if it has been disabled by the user. I would prefer to use some type of sidetab as no edits to other themes would be required.
http://www.building58.com/examples/tabSlideOut.html

2. jQuery Mobile Feedback
Just curious how the framework performs for you on a mobile device, as I've never actually seen it in action. Not interested in styling input as the demo/docs are basic in style, but would like to know your opinion after browsing a few pages and taking in the framework.
http://jquerymobile.com/demos/1.1.1/docs/content/index.html

Also kinda curious how page transitions, toolbars, and dialogs perform. Note that support may depend on your device, see Only registered users can see links on this board! Get registered or login!
http://jquerymobile.com/demos/1.1.1/docs/pages/page-transitions.html
http://jquerymobile.com/demos/1.1.1/docs/pages/page-dialogs.html
http://jquerymobile.com/demos/1.1.1/docs/toolbars/index.html

I'm becoming more and more a believer of device detection combined with a mobile framework, as opposed to responsive design alone. Read through this article and comments after the launch of CSS Tricks new responsive theme... Sounds like a major headache, and keep in mind the author is one of the rock stars of the web design world.
http://css-tricks.com/crashing-mobile-webkit/

Shortly thereafter a story about "Should we allow opt-out responsive design?"
http://css-tricks.com/user-opt-out-responsive-design/

Using a mobile framework not only has the advantages of speed optimization and touch friendly interfaces, but is also developed with a huge test bed of devices that you would never be able to replicate on your own. Out of the top 20 sites in the world (based in USA) every single one is using device detection to deliver a mobile optimized experience.

Posted: Thu Sep 13, 2012 12:28 am

I wish I could help you with that but sadly, I don't have a smart phone. In fact my phone is so old it still uses WAP for browsing, or it would if I had a data plan.

Re my last post; I'm not saying side blocks ARE needed for adverts, merely that it is really the only legitimate use of a side block on the mobile theme that I can think of. I normally just drop Adsense in immediately after a modules header() call these days because it is nice and consistent.

Posted: Thu Sep 13, 2012 1:11 am

Hi spasticdonkey

Testing with my iphone and the result is pretty good. Just tap with my finger and it comes smooth and fast.

http://www.building58.com/examples/tabSlideOut.html

Testing #2 with my iphone 4G

http://jquerymobile.com/demos/1.1.1/docs/content/index.html

I love this jquery ajax. I hope someday we can use it with RavenNuke. This is the best!

Very Happy

Posted: Sun Sep 16, 2012 9:24 am

spasticdonkey, interesting that you bring up these issues. I am so torn between responsive design and mobile-specific code. In my dream world, RN would be more object oriented where one could easily re-use certain classes and methods across both use cases and just different presentation layers to service the different use cases.

If we had better structure in our themes and core code to wrap CSS around, would that help more with the responsive design approach?

Also, I had mentioned in another thread (not sure if I had a reply) about testing for screen size rather than having to do indepth user agent inspection, which would always be changing, in order to identify whether a mobile view would need to be presented?

Posted: Sun Sep 16, 2012 10:24 am

I'm interested in finding a consistent method for determining screen size that doesn't involve user agents and / or redirection / cookies. If that's supported by CSS and can be visible to PHP...

Posted: Sun Sep 16, 2012 2:01 pm

I love the concept of responsive design, but it is fairly early in it's evolution. You have to be so careful how you layout every element on the page, and I could see many end users potentially posting content that would not be friendly to a responsive layout. At this time, I believe responsive design should be up to the individual webmaster, who has experience with CSS and is willing to have mobile in the back of their mind with everything they do on their site.

For me personally, I don't want to handcuff my "desktop" site solely for the benefit of mobile devices. Even minified, some areas of my site has 200kb+ of JS/CSS (unless the device can handle GZ encoded files). As I said above, too many responsive sites these days, just look like stretched out mobile layouts on the desktop; imho. You also have to be willing to troubleshoot and fix issues with your layout on devices you have no access to...

Not to mention many modules (and core code) are not ready for such layouts. Anywhere tables are used to create navigation menus need to be replaced with UL, such as your account, the main acp, and probably dozens of other areas. The layout of many modules themselves was never intended to work at narrow widths.

I'm not sure if screen size will continue to be a good method to identify mobile devices. Many mobile layouts are built around 480px or less, but how long will it be before there is a new device, with a new standard? Responsive layouts will need to be updated just as any device detection method would. I read not too long ago, about a Samsung tablet that runs @ 2500px... Not sure if it's on the market yet, but you get what I'm saying..

If you want to make it more complex, there are even methods for detecting network speed, because there are times a visitor may have a high resolution device but limited connectivity.

http://davidbcalhoun.com/2010/using-navigator-connection-android
https://github.com/nathanford/pngy
http://yahoo.github.com/boomerang/doc/

On a related note, this is kinda exciting, responsive image proposal for html5
http://www.w3.org/community/respimg/2012/08/04/picture-in-the-html5-spec/
http://www.w3.org/community/respimg/wiki/Picture_Element_Proposal

I'll try to keep an open mind, but for now I will proceed with the current method of UA detection, plus a mobile framework (JQM). If responsive design for mobile is important enough, it may be possible for RN3, but it's going to require some work that has not been discussed in detail. Without a template system in place, some of the adaptive CSS layouts required can get complex and time consuming. I spent several hours trying to reformat the block ACP for mobile via CSS alone, and still wasn't 100% satisfied with the result...

Yes, if we had different presentation layers to service the different use cases it would certainly help; but the theme designer is still stuck with whatever markup the CMS produces. I would rather have a view component that the theme designer had control over (I'm going to quit calling it a template system Smile

), which is more versatile. Unless I'm not fully understanding what you have in mind.

Posted: Sun Sep 16, 2012 3:57 pm

Thanks for the links to the HTML 5 Picture element proposals, I wasn't aware of that and had been concerned about the inefficiency of loading potentially large file size images only to shrink them for display on a mobile device when a smaller image and consequently smaller file size would be better.

I have to agree with you on responsive layouts; in theory they seem very promising but some of our data sets (e.g. a large news article with image/s) could potentially look horrid.

To be honest, I think we need to take the opposite view to our current one; develop for mobile and scale up for desktops, after all, it is easier to add stuff than to take away.

For what it's worth, I was invited onto the Dev team of some CMS or other several months ago (forget the name, possibly php-Fusion) but they took the approach of using two different rendered outputs depending on whether a mobile device was being used or not.
I'll see if I can find some sample code.

Posted: Mon Sep 17, 2012 12:37 pm

How important is administration on mobile devices? Are people really going to be posting News, Content, or creating blocks from their mobile device? I would think even on a tablet it would be difficult to post quality content, but I'm not a mobile user and I may be mistaken. I even heard one joke that, if you don't feel like giving a fully qualified response, paste 'Sent from my iPhone' at the bottom and people will understand Smile

While about half of the admin will work with JQM's built in AJAX page handling system, other areas need tweaking; and a few areas may be too much work (RNYA and Forums Admin).

So I guess my question would be do we need admin functionality, and if so what areas would you consider important?

I've mentioned this a couple times in my ramblings, but the AJAX loading system in jQuery Mobile should be of huge benefit to mobile users. It allows for only downloading the HEAD scripts on the first page load, and all subsequent pages are loaded via AJAX (just refreshing a portion of the page). It's an enhancement that should not be overlooked, and isn't available in a responsive approach. Another caveat, you can opt-out of a dedicated mobile theme, it's not as easy with a responsive layout; especially if a mobile user is experiencing issues with the theme.

Although my focus will remain on a jQuery Mobile theme, I will probably try a responsive theme later down the road. I think both solutions are viable, and one may be better than the other depending on a given site; and it's content.