Adapting Menu for Touch

Before the proliferation of touch devices website menus were controlled with mouse hovers and clicks.

To view the child items associated with a particular menu item, simply hover over the item to pop up the child menu with the list of child items.

If you wanted to view the parent page, a simple click was all that was required.

Adapting menu for touch: child menu

But hovering doesn’t work with touch devices. Touching on the parent page in the menu navigates to the page, not showing the child menu.

To facilitate child menus on touch enabled devices clicking on the parent should not open that page, but rather show the list of child items.

To modify the traditional menu for touch devices the parent menu items are disabled.

If the parent page isn’t accessible how to view it?

Adapting menu for touch: child menu incorporating parent

If you need to implement the parent page move it, possibly with a variation in name into the child list. For example, the Veg page could be moved as a child below with the renamed parent Vegetables.

The parent page in the menu is there solely for structure it’s no longer a physical viewable page.

Creating Content Border with Images

Website content blocks, often called modules, or widgets, can be surrounded by borders to make them stand out. Perhaps notepad paper or an old parchment.

Different surrounds and backgrounds can be used to make the content pleasing to the eye and to add distinction. The styling enables the content to be categorised either by content or importance.

CSS3 allows for the replacement of some of the older work, for example borders with radius corners and drop shadows.

However, to implement graphic design surrounds, an image is still chopped into segments, as previously.

Where possible the segments are created such that either a horizontal or vertical repeat can be implemented.

Care is taken to ensure that frilly or castellated edges are seen to blend smoothly, not with a jagged edge, step, or hard change of colour.

A repeat allows for an efficient use of downloaded images, keeping the weight of the web page downloaded to a minimum and allowing for expansion of the content area according to the content added.

The two methods generally employed to provide this border styling are tables and divs.

In both methods the image design is chopped up into segments which are either corners or repeats for the sides. There may also be background styling for the content within the block.

The smallest table is based upon a 3×3 grid. Whilst the div method uses a number of divs stacked one above the other.

Borders Using Tables

An example of the table layout is given below. It uses a combination of fixed size table cells.

<table>
<tr>
<td width="6" height="6" background="/images/topleft.gif">&nbsp;</td>
<td width="100%" height="6" background="/images/top.gif" height="6">&nbsp;</td>
<td width="6" height="6" background="/images/topright.gif">&nbsp;</td>
</tr>
<tr>
<td width="6" height="100%"><img src="/images/left.gif" width="6">&nbsp;</td>
<td width="100%" height="100%" >Content is added here</td>
<td width="6" height="100%"><img src="/images/right.gif" width="6">&nbsp;</td>
</tr>
<tr>
<td width="6" height="6" background="/images/bottomleft.gif">&nbsp;</td>
<td width="100%" height="6"><img src="/images/bottom.gif"  height="6">&nbsp;</td>
<td width="6" height="6" background="/images/bottomright.gif">&nbsp;</td>
</tr>
</table>

Here’s an image showing a container with blue and white edges, with a yellow background for the content

Creating ontent border with images: grid of images

Perhaps a little small to view properly, so here it is enlarged:

Creating content border with images: grid of images (enlarged)

As can be seen the corners are of a fixed size. The sides joining them are set to be the full length of that side. As shown the edge middle sections are 6px in length. To minimise the saved image this could be 1px.

The side and top/bottom images are set to to match the width (6px) or height (6px). These images will then be repeated within the table cell.

The table cell in the centre is the content area. Within this area will be added the appropriate code for the CMS to generate the content.

I have found that to ensure the desired results the images added along the top and sides should be specified fully, to avoid the browser making guesses as to your intent.

The table code above can be improved upon by adding CSS class references and moving the image and sizing to CSS.

For example here’s a 3×3 table with the HTML layout and associated CSS.

<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="BlueBorder-tl"></td>
<td class="BlueBorder-tc"></td>
<td class="BlueBorder-tr"></td>
</tr>
<tr>
<td class="BlueBorder-cl"></td>
<td class="BlueBorder-cc">
Content goes here
</td>
<td class="BlueBorder-cr"></td>
</tr>
<td class="BlueBorder-bl"></td>
<td class="BlueBorder-bc"></td>
<td class="BlueBorder-br"></td>
</tr>
</tbody>
</table>

In the CSS below, I have merged the corner images together as a single image. This is then positioned to show the desired corner.

/* begin Box, BlueBorder */


.BlueBorder-tl
{
	width: 6px;
	height: 6px;
	background:url(images/BlueBorder-corners.png) no-repeat;
}

.BlueBorder-tr
{
	width: 6px;
	height: 6px;
	background:url(images/BlueBorder-corners.png) no-repeat;
	background-position: -6px 0px;
}

.BlueBorder-bl
{
	width: 6px;
	height: 6px;
	background:url(images/BlueBorder-corners.png) no-repeat;
	background-position: 0px -6px;
}

.BlueBorder-br
{
	width: 6px;
	height: 6px;
	background: url(images/BlueBorder-corners.png) no-repeat;
	background-position: -6px -6px;
}

.BlueBorder-t
{
	height: 6px;
	background: url('images/BlueBorder-t.png') repeat-x;
}

.BlueBorder-l
{
	height: 6px;
	background: url('images/BlueBorder-l.png') repeat-x;
}

.BlueBorder-r
{
	height: 6px;
	background: url('images/BlueBorder-r.png') repeat-x;
}

.BlueBorder-b
{
	height: 6px;
	background: url('images/BlueBorder-b.png') repeat-x;
}

/* end Box, BlueBorder */

 

Borders Using DIVs

The div method uses a number of divs either stacked on top of each other or absolutely positioned to give the same effect.

<div class="topLeft">
 <div class="topRight">
  <div class="top">
   <div class="left">
    <div class="right">
     Content is added here
    </div>
   </div>
  </div>
 </div>
</div>

Like the use of tables the original image is chopped up into segments which are then put back together.

In the div method all the items are of the same size the background images are moved to their appropriate edge and the repeat set for the x or y direction accordingly.

For example the top left corner is set using:

.topLeft{
background:url(/images/topleft.gif) no-repeat
}

I have found using this method that there is a need to stack the DIVs in a correct order to ensure that the edges and overlaps of the backgrounds match up and can be viewed correctly.

I have also used a method whereby each div is referenced sequentially with the use of absolute positioning moving the div to its required location.

Creating content border with images using divsThe image above shows an example of the result. In this case I have used a fixed width for the div sizing. It would be normal to allow 100% sizing, the div taking the full width of its bounding container.

Again the DIVs are stacked, but in many respects the code looks simpler to view and there is less chance of omitting one of the closing tags </div>.

Note how the edges are constructed first, allowing the corners to sit on top hiding the continuous edges.

<div class="border">
 <div class="top">
 <div class="left">
 <div class="right">
 <div class="bottom">
  <div class="topLeft">
  <div class="topRight">
  <div class="bottomLeft">
  <div class="bottomRight"> 
   <div class="content">Content is shown here </div>
  </div>
  </div>
  </div>
 </div>
 </div>
 </div>
 </div>
 </div>
</div>

And the associated CSS to position the above elements:

 .border{ position:relative; }
 .top{
 position:absolute;
 width:100px;
 height:100px;
 top:0px;
 left:0px;
 background:url(images/GreyBorder-t.png) repeat-x;
 background-position:0 0;
 }
 .left{ position:absolute;
 width:100px;
 height:100px;
 top:0px;
 left:0px;
 background:url(images/GreyBorder-l.png) repeat-y;
 background-position:0 0;
 }
 .right{
 position:absolute;
 width:100px;
 height:100px;
 top:0px;
 left:0px;
 background:url(images/GreyBorder-r.png) repeat-y;
 background-position:100% 0;
 }
 .bottom{
 position:absolute;
 width:100px;
 height:100px;
 top:0px;
 left:0px;
 background:url(images/GreyBorder-b.png) repeat-x;
 background-position:0 100%;
 }
 .topLeft{
 position:absolute;
 width:100px;
 height:100px;
 top:0px;
 left:0px;
 background:url(images/GreyBorder-tl.png) no-repeat;
 background-position:0 0;
 }
 .topRight{
 position:absolute;
 width:100px;
 height:100px;
 top:0px;
 left:0px;
 background:url(images/GreyBorder-tr.png) no-repeat;
 background-position:100% 0;
 }
 .bottomLeft{
 position:absolute;
 width:100px;
 height:100px;
 top:0px;
 left:0px;
 background:url(images/GreyBorder-bl.png) no-repeat;
 background-position:0 100%;
 }
 .bottomRight{
 position:absolute;
 width:100px;
 height:100px;
 top:0px;
 left:0px;
 background:url(images/GreyBorder-br.png) no-repeat;
 background-position:100% 100%;
 }
 .content{padding:8px;}

Thoughts

I have found using a 3×3 table with border edges and a central content area was most successful.

The use of stacked DIVs with positioned images and the use of relative and absolute positioning didn’t always work, for example as a DotNetNuke container. The JavaScript associated with the container elements couldn’t derive the position and tended to then misplace the required action menu.

For efficiency there is an advantage to creating a single image comprising the components to be used. Only the single image is then downloaded which saves on the overhead employed in asking for each image download, checking it’s version.

The single image is then positioned as required. This is like taking a larger image and moving it behind a window cutout to show the desired section.

As shown in the examples above the border images are quite simple. The container themes below are more akin to this style of table and div layouts.

creating content border with images examples

Add Scroll Top Image

When the web page has scrolled down an offset distance show a scroll to top image.

When redesigning the VNTweb website, thinking about the longer article pages, I chose to add one of these.

Scrolling the page down shows on image in a fixed location. Clicking on this image shall scroll the page back to the top of the page, or a named div.

I wanted my scrolltop image to appear once the page had scrolled down by a measure.

Here’s what I used

 
$VNTweb(window).scroll(function(){ 
  if ($VNTweb(this).scrollTop() > 100) { 
    $VNTweb('#scroll').fadeIn(); 
  } else { 
    $VNTweb('#scroll').fadeOut(); 
  } 
});

Once the page has scrolled down by 100 pixels then the scroll image becomes visible.

And for the image onClick scroll action I used the scroll from my article JQuery Page Scroll on Load, a few weeks ago.

$VNTweb('#scroll-top').click(function(){ 
  $VNTweb("html, body").animate({ scrollTop: 0 }, 600); 
  return false; 
}); 

You may wish to experiment with the distance scrolled before showing the image. Perhaps 100 pixels is too soon.

Another idea would be to hide and show the image at different values.

For example show the scroll to top image when the page has scrolled down a distance of 400 pixels, but hide once more when the distance reaches 300.

If you are looking for suitable images take a look at Font Awesome or Glyphicons.

Using Microformats to Indicate Address

If you run one of the online website analysis websites on your website it may indicate the use of microformats.

So what are they?

Microformats can be used to indicate the address. For example, of the contact us page of a website the address details can be enclosed.

Rather than simply putting the address in place, perhaps wrapped in paragraph tags, something like.

<p>
My Company Ltd.<br />
Apple Tree Road<br />
Reading<br />
Berkshire<br />
England<br />
RG1 1AA<br />
Tel. 0118 496 0000
</p>

The idea is to indicate to search engines the nature of the elements highlighting how the address is composed, region, city, etc.

This is all about adding clarity to the search engines and ensuring that your intent is understood clearly and correctly.

With microformats the ambiguity with regards to addresses and whether a word is a part of the address an be resolved.

For example my local town of Reading. So difficult when searching for related topics as the word doubles as in “reading a book”. There’s also a village in Somerset called Street. Putting the town name, for example Reading, on the page wrapped with microformats ensures clarity.

Here’s a typical address, with company name, address, postcode, country and telephone details.

My Company Ltd.
Apple Tree Road
Reading
Berkshire
England
RG1 1AA
Tel: 0118 496 0000
Fax: 0118 496 0001
Email: info@example.com
Open: 9am to 5pm

And here’s the micro formatting of the address.

<div itemscope itemtype="http://schema.org/Organization">
  <span itemprop="name">My company Ltd.</span>
  Contact Details:
  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    Main address:
    <span itemprop="streetAddress">Apple Tree Road</span>
    <span itemprop="postalCode">RG1 1AA</span>
    <span itemprop="addressLocality">Reading</span>,
  </div>
  Tel:<span itemprop="telephone">0118 496 0000</span>,
  Fax:<span itemprop="faxNumber">0118 496 0001</span>,
  Email: <span itemprop="email">info@example.com</span>

The Schema website provides the following list of PostalAddress properties:

Property Description
addressCountry This may be either the country name of the two letter code
addressLocality The local region – often a district of a city
addressRegion The wider region – county administration, for example
postOfficeBoxNumber A PO Box number
Postalcode The Associated postcode
streetAddress The street address may be a simple building number and road, but can include building name and more than one row

Also to be considered are the ContactPoint properties which cover the telephone and email address

Property Description
areaServed Useful if you have offices providing different geographic coverage
availableLanguage  Languages supported, the two letter codes are used in this instance.
contactOption  Used to indicate further contact options: a free telephone number or support for hearing-impaired.
contactType  Used to specify the business contact area: sales, support.
email  Email address
faxNumber  Fax number
hoursAvailable  The opening hours whilst the contact is available.
productSupported  If the organisation wishes to highlight that these support details are for a particular product line or area.
telephone  A Telephone number

Looking at the table above it can be seen that the opening hours for the organisation can be wrapped to highlight the timing.

There’s a lot of different properties on the Schema website. Spend some time looking around to find the best match between the type of businesses and the information which you wish to convey.

References

I wanted to use contact details, telephone and email which weren’t genuine or likely to be. In the references I’ve included a link to Ofcom’s numbers for drama. A list of numbers which won’t be assigned, much like the use of example.com for domains and email addresses in documentation.

Schema address

Microformats.org

Ofcom: Numbers for drama

Bootstrap3 Removing Parent Menu onClick

Using the Bootstrap menu clicking on a parent menu item reveals the child items. The parent page isn’t opened in the traditional menu way.

This is by design.

In summary, clicking on the parent menu item shows child menu items as drop down
Hovering over the parent page has no effect.

The result which I wanted was:

Hover over parent menu item to show child menu items in a drop down
Click on parent to change page, showing parent page.

The onclick of the parent menu item causes a drop down to appear and not to move forward to view the parent item

Changes to be made

  • onclick to open parent item
  • hover to show dropdown

To implement the changes I removed the data-toggle attribute and added a hover function emulating the click action but adding the open class.

I added the following to the header.php file of the WordPress child theme.

<script type="text/javascript">
var $vntweb =jQuery.noConflict();
$vntweb(document).ready(function ($vntweb) {
	$vntweb('a').removeAttr( 'data-toggle');
	$vntweb('.dropdown').hover(function() {
	     $vntweb(this).toggleClass('open');
	});
});
</script>

A better place to add this would be an included JavaScript file.

I like to add my own variable $vntweb with a noConflict, rather than simply the use of $. Usually this keeps me out of trouble, avoiding conflicts with other uses of $ as a variable

 

jQuery Scroll to Page Top

For a long web page it can be nice for your visitor to click on an icon and for the page to scroll back to the top.

None of that frantic skipping of the fingers on a small phone screen!

For a web page with lots of content, it may be helpful to your visitors to add a scroll to page top text and/or icon.

This can be implemented using jQuery.

An icon placed at the bottom of the page content, or the end of sections of text, can action a return to page top by calling a simple piece of jQuery.

For a recent project I chose to use one of the glyphicons as my up arrow at the bottom the page.

Here’s the arrow icon in the footer of the page

<a href=”javascript:void(0);” id=”scroll-top” title=”Scroll to Top” style=”display: none;”>
<span class=”glyphicon glyphicon-circle-arrow-up”></span>
</a>

As an addition to this you may wish to keep the icon hidden, showing it only when the page view reaches the bottom.

As can be seen in the above example its hidden initially.

And here’s the jQuery scroll top

$VNTweb(window).scroll(function(){ 
    if ($VNTweb(this).scrollTop() > 100) { 
        $VNTweb('#scroll-top').fadeIn(); 
    } else { 
        $VNTweb('#scroll-top').fadeOut(); 
    }     
    var p=$VNTweb(".puzzle-piece-tile").position();
    if($VNTweb(this).scrollTop() > p.top+100 && !frontpagetileOnce){
        frontpagetile();
    }
}); 
$VNTweb('#scroll-top').click(function(){ 
    $VNTweb("html, body").animate({ scrollTop: 0 }, 600); 
    return false; 
}); 

To avoid conflict I use $VNTweb in my jQuery, declared using:

var $VNTweb = jQuery.noConflict();

As the screen nears the target area the scroll to icon fades into view.

I had looked through the arrow icons available in font awesome but didn’t find what I wanted to use on this occasion. I chose to use one from Glyphicons. I added a reference to the set in the top of the CSS file:

@font-face {font-family: glyphicons;src: url('../fonts/glyphicons-halflings-regular.otf') format('truetype'),url('../fonts/glyphicons-halflings-regular.eot') format('eot'),url('../fonts/glyphicons-halflings-regular.woff') format('woff');}

My CSS for positioning the arrow:

#scroll-top {position:fixed;right:20px;bottom:40px;display:block;z-index:999999;}
#scroll-top span {font-size:48px;color:#fa00ff;text-shadow: 0px 0px 1px #555;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease;}
#scroll-top span:hover {color:#ffc300;text-shadow: 0px 0px 6px #555;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease;}

As can be seen I also have a transition to take the suddenness out of its appearance/disappearance.

A jQuery scroll to top, which appears in a fixed place, bottom corner, as the page scrolls down. Clicking on the arrow link smoothly scrolls the page back to the top of the page, avoiding lots of mouse or finger movement on the screen.

Which is Correct <b> or <strong> ?

Using the WordPress editor. When I bold a piece of text the HTML added to wrap it is <strong> … </strong>

When I use the WordPress Android app the HTML used is <b> … </b>

Which is correct to use <strong> or <b>? Does it matter which I use? And in this age of HTML correctness for better SEO ranking is there a difference?

The original interview with Matt Cutts is from 2006. Subsequently some changes in SEO may have occurred.

The gist is that using one or the other shouldn’t make any difference.

But SEO is a moving target and things do change.

There was a time when the new line tag <br> and image <img src=”..”> were accepted. Now single tags must be closed, giving:

<br /> and <img src=”..” />

So do keep aware of the situation.

<b>

The w3 Schools HTML <b> Tag reference simply states that the <b> HTML tag specifies bold text.

The page suggests that this is a tag of last resort. Preference should be given to the <em> tag, the <mark> tag or even the <strong> tag.

Browsers will render the tag as font-weight:bold; Which is different to the implied higher priority <em> tag which is rendered as font-style:italic;

<strong>

w3 Schools has a different emphasis for the HTML <strong> tag. It calls it a phrase tag.

Is there a hint that the tag may become deprecated? Its suggested that better effects can be used with CSS.

It is rendered as font-weight:bold; by browsers.

It also details that back in HTML 4 the tag was used for emphasised text. Now it is important text.

Conclusions

Currently there is no advantage given to the use of either tag <b> or <strong> by Google.

Taking the use of HTML tags in the correct order, as taken from the w3 Schools website <strong> has the greater priority over the use of <b>.

Browsers reference the two tags the same.

References

https://www.searchenginejournal.com/matt-cutts-strong-bold-tags-seo/74073/

http://searchengineland.com/googles-matt-cutts-no-reason-to-fret-over-174713

https://www.youtube.com/watch?v=awto_wCeOJ4

HTML Phrase Tags

Many of the HTML tags are there to provide structure. The purpose is to create the columns and rows of content.

The HTML phrase tags provide enhancement to the content, affecting the rendering.

For a paragraph of text emphasis can be given to particular words, by the use of phrase tags.

Whilst most of the phrase tags present their wrapped content as bold or italics, as per the tags <b>, <i>, <pre>, and <tt>, their use is more than a duplication of other tags. They provide more detail and indication about their wrapped content. Take for example the address tag. This informs the search engine robot about the type of wrapped content.

In HTML, there are tags which are used to perform specific operation. It is somewhat similar to text formatting tags. There are some situation where you would like to highlight some word, add quotation, display code in different form etc. to highlight the text in web page.

A phrase tag is used to indicate that a block of text has structural meaning. For example, using the <abbr> tag indicates that the word or phrase contained within is an abbreviation or acronym.

Below is a table of the HTML phrase tags:

Tag Name HTML Tag Tag Description
Acronym <abbr>..</abbr> Used to show the acronym within the body of text, without disturbing the flow. A popup showing the full text will appear when hovering over the acronym .

For example:

<abbr title=”Do It Yourself”>DIY</abbr> home projects

DIY home projects

Acronym <acronym>..</acronym> Deprecated, see <abbr>
Address Text <address>..</address> Indicates an address within the page. This is an indication to the search engine indexing robots more than to the website visitor.
Computer Code <code>..</code> The text is shown with an old style computer programming effect. It also adds a reassurance that the code is meant to be shown this way and not just genuine page structural code which has escaped to public view.

It is generally rendered by browsers using the monospace font family.

Emphasis <em>..</em> Indicates emphasis, not simply the highlighting of a word or phrase within a sentence. Words which convey a strength of action such as must and will are candidates for wrapping within this tag.
Keyboard Text <kbd>..</kbd> Another of those tags which reflects computer/keyboard entry.
Mark <mark>..</mark> This is used to highlight sections of text. CSS styling will override the default yellow background.

For example:

Tomorrow’s <mark>finance</mark> meeting is at 3pm.

Tomorrow’s finance meeting is at 3pm.

Programming Variables <var>..</var> This is used to highlight variable text in web page.
Sample <samp>..</samp> Another computer code tag. Used to define a section of sample code.
Quoting <blockquote>..</blockquote> This is used to show that the wrapped text has been derived from another website.
There’s a default associated rendering which is often overridden in the style of the website.
Short Quotations <q>..</q> This is used to add double quotes within a paragraph or sentence.
Strong <strong>..</strong> This is used to give importance to the text in web page.
Text Citations <cite>..</cite> Used to show that the reference is a citation. For example
<p>Examples taken from the VNTweb articles<cite>Which is Correct <strong> or <b>?</cite>
Text Direction <bdo>..</bdo> This is used to override text direction in web page.
For example: <bdo dir=”rtl”>Converting the flow to backwards</bdo>Converting the flow to backwards

Use of the different types of phrase tags allows for their styling to be tailored within the website’s CSS files adding the website’s own presentation for each and able to exploit the different types to best effect. For example some websites will pull the block quote out with either one or two large quotation marks.

Why add ALT Text to an Image?

Adding ALT text to a website image is good for SEO, but is that all?

The image alt text is the short phrase that pops up when you hover over an image.

The alt text can also be shown when the image fails to load or download.

The alt text parameter associated with a website image is best known for its SEO requisite. However, it’s also important for Braille, screen readers and in case the image fails to download.

Oh, and if someone is viewing your website with the Lynx web browser.

Reasons to add Image alt Text

To summarise, adding descriptive text to your images is good for:

  • SEO
  • Search engine indexing
  • Braille readers
  • Screen readers
  • Disabled image download

SEO

SEO ranking is acheived through a number of factors. Amongst these is the quality of the underlying HTML code.

SEO includes adherence to the standards defined for website design and build.

Badly written website HTML code can adversely affect a website’s search engine ranking.

Included within badly written HTML code is the omission of the alt text from an image. So yes, not supplying this text can impact on your website.

Good alt text may also be used in promoting the web page and the image on the search image results. The text may help to have your image shown on the Google search results, image listing.

Search Engine Indexing

The search engine robots, crawling the Internet, are not able to interpret an image, understanding how you perceive it to be used.

For example, you have included a picture of a building on a web page. The alt text may be used to clarify its context. Perhaps you provided the interior design; your company is based here; as an architect it interests you; or maybe it’s simply a lovely building which inspires you.

Adding alt text to the image will clarify, to the search engine robot the context in which you are using the image.

Otherwise the only available reference info is the file name, and dependent upon the context within the surrounding text.

Screen Readers

A screen reader will convert the text on a web page to synthesised speech, or braille, allowing those with limited sight to browse the Internet, hearing the content of web pages.

Screen readers operate by converting the text content of a web page to either speech or braille. The text content for conversion includes not only the visible sentences of text but some of the underlying code to. To best understand a web page’s content a screen reader will handle elements such as tables and images by cleverly giving more information such as highlighting the table headers.

A screen reader will work best where the underlying HTML code is correctly structured. Making use of the less visible parameters such as the image alt text.

Simply having an image with no description, or the original camera file name won’t be of help.

Image Download Disabled

Disabling image download is the correct setting for best security, when configuring an email client.

Although not a page on your website it does illustrate the importance of adding a descriptive text to your images.

Why add alt Tex to an Image: Lynx Browser

A basic editor, such as Lynx doesn’t handle images. A useful tool if your desktop windowing system has crashed, or you are accessing via a terminal session.

Adding the alt Text

It’s really easy to add the alt text associated with an image.

The common CMSs all offer an easy option to add the descriptive text to the images.

For example WordPress, when editing an image in the media pages or on a page or post offers the alt text as a text box to be completed when editing an image. As shown in the image below.

Image alt Text WordPress Attachment Details

The WordPress CMS offers the appropriate text fields, when editing an image. Other CMSs do likewise.

If you are interested in how it’s implemented in HTML. It’s simply the addition of the parameter alt, as shown in the simplified version below, of the phone box image:

<img  src=”https://www.vntweb.co.uk/image-alt-text-wordpress-attachment-details.png” alt=”Image alt Text WordPress Attachment Details” />

Further Reading

For more information about why you should add alt text to your website images there’s a wikipedia screen reader article and RNIB has info about assistive technology, also read about the BBC’s view on accessability of their website with screen readers and WebAIM has details about designing for screen reader compatibility

Bootstrap3 One and a Half Offset

With 3 1/3 width columns, col-md-3, to be centred within a bootstrap3 col-md-12 I was looking at adding an offset at the left something similar to col-md-offset-1.

Centring 3 Bootstrap3 col-md-3 divs within a row requires an offset which is 1.5 times a single column width. ie. two of these widths, one each side, but we don’t need the one at the right end as we are using an offset.

The situation: for a website footer I was including a widget area which I wished to have 3 columns of links and corporate references.

To give a better looking footer I was looking to have larger side margins and use the bootstrap col-md-3 for each of the columns.

However, the one and a half width doesn’t exist in Bootstrap.

As a percentage this is 100% * 1.5/12 = 12.5%.

Looking at the percentage width assigned to a single width column this is given as 8.33333333%.

Working from the single column width to 1.5 times gives a width of 12.499999995%.

I looked at the other column widths to see a consistent under valuing of the percentage.

I chose to use this width as it gives a small space between the columns, and less chance of the widths summing up to cause the floats to drop onto the next line.

With the 12.499999995% width I created a new offset specific to the larger width devices of col-md-offset-1-half.
thus giving

@media (min-width: 992px) {
   .col-md-offset-1-half { margin-left: 12.499999995%;}
}

I was unable to add the offset within the layout, it being a series of WordPress widgets. As I was managing the content I made the assumption that all 3 widget areas would be occupied.

So having created the above additional column and handled the responsive offsets, whilst writing this I was considering my original implementation decisions.

I found it easier to add this offset to the first element

@media (min-width: 992px) {
   .footer .widget:first-child{margin-left: 12.499999995%;}    
}

I could increase the left margin to get the desired insert.

For smaller width screens the insert can be appropriately reduced, if desired.

Based on this view I returned to my work to redesign it using row padding rather than affecting the column offset.

I had investigated the idea of creating a one-and-a-half offset for use in centring 3 columns in a bootstrap3 row. However, as I was unable to edit the particular row layout chose to add a margin to the first child element, when viewed on larger devices.