I keep forgetting this, and about once a month end up looking up – so here’s a post, primarily for my memory!

ALT (or Alternative Text) – describes the image in the page, displays if img fails to load (but not in all browsers???). It should be brief and descriptive. For some reason Joomla calls this the image description (which I suppose it is really!) This tag was introduced for visually impaired users and without it you will be penalized in SEO terms.

TITLE – describes the image, a bit like alt- providing ‘additional’ info about the image in a pop up animation on hover (but not in all browsers). Seems its used primarily when an image links to other content, describing where the link is going, but is optional for img. If missed out some browsers display the alt on hover.

Example:
If you are doing a page about Lyme Regis and have Lyme Regis in the title and a cool picture of the cobb and sea you might just do this

<img src="i.jpg" alt="Lymne Regis" />

but it wouldn’t be great because it doesn’t’ tell the ‘visually impaired user’ anything. Much better to do

<img src="i.jpg" alt="View of the Cobb and sea at Lyme regis " />

Leave a space at the end of the alt description “xxx xxx ” – good for screen readers.

In Tinymce extended there is a cool feature that enables you to press a button and insert a pile of code.

As yet I haven’t been able to find how to do this without a core override… but maybe that’s not such a big deal —
Each of the additional snippets is a separate html file that lives in

media/editors/tinymce/templates

It comes set up with a couple of simple examples – layout1.html and snippet1.html.
I just created a new one – quickbio.html in this case which had this piece of code in that was going to be used over and over:

<div class="quickbio">
<img src="images/fct/bio-pic-placeholder.jpg" />
<p> Dr Bob<br />Springfield University</p>
</div>
<p>I am outside the div</p>

Now you have to tell tinymce about the existence of this new file – so it needs registering:

This is done in plugins/editors/tinymce/tinymce.php – I’d take a backup of this just in case…

Around line 459 find:

$templates = "templates: [
{title: 'Layout', description: 'HTMLLayout', url:'" . JUri::root() . "media/editors/tinymce/templates/layout1.html'},
{title: 'Simple snippet', description: 'Simple HTML snippet', url:'" . JUri::root() . "media/editors/tinymce/templates/snippet1.html'}
],";
}

This registers the two existing little templates. So its pretty straight forward to add your new one

{title: 'Simple bio', description: 'Use for a photo, with small piece of text under', url:'" . JUri::root() . "media/editors/tinymce/templates/quickbio.html'}

in my case, you just need to be careful with your commas – last one doesn’t need one.

So the final code looks thusly:

$templates = "templates: [
{title: 'Layout', description: 'HTMLLayout', url:'" . JUri::root() . "media/editors/tinymce/templates/layout1.html'},
{title: 'Simple snippet', description: 'Simple HTML snippet', url:'" . JUri::root() . "media/editors/tinymce/templates/snippet1.html'},
{title: 'Simple bio', description: 'Use for a photo, with small piece of text under', url:'" . JUri::root() . "media/editors/tinymce/templates/quickbio.html'}				
					
],";
}

I found that in order to make this appear as an option for the editor in the joomla backend I had to clear the cache – a simple close and open of the article/module wasn’t enough.

So clear that cache, and bob’s once again the proverbial uncle. Snippets of code at the press of the ‘template’ button.

Since November 2013 (approx!) I have been involved with a really enjoyable project based in Great Dunmow, Essex. Voluntary Sector Training (VST from now) had an existing site which was based around an “Off the shelf template” and an old version of joomla. VST offer training services for the voluntary sector, and while the old site did enable them to take bookings, it was quite old, had a few layout problems and wasn’t responsive.

Read what VST thought about ee-web

Read more…

The more that responsive websites take off, and just about every job I do now is responsive, the more I came up against the same, silly little problem.

Namely – how do you avoid long email addresses sticking out of their containers?

Like this – you can see how the long string at the bottom has pushed the table outside of its container.

In the pre-responsive days you used to be able to get around this by careful use of a
tag or font-size. But as virtaully all my work is responsive now the need to sort this problem has become more pressing.

There are several complex ways of doing the job, with js and/or regular expressions for example. One way that is talked about is simply to insert the tab <wbr> which stands for “word break opportunity” and therefore lets the browser insert a break, if its needed. So you’d write something like hellofromavery<wbr>veryverylongstring

However, this doesn’t seem to work across the browsers, or at least not for me. Apparently the tab has been adopted by hhtml5, but IE hasn’t got there yet…

So then I tried inserting &#8203; into the string thus:

hellofromavery&#8203;verylongstring.

This was much more successful and seemed to work across the board – and best of all, when I stuck it into the middle of an email address, so it was on two lines, and clicked it the email still worked. FAB

So job done, at least in this case!

It’s all the same to me…

Just recently one of the designers I work with came to me with his usual starting point “Give me a ball park figure for …” and sent me off to a link.

When I got there I was impressed, at first. It looked great, using bold greens and blues, and large photos with lots going on. Indeed, it was arresting.

So remembering my mission, I went to work to come up with a ball park figure to produce ‘something with the same spec’ – no, not a copy.

Things fall into place…

After a couple of minutes I thought – ‘I know what this is… its a wordpress template stuffed through the bootstrap frame work.’ All it took was a few seconds poking around in the code to see that, yes it was wordpress, and yes it was bootstrap.

I was quite pleased with myself – I’ve been wondering if I could recognize how things were put together – and here I was, doing it.

Disadvantages of bootstrap…

I have several projects on the go using bootstrap – it is such a time saving library. But, you do have to be careful …. disadvantage… well, it looks to to me like things are in danger of becoming generic? That I believe is one of the problems with bootstrap – it comes so stuffed full of goodies, that before you know it, designers and developers have taken the easy route and – hey presto, it’s all starting to look the same.

Is this a problem? How is this is going to be avoided…

As a web professional you have to adapt – bootstrap, has in effect, opened another market for us.