I have a website with a lot of information and a design that needs a relatively high screen resolution. I'd like to be able to create an innitial page with a redirect to send mobile browsers to a streamlined m.olycomputers.com page with just rates and contact info, in a resolution that works well with a small screen.
Does anybody know how to do a redirect based on browser identification?
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);That sets the variable browser, to be equal to your users browser name, and you can write a simple if statement like the following:
if ((browser=="insert the name of the 1st mobile browser here"||browser=="2nd mobile browser"||browser=="3rd mobile browser"))
{
window.location="Name of Mobile browser page"
}
else
{
window.location="name of Regular browser page"
}That says in english: If the browser should be - Name of mobile browser, then send the user to mobile page, otherwise send them to the regular page.
Problem is, that your little script cant actually detect if the browser is mobile or not, it needs names, so you need to tell it all the names of mobile browsers, at that place where it says 1st browsers so on. and it will direct the said browsers to the mobile page.
@ccube921 - that will not work, at least not properly as there are very few mobile phones with mobile browsers.
OlyComputers if you want to have redirection then use WURFL that can be simple deployed on Apache server with PHP support. However there is a cost to this solution as WURFL is based on one huge XML (some 6MB) so there is a delay between connection and recognition-redirection some 6-10sec
What if I did the inverse of CCubes idea and had firefox, safari, opera, konqeror, and IE direct to the main page and all others going to the mobile page, with t link at the top to go to the full version if somebody is using a non-standard "full featured" browser.
One possibility, however it may not work well with less know browsers
Just make a page with two text links on it:
View on mobile phone
View on full size computer
Hers one, it returns the screen resolution(first width, then height):
<script type="text/javascript">
if (screen.width<800)
{
window.location="Mobile page name"
}
else
{
window.location="Main page name"
}that will redirect the user based on screen width, as of now it says that if the resolution width is less than 800 pixels, send it to the mobile page, you can, of course change that.
Midi please checkout these web-building rules and tactics
Or you can simply set different style sheets for specific media types. Like for example:
<style type="text/css" media="all">
/* <![CDATA[ */
/* Applying external style sheet */
@import "your-default.css" screen;
@import "css-mobile.css" handheld;
/* For inline style */
@media screen {
html, body {
height: 100%;
min-width: 800px;
max-width: 1024px
width: 100%;
}
body { background-color: #000; } }
@media handheld {
body { width: 100%; height: 100%; background-color: #fff; } }
/* ]]> */
</style>One page could then contain a link to the other, in a place where it is seen immediately.
Actually, I don't wrote for mobile devices, because I wish that every one of them would be crushed by bulldozers. People should not have access to such devices while behind the wheel, and those devices are the reason we are losing analog TV.
My variations on your 19 Things NOT To Do When Building a Website
1. DO NOT resize the user’s browser window, EVER. (I agree. It's a cheap substitute for designing for variable sizes, and can mess up someone's settings needed for other purposes.)
2. If your website requires the visitor to load your home page, and then “launch” your real website in a pop up, YOU LOSE. (Anything in a popup never gets to my browser. I swat them like flies!)
3. If your website asks the user which version they’d like, high bandwidth or low, HTML or Flash, you ALSO LOSE. (You also lose if you don't ask, because the user who can't use either the highest resolution you use, or the scripts to make the choice, can't see it at all. Load the low res page, and provide a link to the high res one.)
4. If your website is ALL Flash, FIRE your web development company. (Many people can't download the player due to college or employer restrictions. And animation is extremely annoying, unless it teaches something.)
5. DO NOT try to reinvent the website navigation. (No mouseover dropdown menus too. Just put the links on the page! Trickery automatically pushes the BACK button on my browser.)
6. This one is going to get me in trouble. If you are a print designer, and “do websites on the side”, STOP. (I don't want to see useless art! I want information.)
7. If you do not have sufficient copy, or any REAL TEXT on your home page (not in an image), and to a lesser extent your whole site, hire a copywriter and fire your webmaster NOW. (I don't want to see bandwidth-wasting art! I want information.)
8. If your website does not work in Firefox, welcome to 2007 DUMBASS. (IE is the noncompliant browser. If you avoid designing for any browser, avoid designing for that clunker. Firefox users hate to switch to IE just to use a page. And no ActivX!)
9. No blinking text, no Frontpage, no pop-ups (even requested), no scrolling text, no font downloads, and no Flash intros. (These things make me hit the BACK button faster than anything else!)
10. If you use music on your site make sure the user can stop it, and it BETTER NOT start on page load without the user requesting it. (Nothing causes prairie-dogging in a cube farm faster than a sudden onset of unwanted music! That goes double on a site where you are ordering pencils or gaskets for the company.)
11. Text navigations are better than images. (The best of all is a visible menu that doesn't appear and disappear. Mouseover devices drive dyslexics crazy. They think they lost the page they wanted. Just put the links on the page!!!!!)
12. A well thought out site map with logical sub sections is better than using “drop downs” (Ban dropdowns!)
13. If your site needs a search engine for users to find information, it’s time to start over and fire the guy who came up with the site map. (Use logical links from page to page, taking the user to pages with related content, and also back home.)
14. Load time is still a factor for over 50% of American web surfers. (Right! Don't give me a newscast when a newspaper article will do.)
15. Do not HIDE your message, and don’t OBSCURE what you want the user to do. (Especially, do NOT put images behind text! Some people have a very hard time reading that text.)
16. If you lead the user through a pre-determined path in order to deliver a message or demo, it’s time to get an ANT farm and take your controlling wills out on some species that will actually like it. (Just provide the links to the pages! And don't prevent your audience from using a tree search, backing up to previous pages to browse other pages)
17. If you’re delivering video, it better not ask the user which bandwidth or version of video they’d like. Real Player, 100K, Windows Media Player, Quicktime, WMV, 300K, AVI, Cable, DSL, Dial-Up? (Wrong!!! Many users do not get a choice of which players they can have on their computers. University students and business employees are in this boat. The powers that be are interested in budget or security concerns, not whether or not the user can see your page. Offer the choice!)
18. This is a small one, but if the user has to mouse over your graphic or small image to know what it is, or where it will take them if its a link, quit your job and be a magician or a blackjack dealer, making web interfaces is not for you. (I think that the mouseover commands should be deprecated by W3C, because they are extremely annoying. No cryptic icons!!!!)
19. Just because a technology is new, or you just discovered it does not make it suitable to put on a business website, JUST BECAUSE you can. (Most other users can't even see it yet!)
cartooncorpse and jcs on Reddit.com suggested 4 more:
1. Don’t link to PDF content without disclosing the link. (Better yet, don't USE PDF content. I have seen nothing that crashes a computer more often than a stalled PDF download. The browser freezes!)
2. Don’t employ any scripts to prevent the user from “Backing” out of the site with the browser’s back button. Ever try locking someone in your store? do they usually buy something? (I second and nominate this for passage as a law! NEVER destroy the browser's history! The user might have followed a link from the site he really needed. I followed such a link once, and it took me two days to find the site I really needed again!)
3. if your website says “you’re” where it should say “your”, you should fire the person that wrote it. (And don't misplace the word "only". I only* hate sites that only* misplace that word. [* misplaced "only"] The word "only" modifies only the word after it.)
4. If your website has LOTS of random words in all capital LETTERS because the author was TRYING to emphasize words without the or tags that were created for exactly this purpose, he should be fired. (Leaving words out of your sentence is also not recommended. But remember that some people do not have bold or underline functions in their email browsers.)
5. It goes without saying but Taladar suggests; No pop ups and no javascript links. (Use JavaScript for calculations, not effects!)
I add one more:
Stop with the rounded corners already! They waste computer and download time, and remind me of the 1950s skating rinks.
What type of a site do you expect people to make, A box with words in it! I'm sorry but nowadays we use images when it enhances the style, and rounded corners, enhances the style.
P.S. almost all businesses have flash, because half of the freaking internet(Including the parts where they ARE supposed to be) wouldn't work without it.
I am just sick of rounded corners. They are getting very stale. Why not triangles or hexagons?
The people who do not have flash yet are the ones who work for universities or companies that have a policy of not allowing any software on their systems with one or more of the following detributes:
1. It is not essential software, and the company would have to pay for its use in a business setting.
2. All software must be tested and approved by the IT department for security purposes before it will be allowed on the computers. The IT department has a 3-year backlog of requests.
3. The software might be used to tie up internet bandwidth or waste employee time (flash definitely qualifies here).
4. The software does not meet the standards for a government security clearance.
5. The IT department decided to standardize on competing software.
Only #3 applies and if you intend for your employees to do their jobs Flash is very necessary so they might just want to make one little exception
I think I'm going to go with CCubes suggestion about resolution based screening. I'm a service and consulting operation so a lot of my clients are forced to look up my information by blackberry or safe mode. This solution properly covers both scenarios.
Only #3 applies and if you intend for your employees to do their jobs Flash is very necessary so they might just want to make one little exception
I'm not telling you what I think a business should do. I am telling what I am encountering in the real world.
1. It is not essential software, and the company would have to pay for its use in a business setting.
Many small businesses do not have the budgets to pay for lots of software. Remember that business use of software is often charged for, while consumer use is not.
2. All software must be tested and approved by the IT department for security purposes before it will be allowed on the computers. The IT department has a 3-year backlog of requests.
This is a common LEGAL LIABILITY problem at a college, brought on by the liabilities incurred if a cracker takes over a college-owned computer and uses it to invade other computers. I was there when this happened at a well-known university. All of the computers on one network were infected.
3. The software might be used to tie up internet bandwidth or waste employee time (flash definitely qualifies here).
This is a common problem everywhere, especially when a large number of computers shares a network connection.
4. The software does not meet the standards for a government security clearance.
This is the same as the college problem, except that the software must be tested even more thoroughly. Remember that government employees must order products too.
5. The IT department decided to standardize on competing software.
Employees are often not allowed to install software, or to decide what software will be used. The decision is left by the boss to one IT manager. If he doesn't like a particular piece of software, he won't allow it.
Adding a few more:
6. The business can't afford to upgrade to the latest version of Windows, and the software won't work on the old version. I know of more businesses that are not running XP or Vista than businesses that are using them. I know of two businesses still using MS-DOS and Lynx, and several that are using Windows 98, ME, or 2000.
7. The software in question causes conflicts with proprietary software used by all locations of the business. Examples are database systems that share data across various franchise locations.
8. The hard disk is too full to add the software, and there is no budget to add another.
9. The software base is on a remote computer, or on a CD-ROM.
Rounded corners increase download time and space.
Mid and CCube...
Just let it go guys, If you want to start a thread about trends in webdesign start it, don't hijack this one for no good reason.
*straight at mid* come on, I (and most anybody who knows anything about webdesign) will agree that pages are too flashy and bloated but you're getting a little too utilitarian here. If you don't want rounded corners don't use them, and if a page looks good without them that's great, but some color-shcemes and even content types just look tacky without a little extra work on teh asthetics.
ccube921
Your code works only if you decide to have your index redirect to the main site so your index can't be used a webpage. It won't hep for people with their index included as a webpage.
The following would be good.
<script type="text/javascript">
if (screen.width<800)
{
window.location="Mobile page name"
}
</script>You don't have to sacrifice your index.htm
I would like to say that for MidiMagic saying he automatically hits the back button when he sees drop down navigation. He sure has made an exception to continue coming back to this site to rant. Talk about a hypocrite!
<?php $mobile = "http://mobi.mysite.com/";
if(preg_match('/Windows CE/i',$_SERVER['HTTP_USER_AGENT'])) { header("location: $mobile");}
elseif(preg_match('/Blackberry/i',$_SERVER['HTTP_USER_AGENT'])) { header("location: $mobile");}
elseif(preg_match('/PalmOS/i',$_SERVER['HTTP_USER_AGENT'])) { header("location: $mobile");}
elseif(preg_match('/PalmSource/i',$_SERVER['HTTP_USER_AGENT'])) { header("location: $mobile");}
elseif(preg_match('/SymbianOS/i',$_SERVER['HTTP_USER_AGENT'])) { header("location: $mobile");}
elseif(preg_match('/Opera Mini/i',$_SERVER['HTTP_USER_AGENT'])) { header("location: $mobile");}
elseif(preg_match('/Nokia/i',$_SERVER['HTTP_USER_AGENT'])) { header("location: $mobile");}
elseif(preg_match('/Samsung/i',$_SERVER['HTTP_USER_AGENT'])) { header("location: $mobile");}
elseif(preg_match('/vodaphone/i',$_SERVER['HTTP_USER_AGENT'])) { header("location: $mobile");}
elseif(preg_match('/Jphone/i',$_SERVER['HTTP_USER_AGENT'])) { header("location: $mobile");}
elseif(preg_match('/AvantGo/i',$_SERVER['HTTP_USER_AGENT'])) { header("location: $mobile");}
elseif(preg_match('/DoCoMo/i',$_SERVER['HTTP_USER_AGENT'])) { header("location: $mobile");}
elseif(preg_match('/DDIPOCKET/i',$_SERVER['HTTP_USER_AGENT'])) { header("location: $mobile");}
// redirect to pda page else continue
ob_start("ob_gzhandler"); ?>for testing purposes,, KB charges are annoying http://demo.opera-mini.net/demo.html?www.mysite.com
<?php
$mobile = "http://yourmobilesite.com";
$text = $_SERVER;
$var[0] = 'Mozilla/4.';
$var[1] = 'Mozilla/3.0';
$var[2] = 'AvantGo';
$var[3] = 'ProxiNet';
$var[4] = 'Danger hiptop 1.0';
$var[5] = 'DoCoMo/';
$var[6] = 'Google CHTML Proxy/';
$var[7] = 'UP.Browser/';
$var[8] = 'SEMC-Browser/';
$var[9] = 'J-PHONE/';
$var[10] = 'PDXGW/';
$var[11] = 'ASTEL/';
$var[12] = 'Mozilla/1.22';
$var[13] = 'Handspring';
$var[14] = 'Windows CE';
$var[15] = 'PPC';
$var[16] = 'Mozilla/2.0';
$var[17] = 'Blazer/';
$var[18] = 'Palm';
$var[19] = 'WebPro/';
$var[20] = 'EPOC32-WTL/';
$var[21] = 'Tungsten';
$var[22] = 'Netfront/';
$var[23] = 'Mobile Content Viewer/';
$var[24] = 'PDA';
$var[25] = 'MMP/2.0';
$var[26] = 'Embedix/';
$var[27] = 'Qtopia/';
$var[28] = 'Xiino/';
$var[29] = 'BlackBerry';
$var[30] = 'Gecko/20031007';
$var[31] = 'MOT-';
$var[32] = 'UP.Link/';
$var[33] = 'Smartphone';
$var[34] = 'portalmmm/';
$var[35] = 'Nokia';
$var[36] = 'Symbian';
$var[37] = 'AppleWebKit/413';
$var[38] = 'UPG1 UP/';
$var[39] = 'RegKing';
$var[40] = 'STNC-WTL/';
$var[41] = 'J2ME';
$var[42] = 'Opera Mini/';
$var[43] = 'SEC-';
$var[44] = 'ReqwirelessWeb/';
$var[45] = 'AU-MIC/';
$var[46] = 'Sharp';
$var[47] = 'SIE-';
$var[48] = 'SonyEricsson';
$var[49] = 'Elaine/';
$var[50] = 'SAMSUNG-';
$var[51] = 'Panasonic';
$var[52] = 'Siemens';
$var[53] = 'Sony';
$var[54] = 'Verizon';
$var[55] = 'Cingular';
$var[56] = 'Sprint';
$var[57] = 'AT&T';
$var[58] = 'Nextel';
$var[59] = 'Pocket PC';
$var[60] = 'T-Mobile';
$var[61] = 'Orange';
$var[62] = 'Casio';
$var[63] = 'HTC';
$var[64] = 'Motorola';
$var[65] = 'Samsung';
$var[66] = 'NEC';
$result = count($var);
for ($i=0;$i0)
{
header(“location: $mobile”);
echo ‘Mobile device detected … ‘;
break;
}
}
?>
Whats a good place to lurk around to pick up knowledge to create an iPhone/Blackberry friendly video delivery section of my site?
I have a website also, that I'm trying to do something similar. I use a lot of scripts, maybe too much, and on a mobile device, it may take too long, and someone would get bored.
If you have any ideas, I'd like to know what they are.
Hi OlyComputers,
try to check out my script called "redirection_mobile.js". It detects the User Agent and redirects to a mobile version if you're accessing a site from a mobile device.
In some case you want to redirect from a mobile device to a desktop version (like with a link "Go to the main site"), the script will handle that and once you finish your session, you'll access to the mobile version again.
You can find the source code on github here https://github.com/sebarmeli/JS-Redirection-Mobile-Site and you can read more details in one of my article here:
Sebarmeli, gday mate, try to rewrite the javascript to a serverside language, redirect is kind of pointless AFTER the page is loaded, javascript runs in the browser, and many handheld devices do not permit javascript, rendering a javascript redirect worse than useless, by making the downloaded page even larger
by satphone for FNQ really lovin the holiday
G'day almostbob, you're in saying that a server side solution is the best approach, but not always is possible or it becomes tricky to make it work perfectly when you have reverse proxy as Squid or CDN as Akamai in front the web server.
Regarding your concerns, you're missing few things: first, putting the JS at the top of the page as first script, the redirection is unnoticeable and you don't need to put the script in the mobile pages; second, the current status of mobile devices is not that bad, and JavaScript support is granted in almost every devices nowadays (iPhone 3&4, Android phones, Blackberry are the most common mobile devices accessing to the net).
Also the solution has been adopted in small and large sites and it seems working well.
G'day almostbob, you're in saying that a server side solution is the best approach, but not always is possible or it becomes tricky to make it work perfectly when you have reverse proxy as Squid or CDN as Akamai in front the web server.
Regarding your concerns, you're missing few things: first, putting the JS at the top of the page as first script, the redirection is unnoticeable and you don't need to put the script in the mobile pages; second, the current status of mobile devices is not that bad, and JavaScript support is granted in almost every devices nowadays (iPhone 3&4, Android phones, Blackberry are the most common mobile devices accessing to the net).
Also the solution has been adopted in small and large sites and it seems working well.
glad to hear,
wasn't aware proxy may cause problems, our experience of Akamai is v.positive
congrats on linear alignment of the ducks, and increasing my knowlege base
I think the best way to redirect mobile is with "Apache Mobile Filter" an open source and free project below an example:
PerlSetEnv AMFMobileHome /usr/local/AMF
PerlSetEnv AMFProductionMode true
PerlSetEnv ServerMemCached localhost:11211
PerlTransHandler +Apache2::AMFLiteDetectionFilter
RewriteEngine on
RewriteCond %{ENV:AMF_ISMOBILE} ^true*
RewriteRule ^(.*)$ http://m.foo.org [R=301,L]
you can also use AMFDetectRightFilter, AMF51DegreesFilter or AMFWURFLFilter is depend of which device repository you want to use.
For more detail: http://www.apachemobilefilter.org
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.