There are many different ways to approach creating a mobile version of a website, many including a whole new site/files, but if you’re wanting to stick with the same look, use the same styles and template, and not create any additional files, the best approach is to re-define some of your CSS elements to alter your widths, heights, background-images, and other properties of your main elements, to better fit your content on mobile screens.

The first approach that comes to mind is creating a separate style sheet and including it after your main one with <link rel="stylesheet" media='handheld' href="..." />. Personally, I’m not a fan of this as it requires a second style sheet.. I like my styles in a single document. An alternative is to include your redefined elements in a CSS media query that’s contents are used based on conditional statements, like so:

/* !Mobile */
@media screen and (max-device-width: 480px) {
    /*...redefine your elements in here */
}
/* iPad Portrait */
@media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
    /*...redefine your elements in here */
}

..continue reading

This is a little trick I’ve been doing for many years now – it’s been based on an assumption about bots and spiders I had, not on facts, but it’s been working like a charm, & I still receive no spam with my email address posted clearly on my site.

I’ve assumed that bots and spiders peal email address out of striped down websites,  first looking for mailto:.. in <a> tags, then removing all markup, and looking for patterns like:

{user} {@/{?}at{?}} {domain} . {tld}

I’ve always disliked the deterrents (ie; using “[at]” instead of “@”) because not only does it not work, they prevent non-familiar internet users from recognizing an email address. So in attempts to display my email address, without getting spammed about my penis size, with a little CSS I’ve been able to stay spam-free with a publicly shown email address:

<!--
.hide { display: none; }
-->
 
user<span class="hide">NO</span>@domain<span class="hide">SPAM</span>.tld
 
<!-- Above will output below to humans -->
user@domain.tld
 
<!-- But it will look like below to bots: -->
userNO@domainSPAM.tld

I’m sure there’s already bots out there that take “display:none” elements into consideration, or perhaps remove tags and their contents from email address.. but for the past five years it’s worked perfectly for me.