[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 313
  • Last Modified:

I want to add my php websites a mobile version Any idea where to start?

I want to add my  php websites a mobile version Any idea where to start? or a good refernce for that area?

Thank you!
0
Nura111
Asked:
Nura111
  • 21
  • 20
2 Solutions
 
CKY092Commented:
0
 
Nura111Author Commented:
mmm what is that exactly Is it a framework to develop a mobile site? If you are familair with that Can you explain what does it do?
0
 
Nura111Author Commented:
for exmple tehre is the next tool:http://www.google.com/gwt/n
 that convert it to a site that weill be competable to mobile how can I set up my website to show this kind of website for mobile users?
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Darude1234Commented:
There is enough information online about this, here are some examples:
http://www.hand-interactive.com/resources/detect-mobile-php.htm
http://www.russellbeattie.com/blog/mobile-browser-detection-in-php
CSS media type 'handheld' for applying different stylesheets for each platform: http://www.w3.org/TR/CSS2/media.html
0
 
Nura111Author Commented:
what Im trying to do I created a subdomain mobile.domain.com
but I dont know hoow to implement the following issue: when the user will go to domain.com to check the browser type (for that purpose I can use one of the links you have provided)   but I dont understand how to redirect it to mobile.doamin.com if its been founf that the browser is a mobile.

is it throw the hatacees or using php in the domain.com main file(its index.php in my website)
0
 
CKY092Commented:
What language are you programming in?
0
 
Nura111Author Commented:
php
0
 
CKY092Commented:
You can do something as simple as:
<?
if(is_mobile()){
    header('Location: mobile.domain.com');
}else{
    include('desktop_version.php');
}
?>

Open in new window


With the is_mobile() function determining the user agent.
0
 
CKY092Commented:
Line 3 may need to be:
header('Location: http://mobile.domain.com');

Open in new window

Didn't test the code, but that should give you an idea of how to redirect based on user agent.
0
 
Nura111Author Commented:
where would I write it in the index.php file ?
0
 
CKY092Commented:
If you're using the index.php file for content, you could remove the else and just put the following at the very top of the index file, before any HTML.
<?
if(is_mobile()){
    header('Location: http://mobile.domain.com');
}
?>

Open in new window

Then, if it's not a mobile device, your index page will display as usual.
0
 
Nura111Author Commented:
any suggestion of hoe to check the is_mobile()) ?
0
 
CKY092Commented:
Here's a very simple function:
function mobile(){
	$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
	if(strpos($ua,"mobile")){
		return true;
	}else{
		return false;
	}
}

Open in new window

There are more complex functions, such as: http://detectmobilebrowsers.mobi/
0
 
CKY092Commented:
And the function name for the code above would need to be changed to is_mobile, just FYI.
0
 
Nura111Author Commented:
Do you know a good tool to check how the website look in diffrent kind of mobile browser?
I know http://validator.w3.org/mobile/ but its only give suggestion I want to actullly see the website as if it on mobile browser
0
 
CKY092Commented:
You can try: http://browsershots.org/, however I don't think that's exactly what you're looking for.

If you're using FF with the web developer plugin, you can set your browser size to the dimensions of the device you're interested in. You can also change the user agent, if necessary. Ultimately, it's best to view it on a live mobile device, if possible.
0
 
Nura111Author Commented:
<<If you're using FF with the web developer plugin
what do you mean by that?
<<on a live mobile device, if possible.
isnt there like a lot of diffrent ones?
0
 
CKY092Commented:
If you give me the domain, I can send you a screenshot for an iPhone 4 and an iPad 2.

Additionally, the jQuery mobile (http://jquerymobile.com/) framework handles quite a bit of cross-browser compatibility for you. The jQM team tests on a multitude of mobile browsers and gives you a grade for how each one looks with jQuery mobile.
0
 
CKY092Commented:

<<If you're using FF with the web developer plugin
what do you mean by that?
- Meaning FireFox with the Web Developer Add-On (https://addons.mozilla.org/en-US/firefox/addon/web-developer/)


<<on a live mobile device, if possible.
isnt there like a lot of diffrent ones?
- Yes, there are tons. That's why I like jQuery Mobile. I personally like to see what my stuff looks like on a mobile device, even if I can't test all of them.
0
 
Nura111Author Commented:
I think I dont understand a main thing what is the make a site to a mobile site?
0
 
CKY092Commented:
Your HTML and CSS are going to be the major differences between a desktop site and a mobile site. The reason I mentioned jQuery mobile is because they already test their HTML and CSS on multiple mobile devices. You just use their library and layout methods and you an be relatively confident you'll have a good looking result on the mobile device.
0
 
Nura111Author Commented:
Im trying to use the user agent extension of Firefox to test the website for mobile compatibilty how am I suppose to use it ?
when Im chossing the device from tool and than enter the url nothing happens
0
 
CKY092Commented:
Are you trying to test the user agent functionality or just test what the site looks like in FireFox?
0
 
Nura111Author Commented:
Im trying to see how the website look in a diffrent mobile devices
0
 
CKY092Commented:
Using the user agent as a redirect won't show you what it's going to like on a mobile browser. It just allows you to change your content based on the device.

Using the user agent extension will only allow you to verify that your user agent redirect code is working properly.
0
 
Nura111Author Commented:
what is exctly user agent redirect code can you provide an exemple? so how can I test how my website going to look didnt you suggested me before to use firefox for that?
0
 
Nura111Author Commented:
Ok ignore my former question so I understand how to detect the mobile browser  by chacking the $_SERVER['HTTP_USER_AGENT'] .
but what is my next step in order to optimize the wbesite for every diffrent  mobile?
Thank you!
0
 
CKY092Commented:
Again, I'd point you to jQuery Mobile or a similar framework. Now that you've got your redirect working properly, you need to style your mobile site for mobile devices.

If you aren't interested in jQuery Mobile, you could also try using CSS media queries to do condition formatting.
0
 
Nura111Author Commented:
yes Thank you but my problem is Im trying to understand what the results shohuld look like and I dont get it are you familar wiht a good free tool that I can use to see how my website look like in diffrent mobile device?
0
 
Nura111Author Commented:
In general is the way its work is that I should create a diffrent custom website (doesnt have to be a new one but I mean changed either in css or other issues) for every mobile device
so for exmpl;e in your suggetsion
(is mobile() {
I will send it here using header(diffrent location depend on the user agent)
}
0
 
CKY092Commented:
You can try this: http://www.gomez.com/cross-device-website-compatibility-test/
Doesn't test all of them, but it's a start.
0
 
Nura111Author Commented:
Ok last question I can open a new question for that if you would like the detecting  the USER AGENT is there ant other way to do it but checking for every page sepertly? I was trying to add a script to every page as recomanded int he following article:http://www.mikeindustries.com/blog/archive/2005/07/make-your-site-mobile-friendly

but its not really working for me I changed the check method but its still not working
0
 
CKY092Commented:
The code we used before should work for every page, as long as it has access to the is_mobile function.

<?
if(is_mobile()){
    header('Location: http://mobile.domain.com');
}
?>

Open in new window


Does that answer your question?
0
 
Nura111Author Commented:
yes but I mean in that way I will have to enter it manully to every page of my website correct? Im looking for a way yo add it somewhere manully once like it was suggested in the article
0
 
CKY092Commented:
You could do it either way. Either add it to each page, or do the global prepend as described in the article. Assuming access to the the function, the redirect will work for either scenario.
0
 
Nura111Author Commented:
the problem is that its not working ...the preappend
nothing is happening
0
 
CKY092Commented:
There's many places you could have an issue, as the prepend method has several steps. Have you tested it via adding the script to another page? Do you have a connect file that is used throughout the site? Or possibly a bootstrap file?
0
 
Nura111Author Commented:
<<<Have you tested it via adding the script to another page?
what do you mean which other page? I was taking to my webserver to set it up correctly via php.ini
And I changed the code so the check will be diffrent im trying to test it on my blackberry and its not doing anything

<<Do you have a connect file that is used throughout the site? Or possibly a bootstrap file?

sorry what is that mean?
I have an index file for the home page and diffrent files for other pages
function callback($buffer) {
	if (strpos($_SERVER['HTTP_USER_AGENT'],'BlackBerry') !== false) {
	//	$buffer = str_replace('http://www.locksmith-dalycity.com', 'http://mobile.locksmith-dalycity.com', $buffer);
		$buffer = preg_replace('/[\n\r\t]+/', '', $buffer);
		$buffer = preg_replace('/\s{2,}/', ' ', $buffer);
    		$buffer = preg_replace('/(<a[^>]*>)(<img[^>]+alt=")([^"]*)("[^>]*>)(<\/a>)/i', '$1$3$5<br />', $buffer);
		$buffer = preg_replace('/(<link[^>]+rel="[^"]*stylesheet"[^>]*>|<img[^>]*>|style="[^"]*")|<script[^>]*>.*?<\/script>|<style[^>]*>.*?<\/style>|<!--.*?-->/i', '', $buffer);
		$buffer = preg_replace('/<\/head>/i', '<meta name="robots" content="noindex, nofollow"></head>', $buffer);
	}
	return $buffer;
}
ob_start("callback");
?>

Open in new window

0
 
CKY092Commented:
I hadn't thoroughly looked through what that tutorial code was trying to accomplish. That isn't going to give you a very good looking mobile site. All it's going to do is strip it down to text. Have you considered hiring someone to build your mobile site for you?
0
 
Nura111Author Commented:
Ok its working now and you are right Im still thinking about what to do but I wanted to check that method I might do that as well I'm kind of trying to maybe learning how to do it myself you suggested j query mobile but im not quite sure I understand the method  does it mean i will need to create a mobile site for each website or its going to change the desktop version ?
Are you offering yourself ? are you a mobile sites developer?
by the way firefox does show you the results from the mobile browser when using the USER AGENT tool
0
 
CKY092Commented:

does it mean i will need to create a mobile site for each website or its going to change the desktop version ?
- You would be creating a new site, formatting for mobile devices.


Are you offering yourself ? are you a mobile sites developer?
- I would consider the project, if you're interested. You may email me at nick@nickhough.co if you'd like to discuss it more.


firefox does show you the results from the mobile browser when using the USER AGENT tool
- No, it will not display as if it were a mobile browser.

0
 
Nura111Author Commented:
OK Thank you very much!
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 21
  • 20
Tackle projects and never again get stuck behind a technical roadblock.
Join Now