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
Related
So, I worked on responsive sites before but I'm on my way to build my first responsive site now. I opened some articles on the subject, and boom: Mobile First.. I have no idea how I skipped that concept till now. From the beginning I cant seem to understand whole thing (except that number of mobile devices will take out soon desktop computers) and here is why.
How I'm supposed to know how my site will look for desktop version, if I design it for mobile first? I mean, on the smallest device I will have to eventually hide some content etc, how I'm supposed to know what to hide and move things, when I don't know how the site will look on bigger screen? Isn't stripping the things easier?!?!
For me (right now), the Mobile First concept looks to me like building pyramid upside down.
Most implementations actually have two sites: one for browsers and one for mobiles. The webserver redirects the client to m.your-domain.com (or mobile.your-domain.com) if it recognizes it as mobile accotding to the user-agent.
Still, there's room for responsiveness since you might decide to consider different screen sizes, both for mobiles as well as browsers - for example: iPad browser might display things differently than chrome on desktop.
Remark:
Even though we already reached the point where major portion of the internet traffic is done by mobile devices, your site/service might be such that most of its clients will be laptops/desktops. Take Stackoverflow for example :)
You should use google analytics and see what's the split and decide according to that if it's really worth putting energy into it (and if so - how much).
In my opinion. mobile first applies more to apps than to websites. It is relatively easy to make a responsive website, or two versions of a website, to accommodate different screen sizes. It is much more difficult to create an app that works equally well on both small, mostly touch-driven screens, and large desktop screens. In applications the difference is more than just what information you can fit into an available screen real estate. Mobile applications often have a different UI flow and use a different set of components (widgets).
Once you have analyzed your requirements, you have to answer a key question: can a single application/website offer a great user experience on both desktop and mobile devices? If it can, go for it. If it cannot, then you arrive at the mobile first concept: these days it is often better to start with a mobile experience. It will work on large screens too, even though it may look a little strange and it will not take full advantage of a desktop environment. If you app is successful, you can always create a desktop-optimized version.
Note that I said "often", not "always". There are many applications that users still prefer to access from their desktops. If you build one of those applications, there is nothing wrong with going desktop first.
stripping away stuff scaling down your website to a mobile website is not a best practice. nor is mainting two separate websites. starting from mobile lets you focus on what you really need and on the content of your site. don't think "graphics" but think "content"
I am considering developing a mobile edition of a web site for an application, and I'm considering whether to revamp my existing site to work for mobile, or create separate web sites. It seems to me even though some tout the benefits of CSS's capabilities, separate web sites is the way to go. Although devices like the IPAD and other 10" devices can support a full screen view, handling support for a limited view for devices with a 4" or 7" screen is a good way to go?
Factoring in phones, tablets, notebooks, and other third party devices, do you think its possible to use the same site across web and mobile environments, or definitely consider a separate site?
Ultimately, this will come down to the individual preferences of your site's visitors.
Personally, when I visit a site on my phone, I get annoyed when I'm automatically redirected to some mobile version. When I access the site in such a manner, I'm usually trying to look up something quickly -- not looking to learn how to navigate around an essentially different site.
So, I would say that if you do design a different site for mobile users, attempt to stay true in some ways to your original layout, and don't vastly change the reorganization or URLs.
Having said that, I'd still say the better route would be to change your current design slightly so that it works well on both. Good luck.
Factoring in phones, tablets, notebooks, and other third party devices, do you think its possible to use the same site across web and mobile environments, or definitely consider a separate site?
Absolutely, yes. Lots of great examples at http://responsivewebdesigns.tumblr.com/
When creating a mobile version of your website, is it better to redirect the user to a domain name that is designated as the mobile version or should you just switch templates internally and serve the mobile content on the same domain.
The redirect will cause more loading time but is there some other usability reason for using that approach?
I have developed some mobile web applications. Although my application has mobile detecting and it renders content dinamicaly. I like to have a mobile domain, it is useful and good for SEO. I include a bottom link for changing from desktop to mobile web.
Before answering your question, I suggest you see this xkcd cartoon.
Now on to your question. Some sites does maintain a seperate domain for smart phones. That is to avoid overloading the phone which probably has a limited bandwidth. So if your site is rich and have lot of animations, then you do not want to serve the same page to smart phones. The problem with this approach is what the cartoon talks about. (this has happened a thousand times for me and my "smart" phone)
Now if you have a simpler website, that performs well under lower bandwidth, then switching the template is a much better solution. The only usability problem is, if your mobile css is way different from your normal css, this might throw some people off guard. ( after all usability is for computer illiterates and pseudo geeks, a geek will get the information he needs in a dumpster).
For search engines (that is, google) it doesn't matter: http://googlewebmastercentral.blogspot.com/2011/02/making-websites-mobile-friendly.html
And there are really no technical factors that lead to one choice or another.
They each have some benefits.
Same domain:
redirect not needed
new features easier to integrate
less marketing needed
Separating domains:
more separation of technical concerns
can market separately
can migrate to a different machine if traffic requires
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
I'm trying to determine what kinds of interactions a mobile website can handle. For example, I obviously can't track page-level dragging operations because this scrolls on mobile browsers. So, I'm looking for demos that can tell me what interactions work, how well, and hopefully for information about how consistently that is across mobile devices. For example, I'd like to know if I had a page that fit on the screen, would my page elements receive mouse move events when I drag my finger? I could test that myself, but I figure there are probably lots of things that could be tested, so I was hoping there was something like the ACID test, but for mobile UI interactions.
I don't think I've ever seen such a thing, but the thing to remember is the browser is just one key factor in the interaction between your application and the user. The capabilities of the device itself is a large part of what you can and cannot do. For one, the iPhone has a full JavaScript stack and CSS rendering ability as well as the ability to "click". However, on a BlackBerry you're going to lose a lot of that CSS and JavaScript functionality. Also, with Nokia handsets you're going to be dealing with a different beast. The best way to develop for something like this would be to either use a framework/device template like the ASP.NET Mobile platform, or to go as close to basic HTML as you can.
There is no silver bullet, and you're just going to have to try to cover as much market share as you can. One thing I can share, is that the more standards compliant and semantic your markup, the better it will render across the devices. Sometimes, you can even get away with just coding the site once provided your site degrades well when CSS and JS are not available.