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.
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 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).
There are two common ways to run mobile version of a website:
Detecting the mobile browser by server-side scripting to display mobile theme.
Having a separate subdomain such as m.domain.com or mobile.domain.com.
Which is better in action? In both cases, I think mobile search engines fairly index the mobile website. What are pros and cons for each method?
Option 1: This is more user-friendly for a few reasons. The biggest is probably link sharing and bookmark syncing. If a user on a desktop browser gets shared a link to a m.domain.com, it won't look very good, and non-savvy users will get annoyed. There are also certain users that prefer all pages to be in desktop mode (even on their mobile browser,) so all they need to do is adjust their user agent string on their mobile browser.
Option 2: Some people find this easier, but I can't think of a good reason for it with modern web development. ASP.NET MVC4 makes it really easy to create separate views for the same URL and there's simple functionality to switch between mobile and desktop mode. I would stay away from the subdomain option unless you find a very good reason to use it.
I'm not a big fan of displaying mobile theme/css since it'd be completely different than the regular css.
Also I think search engines will like that your site has more content since the mobile site will be considered as "more content"
Since they're seperate it'll be easier to deal with one or the other.
Negative is it's more work. Even though it's less complicated.
These are my 2 cents.
I think responsive design is a simplest solution without any need of sub-domain or extra effort to put on how it looks on many different kinds of devices!
Responsive design is do-and-forget-it kind of design. once it is done properly and tested well, not matter what kind of device you are using to browse, it always makes look and feel better way. No need of separate development for multiple views.
I feel media query is the way to go for small websites. http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
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