I just attended a day-long workshop on Responsive Web Design at the User Interface Engineering (UIE.com)  UX Immersion Mobile conference in Seattle.

A comment by the presenter, Jason Grigsby (of  cloudfour.com) caught my attention.    It was his opinion that if you had to choose between optimizing a site for speed in loading and making it responsive, that he’d go for the speed.    A site that might FIT on a small screen, but that still takes too long to load, will lose more viewers than one that loads quickly, even if they have to do some pinching and zooming to see the content.

For Joomla! sites a plugin can help with the speed thing:   JCH Optimize.  Here’s a blog entry about that:  http://bit.ly/11oiaKA.

 

Beginning to work on an updated ScreenShots manual for a client, and my No Number plugin buttons would only work if I toggled the editor OFF.

Not Acceptable!

I found I had to set the JCE Profile “Editor Parameters” setting for Validate HTML to “No”.

All is back as I expected.

Just posting this here to remind myself that when Joomla components are giving you things you don’t want, you might be able to solve it with an override of the component’s language file.

Recently a colleague Mark Madison was struggling to kill the display of the word Category:  in as site that uses SobiPro.   A language override was a quick and efficient way to deal with this,  vs a full-blown template override.

Thanks to Andy Tarr for pointing this out.

I had discovered widgetkit when I needed a great mp3 player that did not rely on flash.  Widgetkit ALSO provides a pretty friendly slideshow solution that does not combine cropping and resizing as the ckslideshow extension does.

CK Slideshow might be a good solution if your slide images won’t suffer from being cropped — the smaller images delivered on a mobile device will be a vertical slice of your horizontal banner image, rather than just a proportionately reduced banner.    In some cases this would be a better solution — but banner images would have to have good content in the middle of the banner image and often that is NOT the composition we’d prefer for the larger images.

Tradeoffs!  

I’m upgrading a site from J1.5.26 to J2.5.6 and needed a replacement for an extension that will not work in 2.5:   the Ultimate Content Display extension.

Today I found a free extension from bowthemes.com  called BT Content Slider.

With persistence I got it to work but….  there are a few caveats:

I needed to be able to select article to display in a sidebar module — one at a time,  fade in effect as they rotate from one to another.

The format for entering items is this:    id1, id2, id3 (1,2,3)

where the numbers are the article item ids.

There’s another place to specify article order — and I was having trouble with this — some articles just wouldn’t show up, even though I knew the id was good.

What worked:   be sure list is in low to high order by ids   AND  set order to “random”.

OK.  I can live with that.

Another issue came up though with an article that had no associated menu item.  

The BT Content slider has a parameter for you to set a menu item “if the article id is not found” —  I figured this was a placeholder article to show if the content selection tool had no results.   But NO!    If an item is found, it will display the page header of the menu item set in this parameter.    Odd results — click to see a schedule of an event and get “Ways to Give”  as a heading over the schedule content.    NOT OK!

So… the MORAL of this story is to use that hidden menu — and be sure all articles exists in at least one menu — even if its only the hidden menu.

May I give a plug for NoNumber.nl‘s wonderful Add to Menu extension.   Create your menu item right from the article creation/edit screen!

 

My friend and colleague Bill from Grumpy Engineering  helped me with this one:

I added this to the php block at the head of my template:

$isIPad = preg_match('/ipad/i', trim($_SERVER['HTTP_USER_AGENT']));
if ($isIPad) $device="ipad";
else $device="not-ipad";

and then could use

class=“<(question mark)php echo $device;  ?>”   on the body element of the index.php file.

(Of course I also added a line to the template with that variable for testing  that would display the results and not force me to examine the code to see if it was working.)

In my stylesheet I could then write rules specifically for the ipad:

.ipad  element-needing-custom-styles  {property: value;}

I was doing this to solve a problem with how the quicktime player displayed on the ipad (fallback for no flash when using Allvideos)

I increased the height of the player container to 72 px in the plugin parameters,  then set the theses styles:

/* adjust allVideos audio player */

.avPlayerWrapper {text-align:left; width:230px; clear:none; }
        .avPlayerWrapper .avPlayerContainer {margin:0;}

.avAudio .avPlayerContainer {height:24px; overflow:hidden; }
        .avAudio .avPlayerBlock {position:relative; top:-48px;}

#ipad .avAudio .avPlayerContainer {height:72px;}
         #ipad .avAudio .avPlayerBlock {position:relative; top:0;}

The results made mp3 players that were ugly, but functional.

The much better solution was to use WidgetKit’s Media Player from YooThemes.com, but I’m still glad to know how to target the ipad specifically should I ever need to.

I searched the JED and the best I could come up with was to use Allvideos to create simple, single mp3 players for a website I’m working on.

The syntax of this pluggin is nice and simple:   {mp3}Name-of-file-without-extension{/mp3} or

{mp3remote}http://other-site.com/name-of-file-with-extension.mp3{/mp3remote}

But…  Allvideos uses Quicktime as a fallback when flash is not available and on the ipad the Quicktime controller was clunky.   I did get a snippet of php to detect the ipad and then could address styling the controller to make it better — but it was still clunky.

WidgetKit from youtheme.com

I kept looking for a solution that would provide html5 audio  and finally found it in youtheme’s widgetkit media player.   This uses html5 audio and falls back to flash instead of the other way around.  It suits me!

The syntax is just a bit more complex, but certainly doable:

 

NEW version of Imagesized plugin includes more options, but forces a bg and border for all generated thumbnails.   Set to white this could often just disappear on the page, but on the fbg site I needed thumbs to sometimes be on a background image for front page.

I was using very standard image sizes so I could predict that all thumbnails would be the actual size, and not need a “fudge-factor”  so I modified the plugin code as follows:

In plg_imagesized.php  line 373

WAS

imagerectangle($result, 0, 0, $widthm-1, $heightm-1, $this->set_img_color($result,$fp_bocolor));

I changed it to

imagerectangle($result, 0, 0, $widthm, $heightm, $this->set_img_color($result,$fp_bocolor));

and line 375

WAS

$sample = imagecopyresampled($result, $image, -($width/2) + ($widthm/2)+2, -($height/2) + ($heightm/2)+2, 0, 0, $width-4, $height-4, $width_orig, $height_orig);

I changed it to:

$sample = imagecopyresampled($result, $image, -($width/2) + ($widthm/2), -($height/2) + ($heightm/2), 0, 0, $width, $height, $width_orig, $height_orig);

 

By the way, the new Imagesized plugin now offers different settings for leading or intro blog entries and the settings can be applied to front page, and/or section and category blogs.  You can exclude sections or categories from using the plugin.

It also includes a character count cut off for leading and intro articles which appends […] after the specified character.  This lets you have very even blocks for a multiple column display.   You can specify a different  ….   symbol.