I found this great tutorial that explains designing a mobile website and I've decided to give it a try. My question is how do I define mobile pages on my server so that they do not conflict or show up on the desktop version of my site. For instance, in the video they use index.html, but since I obviously already have an index.html on my server how would I get a mobile device to direct to a "mobile index" page?
You would need to employ browser or device detection techniques. A few ways you can do this is via JavaScript, PHP, or if you're using Wordpress, you could use a plugin.
CSS-Tricks has a nice little snippet that may be useful to you:
http://css-tricks.com/snippets/javascript/redirect-mobile-devices/
Or if you want to learn the PHP or WordPress side of things, heres another good link:
http://mobile.tutsplus.com/tutorials/mobile-web-apps/mobile-browser-detection/
Its not a server thing. Try messing around with the user agent to detect a device.
Another option is detecting a screen resolution (small sizes > mobile page, big sizes > desktop page. It really depends on layout though).
Related
i'm a little new to this topic, i've always used to work with responsive design to do this but for a new situation i have to change the content that will load on Mobile Devices than regular PCs, My Control Panel is Direct Admin on Windows server, what i should i do?
check out this answer on how to redirect mobile users to a different site - Redirect mobile devices to alternate version of my site
In addition to this I'll also chime in with the fact that people will browser most sites on both the mobile and the desktop, starting the journey on one and finishing it on another. They might also find something useful on one which they share online, only for another device type to be used when trying to read the content.
These are all reasons why we argue for content parity.... the same content for every instance. I'm sure your client believes they have a good reason for this, but I would encourage them to re-evaluate the decision before starting this process.
I want to know how to design a website. The website is shown normal on the web and mobile, but I need to know which one is better?
Design two different templates (one template for mobile and the other one for a normal monitor).
Check online through the user's device to see if its using a mobile device so I can change the stylesheet.
Is this correct? If there are any ideas, please tell me.
Thanks
I would go for 1. Normally you don't want to show as much content on your mobile website as your "normal" desktop website. But include a link to your normal website from your mobile website.
I would go for one, as axelios suggested, I would include a link.
I, as a user, find extremely annoying websites that refuse to display the full site because they "recognised my browser as a mobile browser". Several newssites do that, which has eventually diminished the number of news I read, and some shops did so, which means I don't visit their sites anymore... so I strongly discourage the second solution.
I need to build both a website and a mobile site (starting from scratch). The website will include a registration/login, user upload, and sharing feature. I would like to have all of these features available in the mobile site as well. Any recommendations on the best starting approach would be appreciated. For example, should I create the website from start to finish before even starting to think about the mobile site.
Thanks
If you design your server side code correctly, you should be able to use those components no matter where the client is. You would just have to write a thin wrapper for each different interaction type, e.g. xml vs json.
Its hard to say more without knowing exactly what you are doing, and how many people you have working on this? You can finish the desktop version before you start the mobile, but you don't have to. Depending on team size/skill you could develop both concurrently...
I have an existing website running. I want this site to be able to be viewed on mobiles smart phones as well. I am ready to shave off some stuff, but would like to know how can I test this and are there any tools/guidelines on how to repurpose the site to be best viewed on mobile phones ? How to detect on the web site whether a mobile phone or a PC is hitting the site and accordingly serve the appropriate content.
There are few factors to consider such as:
- screen size
- touch vs non-touch
To detect whether the mobile phone hitting your site, you can simply verify the user agent.
There is a good article on this at A List Apart which will answer your implementation questions: Put Your Content in My Pocket
You can test by setting the user agent of your browser to that of mobile device. This can be done in safari under the develop settings, or firefox has various plugins.
And a tip, don't use anything that requires hover functionality. Touch screens don't hover.
You will find out it's a strange new world at http://mtld.mobi/
First decision you should make is which mobile platforms you want to support, then start coding...
As some one mentioned http://mtld.mobi/ is the best place to start for resources but for testing I would use http://ready.mobi that will test and debug your site and provide interface to viewing your website in mobile platforms.
First you need to decide what platforms/browsers you are going to support. If it is only smart phones like Android/Iphone/Blackberry it would be a pretty safe bet that as long as the website works in crome and isn't VERY javascript intensive and the site is catered for smaller screens it would be fine.
That is the theory in practise mobile is mobile and real world testing is the only way to go for 100% coverage.
I have a website that I want to make look good from a non-mobile browser, but make very usable from a mobile device.
I'm thinking I'm going to detect if the user is likely using a mobile device, and if they are, redirect the first hit to a page that says something like: "It looks like you're viewing this page on a mobile device. Would you like to view the mobile version?" Based on the user selection, I'll set a cookie. (Would this be annoying, or helpful?)
But I'd also like to make sure that if I miss someone who is mobile browsing (if I think they're non-mobile, but it turns out they aren't), I provide some way to switch to the mobile version. Also, if I detect someone is mobile, but they'd prefer to browse the full non-mobile site, I need to allow that, too.
I'm leaning toward having a mobile and non-mobile version of every page on the site, just presenting the data differently (and with a lot less images, etc) for the non-mobile version.
Anyone who's been through this, have advice? Any links to sites that do this right?
I'd suggest using WURFL for the detection part.
Also, lots of good reading material about such practices on Mobiforge