Common sense (and Google) suggests our web pages should be accessible on all devices, from smartphones upwards. As the proprietor of a desktop-centric website, I decided to look for the quickest way to become ‘multi-platform’.
After many false starts – I won’t bore you with them – I found the quickest was to adapt a free template of a site that already worked. You need to feel comfortable about tweaking HTML (it’s only text editing) but you don’t have to be an expert by any means.
I also found it best to plan for mobile rather than start with a desktop system. This led me to a single-page main site with a menu bar that jumped (mainly) to internal parts of the same page. (Okay, I added my YouTube channel to the menu as well, but this really wasn’t difficult.)
The free one-page template I chose, called Urbanic, came from template.mo Download at http://www.templatemo.com/download/templatemo_395_urbanic
I could have just used a text editor to twiddle around with the code but I actually used Microsoft’s free Expression Web 4. Download at https://www.microsoft.com/en-us/download/details.aspx?id=36179 This lets you look at and tweak any of the files in your downloaded template folder.
Open the index.html file and (I would recommend) save it as something personal to you. I called mine newtebbo.com. This will save you heartache later on when you try it out on your live site. Instead of overwriting your existing root page – index.html – you can test it to death under its pseudonym. Only when you’re completely happy do you need to rename it to index.html. (I would strongly recommend that you first rename your existing index page to oldindex or similar. That way you can always revert if need be.)
Apart from three early lines at the top of the <head> section (title, keywords and description) your changes will all be in the <body> section of the web page. The source code is laid out neatly in divisions which start and end with <div> and </div>. These are followed and preceded by a note of the section you’re in. Just chop out any entire sections that aren’t relevant to your design.
Replace your chosen template’s text with your own. Add images you want to use to the images folder and edit the references. (You will need to add all the template’s folder contents to your existing folder contents. If a template folder doesn’t exist in your existing site, simply copy the template one across. I suggest doing it this way so it’s easy to revert to your old site if you need to.)
You’re probably best off changing only things you’re confident of. Leave the CSS and other folders well alone – unless you take deep exception to some of the colour schemes or section layouts. (My recommendation would be to stick with your template’s design for a while, it might grow on you.)
If you want to see what I did to the Urbanic template (assuming you downloaded it) – just right click and View Page Source of www.tebbo.com/index.html
[You probably don’t need this but I use Firefox’s right click/inspect element useful when fiddling around with the more techie aspects – you roll your mouse over the left panel and it highlights the part of the page you’re on and gives you all sorts of information about the CSS elements that support the section you’ve chosen.]
Best to just ‘have a go’ and keep it simple to start.
Good luck. It took me less than a day.
David Tebbutt 