Why Do I Need A Mobile Website

[adamxcl]

---

System: The following 6 messages were cut out of thread at: http://www.webmasterworld.com/mobile_web_design_development/4582478.htm [webmasterworld.com] by engine - 5:14 pm on Jul 24, 2013 (utc +1)

---

My sites are up to 45% on mobile devices. But they are useful out and about. I thought it was high when it hit 25% over a year and a half ago and then I rebuilt with a responsive design and it started doing even better.

I have done mobile domains, m dot versions, pretty much everything and it didn't work until doing it all together.

At this point, some good planning and code can create one set of code that looks good on everything. Start building for the tiniest of screens and then keep adding stuff to it when the screen size is read as being bigger. In may case, I shift ads and content around, adding more ads in the space of larger screens that would have been blank before. The result is more revenue with partnerships that I couldn't do before.

If on mobile, fewer ads or different ads show. Mostly it is about trying to sell my native apps for that platform to those users. You Mr customer are on this page about this topic and are looking at it on a iPad, want to buy the iPad app for it? Very targeted and a app sale gets me more than a third party ad.

So in my view, a mobile strategy is critical. Even more so when my competition doesn't do it.

[oliondor]

I still don't agree. Even cheap Chinese smartphones are so big now...

[lucy24]

screen size != user interface

[scooterdude]

Mobile sites are important, who wants to lug a full size screen everywhere ?

[Marshall]

screen size != user interface

Agreed. A certain tablet has a 7" screen at 1280 pixels. Non mobile friendly sites look 30%-40% smaller and are impossible to read or navigate without constantly zooming in/out. As was already stated:

Ignore mobiles at your peril.

Marshall

[mromero]

I find that having a mobile-responsive site is an excellent middle-of-the-road approach that just keeps getting better every day with the continuing evolution of cell phones.

Screens are bigger and I see most people, especially younger users, want to be with the latest smart phones that have nice, big screens where they can watch movies with their friends and play games.

For mature people, those tiny little screens are useless anyways, so I see a convergence of the needs of young and old toward big screens and fast devices.

The latest phones are fast, most with 8 cores! And all have standard browsers and a mobile-responsive theme just renders beautifully on them.

I think developing a separate mobile site is not really needed.

Instead of this, perhaps invest in a mobile app but I am still trying to wrap my head around this.

The forum we use has it's built-in fully mobile version that is very good. But shifting between the full and mobile version, I prefer the full version on my phone. Older phones I think the mobile would render better.

[lucy24]

A certain tablet has a 7" screen at 1280 pixels. Non mobile friendly sites look 30%-40% smaller and are impossible to read or navigate without constantly zooming in/out.

It's the "navigate" part I was thinking about.

It's relatively trivial also loads of fun to play with your css so things display in different ways depending on available pixel width. But it's not at all trivial to take all the varied forms of scrolling and hovering and left/right/middle-clicking, and all the things a browser user can change on the fly, and reduce them all to one kind of interaction-- to be done by a user wearing mittens.

Anyone else noticed how in the app version of one Extremely Well Known Site, if your finger slips two millimeters to the right when aiming for one of the most important interaction-touchpoints, you've hit the link to a different page? "Responsive" doesn't just mean make everything smaller.

[londrum]

this is probably a dumb question, but how can you reliably target a tablet, say, when the resolution is the same as a desktop?

my iPad has a resolution of 1024 pixels, which lots of people still use on their desktops, but obviously the screen is a lot smaller. How can you target the tablet in your CSS, and not the desktop?

Marshall's example of 1280 is even more problemsome (is that a word?). you can't assume that it's going to be a small screen at that resolution. it might be a huge screen.

all of the solutions i've seen on the web seem to focus on resolutions. in the old days i seem to remember that you could put media=handheld when you linked to a stylesheet, but that doesn't seem to work across the board anymore.

[lucy24]

It's not a dumb question at all, it's a serious and unanswerable one. Well, there are answers-- but they involve user-agent detection.

This is not completely hopeless with tablets, because there's a finite number of them. At least this week. But it still means something more complicated than putting an @-rule in the main CSS. Now you're looking at on-page scripting, or something at the server level that checks the UA and-- at a minimum-- serves up different stylesheets depending on UA. Changing stylesheets is a heck of a lot easier than maintaining different versions of a page, though of course it won't work for all pages.

A tablet doesn't count as "handheld". That is: it doesn't consider itself "handheld"-- and in this case, the device's own opinion is what matters ;)

Is CSS 3 doing anything about this? Seems like it ought to...

[Marshall]

this is probably a dumb question, but how can you reliably target a tablet, say, when the resolution is the same as a desktop?

@media screen and (min-device-width: 800px) and (max-device-width: 1300px) and (orientation: landscape) {
body {
font-size: bigger; /*example*/
width: wider;
}
}

or and (orientation: portrait) whichever applies. PC's ignore this. But for targeting tablets, I generally set the page's width to 95% and increase the font from say .9em to 1.1 or 1.2em and need not adjust anything else as the overall design is fluid to begin with. Has worked well for me so far. Just remember, <=IE8 does not recognize the @media rule.

Marshall

[londrum]

i was going to use this (based on an open-source detection script on the web), but it looks like a bit of overkill

// this checks whether page is being viewed on a mobile 
window.mobilecheck = function() {var check = false; 
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/ 
|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od) 
|iris|kindle|lge |maemo|midp|mmp|netfront|opera  
m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp 
|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows  
(ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a  
wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co) 
|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s  
)|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u) 
|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw 
|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d) 
|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc 
|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un) 
|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp(  
i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma) 
|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris 
|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt  
|kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w]) 
|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca) 
|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-|  
|o|v)|zz)|mt(50|p1|v  
)|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10) 
|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran 
|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire| 
pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60| 
\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va) 
|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1 
)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5) 
|so(ft|ny)|sp(01|h\-|v\-|v  
)|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m) 
|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si) 
|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40| 
voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc 
|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check =  
true})(navigator.userAgent||navigator.vendor||window.opera); 
return check; }; 
 
// this checks whether page is being viewed on a tablet 
window.tabletcheck = function() {var check = false; 
(function(a){if(/android|ipad|playbook|silk/i.test(a.substr(0,4)))check = true}) 
(navigator.userAgent||navigator.vendor||window.opera); 
return check; }; 
 
// and this includes the extra stylesheet 
if(window.mobilecheck()=='true'||(window.innerWidth <= 800 && window.innerHeight <= 600)){ 
 document.write('<link rel="stylesheet" type="text/css" href="/mobile.css">'); 
}else if(window.tabletcheck()=='true'){ 
 document.write('<link rel="stylesheet" type="text/css" href="/tablet.css">'); 
}

[edited by: bill at 1:59 am (utc) on Jul 26, 2013]
[edit reason] fixed sidescroll [/edit]

[lucy24]

Just remember, <=IE8 does not recognize the @media rule.

Fortunately most @media rules are made to detect things other than browsers. So for a few happy minutes you can forget that MSIE exists :)

but it looks like a bit of overkill

Indeed. Most of that vast list is for telephones. Those can already be filtered-out by max-width testing. (ymmv. I say 720px, with a couple of minor tweaks at lower levels.)

This kind of thing in particular

vx(52|53|60|61|70|80|81|83|85|98)

seems like way overkill. How likely is it you'll pick up a browser by mistake if you say \bvx\d\d\b instead?

The "tabletcheck" function alone is only two lines.

[londrum]

@media screen and (min-device-width: 800px) and (max-device-width: 1300px) and (orientation: landscape) {

tried this line out, but it doesn't seem to have any affect on my iPad.

i have an ipad4 with retina display, and apparently the resolution on those things is 2048x1536, so i suppose max-device-width needs to be increased to 2050+

[graeme_p]

Use em unit based media queries. Almost all devices should have a default text size that is comfortable to read, so if you size proportional to that, you should be OK.

[explorador]

As for the device detection that list is too long. My advice is to focus on the most important or more common on your traffic logs. Actually you can target mobile devices by detecting the "mobile" string, it's almost standard. The rest can easily be targeted using media queries (they have enough power to deal with it).

As for the resolution detection I suggest to use MIN-WIDTH instead of minwidth+maxwidth. If the device is bigger then it will addressed on the next rule, if bigger, on the next, etc.

Still: play around, even the SAME device can show diff results when using diff browser (ej: native vs opera mini).

[Panthro]

The snippet for this thread on the home page is misleading. I thought I was going to be reading some new thoughts about how browsers will eventually be doing the "responsivizing" for us.

[ember]

Just spent some time with friends who are just casual internet users. Both spontaneously said that they hate mobile sites. I see no reason to develop one.

[particleman]

Just spent some time with friends who are just casual internet users. Both spontaneously said that they hate mobile sites. I see no reason to develop one.

Mobile sites are so often done wrong that is not surprising. However, if you done correctly they make the experience more pleasant. That is the point right? A better user experience? If I can use a mobile version and not feel the need to revert to the desktop site then in my book it is done right.

Truthfully, I had them opinion up until recently, however the logs don't lie. People are coming to my sites on their phones and even progressing through checkout even though my site isn't great on a phone. There is a huge opportunity to capitalize on this right now.

[lucy24]

I see no reason to develop one.

Depends what kind of site you've got. If your website is an adjunct to a physical business you'd be nuts not to have something mobile-usable, because your potential customers are pulling out their cell phones to find out what hours you're open and whether you still have that special on anchovies.

If you've got a site that people settle into at the end of the day with their laptops, or while they're in front of the computer at work, then no loss.

[JAB Creations]

This month a little of 85% of human sessions browsed with a screen resolution greater than 1024x768 (not including 1024x768/600(netbook)) on my leading site.

There are basically (via skimming) two responses you're going to get...

"I don't mind zooming in, I know I'm not using my 32 inch screen at home and I accept that."

...and...

"I'm too lazy to zoom in, everything should cater to me because only I work hard and no one else has challenges and my 320x240 pixel screen is more than sufficient to read five pages of books at a time without scrolling x and y!"

I'd take half of your mobile market share and add it to your desktop crowd and that's your effective market share without doing anything strenuous, really just some basic CSS3 media queries who won't immediately leave because you didn't kill yourself to replace the pain dealing with IE7 and older to only to deal with the pain of making your site work on some dinky 200 pixel screen.

Honestly phones were never meant to do any serious browsing. Sure it's not something to ignore but you shouldn't kill yourself over it.

It basically comes down to this: if you can't easily adjust the layout of your site to work reasonably well CSS3 media queries at about 640x480 down to about 320x240 (e.g. hiding a sidebar or adjust the content/sidebar ratio and I don't mean double/triple sidebar junk layouts) then that is what you need to work on.

Really the only exception is if you are working on a site that intentionally caters to mobile devices. We hear BS about how the desktop is dying all the time because what, some OEM's desktop sales are down 9% year-on-year? Yeah, half of us have smart phones and half of them use them for browsing.

It's just like building websites for customers: I certainly won't build a site for just anyone, if a potential client is not willing to pay for my time at a reasonable rate then I can utilize that time a lot better. The same with many of your site visitors, a lot of them you'll never make happy because they expect the world to fall at their feet but don't confuse that with lowering your own standards in regards to yourself and your work. Concentrate on realistic goals that are result driven with the kind of people who the results are worth it for.

- John

[atlrus]

Just spent some time with friends who are just casual internet users. Both spontaneously said that they hate mobile sites. I see no reason to develop one.

Add me to that list, I hate mobile websites and never stumbled across one that is in any way better than the full version. Even on my smartphone I have enough power and can zoom in, if need to. A 9"-10" tablet should make no difference to the user of the full site. It gets worse when you are familiar with the full site already and try to find something in the mobile version - awful experience. Being able to effectively set Desktop UA is the only reason I use Dolphin on my mobile devices.

My personal opinion, and again this is my opinion, if your full website needs a mobile version to be useful - your full site has failed in UI.

If you want to be mobile friendly - have an app. It gives you much more to work with, better experience, more flexibility and much more interactive than a dumbed-down version of a website.

[drhowarddrfine]

The full site has nothing to do with whether the mobile one has failed in UI. The problem is that many full sites have not taken the time to properly develop a mobile one. You CANNOT expect a mobile site to have all the same functionality of a desktop site because there are far more things to interact to and with on the desktop site.

Therefore, a mobile site MUST have more limited functionality in almost all cases because reading is limited, you have limited typing ability, no mouse, and you are most likely moving about so a bouncing screen.

If you have to zoom in to make a mobile site work, then the site was either not designed properly or you shouldn't be doing that on a mobile device in the first place.

Native apps can be faster but aren't always necessary. As time goes on, more of the native stuff will be available through APIs.

[dataguy]

Honestly phones were never meant to do any serious browsing.

Really?

This sounds like Bill Gates saying no computer will ever need more the 640 kb of memory, or the head of IBM saying the world needs only 5 computers.

If Google can pay me for mobile ad space, then those people clicking on the ads on my site must be serious enough.

[rvkumarweb]

Very Simple :)

As per the online marketers survey most of the people they search using Mobile/Tablet sources to visit the website. Based on the users traffic and query via mobile, we need to make a mobile site for user friendly. If possible create domain like m.xyz.com. This activity called as responsive design.

[drhowarddrfine]

If possible create domain like m.xyz.com. This activity called as responsive design.

It is not. If anything, it's the anti-thesis. Responsive design responds to the device and doesn't require going to a special sub-domain.

[rvkumarweb]

Hi @drhowarddrfine,

I mean if you have xyz.com you can make responsive design to show mobile view when you restore your browser or browse over mobile/tablet. If you want to create separate domain for mobile website then create sub-domain URLs. Go it :)

[carminejg3]

I don't think you really have a choice about going mobile, its one of those things you will be forced to do or you will be forced out of the game....

We have seen as much as 50% mobile devices, and like posted above if your site is not visible or readable on a phone, people WILL bounce and that may hurt your site in the long from. I am looking at 1stwebdesinger's site to learn about a responsive site design, so its a one stop for all browsers. And no dealing with m.sitename.

[explorador]

It's amazing how lots of traffic from underpowered devices are forcing some webmasters to create optimized and fast versions of their sites, something they should have done in the first place targeting desktop sites.

[carminejg3]

What happens is a webmaster has limited time, and sometimes you focus on building more content rather then doing a redesign.

Also mobile traffic is hard to monetize so in that sense its placed further down the to-do list.

In my opinion i would rather develop content then worry about dealing with browsers that simply don't have a standard code. And having to code 5 separate style sheets.

[thms]

I think there is some confusion about this topic. The main question is if we need to design a site that would supposedly be better for mobile users... by supposedly, it means that the web designer would decide what is best for mobile users and make the choice for them. For me I prefer having one UI for all sites instead of learning 2 or more different UIs for most sites, but I guess sometimes it depends on what the site does.

Even if the site doesn't have a mobile version, it doesn't mean that mobile users can't use the site, but some people here are implying that if we don't have a mobile version we are making the site unavailable to them and ignoring them.