The code here helps you show, for your mobile website only, a mobile phone number stuck at the top of the site, following the user as they scroll down the page.
The HTML
<span class="desktop-phone">(555) 555-5555</span> <a id="floating-mobile-phone" href="tel:+15555555555">(555) 555-5555</a>
The CSS
/* ======================== mobile phone ======================== */
a#floating-mobile-phone { display:none; }
@media only screen and (max-width:600px) {
a#floating-mobile-phone {
/*theming-related: colors, fonts, sizing, etc. edit at will*/
background-color:#558a93;
color:#fff;
text-align:center;
font-size:18px;
/*positioning-related: don't edit unless you're css-confident*/
display:block;
position:fixed;
top:0;
left:0;
width:100%;
z-index:9999;
}
}
Precautions
Font Size
The CSS included sets a default font size of 18 pixels, which is a bit bigger than the default size for most devices. Don’t blow your phone number up to massive sizes — it’s already following the user as they move down the screen, so there’s no reason to overwhelm them.
Media Queries
You might miss out on tablets with call capabilities with a max-width of 600px. Increase it if you want to catch more tablets.
Z-Index
You might want to lower the z-index value in the CSS if you use an overlay of any sort (e.g., with a plugin or a modal window) or any other fixed-position elements. You might get some strange results if not.
Mobile Sticky Elements
If you use a sticky header or other sticky elements on your mobile site, be very wary of covering up too much of the screen. Phones have tiny screens already — if you take up even a fifth of that space with your annoying scrolling things, you’ll probably cause a fair amount of mobile users to bounce immediately.
Multiple Phone Number Locations?
If you are including your phone number in multiple spots for the desktop, you do not need to include the mobile phone number HTML (the second line of code) more than once. You only need the mobile part once per site.
Desktop Computer Click-to-Call
I generally don’t include callable numbers for desktop because it tends to confuse clients who may browse with a call program enabled and wonder why there’s a huge, random icon next to their phone numbers. Pretty much every time I’ve encountered this, despite explanation of desktop calling programs, most people still wanted the icon gone — or the “opening the phone program” thing disabled. Ah well. Thus, the <span> element.
If you prefer to enable desktop click-to-call, too, for people who use Skype, Google Voice, and other programs used to place calls through a desktop computer, just copy the mobile part and replace mobile-phone in the class with desktop-phone.
Microformats
If you want to use microformats, add itemprop="telephone" into one of the desktop phone numbers (not the mobile number) preferably in the header or footer of the site. You don’t want to use the mobile number because the CSS included here hides the mobile number for desktop users; apparently, when you use microformats, the data is supposed to be visible on-page. Also, I don’t think (but am not certain) the microformat should be repeated for every phone number you list on-site.
HTML Semantics
Most people probably won’t care about this — but I’m not 100% sure on the best way to mark-up the phone number in straight HTML for desktop screens. For mobile phones, the link element is obvious because it’s click-to-call. The spec on the address element says it’s for “contact information” and I have included the phone number in an address element before — but only when it was right next to an actual address or e-mail of important contact information. If it’s a standalone phone number, I default to span. I’m not sure if that’s the most semantic way to do things. It’s technically correct and works either way, thus why most people probably don’t care?