Archive for 'html & css'
Wednesday, 29th October 2008
More on Mobile sites
I was left a comment on a previous post about mobile sites about how to make a site for Nokia 6610.
Well rather than leaving a long comment, I thought a follow up post would be easier for me to write!
So to answer the comment, mowser is a good place to start and those sites should open on a Nokia 6610. And you could use a meta link as stated in the original post.
The people who run mowser also run these two sites:
http://ready.mobi/
http://mobiforge.com/
which can also help you get a mobile site going.
Since I wrote the post, I’ve actually made a custom mobile site for my church, Minehead Baptist Church at http://m.minehead-baptist.com
Please feel free to ‘borrow’ any of the html/css if you like (but not the logo cos that’s copyrighted!!!)
It’s got basic into on and loads really nicely on mobile devises and iPhones! I was inspired to make it by this post on digital.leadnet.
Some of the sites on the digital.leadnet post auto detected if you’re on a mobile devise and I wanted a way of doing that with my Church site as well! So after a google I found:
http://www.brainhandles.com/2007/10/15/detecting-mobile-browsers/
which gave me a nice php script.
If your site uses php, just pop it in at the top of the page (above the doctype) and tada it works! My church site is run on wordpress, so I put it in at the top of the wp header.php template file.
So the full php code I’m using is:
<?php
if(checkmobile()) header(”Location:http://m.minehead-baptist.com”);
function checkmobile(){
if(isset($_SERVER["HTTP_X_WAP_PROFILE"])) return true;
if(preg_match(”/wap\.|\.wap/i”,$_SERVER["HTTP_ACCEPT"])) return true;
if(isset($_SERVER["HTTP_USER_AGENT"])){
$uamatches = array(”midp”, “j2me”, “avantg”, “docomo”, “novarra”, “palmos”, “palmsource”, “240×320″, “opwv”, “chtml”, “pda”, “windows\ ce”, “mmp\/”, “blackberry”, “mib\/”, “symbian”, “wireless”, “nokia”, “hand”, “mobi”, “phone”, “cdm”, “up\.b”, “audio”, “SIE\-”, “SEC\-”, “samsung”, “HTC”, “mot\-”, “mitsu”, “sagem”, “sony”, “alcatel”, “lg”, “erics”, “vx”, “NEC”, “philips”, “mmm”, “xx”, “panasonic”, “sharp”, “wap”, “sch”, “rover”, “pocket”, “benq”, “java”, “pt”, “pg”, “vox”, “amoi”, “bird”, “compal”, “kg”, “voda”, “sany”, “kdd”, “dbt”, “sendo”, “sgh”, “gradi”, “jb”, “\d\d\di”, “moto”);
foreach($uamatches as $uastring){
if(preg_match(”/”.$uastring.”/i”,$_SERVER["HTTP_USER_AGENT"])) return true;
}
}
return false;
}
?>
I’ve also found that on the iPhone, if you give links to feeds (I’ve got feedburner ones for the church), it opens/reads them nicely and you can even listen to mp3/podcast content straight on the iPhone!
by james in Tech, Work, html & css | 1 Comment »
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 | 2 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 »
Pages
Search
Categories
Archives
