Logo

Seniors helping seniors use computers and the internet

 

Mobile Design Subsite

Developer Tips and Traps

Isolate your Subsite

There is no need to have your prototype mobile website in public view until you are happy with it.  You can, of course, view it in your development environment on your computer but you can also upload it to the server with NO link from the main site and key in its full address as the URL on a phone to check how it looks.  Example, for my SeniorNet mobile subsite, the address www.seniornet.com.au/mobile/MobileHome.html links directly.

Use a Hidden Link

I did a lot of development with a hidden link (or two).  Simply create a white* square using any program (even Paint) and save a jpg.  Drop it on the page you want to use (eg home page) and hyperlink it to the test page.  There is a hidden link to this subsite just to the left of the font selector in www.seniornet.com.au

Test for Mobile without Using a Smartphone

If you remove the comment // field on the first line of the IsMobile() function ALL devices are seen as mobile.

Use Google's Mobile Test

Enter your mobile page into Google's tester

w3schools Resource

One of the best sites for HTML, CSS and JavaScript is www.w3shools.com.  Click the search button in the top right hand corner to find out how any command or structure in the web development world works.  That way you can customise your code to your own needs and you do not rely on the capabilities of the original author.

Traps

Caching

The default setting for browsers is that any site is cached indefinitely.  So when you change your website your first look may show no change.  Reload the site to see the update, or better still go into the cache options and arrange that caching is minimised (in Internet Explorer, for example, choose Tools, Internet Options, click the Settings button and choose the second option).  Note that in Mobile Chrome you do not have any control over this setting; you can only reload.

Zooming

I spent a happy (not) hour diagnosing why my mobile home page which was larger than the rest of the pages in the subsite as viewed on my phone.  Eventually I realised that I had zoomed the full home page to look at something and that Chrome had retained the same zoom level when I linked down to the mobile home page!

Choice of Test Browser

Internet Explorer will not run scripts without you telling it to each time you load a page from your local (ie as held in your hard drive) site - though it will happily run scripts from any dodgy website on the Internet (go figure).  So use Firefox, which has no such qualms.

JavaScript

Debugging

Unlike HTML, which will run buggy code as best it can - you can see the faults when your code breaks through into the rendered page - JavaScript tends to discard code after it finds a bad line.

Your first recourse is to CAREFULLY count all the brackets of ALL types in your code - there must be as many closing as opening, and this is by far the most common error.

You can also check that the arguements to functions are correct - check w3schools (as above) to verify.

If you place your code temporarily within a paragraph on the page you can add debugging statements - put in instances of document.write(whatever) where whatever could be a variable in your code at that point or could be text to identify the code has got to a certain branch eg. "at line 7".

Script Placement

Normally all script is placed within the head element of a web page.  If the code is normal instructions it will be executed before the body element loads.  But usually it will be functions which are called from within the body element.

The normal way in which a function will be requested is via the onload attribute within the opening tag of an element - most usually the body.  It will then be called AFTER the element has been rendered.  It is quite possible to place the onload attribute within a page element below the element affected by the function - for example, you might activate a rotating banner picture within a subsequent image (you almost always cannot active a function from the tag of the function target itself as you create a re-entrant sequence with disasterous results).

Another common request is via an onclick attribute.  And, as mentioned above, you can place scripts within a paragraph and get them to display text using the current paragraph formatting.

Copyright © Ken Curwen 2012, 2013, 2014, 2015, 2016, 2017