Redirecting To Mobile?

[Kervtuza]

Hey Guys,

 

So I am a web designer with basic programming knowledge.

 

I am wondering what the easiest way for me to have one of my sites redirected to a mobile version would be? Also, lets say I own www.mysite.com would I need to register a new domain as mobile.mysite.com? or does ownership of mysite.com give me access to www. and mobile.?

 

Thanks

[falkencreative]

the "mobile.mysite.com" is just a subdomain -- it would need to be set up with your hosting, but it doesn't require any additional registration or payment.

 

For a mobile redirect, you might want to check out http://detectmobilebrowsers.com/.

 

Personally, though, if you are going to do a mobile version (and assuming the content is changed/simplified between the two versions) please give the mobile user a way to view the full site. As a potential mobile user, I like the ability to have the web -- the FULL web -- available on my phone. I don't want to view your website and get some watered down version which is missing the essential info I was looking for. Pet peeve of mine.

[Andrea]

Personally, though, if you are going to do a mobile version (and assuming the content is changed/simplified between the two versions) please give the mobile user a way to view the full site.

 

I agree with that. Now that I'm finally a proud owner of an iPhone and iPad, I never look at anything but the full version. Why deprive myself.

 

Before, I had some cheap phone that made any browsing so cumbersome that I just didn't. but even then, properly designed websites still gave me what I needed. It was little things that caused issues, like people using images to display important info like phone numbers as images, that I could not see on that not-so-smart phone.

 

Mainly, design a website well,it'll work on computers AND mobile devices.

[Kervtuza]

Yeah I have taken courses on usability, so giving the option of both is a must. The reason I am looking for a mobile version it because I am looking to get a little more creative with the design. I am working on an elastic design, not sure if it will work yet or not.

 

What I am trying to do is have a fixed header and footer with width: 80%; height: 20%;, the content area would also be width: 80%; and height: 60%; but since the site is farely basic, instead of having a new .html page for each nav item there will be 4 divs for the content area that will slide from left to right using jquery.

 

I haven't started testing this theory yet, but my concerns are:

 

1. On a mobile devices where they are normally longer and narrower the layout will look wrong.

 

2. I am using farely large font-size as if it were the design of a billboard, so as the layout is expanded on a bigger moniter, I would like the font-size to increase at the same rate.

 

Any ideas on how I can overcome these 2 issues?

[beermantm]

I found this to work the best

 

<?php
function isMobile() {
   return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
}
// If the user is on a mobile device, redirect them
if(isMobile())
   header("Location: http://NAME OF YOUR MOBILE LINK GOES HERE");

else header("Location: http://NAME OF YOUR FULL SITE LINK GOES HERE");

?>

[grabenair]

I think what you are looking for is what we now call responsive web design. You add css in a media query to change the postion and size of elements. Do a Google search on responsive web design there is a lot of info out there on how to do it. Before you do you can check my site, link at bottom, and nav to the responsive page, home/readmore/here, drag the window to make it smaller to see if this is what you are looking for.

[LSW]

I despise being forced into mobile sites, especially if you then choose full site and it still forces you into the mobile site.

 

A well designed site using correct code and flexible design with accessibility in mind does not even need a separate mobile site.

[Kervtuza]

So instead of making a mobile design, I am trying to make a flexible layout, but I am running into some problems.

 

If you look at http://www.jasonkervin.com/projects/duncanrobotics/index.html you can see my source code.

(don't mind the content, I am still just working on the layout.)

 

The site has 3 areas, with a <section> for each nav link.

 

<header>

</header>

 

<div id="content">

<section id="home">

</section>

</div>

 

<footer>

</footer>

 

The problem is I have the <section id="home"> set with position: absolute; and when you minimize the width of browser, the height of <section> expands but the height of content does not so it ends up overlapping over the footer.

 

Any ideas on how I can fix that, maybe with js?

[falkencreative]

Why are you using position:absolute for that section? Seems like you really don't need that?

[Kervtuza]

I have 4 <section> elements, they are stacked on top of each other, when you click one of the nav links, that section will fade in with jquery and the 3 other sections will fade out.

 

I can't seem to stack the <section> elements without making them absolute.

[falkencreative]

Ah right, that makes things a little more difficult. If you are using media queries, you should be able to adjust the height for specific screen widths?

 

More info: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

[Moloney]

Is there any SEO consequences to hiding the stacked absolute section?

 

Personally I like this method of introducing new content because the page doesn't need to refresh but I always wondered if there is an SEO consequence. I think this site is a good example.

 

Anybody have experience of this? [ I've seen google's own videos on all that stuff -- difficult to get a clear cut answer]

Edited April 16, 2013 by Stephenius

[grabenair]

You might try making a tabbed panel for the links with css. If the user has javascript disabled they will not be abel to nav your site. Check it out here http://css-tricks.com/css3-tabs/

[Kervtuza]

Stephenius, I wouldn't think there would be any SEO consequences since to my understanding SEO is based on the markup, I could be wrong though.

 

Grabenair, I have thought about the problem of javascript being disabled, once I have finished this prototype I may try to create a work around to fix that, is there a method to use an alternate stylesheet if the client has javascript disabled?

 

Ben, I have not tried the css3 media query method yet, I believe this would work pefect for the initial loading of the page, but if you minimize the browser window will it activate the alternate code? or will this only happen when the pages loads.

 

Thanks everyone for the ideas and support, such a great online community!

[grabenair]

I would not call it a work around. But the way that I learned is to build the site to work with out javascript then add javascript to get the functionality that you want. This way your site will degrade gracefully to older browsers and to ones with javascript disabled. That is way I would use tab panels in your case. In older browsers and ones with out javascript enabled your site will look fine. Then you can add javascript/jQuery to get the effects that you want. Anyway this is my personal work flow.

[falkencreative]

Ben, I have not tried the css3 media query method yet, I believe this would work pefect for the initial loading of the page, but if you minimize the browser window will it activate the alternate code? or will this only happen when the pages loads.

It happens at both times -- when the browser loads, and also when resizing. That makes it convenient for testing purposes.

[Edscript]

I think what you are looking for is what we now call responsive web design. You add css in a media query to change the postion and size of elements. Do a Google search on responsive web design there is a lot of info out there on how to do it. Before you do you can check my site, link at bottom, and nav to the responsive page, home/readmore/here, drag the window to make it smaller to see if this is what you are looking for.

 

I must say, your responsive design is simplistically genius, grabenair! I know its almost a year later (since this post was posted), but I had to tell you that I admire your effort. I have a thing for trying to keep the same webpage for all devices when possible, and kind of get off when I see a responsive page. But you did do a little cheating by having a separate 'responsive' layout for the smaller devices, but still, I would say you at least have covered ALL the devises (with maybe only the necessity of two CSS media style layouts.

 

Just had to tell you because: 1. I am still a beginner nerd and I get off on simple things, and 2. You always seem to be going out of your way to try to help out, and although it seems you sometimes try to hard to help out, you seem to genuinely be trying to help out {nothing wrong with helping out to promote yourself, but sometimes that is the ONLY reason a person posts responses - makes it kind of weird, impersonal, and unintuitive ( no depth)}. Most people on this site do seem human, so I felt like complimenting those who persistently look to solve our problems, of which I think you are one of them.

 

 

 

 

 

[trenthanover]

I think that you are talking about responsive web design for that you can add CSS in a media query to change the postion and size of elements...