I want to redirect some URL to mobile version, if the user agent is a mobile.
Example :
klikkarir.com/jawa-pos/5215/lowongan-call-center-accounting-administration-pt-asia-teleservices-januari-2010.html
will redirect to :
m.klikkarir.com/5215/lowongan-call-center-accounting-administration-pt-asia-teleservices-januari-2010/
somebody help me.
I use http://detectmobilebrowser.com, and found it is the quickest and easiest way. It works quite well. This site generates server scripts automatically (php, perl, python, coldfusion, apache, jquery, etc.) that detects mobile browser and redirects accordingly. You can just copy and paste the code somewhere in your Index file.
The best method is to use WURFL to detect if a mobile device is hitting your page, several (php,java,c++) interfaces exist.
If you want to have simpeler but less accurate solution a quick useragent comparison might be sufficient, example.
You could try the Mobify Me service, there is a free version too.
Off topic, Start accepting answers
I believe there are three ways to go about this first detecting the screen size by number of pixels. I have tried this method and It works within parameters (HD and high resolution screens on mobile devices vs older low resolution desktop screens) another approach suggestion several places (http://www.inmotionhosting.com/support/website/how-to/mobile-redirect) is to use the .htaccess file. The idea here is to screen browsers on their acceptance of mobile MIME types - as I suspect there is no great push for full screen devices to take mobile MIME types this seems fairly reliable with the caveat that on tablet devices you may get the mobile version when they are capable of handling the main version. The third of course is to use the script solutions noted above.
Luck
DPR
Related
I'm trying to create a mobile version of an already existing website. I've tried to read the previous questions on SO but they don't entirely give me all the answers I'm looking for.
The options I have to make my site more mobile friendly are:
1) Convert my current website to be more responsive using CSS Media Queries:
I don't think this approach is suitable in my case, as the UI is fairly complicated and there is more information that I can properly show on a mobile. I will need to make sure I don't show some information that is not as relavent on the mobile.
2) Use php detection and serve up different versions of the same page by using different templates:
This way I can show only what is most useful on the mobile version and load up additional css which specific to mobile. A lot of websites including StackOverflow/Imdb seem to be going this route.
If i go this route, Is it necessary to have a subdomain such as m.mywebsite.com and serve a mobile version on that? Or can i just serve the current page with the same domain and url structure to mobile, only different html/css to better suit mobile. I would prefer to not have the subdomain(StackOverlow seems to be doing this). Also will this be confusing to users and something to avoid as a best practice? Most importantly, how will this affect the SEO for the site? Since some content is missing on the mobile, but present on the desktop, with the same url structure - will it trigger a red flag in search engines and penalize?
Thank you!
Regarding option 2:
There's no need to do the m.domain.com subdomain thing anymore. It makes life much more confusing.
I use the mobiledetect php library (there's a wordpress plugin for it too) to determine the client.
Then use conditionals in your php to provide different content for each.
Regarding indexing, the crawlers will not be flagged by mobiledetect as mobile browsers, so they will index your desktop version of the site. You want this, as the desktop version will no doubt have more content and provide increased page rank. The crawlers will never know that mobile-only content exists so there won't be any penalty.
I am building a website both mobile and pc version.But I am in a fix what should be used to do it.I have some question for which I am confused :
1. make a website with separate mobile version and pc version and render page depending on the device users use ?
2. Another is a single version website that would be all device compatible.this can adapt the layout according to the device resolution ?
3. if I do the thing I mentioned at point 1 , Can I built a site with wordpress and mobile version with jquery mobile ?
4. If I use a mobile compatible wordpress template I mentioned in point 2, can I use all other plugin form outside?
Please Help me.Thanks in advance.
So what should I do? building two different version ?? if yes, Can I
use the wordpress for both? do you know any plugin or way to make both
pc and mobile version in wordpress ?
This is what I did to achieve what you are aiming for:
Install WordPress as normal.
Add the Mobile Smart plugin - or possibly mobile smart pro.
Create a theme for regular desktop browsers and activate it in WordPress
Create a completely separate theme for mobile browsers. You may wish to use the sample code supplied with the plugin; I created my own from scratch.
Change the settings of Mobile Smart so that it knows which is your mobile theme
Add content and enjoy!
Please read the documentation with Mobile Smart. It is important to understand what it is doing.
Also, remember that your two themes are completely separate, in completely separate directories, so you can use completely different functions.php, headers, footers, scripts, etc. as necessary.
Quote from https://github.com/ChristianPeters/crispy-mobile that I agree with:
CSS media queries are nice. But not for mobile.
They just add up code you send to your clients instead of reducing it for mobile devices.
Imagine you want to make a responsive product page.
Do you really want to deliver a big 90KB product photo, if a 15KB photo would already fill the mobile screen?
Do you really want to compute personalized product recommendations if they are just hidden afterwards?
Do you really want mobile devices to download and interpret your whole stylesheet if half of the interface elements are going to be hidden anyway?
You don't.
If you start mobile-first, don't let your mobile performance be affected by additional desktop features.
Be kind, serve the clients exactly what they need.
If the mobile internet was fast enough and limits weren't as low as they are, I would probably think the other way. But we have to wait few years for that. For now in my opinion it is better to build seperate mobile website. But it is also very useful to have responsive design - that can't hurt even with separate mobile design.
I'm going to avoid too much subjectivity here, as everyone will have a different opinion.
Yes, I have this approach working well on my company website (www.achaleon.com). I was involved in the beta testing for a WordPress plugin called Mobile Smart Pro. It implements elements from a bigger open source project to detect mobile devices and apply a completely different theme to the mobile site. It has the advantage that you can create two completely separate themes and optimise every aspect of them for the device and the context in which it is being used. You can even serve up different content if you wish in the two versions.
This approach requires careful planning and thorough testing. It is also more demanding for the designer. I have friends in the WP community who have built sites this way. My understanding is that this requires stronger programming skills (you need to plan far more carefully than with a standard 'static' css implementation). They used cssgrid.net as a start point
I have a mobile website. I need to detect mobile web browsers by screen size or resolution and display the website accordingly.
Can anyone help with detecting web browser and screen size?
Also, how can I open my website according to the screen size?
I suspect that you don't mean a WAP browser but rather a mobile browser. (As you've tagged your question with iPhone & Android.)
You need to use a device capability database to do this on the server side.
There are lots of options (see other answers and link below), but as you're using ASP.NET, I'd recommend looking at http://51degrees.codeplex.com/. This uses WURFL data and is the defacto replacement for MDBF (which used to be the best asp.net solution).
More information on using the 51degrees solution can also be found in blog post by Scott Hanselman and Steve Sanderson.
There are lots of other similar questions about this here on SO: https://stackoverflow.com/search?q=detect+mobile+browser+capabilities
For the detection part, I recommend to use WURFL. There is also a similar question/answer on SO.
For the resize part, I recently did something similar for a web application of us. I tried to keep it really simple and make the elements floating/dynamic resizing.
To test it, there are several emulators available, I used those for BlackBerry, Android, and Windows 7 Phone.
You can use DeviceAtlas for this: http://deviceatlas.com/
I use Mobile Device Detection and Redirection from 51 degrees.
Here are the properties that you can use:
Request.Browser.IsMobileDevice
Request.Browser.ScreenPixelsHeight
Request.Browser.ScreenPixelsWidth
I have an existing website that I need to develop a small portion of for mobile devices. For reasons that are not in the scope of this entry - I am using the Microsoft platform and tools - VS2008, ASP.Net, VB.net, .Net AJAX Framework, jquery.
I have 2 questions:
What is the best page size (Height and Width - mostly width) to make the pages as I do not know what devices will be accessing the mobile portion of the site. I can detect if they are mobile devices and direct them accordingly to the mobile portion but I do not want to write customized content for each mobile device - so I would like to create something that will be sort of a one size fits all mobile app.
Any suggestions or links for Mobile Web development in the .Net 3.5 framework environment?
Thanks
Your average mobile device still has a very small screen resolution.
A quick google found a number of sites listing this sort of thing, or pointing to lists, the best one I saw was:
Cell phone screen resolution by Brand and Model
or for a better idea of average:
Cell phone screen resolution, sorted by size
As for building the mobile version, I'd start with System.Web.Mobile, and work my way on from there - taking in System.Web.Ui.MobileControls, and also their walkthroughs.
And can I say "thank you for thinking of us"? As a user of the "mobile" internet, it's always a pain to come across a heavily javascript enabled site (I'm looking at you SO) that doesn't work on my phone (Windows Mobile 6.1, with Opera Mobile 8.5 installed) because of limited (or percived limitations) in the JS support.
Just had another thought - with everyone talking about DRY - looking into an MVC framework would be a really good thing to do - then your controllers can all be the same, and just return a modified view based on the browser caps - Scott Hanselmann included a bit about this in his MIX talk, all good stuff.
I knew I had more here.
Scott also had a podcast (ASP.Net and the mobile web) on this, and the Mobile Device Browser Files are on codeplex
We are developing a mobile app right now as a separate application. The reason for this design decision is that we won't use our existing pages because they contain too much information. So while Scott has a point about being "DRY" to an extent, it is not an accurate generalization to make.
Mobile apps should be optimized for really small screens and low bandwidth. Reduce images, JS files, etc. as much as possible. This will improve the user's experience. The best thing you can do is to get a mobile device or some simulators and check out how they perform/look on those devices. Here's a cool one for iPhone.
Also, keep in mind that many mobile users only use mobile apps for a few minutes - and only to get to critical information quickly. Your app should make it easy for the user to access only the information they need with the lowest amount of few clicks and page loads.
Ideally you should be developing pages that work regardless of screen size. Creating separate pages for mobile devices means having to update things in two places when they need to change. This goes against the principle of don't repeat yourself. Create a stylesheet using the handheld media type to serve your content to mobile devices. This allows you to reposition the elements into a single-column format quite easily. Just beware that many mobile devices will report to the server that they accept both handheld AND screen media types, because they are trying to offer a consistent user experience with the desktop. You will likely need to override some screen rules in your handheld stylesheet.
There are several distinct display sizes that is worth considering when you build up your XHTML+CSS templates.
They are as follows (width in px):
120 - I suspect there is no need to worry about smaller displays than 120px. Less than that would probably have to be served in WML anyway.
128
176
240
320 - probably the largest width you need to worry about at the moment.
All variations should be suited with these widths. Also consider setting the width with something around 10px less than the view port (e.g. 240 must be 230). Same goes for images. That is necessary because of the scrollbar which is shrinking the viewport even more on many mobile browsers.
There is no need to worry about height, as with normal browsers, that is not a concern - one can always scroll down. However, a good advice might be to keep pages relatively short.
Oh, and I will point you out WURFL, although I haven't used it myself, perhaps you might find it useful.
MSDN makes it sound so easy to detect a mobile browser:
if (Request.Browser["IsMobileDevice"] == "true" )
{
Response.Redirect("MobileDefault.aspx");
}
Actually, it looks like you can also just check Request.Browser.IsMobileDevice. But how does this actually work? I don't even have a .browser file... what's going on behind the scenes here? Are there some built-in defaults for ASP.NET 2.0?
A number of *.browser files are shipped with .NET:
C:\Windows\Microsoft.NET\Framework\v2.0.50727\CONFIG\Browsers
The runtime uses regular expressions from the *.browser files to match against the incoming User-Agent string, and then sets a bunch of properties based on each match it finds (there can be several in the hierarchy).
If you need in-depth mobile device support, consider installing the MDBF, which adds support for about 400 devices:
http://mdbf.codeplex.com/
Now, after 4 years, it's even more simple
Request.Browser.IsMobileDevice
Since for most sites, it is actually the size of the screen that matters and not so much the capabilities (at least when talking about modern phones with things like Safari and Chrome on them) wouldn't checking the resolution make the most sense?
Request.Browser.ScreenPixelsHeight
and
Request.Browser.ScreenPixelsWidth
I wouldn't rely on the MSDN link, there is no common standard unfortunately for mobile browsers and many try to mimic their non-mobile counterparts. Also it will return true if it doesn't recognize. See this link.
My current understanding is that there's just one exact solution to the problem of detecting whether a browser is mobile and next detecting its real capabilities. This solution is ScientiaMobile's WURFL (http://www.scientiamobile.com). Which, as of Aug30, is no longer free for every use. WURFL is now released with an ASP.NET API under AGPL. The data repository also comes with a specific license that disallows both copying and using with APIs different from the standard one (unless one purchases a commercial license).
So for practical purposes other approaches such as 51Degrees cannot be used with more recent and future versions of the WURFL repository and this will make it difficult for 51Degrees to detect new devices (Windows Phone 7.5, for example).
As for MDBF (a dismissed project), it may still work to detect whether a device is mobile (much better than the IsMobileDevice in ASP.NET). It is not entirely reliable as far as properties of the device are concerned. It insists that my HTC Desire Android has a 240x320 screen size, which is patently incorrect.
My company bought a WURFL license and we're absolutely OK with that.
Issues has been resolved while I added 51Degrees, just add 51degrees using Nuget thats all. See more here https://51degrees.codeplex.com
Simply use below code,
if (Request.Browser.IsMobileDevice)
{
Response.Redirect("MobileDefault.aspx");
}