| SitePoint Sponsor |
From all I've read (and experienced) about adding an email button to a page in html 4.01 without resorting to javascript is not that easy to do for mulitple platforms.
I've currently got a simple button that is not only ugly, it is also buggy; it works in one browser but not in others.
I can live with the ugly, but not with the buggy.
What is the most reliable way to make life easy for vistiors using a variety of browers and operating systems, to send emails?
It would be great if you shared the link or code to know better of what you have used or what you are looking for!
What I used in my old style was buggy, so won't be using that again.
What I am looking for is fairly simple:
1st choice would be anything that works reliably over multi platform, using only html 4.01 code, and not bothered about looks.
2nd choice would be something that involves more than straight html code, but sill reliable over multiplatform.
Functionality is king, looks are a very minor bonus.
I have so far managed to get my testpage to look virtually identical for Chrome, Firefox, IE, and Opera under Windows, as well as Safari under Apple, anywhere in display range of 240x200 to 2000x1400 and zoom from 25% to 300%. The text wraps slightly differently when zooming, but I can live with that.
Now I am looking for a solution in line with this, hence the need for multiplatform and large display range compatibility, with low demands for looks; if it works well, I'm happy.
The easiest way to add an e-mail link is to use mailto: e.g. <a href="mailto:enquiries@mydomain.co.uk">enquiries@mydomain.co.uk</a>. When the link is clicked, it will open the visitor's e-mail client. I usually run the address through this encoder, to help hide it from spambots. It's not foolproof, but it certainly helps.
Alternatively, you can use a contact form - or both. A contact form can be used by somebody who may not be at their own computer and therefore not able to send from their own e-mail. Personally, I dislike using contact forms, so I would always give an e-mail address as well.
If you're a bear made of mohair, ponder on the nature of a mo.
How very odd. That is the method I used in the "old style" lay out, but when I test it in different browsers, it ONLY works when the page is viewed in Opera.
When I click the button in Firefox, IE or Chrome: zippo nada di nothing.
I put this down to my most commonly used browser is Opera, which I also use for computer based email. I'll have to do some testing on other computers to see if it works in mutiple browsers on those.
Gawd, this is hard work.
Do you have a link to a page where we can take a look at it for you?
If you're a bear made of mohair, ponder on the nature of a mo.
This is my test page with adapted button for email.Originally Posted by TechnoBear
http://www.boiler-breakdown-repair-l...st-london.html
It looks a bit funny as I have not worked out what the best way is to position the button in line with the phone numbers and directly on the left. I have enlarged that bit with a "span-id" command, which is probably not the most sophisticated way of doing it.
Like I mentioned before: testpage for experiment in rather steep learning curve.
Well, it works OK for me in Firefox and Chromium, although neither shows a "hand" cursor when I move over the button, which I found a bit disconcerting. Personally, I'd abandon all the <input type="button"> stuff and stick to a simple link, as per my example above. If you want, you can use an image for the link, with suitable alt text in case images are off. e.g.
I would also recommend showing your e-mail address, as well as using the mailto: convention. As far as I know (and I may very well be wrong) mailto: does not work with browser-based web mail, so anybody using that would need to see your actual e-mail address to contact you.Code:<a href="mailto:enquiries@mydomain.co.uk"><img source="images/email.gif" width="90" height="30" "alt="send question by e-mail"></a>
If you're a bear made of mohair, ponder on the nature of a mo.
To add to what has been said, you haven't explained what you mean by an "email button". There are different ways to understand this. It may just be a link (like TechnoBear showed) styled to suit your design, or the standard <input> or <button> elements in HTML.
Show us a sample of your code so we can understand better what you mean.
More a matter of "what it should be" than "what code there is currently".
What I want to achieve, is for any viewer no matter how web-savvy (including not at all), to click on a button and go straight to their email screen.
Personally, I don't care which code is used, as long as there is a recogniseable button that says something like:"click here to send email". Text on the button is better than near it, as different screensizes and zoomsettings will wrap in differrent ways and the "email notice" could be removed from the button if it is not "in" the button.
This is what there is now.
<p> <input style="BACKGROUND-IMAGE: url(button200F.gif); text-align: center; BACKGROUND-COLOR: white; WIDTH: 200px; HEIGHT: 50px; font-size: 1.8em; CURSOR: hand" onclick="window.location.href= ('mailto:info@boiler-breakdown-repair-london.co.uk')" value="email question" type="button" name="button">
It would be better the use the code that TechnoBear gave, as this is the job for a standard link. That's also the easiest way to make it look the same in all browsers.
This is probably repetitious but maybe it will help:
1) WHY are you choosing to use a BUTTON/INPUT to send an email? Do you need some sort of additonal .js action?
If the answer is NO then you can get the same functionality from a link,as TB suggested.
2)"But I wanted to look like...."
THIS is where CSS comes in.. give the LINK a class, lets say "button" and define its look in the CSS of your document
hope that helpsCode:a.button { font-size: 90%; color:#000; text-decoration:none; padding:.3em 1em; border:1px solid #555; text-align:center; background: #eee; font-family: sans-serif; text-shadow:1px 1px 0 #ccc; -moz-border-radius:1em; -webkit-border-radius:1em; -o-border-radius:1em; border-radius:1em; box-shadow: inset 0 0 .65em #ccc,inset 2em 0 .65em #fff, 0 0 2px 1px #aaa ; -webkit-box-shadow: inset 0 0 .65em #ccc,inset 2em 0 .65em #fff, 0 0 2px 1px #aaa ; -moz-box-shadow: inset 0 0 .65em #ccc,inset 2em 0 .65em #fff, 0 0 2px 1px #aaa ; } <a href="#" class="button" >Email A Question</a>
Brilliant ideas, elegant execution.
Graphic Design, Art Direction, Copywriting and Web Design.
Many thanks y'all.
I've applied the suggested changes, and shall now spend some time on finding out the how and why of the working of those changes.in the hopes of one day ( in the not TOO distant future ) being able to do something all by myself without having to consult 4 different books followed by asking you folks to explain that what is still a mystery.
Rewriting the old pages that kind of worked, but were a complete mess in webdesign terms into some that works properly, consistantly and over all common platforms, proves a lot harder than I though. If it wasn't for the understanding of the most powerful force known to mankind, I'd probably have given up by now.
The first time I rewrote a site (from somebody else's code) I was amazed how much harder I found it than starting from scratch myself. So the second time, I did just that - ignored the existing version and started from scratch. Fortunately, both were small sites and easily manageable.
But hang on in there. One of these days, everything will start falling into place and you'll be glad you persevered.
If you're a bear made of mohair, ponder on the nature of a mo.
Yes, I will get there, and the help I've found on this forum is a significant contribution to that. My site was originally built by somebody else on one of these diy template suppling "host" companies. Getting more and more dissatisfied, I took it over myself about a year and a half ago, but knew only the very basics about webdesign. I was desparate to keep the site, as it ranked quite well and brought in enough work to survive. This lead me to improve things rather than start from scratch. I read books, online info, visited forums and with a lot of trial and error managed to get rid of all the template rubbish and make it into something half decent....hang on in there. One of these days, everything will start falling into place and you'll be glad you persevered.
I have very spefic ideas about how I want my site to look, which are rather different than the mainstream things. I am now nearly at a point where my testpage is good enough for the time being, at which point I will alter all my pages to that format. Once that is done, I will carry on learning and making it better.
In doing this, I apply the principle of "compound interest" that according to Einstein is the most powerful force known to mankind. My aim is to upgrade my knowledge by at least 1% per week. May not seem a lot, but it guarantees an increase of at least 3 times in 2 years, 5 times in 3, and 8 times in 4. Chuck in a bit extra when I have some spare time, and you can double those figures. Following this principle, I will have 15 times more than basic knowledge by xmas 2014. Should be enough for some pretty nice results.
Link in post #7
The buttons are now working, but that is for 90% due to ready code being given here (and most gratefully and graciously received), and for only 10% by my increased understanding.
I have yet to find a book or other source that explains the more intricate aspects of CSS in a format that makes sense to me. The books I have found so far, are either (to me) incomprehensible listings of code, or endless explanatory waffle that does nothing but confuse me more.
I've looked at numerous books and other sources, including “previews” of some promoted here on Sitepoint, but yet to find one that suits me.
Any and all suggestions for further learning materials very welcome.
I have a number of books I've found very helpful. One I particularly enjoyed was "Web Standards Solutions" by Dan Cederholm. I like his writing style.
If you're a bear made of mohair, ponder on the nature of a mo.
1) templates suck. Pay a professional or learning yourself always provides better results.
2) Remember that web design is two languages, not one .. Semantic HTML and CSS
3) As a beginner I found the book "Transcending CSS" by Andy Clake.
4) Speaking of watching your code I have the following suggestions:
a) Get rid of the div around the UL .. it's redundant as a UL is essentially a DIV ( block elements ) for LIs ( ULs and OLs can only contain LIs)
b) It's a good idea to wrap lose IMGs ( IMGs not in Ps or DIVs) in Ps or DIVs
c) You have a stray <p> tag right before that DIV (P tags cannot contain block elements such as DIVs or ULs) Besides you should be careful to properly close all tags! This is VERY VERY IMPORTANT
Your new, cleaned up, code:
ReplacesCode:a{display:inline;} /* for IE;*/ .logo{float: right; margin: 59px 9px 96px 3em;} .nav {float:left ; margin: 59px 2em 52px 0; padding:0; list-style:none; } .nav li{padding:0 0 1em 0; max-width:300px;} .nav a, a.button { display:inline-block; text-align:center; font-size: 90%; color:#000; text-decoration:none; padding:.3em 1em; border:1px solid #555; background: #eee; font-family: sans-serif; text-shadow:1px 1px 0 #ccc; margin:0; -moz-border-radius:1em; -webkit-border-radius:1em; -o-border-radius:1em; border-radius:1em; box-shadow: inset 0 0 .65em #ccc,inset 2em 0 .65em #fff, 0 0 2px 1px #aaa ; -webkit-box-shadow: inset 0 0 .65em #ccc,inset 2em 0 .65em #fff, 0 0 2px 1px #aaa ; -moz-box-shadow: inset 0 0 .65em #ccc,inset 2em 0 .65em #fff, 0 0 2px 1px #aaa ; } <div class="logo"><img src="http://www.boiler-breakdown-repair-london.co.uk/pics/GSR GIF 200.gif" alt="gas safe logo" width="200" height="200" ></div> <ul class="nav"> <li><a href="index.html">homepage</a></li> <li><a href="http://www.boiler-breakdown-repair-london.co.uk/emergency-waterleak-repairs-southeast-london.html">waterleaks</a></li> <li><a href="http://www.boiler-breakdown-repair-london.co.uk/emergency-gas-leak-repairs-bromley-south-east-london.html">gasleaks</a></li> <li><a href="mailto:info@boiler-breakdown-repair-london.co.uk">Email A Question</a></li> </ul>
Hope that helpsCode:<img src="http://www.boiler-breakdown-repair-london.co.uk/pics/GSR GIF 200.gif" alt="gas safe logo" width="200" height="200" style="float: right; margin: 59px 9px 96px 99px; "> ... </ul> </div>
Brilliant ideas, elegant execution.
Graphic Design, Art Direction, Copywriting and Web Design.
Yes, I fully agree with the sentiment. I must admit that I am somewhat puzzled as to what the remark aims at, as I don't use templates. I am currently putting a fair effort into learning html and css use properly.
Ah, semantic html. I've heard about but would be lying if I said I have more than the vagues notion what it means.
I shall look that one up.
Again, I fully agree. The divs were only a temporary trial to get rid of a display problem with the buttons, and the stray p was a leftover from one on the countless alterations. When you are at my level of understanding, it is a damn site quicker to do it that way.
I shall have a good look at your suggested changes, and see if I can work out how they work and what they do when I apply them
Your new, cleaned up, code:
ReplacesCode:a{display:inline;} /* for IE;*/ .logo{float: right; margin: 59px 9px 96px 3em;} .nav {float:left ; margin: 59px 2em 52px 0; padding:0; list-style:none; } .nav li{padding:0 0 1em 0; max-width:300px;} .nav a, a.button { display:inline-block; text-align:center; font-size: 90%; color:#000; text-decoration:none; padding:.3em 1em; border:1px solid #555; background: #eee; font-family: sans-serif; text-shadow:1px 1px 0 #ccc; margin:0; -moz-border-radius:1em; -webkit-border-radius:1em; -o-border-radius:1em; border-radius:1em; box-shadow: inset 0 0 .65em #ccc,inset 2em 0 .65em #fff, 0 0 2px 1px #aaa ; -webkit-box-shadow: inset 0 0 .65em #ccc,inset 2em 0 .65em #fff, 0 0 2px 1px #aaa ; -moz-box-shadow: inset 0 0 .65em #ccc,inset 2em 0 .65em #fff, 0 0 2px 1px #aaa ; } <div class="logo"><img src="http://www.boiler-breakdown-repair-london.co.uk/pics/GSR GIF 200.gif" alt="gas safe logo" width="200" height="200" ></div> <ul class="nav"> <li><a href="index.html">homepage</a></li> <li><a href="http://www.boiler-breakdown-repair-london.co.uk/emergency-waterleak-repairs-southeast-london.html">waterleaks</a></li> <li><a href="http://www.boiler-breakdown-repair-london.co.uk/emergency-gas-leak-repairs-bromley-south-east-london.html">gasleaks</a></li> <li><a href="mailto:info@boiler-breakdown-repair-london.co.uk">Email A Question</a></li> </ul>
Code:<img src="http://www.boiler-breakdown-repair-london.co.uk/pics/GSR GIF 200.gif" alt="gas safe logo" width="200" height="200" style="float: right; margin: 59px 9px 96px 99px; "> ... </ul> </div>It most certainly does, many thanks.
After going through the differences in the actual coding, I think I understand the reason for most of it. The one thing I don't get, is the significance of the "em" in this bit:
" .nav li{padding:0 0 1em 0; max-width:300px;} "
and the function/importance of this line:
" a{display:inline;} /* for IE;*/"
Can you shed any light on that?
ps
I validated my page, and the stray <p> was not a left over from editing, but a fundamental misconception on my part with regards of the functioning, use and correct nesting of divs and paragraphs. The attempt to correct it by simpy removing/rearranging p-tags failed consistently, and experimenting to get it right lead to correcting this flaw in my knowledge.
A nice side effect of striving for correct coding by using validation.
An em is a measurement similar to px, except that it is based on the size of the text rather than a specific number of pixels. As a very rough guide, 1em is around 16 px, though that will vary a lot. Another way to think of it is that it's the width of the letter "m".
It's a hack to help older versions of Internet Explorer.the function/importance of this line:
" a{display:inline;} /* for IE;*/"
Thanks Ralph. Do I understand it correctly that apart form 1 "em" being roughly 16px, there is not difference in the working i.e. if I subsitute 320 px by 20 em, the result will be pretty much the same?
I like using EMs because in WEB DESIGN the end user has control over font size. In other word if grandma cant see she can press a button and poof the default size goers from 16px to 80px. If you set measurements in px in your css they stay that size, but EMs are relative to the current container font size, insuring the layout retains most of it's proportions regardless of the user's chosen font size.
Brilliant ideas, elegant execution.
Graphic Design, Art Direction, Copywriting and Web Design.
To add to theabove, there are lots of informative threads about this around here, such as this one:
http://www.sitepoint.com/forums/show...sibility/page7
Posting Permissions
Reply With Quote
Bookmarks