Archive for 'html & css'

Wednesday, 20th August 2008

making mobile sites

With the growing market in mobile/handheld devises it seems to be getting more important then ever to make your sites mobile friendly.

I first got interested after reading this: http://healyourchurchwebsite.com/2008/06/23/if-the-olympics-are-going-mobile-then-why-not-your-church-website/

As part of the re-vamp of whychristmas?com, I’ve just got a mobile version  going using ‘mowser‘.  I’d looked at a few options and mowser seems really nice.  mowser is a site/browser for ‘handheld’ devices and can turn any existing site into a more handheld/mobile friendly one. (just enter a url and hit go)

So the mobile version of whychristmas?com would be at: http://mowser.com/web/www.whychristmas.com

However, to make it easier for handheld browsers to find it, you can add a simple line in the <head> section like:

<link rel=”alternate” type=”text/html” media=”handheld” href=”http://m.whychristmas.com/” title=”Mobile/PDA Version” />

And tada, a mobile friendly site!!!

You’ll see that in the line above, the url is to: http://m.whychristmas.com to be posh(!), I’ve set-up a sub domain in cpanel (m) and set it to redirect to the mowser address.  Doing that means the ‘mobile version’ link in the footer of the site looks like it’s coming from the main whyc site, so a bit nicer…

And if you use wordpress, there’s this plugin: http://wordpress.org/extend/plugins/mowser-wordpress-mobile/ which does all the work for you!

I’ve used the wp plugin on the whychristmas blog and my church site (as it’s run in wp…) and of course this blog!!! and I think it will be one of the ‘must install’ plugins on a wp site.

With the boom in handhelds/smartphones, etc. this seems to be a really quick (and easy) way of making sure sites are good on them as well!

by james in Tech, Work, html & css | No Comments »

Wednesday, 28th May 2008

Using CSS to stop right-click image saving

You want to stop people casually stealing your nice images…

…you could use a bit of javascript to kill right-clicks but I think those are a BAD IDEA! They can really annoy a lot of users (especially people who use right-click based ‘mouse gestures’ when surfing) and are very easy to stop (by turning off js!).

Instead, you can use some (relatively) simple css. Here are some ways of stopping image saving with right-clicks with css.

Granted, they won’t stop someone who really wants to get the images, but they’re nicer than js!

by james in html & css | No Comments »

Wednesday, 28th May 2008

An Accessible CSS/Image Nav Bar

We all like css based ’sprite’ image nav bars, but quite a few are un-accessible or don’t work with css/images turned off.

So here’s a very accessible css/image nav bar that works in all modern browsers (and yes includes IE6!).

by james in html & css | No Comments »

Wednesday, 28th May 2008

CSS Borders for ‘fake buttons’ on links

Playing around with css, you can make some pretty border (double and triple)!/button effects on ‘normal’ links.

See the examples of css fake button borders!

by james in html & css | No Comments »