Responsive Menu Tutorial for HTML Web Pages, No JQuery

HTML Menu Bar Which Switches to Dropdown for Mobile

For a web site to be successful it must tick several boxes. It needs an attractive design, great content, no pop-ups, not throw to many advertisements at visitors and work well on a variety of screen sizes. The last point is important as mobile devices are now the dominant platform for accessing the web. Achieving multi-screen support from a single web site saves time (no need to update the design more than once). Time is a precious resource for most people and businesses.

A web site needs to respond to the device it is being viewed on, hence the term responsive design. When a website uses a menu to allow the viewer to jump to other pages, that menu should work well on different screen sizes. This article is a responsive menu tutorial giving an example implementation of the Responsive Nav plugin. This provides a basic responsive web site menu without using any other frameworks or libraries. As the screen shrinks the menu switches from traditional horizontal to a button. The button is used to dropdown the menu on smaller screens. Continue reading

Show PHP Settings with phpinfo and Example PHP $_SERVER Display Page

View PHP Environment Configuration Settings and Superglobals on a Page

PHP is a great computer and web site scripting language and extremely popular. It is used primarily for developing interactive web sites and many use it for day-to-day programming tasks. There are several versions in general use and sometimes the configuration of PHP between servers and machines needs to be compared. The phpinfo() function is a one line solution to show the current live PHP set up. To show PHP settings simply create a one line PHP web file on the server containing <?php phpinfo(); ?> and point the browser at it. HTML tags are NOT required because the phpinfo() function pumps them out.

PHP LogoNote: phpinfo() outputs a lot of useful information, information that hackers find interesting so use it with care. Ideally do not have the phpinfo() page on a public facing web site. On the occasions you do take precautions to reduce information leakage. Put the page in a password protected directory, do not call it phpinfo.php as this is obvious to hackers (use something more obscure and a reminder to delete it when finished, e.g. quick-config-check.php), finally don’t forget to delete it when the PHP settings have been checked.

A PHP script will need access to other settings that PHP provides, often via system wide globals known as the superglobals. The $_SERVER array provides access to the _SERVER superglobal and is shown by phpinfo() in a table. Occasionally it can be worthwhile viewing such values from another PHP file. This can be done in a few lines of code. The following provides some details on showing PHP settings and global values in web pages.

Continue reading

WebMatrix Rename Site and Changing Virtual Folder Name

Renaming Websites and Folders in WebMatrix

Using a free package it is possible to develop a website on Windows using Microsoft WebMatrix. This program allows you to run a website on your local Windows computer. When a website is created in WebMatrix it will usually have the name EmptySiteX where X is a number. The name is the same as the folder in which the website files are stored. Where does WebMatrix create this folder? This folder is normally in My Web Sites in the logged on user’s Documents folder:

C:\Users\John Doe\Documents\My Web Sites\EmptySite1

(Tip: Using the WebMatrix settings this default location can be changed.)

Changing a website name in WebMatrix is easy. Open the website in WebMatrix with the Home tab selected. Ensure site folder is visible (select Files or the files icon on the left hand panel to see everything that makes up the site). Bring up the context menu (usually right-click) on the top level folder. Select Rename and enter the new name:

WebMatrix Rename Site

A brief status message is displayed at the bottom of WebMatrix. Then to completed the WebMatrix rename site an edit of the IIS Express applicationhost.config file is required. Continue reading

PHP on Windows Using WebMatrix Single Click Install

Running PHP to Test Websites on Windows PCs

PHP is a programming language that is popular for for adding powerful features to websites. What does PHP mean? PHP originally stood for Personal Home Page (after its inventor, Rasmus Lerdorf, wanted more features for his personal website), but now it stands for PHP Hypertext Preprocessor (creating a recursive acronym, which programmers like). PHP is easy to set-up and run on a Windows PC using the free Microsoft WebMatrix, an Integrated Development Environment (IDE) for building websites.

With the free WebMatrix package PHP on Windows is a single click install and allows website testing using IIS Express (the version of Microsoft Internet Information Server for Windows clients). This tutorial assumes that WebMatrix is installed and running on your Windows 7 or higher PC. If not see our article Develop a Website on Windows Using Microsoft WebMatrix to set it up and get a basic website going. Continue reading

Develop a Website on Windows Using Microsoft WebMatrix

Create a Free Website Online Using WebMatrix, Azure and Microsoft Windows

If you have a Windows laptop or desktop computer you can get started with website development with free Microsoft tools. One of several free software tools that Microsoft provides is WebMatrix. This contains a HTML editor in an Integrated Development Environment (IDE) and the express version of Internet Information Server (IIS) (a web server used for testing your website).  A Windows PC running WebMatrix allows you to develop a website and publish it online for free using Microsoft Azure cloud hosting. Microsoft free hosting is for a small number of low volume websites. If the website is successful and generates high traffic it can be upgraded to a registered domain and paid for high volume Azure hosting.

This tutorial was based upon using a Windows 8.1 PC but Windows 7 can run WebMatrix. You will need an Internet connection and a Microsoft account to install and run WebMatrix and to use Microsoft Azure. Continue reading

Comment Spam Reduction from Rename of WordPress wp-comments-post.php

Renaming WordPress wp-comments-post.php File May Reduce Spam Comments

Allowing comments on a WordPress post is a way of engaging users and helps with encouraging repeat visits. However, there are far to many malicious web sites that want to use the WordPress comments feature to post links to themselves. This is often attempted by automated software called bots. The bots (software robots) will bypass any comment posting checks (such as CAPTCHA) and access the comment posting code directly via the WordPress file wp-comments-post.php. You can reduce the chance of comment spam by renaming wp-comments-post.php, this tutorial shows how to do it. Please note this will involve changes to your WordPress installation. Always ensure regular backups of the web site are available, just in case anything needs to be restored. (Most web hosting providers give access to a back up facility on top of their own backup routines. Contact your hosting provider to find out how to perform a specific backup of your web site.)

Another Advantage of Renaming wp-comments-post.php to Reduce Comment Spam

Every time comment spam is posted the web server that the site is hosted on has to consume resources. It runs PHP code and code to access the WordPress database. Executing code and sending the response out to the wp-comments-post.php request uses server resources. If the web site is on a low cost shared hosting plan then there is a limit to the resources available. Wasting resources responding to bots could result is proper visitors experiencing slow page responses. Renaming wp-comments-post.php can help lower overall server resource usage.

Renaming wp-comments-post.php

In this example the new name for the wp-comments-post.php file is going to be my-comments.php. Use what ever name is suitable.

The wp-comments-post.php file is a WordPress code file that is called from another WordPress code file called comment-template.php, in the directory wp-includes. If not using a standard WordPress theme then comments may be handled differently, check with the theme provider to see if the theme calls wp-comments-post.php.

The file comment-template.php is edited to change the reference to wp-comments-post.php to my-comments.php, at line 2022. In this tutorial it is assumed the web site is using the latest version of WordPress. If the web site hosting company does not have tools to change files on line then work locally with the files and upload them to the web server when ready. For example on a Windows machine use a text editor to edit a local copy of comment-template.php, remember it is in the wp-includes folder. The Windows Notepad program is not suitable for editing comment-template.php because of the line formatting style used in the file. Instead use a program such as Notepad++ to edit source code files.

(To get a local copy of the files use the web hosting tools to download the files. Alternatively download a zipped copy of WordPress from and unzip the files to a local directory.)

WordPress Updates May Require a Re-Edit of wp-comments-post.php

Since comment-template.php is a core WordPress file any WordPress updates may restore the original wp-comments-post.php name. After a WordPress update check that comment-template.php has not been changed. If it has edit it again to change the reference to wp-comments-post.php back to my-comments.php or whatever name was used.

Changing the theme-compat Directory

The file wp-comments-post.php is also referenced in the directory wp-includes/theme-compat, in comments-popup.php and comments.php. These files are deprecated (no longer used by the lastest WordPress releases). They are present in order to support old themes that have not been updated. If using the standard WordPress themes or other modern themes then these files can be deleted. Otherwise also change the reference to wp-comments-post.php to the new file name in both comments-popup.php and comments.php.

Copy wp-comments-post.php to the New File

With the name changed the next step is to copy wp-comments-post.php to the new file name, here called my-comments.php, use the name you have chosen. If doing this locally upload the new file to the wp-includes directory on the web site. If wp-comments-post-php gets changed in a WordPress update remember to copy the new version to a new my-comments.php.

Remove the Content of the Original wp-comments-post.php File

After creating the replacement wp-comments-post.php file the bots will still be trying to access the original. Therefore delete it. This will cause the web server to reply with a 404 error page. Alternatively to reduce the resources used to serve the 404 error page keep the wp-comments-post.php page but just delete all its contents. The bot is then just accessing a zero length file that does nothing.

Hopefully changing the wp-comments-post.php file in the web site’s WordPress installation will reduce the number of annoying comment spam that clutters the site administration pages as well as the time need to handle it.

Test the Changes Made to the Site to Reduce Comment Spam

Once all the changes have been made then test that comments are working. Browse to a post that allows comments and add one. The ability to add comments should work as before. If not double check the steps given above. If necessary the changes made can be undone by replacing the changed files with originals from a WordPress zip file from


To reduce comment spam bot hits on wp-comments-post.php:

  • On the web server copy wp-comments-post.php to a new file, e.g my-comments.php.
  • In the wp-includes directory, in the file comment-template.php change the text wp-comments-post.php at line 2022 to the new file name, e.g. my-comments.php.
  • Delete the files in the wp-includes/theme-compat directory (or if using old non-WordPress themes change the references to wp-comments-post.php in comments.php and comments-popup.php).
  • Delete wp-comments-post.php so that bots get a 404 error response. Alternatively edit the file and remove all its contents for a low resource response.
  • Test that comments can still be posted.
  • When a WordPress update is released make sure that the wp-comments-post.php file has not been restored. If so copy it over to the new version (e.g. my-comments.php) and delete it or remove its contents. Also check that comment-template.php has not been restored. If so change the reference to wp-comments-post.php back to the new name (e.g. my-comments.php).

Android Icon Size – Launcher and Google Play Store

What is the Android Icon Size for an App?

For Android launcher icons you will need 6 sizes of PNG or JPG files. In pixels these are 48×48, 72×72, 96×96, 144×144, 192×192 and 512×512. The first five are for the App and the last one for when the App is deployed to the Google Play store. These are the final size of the icons and you must allow for a small margin, hence the area the icon is drawn in will be a bit smaller. For low density screens Android halves the 72×72 icon, but it is possible to include a 36×36 icon in the App for completeness, making 7 icons in total. An Android icon size table in this article summarizes all the relevant information.

144x144 XXHDPI Android Icon Size96x96 XHDPI Android Icon Size72x72 HDPI Android Icon Size48x48 MDPI Android Icon Size36x36 LDPI Android Icon Size

Android Screen Densities

The number of dots (pixels) per inch that an Android device’s screen holds determines how sharp the image on the screen looks. The more Dots Per Inch (DPI) the sharper the image. Android groups screen densities into several classes, medium, high, extra high, extra extra high and extra extra extra high! These are referred to as MDPI, HDPI, XHDPI, XXHDPI and XXXHDPI. There is also a low density class, LDPI, however not many new devices have a low density screen and thus LDPI is no longer important. MDPI is around 160 DPI, HDPI around 240 DPI, XHDPI around 320 DPI, XXHDPI around 480 DPI and XXXHDPI around 640 DPI. (LDPI is around 120 DPI). It is the screen density that determines the Android icon size used.

Android Launcher Icon Name and Location

When a new Android project is created in Eclipse or Android Studio the launcher icon file is called ic_launcher.png. You can choose the Create custom launcher icon option in the New Android Application wizard (New Project wizard in Android Studio). This allows you to configure the launcher icon based on the default Android robot, or an image file, or from several clip art images, or finally from some text. If an icon is not configured the default robot is used. The various size icons are created and placed into a folder in the projects res directory. The folders are drawable-mdpidrawable-hdpi, drawable-xhdpi and drawable-xxhdpi. It you need a low density, LDPI, icon create put a 36×36 PNG or JPG in the drawable-ldpi folder. To support Cupcake devices (API level 3) add a drawable folder and copy the 48×48 PNG or JPG file from drawable-mdpi to it. For the latest highest density displays create a drawable-xxxhdpi folder for a 192×192 icon.

The icon is referenced in the Android manifest. In the projects AndroidManifest.xml file the <application> tag has an android:icon attribute. This is set to @drawable/ic_launcher. The icon file’s name does not need to be ic_launcher, it can be called something else. For example if all the icon files for the various sizes were called my_app_icon.png then the attribute in the application tag could be set as android:icon=@drawable/my_app_icon.

Notice how the reference to the icon only needs the drawable part of the folder name. Android works out the correct density icon to use. Android will also scale one of the other density icons if an icon at a certain density is missing (though that may result in a fuzzy icon being displayed on the screen).

Android Icon Margins

The Android Operating System (OS) has evolved since it was released. This means that the icon requirements have changed over the years. The main changes are the increase in screen sizes and screen densities. Low density and medium density devices were common. Now high density and extra high density devices are the most common.

Previously it was recommend that the icon included a margin around one twelfth of the total size between the edge of the icon and the image it contained. For example the medium density icon is 48×48 pixels, one twelfth of this is 4, giving a margin of 4 pixels around the icon. This means the area available for the image is 40×40 (48 minus the margin of 4 pixels on each side).

However, the bigger screens on today’s devices gives more room for the icons so a smaller margin can be used, for example one eighteenth of the icon size. The margin allows for spaces between the icons on a screen and to allow for any drop shadows or parts of the image that stick out a little.

The High Resolution Application Icon needed for the Google Play store must be 512×512 in size. This image can have a margin to allow for padding or drop shadows, for example it could be 464×464 on the 512×512 canvas giving 48 pixels for padding and drop shadows. Again the size of the margin may depend upon the type of image being used, but the final file will be a 512×512 in size.

Android Bitmap Assets Ratios

With the 48×48 icon as baseline the 6 launcher icons have the ratios 0.75, 1, 1.5, 2, 3 and 4. These ratios apply to the screen densities. So a high density screen (HDPI) is 1.5 times a medium density screen (MDPI). I.e. 1.5 * 160 = 240. Likewise for the other densities. These ratios generally apply to all images used in an App that target different screen densities. If a bitmap is 100×100 on a medium density screen use the ratios to calculate the bitmap sizes required for other densities (75, 150, 200, 300 and 400 in this case). When generating icons and bitmap assets work at a high resolution and scale down, this prevents pixelation of the images. E.g. a canvas of 576×576 or 864×864 is good for design work. An art-board of those sizes is bigger than the biggest icon required (512×512 for the Google Play store). Even better use a vector drawing package such as Inkscape which effectively allows working at any resolution.

Android Icon Size Table

The following table summarizes all the above information.

Android Icon Size and Location for Apps
Density size Location Ratio Screen Margin
XXXHDPI 192×192 drawable-xxxhdpi 4 640 DPI 12 to 16 pixels
XXHDPI 144×144 drawable-xxhdpi 3 480 DPI 8 to 12 pixels
XHDPI 96×96 drawable-xhdpi 2 320 DPI 6 to 8 pixels
HDPI 72×72 drawable-hdpi 1.5 240 DPI 4 to 6 pixels
MDPI 48×48 drawable-mdpi 1 160 DPI 3 to 4 pixels
MDPI 48×48 drawable (Cupcake) 1 160 DPI 3 to 4 pixels
LDPI 36×36 drawable-ldpi 0.75 120 DPI 2 to 3 pixels
NA 512×512 Google Play NA NA As required

You will find a few icons on the Android Graphic Resources page, and of course many thousands more on the web.

For more information on Android Icons see the Iconography web page on the Android Developers web site.

AdMob Ad Incorporated into an Android Activity

A Tutorial on Adding an AdMob Ad to an Android App

Displaying advertisements (ads) is one way of monetizing an App. To monetize (monetise) something is turn turn it into cash. That term applied to Apps and web pages refers to getting revenue through ads or paid content. Showing ads is one way of generating an income from the time and effort spent developing the App. Though a reasonably successful App is required to generate worthwhile funds. Other techniques include charging a price for the App and providing additional content within the App for a fee (In-App Billing).

Google makes it relatively easy to include ads into an App as the simple example code here shows. This tutorial should help those who may have found it difficult to get the example provided with the online AdMob documentation to work. It is assumed that your computer is configured for developing Apps using the Eclipse Integrated Development Environment (IDE) (see Set Up Windows for Android Development if not), and that you can create and run a simple App (see Your First Android Java Program if in doubt). All the steps required to get ad serving in your App working are covered. So read on to find out how to add AdMob to Android Apps.

Get an AdMob Account

You get a very small payment for each ad that is selected (clicked or pressed on) from a device that is running your App. So that Google can make that small payment it must identify in which App the ad was selected. This is done by placing a unique Publisher Id in the code that is showing the ads. To get the unique id for each App you need an AdMob account. Head over to and sign up, you will need a Google account to register.

Target SDK Must be 3.2 or Higher

Your App is ready for publishing, lets put in the ad serving code so that when you activate it on Google Play it can (potentially) make you some money. In this tutorial we will add the code to an existing example project, in this case the code that was written for the article Two Line Lists In Android. You can also follow this tutorial but use your own App to add the code. Continue reading

Google Play Publishing Graphics Checklist

You like your Android Phone or Tablet, it gives you easy portable computing with access to thousands of programs that cover almost any subject. Almost. That App that you wanted doesn’t exist so you’ve invested some time and energy and made it yourself. Now you’d like to publish it so that others can use it, and maybe make a little money on the side. Unfortunately you’ll need to break out the creative talents again and come up with some promotional graphics, because your App will not be listed on Google Play (formerly Android Market) unless those graphics are available. The following table lists the graphic and media images you will need to produce to publish on Google Play.

Media Assets Required for Google Play App Publishing
Item Type Opt. Size Alpha Padding
2 to 8 Screenshots 24-bit PNG/JPG No 320×480 or 480×800 or 480×854 No No
Large App Icon 32-bit PNG No 512×512 (1024KB max.) Yes Allowed
Promo Image 24-bit PNG/JPG Yes 180×120 No No
Feature Image 24-bit PNG/JPG Yes 1024×500 (924×400 useable) No Yes
YouTube Video Link URL Yes N/A N/A N/A


  • Provide every asset for a professional app listing, even those that are optional.
  • PNG is a Portable Networks Graphics file, file extension normally .png.
  • JPG file extension is normally .jpg or .jpeg and is a Joint Photographics Expert Group graphics format.
  • All graphics sizes are give as X pixels times Y pixels (i.e. 320×480 is 320 pixels wide by 480 pixels high).
  • Alpha determines whether or not the alpha channel is support for the given image being used.
  • Do not put a border around the edge of any graphics.
  • Use large fonts, bright contrasting colors and crisp designs that are not overly detailed. Particularly for the Feature Image which may be scaled down.

See the article High Resolution App Icon for Google Play Publishing for a tutorial on generating the 512×512 image.

See the article Grabbing an Android Device Screenshot for information on generating the screenshots required.

The Google web page Graphic Assets for your Application has further details.