WordPress Blog Mobile Phone Friendly Primer Tutorial

Wordpress Blog Mobile Phone Friendly Primer Tutorial

We would like this WordPress Blog, that has the Twenty Ten theme, to be better adapted for mobile phone use (that being Android, iOS, Blackberry) regarding its look and usability. Several comments on the blog have asked about this, and hope they are “viewing” now. We’ve determined that the mobile phone device is the priority, and that, for now, mobile tablets do not need such urgent attention.

With WordPress Blogs you can go down the path of getting a mobile-friendly theme to start with, or apply a third-party plugin such as WordPress Mobile Pack, or do it yourself. We are going to opt for “do it yourself” and learn more about the innards of the blog’s styling as a result. Porquoi? How can you learn without knowing “now” … so to speak? Well, that’s the beauty of using an HTML examiner such as Firebug … sorry to go on and on and on and on and on about Firebug … but really … for DIY WordPress work, such a tool is worth its weight in gold.

Am going to show you the first sweep of changes with a point form in “black” and an action taken as a result in “red” below …

• settle on a policy regarding clutter … will you reduce data? never? … am aiming for “never” but may be deluded here
• determine a PHP way to detect for a mobile phone device (tablets seem okay) <?php
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
$blackberry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
$ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
if ($iphone || $android || $ipod || $blackberry) { // thanks to http://www.phpmysqlscript.com/2012/03/detecting-users-screen-size-and.html
// these are the devices we want to work with with our changes today
}
// ...
// ...
?>
… applied in header.php coding
• (you may need to) determine a Javascript way to detect for a mobile phone device (tablets seem okay) … try reading Javascript screen width detection ideas as a start
• settle on a “meta” “viewport” tag to your liking … personal preference leads to …
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.25, maximum-scale=8, user-scalable=yes" /> … applied in header.php coding
• review the look and usability of the blog … spent quite some time at this, because you want to know setting above is user-friendly, then think about the look
• round up the “img” elements that are too big and do something about them … used Firebug to point at these and identify their “id”‘s and/or “class” (and perhaps their tag type) … this lead to bold change in WordPress functions.php regarding the header images as per …
  
define( 'HEADER_IMAGE', '%s/images/headers/path.jpg' );

$nfty = 940;
$oneg = 198;

$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
$blackberry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
$ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");

if ($iphone || $android || $ipod || $blackberry) { // thanks to http://www.phpmysqlscript.com/2012/03/detecting-users-screen-size-and.html
$nfty = $nfty / 2;
$oneg = $oneg / 2;
}

// The height and width of your custom header. You can hook into the theme's own filters to change these values.
// Add a filter to twentyten_header_image_width and twentyten_header_image_height to change these values.

define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', $nfty ) ); //940 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', $oneg ) ); //198 ) );


  
• have a look at the site with Firebug and point at the wider offending elements, then look over at the right hand side CSS section to see what some local CSS changes might achieve … this lead to bold change in WordPress header.php as per …
  
<style>
// ...
// ...
// ...
li.eight {
background-image: url('http://www.rjmprogramming.com.au/PHP/eight.jpg');
background-position: left;
background-repeat: no-repeat;
background-size: 128px 80px;
height: 150px;
text-indent: 0px;
}

<?php
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
$blackberry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
$ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");

if ($iphone || $android || $ipod || $blackberry) { // thanks to http://www.phpmysqlscript.com/2012/03/detecting-users-screen-size-and.html
echo "n #access .menu-header, div.menu, #colophon, #branding, #main, #wrapper { width: 580px; } n"; // 470px; }
}

// ...
$hrc = rand(0, 10);
$hrcarray = array("black", "red", "blue", "purple", "maroon", "teal", "brown", "orange", "olive", "lime", "green");
// ...
// ...
// ...
</style>

  
• check the blog posting wording does not need any manual horizontal scrolling … the direct result of this analysis is the hard-thought-about “580” in echo "n #access .menu-header, div.menu, #colophon, #branding, #main, #wrapper { width: 580px; } n"; // 470px; } in code snippet above … and the windowScrollBy() in … echo "n if (1 == 1) { if (document.URL.indexOf('?') != -1) { location.href='#main'; window.scrollBy(36,220); } else { window.scrollBy(36,0); } n";
… and all this, along with an “onload” intervention strategy in the aforesaidmentioned “img_alt()” function mentioned in CSS Background Colour Usage Primer Tutorial as per …
function img_alt() {

<?php
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$android = strpos($_SERVER['HTTP_USER_AGENT'],"Android");
$blackberry = strpos($_SERVER['HTTP_USER_AGENT'],"BlackBerry");
$ipod = strpos($_SERVER['HTTP_USER_AGENT'],"iPod");
if ($iphone || $android || $ipod || $blackberry) { // thanks to http://www.phpmysqlscript.com/2012/03/detecting-users-screen-size-and.html
echo "n if (1 == 1) { if (document.URL.indexOf('?') != -1) { location.href='#main'; window.scrollBy(36,220); } else { window.scrollBy(36,0); } n";
} else {
echo "n if (1 == 2) { n";
}
?>
var ilis, clis;
var nfo, nfos;
var lis = document.getElementsByTagName("li");
for (ilis=0; ilis<lis.length; ilis++) {
clis = " " + lis[ilis].className + " ";
if (clis.indexOf(" page-item-80 ") != -1) {
lis[ilis].innerHTML = lis[ilis].innerHTML.replace(/ Statement/g, "");
} else if (clis.indexOf(" page-item-189 ") != -1) {
lis[ilis].innerHTML = lis[ilis].innerHTML.replace(/One Image Site/g, "1Image");
} else if (clis.indexOf(" page-item-366 ") != -1) {
lis[ilis].innerHTML = lis[ilis].innerHTML.replace(/All Posts/g, "All");
}
}
lis = document.getElementsByTagName("a");
for (ilis=0; ilis<lis.length; ilis++) {
if (lis[ilis].innerHTML.indexOf("pink;") != -1) {
lis[ilis].innerHTML = lis[ilis].innerHTML.replace("pink;", "pink;width:180px;"); //212px;");
}
}
var h1st = document.getElementById("site-title");
h1st.style.width = "250px"; //"350px";
h1st.style.marginTop = "-34px";
h1st.style.marginLeft = "20px";
h1st = document.getElementById("site-description");
h1st.style.position = "absolute";
h1st.style.left = "80px";
h1st.style.top = "35px";
h1st.style.fontSize = "8px";
h1st.style.marginLeft = "36px"; //"350px";
h1st = document.getElementById("site-info");
h1st.style.width = "250px"; // "350px";
h1st = document.getElementById("mywtoi");
if (h1st != null) {
h1st.style.width = "190px"; //"212px";
h1st.style.height = "254px"; //"282px";
}
h1st = document.getElementById("content");
if (h1st != null) {
h1st.style.width = "320px";
}
}

var osf=document.getElementById('marquee-style-rss-news-ticker');
// ...
// ...

  … resulted in a look like for our tutorial image
• check the workings of “select” tags and check that they function … any “window.location=’blah’;” type of code should become “location.href=’blah’;” … we talked about this previously with Safari iPad Issue with Window.Open and Window.Location Primer Tutorial
• as far as usability goes, for blog calls of particular sets of postings, is there relevance above the fold straight away? … no … not good so we made that change that goes echo "n if (1 == 1) { if (document.URL.indexOf('?') != -1) { location.href='#main'; window.scrollBy(36,250); } else { window.scrollBy(36,0); } n";
as above
• check out other parts of the domain with links to the blog (maybe via “select” tags) that they function … we found “location.href=’blah’;” issues on the landing page
• keep looking, and using yourself, and see if feedback can help, because you will be unlikely to have all the mobile devices to test out there … doh! … any feedback ( or “feedback” email or “email a friend with invitation to try this blog on their mobile” email ) would be greatly appreciated?!

You’ll see throughout the code snippets the generic usefulness of the great advice from this link.

Of course, it goes without saying, that we would appreciate your feedback, as a comment (or “feedback” email or “invitation to a friend to try this blog” email ), of your experience accessing this blog on your mobile phone. Hope you try it out, and thanks if you do.

Did you know?

The investigations and analysis of HTML required by this “DIY” PHP/HTML/CSS were facilitated by the use of the Firefox web browser and a very useful add-on called Firebug which you may want more information about here, and which is commonly used to debug client-side Javascript and HTML. As for today’s usage, Firebug is also extremely useful in deconstructing how a web page was created. The other simple wonderful tool for this is the web browser’s equivalent menu command like View->Page Source (or sometimes equivalent of right-click Page Source). Firebug has a sister product called FirePHP which helps debug server-side PHP and Ajax work. Please don’t mind me … am sold on Firebug with Firefox, but there are many alternatives (eg. Safari and Inspector (built into Safari) via Develop->Show Web Inspector) … and there are others (with other web browsers).

If this was interesting you may be interested in this too.