{"id":13187,"date":"2015-03-06T05:06:54","date_gmt":"2015-03-05T18:06:54","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=13187"},"modified":"2019-10-11T11:35:17","modified_gmt":"2019-10-11T01:35:17","slug":"google-pagespeed-and-firebug-mobile-friendly-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-pagespeed-and-firebug-mobile-friendly-primer-tutorial\/","title":{"rendered":"Google PageSpeed and Firebug Mobile Friendly Primer Tutorial"},"content":{"rendered":"
\"Google<\/a>

Google PageSpeed and Firebug Mobile Friendly Primer Tutorial<\/p><\/div>\n

The job of making web pages mobile friendly can be approached from a few different angles, and is a job that definitely benefits from having a good set of tools and “tool combinations”.<\/p>\n

Say “tool combinations” because have found the Google PageSpeed Insight tool at this webpage<\/a>, combined with Firefox and its Firebug<\/a> add-on, a really powerful combination.<\/p>\n

The Google PageSpeed Insight tools not only measure a webpage’s speed but can also give a report on the Mobile (or Desktop, for that matter) friendliness of that webpage, giving a score out of 100.<\/p>\n

This also serves as an independent view of your webpage, without you falling into the trap of being too optimistic … though a bit of optimism can be a good thing … doh!<\/p>\n

So that’s the plan, and today we put this plan to use on this domain’s “landing page”<\/i> and its cohorts, which are all written in HTML\/Javascript\/CSS, and which use an iWeb<\/a> (by Apple) theme, so am thinking some of the observations may be directly useful for some webmasters out there, perhaps?! We talked about iWeb with iWeb Primer Tutorial<\/a>.<\/p>\n

At first we tried a CSS and “meta tag viewport”<\/i>, only, approach to the improvements, but it ended up being better to use Javascript as a solution mechanism. So we created some “onload”<\/i> event code for each of these webpages as below …<\/p>\n


\nfunction widthfix() { \/\/
\n if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile\/i)) { \/\/ it is a mobile device
\n document.getElementById('body_content').style.width='100%';
\n document.getElementById('nav_layer').style.width='100%';
\n document.getElementById('widget0').style.width='100%';
\n }
\n}
\n<\/code><\/p>\n

Please feel free to visit the www.rjmprogramming.com.au landing page<\/a>, and its s<\/a>ix<\/a> f<\/a>ri<\/a>en<\/a>ds<\/a>, preferably on a mobile phone, to hopefully try the improved user experience for yourself.<\/p>\n

Stop Press<\/i><\/b><\/p>\n

The ideas above got a tweak in October, 2019 which you can read about on Responsive Design Viewport Width Considerations Tutorial<\/a> from 12th October, 2019.<\/p>\n

If this was interesting you may be interested in this<\/a> too.<\/p>\n