HTML and CSS

how to redirect to mobile page?

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jun 2008

Posts: 568

Reputation: OlyComputers will become famous soon enough

Solved Threads: 34

OlyComputers OlyComputers is offline

Offline

Posting Pro

how to redirect to mobile page?

Dec 19th, 2008

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?

-This post is provided without warranty, emotion, or a conscience. Hope it helps-
*I'm an egomaniac: I love reputation points*

•

Join Date: Oct 2008

Posts: 76

Reputation: ccube921 is an unknown quantity at this point

Solved Threads: 6

ccube921

Offline

Junior Poster in Training

Re: how to redirect to mobile page?

Dec 20th, 2008

Help with Code Tags

(Toggle Plain Text)

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:

Help with Code Tags

(Toggle Plain Text)

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.

Last edited by ccube921; Dec 20th, 2008 at 11:31 pm.

•

Join Date: Dec 2004

Posts: 4,193

Reputation: peter_budo has much to be proud of

Solved Threads: 485

peter_budo peter_budo is offline

Offline

Code tags enforcer

Re: how to redirect to mobile page?

Dec 21st, 2008

@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

Learn to see in another's calamity the ills which you should avoid.
Publilius Syrus
(~100 BC)
LJC - London Java Community, Graduate & Undergraduate Software Development Community, JAVAWUG (Java Web User Group), The London Android Group

•

Join Date: Jun 2008

Posts: 568

Reputation: OlyComputers will become famous soon enough

Solved Threads: 34

OlyComputers OlyComputers is offline

Offline

Posting Pro

Re: how to redirect to mobile page?

Dec 21st, 2008

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.

-This post is provided without warranty, emotion, or a conscience. Hope it helps-
*I'm an egomaniac: I love reputation points*

•

Join Date: Dec 2004

Posts: 4,193

Reputation: peter_budo has much to be proud of

Solved Threads: 485

peter_budo peter_budo is offline

Offline

Code tags enforcer

Re: how to redirect to mobile page?

Dec 21st, 2008

One possibility, however it may not work well with less know browsers

•

Join Date: Jan 2007

Posts: 3,210

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 164

MidiMagic

Offline

Nearly a Senior Poster

Re: how to redirect to mobile page?

Dec 26th, 2008

Just make a page with two text links on it:

View on mobile phone

View on full size computer

Daylight-saving time uses more gasoline

•

Join Date: Oct 2008

Posts: 76

Reputation: ccube921 is an unknown quantity at this point

Solved Threads: 6

ccube921

Offline

Junior Poster in Training

Re: how to redirect to mobile page?

Dec 26th, 2008

Hers one, it returns the screen resolution(first width, then height):

Help with Code Tags

(Toggle Plain Text)

<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

Last edited by ccube921; Dec 26th, 2008 at 4:27 pm.

If I have been helpful add to my reputation!

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: how to redirect to mobile page?

Dec 29th, 2008

Or you can simply set different style sheets for specific media types. Like for example:

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
<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>
<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>

•

Join Date: Jan 2007

Posts: 3,210

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 164

MidiMagic

Offline

Nearly a Senior Poster

Re: how to redirect to mobile page?

Dec 29th, 2008

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!)

Last edited by MidiMagic; Dec 29th, 2008 at 10:21 pm.

Daylight-saving time uses more gasoline