Mobile rage
•Download as KEY, PDF•
0 likes•3,884 views
Mobile Rage - What causes it & how to fix it Most of us have been there. That website you want to use, from your mobile device, that just refuses to cooperate. From the Flash-only, to the can't f**king log in, to the redirect-to-mobile-and-stay-there sites, there's more than enough websites out there to invoke Mobile Rage. Although we all know that the best mobile development strategy is "mobile-first", we also all know how many sites and applications out there were designed and built by people who didn't imagine how fast mobile would take over. Come learn about the common mistakes most people make for mobile, and some of the simple solutions you can use to help reduce Mobile Rage, without having to do a complete rewrite.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Mobile rage
Similar to Mobile rage (20)
More from Lori Olson
Recently uploaded
Recently uploaded (20)
Mobile rage
- 1. Mobile Rage Lori Olson The WNDX Group Inc
- 2. Lori Olson • The WNDX Group Inc • Independent contractor • Used Rails for since 2005 (0.13?) • Mostly oil & gas apps
- 3. Mobile Gadgets • since... Windows CE • Palm/Treo • iPhone/iPad
- 4. Mobile Rage • What is it? • Who experiences it? • Why has it become such a problem? • How do we go about fixing it?
- 5. What?
- 6. It’s that feeling of intense frustration you experience, when using web applications or web sites from your mobile device, and they JUST DON’T WORK RIGHT.
- 7. Who?
- 11. Overall smartphone ownership is up by 13% in the past six months in Canada, according to Ipsos Reid. Now, more than one-third of Canadians own smartphones—up from just one quarter in August 2011. - Techvibes http://www.techvibes.com/blog/canadians-loyalty-to-blackberry-vanishes-as-android-and-apple-gain- marketshare-2012-04-20
- 12. Why?
- 13. How?
- 14. Mobile First!
- 18. Problem Areas • Landing • Advertising • Navigation • Forms
- 19. Landing
- 20. Psst! Did you know your app is slow on mobile?
- 23. Javascripts • jQuery/UI • could be replaced by Zepto.js • Top loading • Bottom Loading
- 24. CSS
- 25. Images
- 26. Asset pipeline!
- 29. Flash-only
- 30. Options?
- 36. Full Site
- 37. Forced redirect
- 39. Limited function
- 40. No “Full Site” link
- 42. Calgary Herald
- 43. Apps
- 45. Default! Save!
- 46. Advertising
- 47. Popovers
- 49. Redirects to ad
- 50. Navigation
- 51. Size matters
- 54. How much?
- 55. Phone Finger
- 56. Forms
- 57. signin
- 64. text_field(:user, :email, :size => 60) email_field(:user, :email, :size => 60)
- 65. signup
- 72. text_field(:user, :account_name, :size => 20) text_field(:user, :account_name, :size=>20, :autocomplete => 'off', :autocapitalize => off)
- 73. profile
- 74. urls?
- 76. text_field(:user, :home_page, :size => 120) url_field(:user, :home_page, :size => 120)
- 77. numbers?
- 79. text_field(:user, :cell_phone, :size => 20) phone_field(:user, :cell_phone, :size => 20)
- 80. In retrospect • There WILL be more mobile users than not, if you haven’t already got there • Old applications cause lots of rage • Applications inducing mobile rage aren’t good for the bottom line • If you can’t go back & do it the right way, go and do all the little things, because they DO make a difference
- 81. @gorbypuff wants you too! thanks @tenderlove
- 82. Thanks! • Lori Olson • @wndxlori • http://wndx.posterous.com • Questions?
Editor's Notes
- \n
- \n
- \n
- \n
- What is Mobile Rage?\nSome people wouldn’t call it rage at all. \nMobile frustrated. Mobile annoyed. Mobile peeved.\n\n
- But I call it Mobile Rage. It’s that feeling of intense frustration you experience, when using web applications or web sites from your mobile device, and they JUST DON’T WORK RIGHT.\n\n
- Just the fastest growing segment of the web consumer market.\n\n\n
- The smart phone users. The tablet users\n\nI’m not talking about dumb-phone users. \n\nI mean, T9 predictive text rage is just a given, so anything on top of that is just superfluous.\n
- \nI mean, T9 predictive text rage is just a given, so anything on top of that is just superfluous.\n
- Here we are, at the inflection point. Smart phone shipments will EXCEED personal computer shipments this year.\n\nhttp://www.webdesignshock.com/responsive-design-problems/\n\n\n
- Seriously. One third. Now that’s a market share you just can’t ignore.\n
- Why are things SO bad? Somehow we got to this point, where so many web sites and web applications invoke so much rage amongst consumers?\n\nHow long has the web been around? I built my first website in late 1994. 18 years ago. How many websites and web applications are relatively static... because they work... good enough?\n\nWell, Rails applications have been developed for around 8 years now. Eight years ago, mobile was just barely on most product radars, and the iPhone *didn’t exist*, except in Steve Jobs secret little world.\n
- So how did WE get here? And how do we fix it?\n\nWell, the answer for us Rails developers is simple isn’t it?\n\nBecause Rails developers only work on greenfield projects, brand NEW web applications\n
- So we just develop these new applications using mobile first.\n\nThis is where you START and I would argue this is where you finish as well. Your application design should work on mobile first, and then you work on the desktop representation.\n
- Responsive design will solve the rest of our problems, won’t it? \n\n
- Our applications adapt to mobile seemlessly and everything is all rainbows and unicorns, right?\n\nBecause we don’t have to support any old applications, that were built and designed before anyone ever heard of mobile first and responsive design. \n\nWe certainly never have to integrate with old applications, or existing CMS systems or anything like that...\n\n
- \nOf course, if you still believe in fairy dust... I can’t help you.\n
- So if we are going to talk about how to fix things, we should probably start with defining the problems.\n\nSo let’s talk about the general classes of problems that induce mobile rage\n
- \n
- Hey, did you know that your web app is slow on mobile?\n\nYa, that’s what I thought.\n
- That’s an alarming statistic\n
- That all adds up to almost 40% of mobile users... that’s not good, is it?\n
- We know that loading Javascripts can be a problem\n\n\n
- Certainly some old sites, where developers have been hacking at them for years, have big, bloated CSS files\n\nI mean, you’re never really sure that removing something won’t break something obscure, right? Much easier to just keep adding to it.\n
- And then of course there are images. With the rush to support iPad retina displays, our images are getting even more bloated than ever.\n
- But wait a minute... javascript, CSS, images.... Don’t we already\nhave a way of dealing with some of this in Rails. The asset pipeline.\n\nNow, that’s all very fine for your new Rails apps, however \n\n\n
- Asset pipeline can be added, just not in the totally integrated fashion that we have now.\n\nBut really, wouldn’t it just be better to use this as another argument in favour of upgrading those old apps?\n
- So, once we get past ts;dw we have to deal with all the different strategies that developers have hacked together for dealing with mobile. Some are older, some are newer.\n
- While it seemed for a while that Flash would survive the iOS onslaught, the sad fact is that Flash is dead on mobile. And when I say sad, I’m not really sad, but I assume there are some Flash developers out there who are sad. \n\nThere is really no excuse at this point for having a Flash-only site, or even a Flash mostly site.\n\nHonestly, the biggest offenders here are restaurants, and other similar enterprises, that just wanted a “web presence”, and hired some agency to build one for them.\n\n\n\n
- \n
- Do nothing. That works for your customers.\n\n
- Provide misleading information... and then do nothing.\n\n\n
- You are viewing this page because your computer/device doesn’t have the Adobe Flash plugin. But you can download and install the plugin by clicking here!\n\n\n\n\n
- Hey, why not insult your web visitor while you’re at it!\n\nhttp://thetoshibatablet.com\n\n
- That’s a nice mobile device you have. Unfortunately, you can’t view your digital edition on this particular mobile device.\n\nThis, while not ideal, is probably the best (least rage inducing) of the bunch.\n\nIn fact, this is a screen capture that my husband took. Not only did it NOT induce rage, but he actually LOL’d\n
- Leaving Flash behind us for the moment, let move on to more of the “do nothing” landing strategies.\n\nThis is probably the option that causes the least amount of rage. The smart mobile browsers can view a lot of web sites and applications, with some issues. But if it mostly works, that’s pretty good.\n
- Some Javascript that checks, determines that your mobile device is not worthy, and and dumps you into the mobile site\n\nBad enough when this is on the homepage, but when you have a link, that could/should take you to the exact page you want, but... the mobile redirect kicks in, and punts you out mobile\n\n\n
- This is a follow on, of the mobile redirect. Already pissed at not being able to get directly to the page you were after, now you discover that the mobile site is\n\n\n\n
- 1. a “limited” function version of the full site\n\n
- 2. entirely walled off from the full site and you *can’t* get back to the full site.\n\n
- A variation on the “mobile redirect” is the mobile detection FAILURE. \n
- Here I am, on my iPad, but it’s been detected as an iPhone, so I get the squishy, narrow version that works (ok) on the phone, but is exceedingly annoying on the iPad. And, of course, there is a link that will take me to the “Full Site” (all the way at the bottom), but it takes me to the front page of the full site, not the story I was reading.\n\nOk, I think we’ve come full circle here, so lets move on to the\n
- So another landing option is to not bother handling the mobile devices in the web browser at all. Instead, there’s an app for that!\n
- If people don’t WANT your app...\n\nIf they CHOOSE to use your full site...\n\nJust let them!\n
- Make it a default! Save a freaking cookie!\n
- Advertising is, in many ways, the bane of our existence, as consumers of the web.\n\nHowever, as web app developers, we know that there’s money to be made in advertising, so we do it anyway.\n\nBut maybe. since it’s so annoying anyway, we could do it better on mobile...\n
- You know these. Popups. Lightboxes. You’ve never liked them on the desktop. But on mobile, they are even worse. \n\nThe (sometimes) delayed popup version is even worse. You got to a page, you double tapped to zoom in to the text, and BLAM, there’s this annoying popover, covering up the content, and when you try to zoom out, you inevitably, accidentally click on something from the popover, and you are now on a new page. What fun!\n\nA more evil version of this problem, is where the popover is sized so that it extends beyond the edges of your mobile screen, so that you cannot immediately dismiss it. You have to guess... is this the once with the ‘X’ on the top right corner? Or the one with the little, tiny “Cancel” link, hiding neat the bottom.\n\nBut it gets worse. Because some of these will dynamically center themselves... so, as you attempt to scroll around, to find the dismiss button, it will continually adjust itself, to stay in the center, and keep those dismiss controls properly hidden.\n
- I had this awesome example, where National Geographic had the lightbox from hell, but...\n\nThey seem to have fixed it. \n\nOh well. \n\nI mean, YAY!\n
- One mitigation strategy for popovers and lightboxes, at least in terms of advertising, is ... one of my least favorite bait-and-switch techniques. But, at least it’s not a lightbox.\n\nThe link redirects to an ad or video, and then has a x second timer that will take you back to the link you actually wanted. While generally, this is a rage item, it’s the lesser of evils.\n
- We all know that navigation on your site is important. Once you have people there, you want to keep them.\n
- Sorry guys, but...\n\nOn mobile, the size of the links/buttons make a huge difference in the usability of your web applicaiton. While those little ‘x’ close/delete buttons may seem like a good idea on the desktop, to maximize your available space for stuff like “text”, but missing the link can sometimes do... something completely different\n
- But it isn’t just about the size of your links and buttons. You can actually leave the size alone, if it seems reasonable, and readable, but then you will need to adjust the spacing between your links and buttons.\n
- Here is an example from one of my applications.\n\nWe made a sizing change (on the accordion headers), and we made padding and margin changes on the rest of the links\n\n
- \nOf course, you can go and read the Apple Human Interface Guidelines (and you probably should anyway), but I’ve found that good, visual example is always superior to reading dry facts and figures.\n\n\n
- PhoneFinger is a nice little Mac app that changes your mouse cursor into a full size finger, for use with the iPhone and iPad simulators. Reading Human Interface Guidelines is good, this is better. You will experience exactly the kinds of annoying missed link, wrong link clicked kinds of problems that your visitors are experiencing.\n
- And now we come to one of my personal demons. Form entry on mobile.\n\nI could go on for hours, but I’m running out of time, so lets just concentrate on \n\nsignin, signup, profile editing.\n\nBelieve me, you will find MORE than enough rage-worthy problems, on just those 3.\n
- Starting with signin ... most services these days let you use an email address as your account identifier. But how many of those services actually take advantage of the mobile convenience known as the custom keyboard?\n
- Google fails here.\n\nFacebook wins!\n
- Oh, sorry, Facebook, but you fail on the iPad...\n\nConsistency much?\n
- That’s ok, Eventbrite failed too.\n\n
- Twitter - Fail\n\nWordpress - Fail\n
- Yahoo - FAIL\n\nMicrosoft Live - WIN!\n
- Amazon - WIN!\n\nApple Store - FAIL?!?\n\nAnd, if you are going to say “use the app”, I’ll just have to mention that you can’t actually buy anything from the app, unless you’re in the US Apple Store.\n\nWTF?\n
- The simple fix here, which is almost too embarrassing for words\n
- And let’s move on to sign up.\n\nHere, I have a nice little anecdote, of attempting to sign up for a new service that everyone on Twitter was recommending a few weeks ago.\n
- Username. No, I don’t actually want that auto-capitalized, thanks.\n\n
- And autocompletion on this field doesn’t help me either, dammit.\n\n
- Ok, fine, at least give me the email keyboard... no?\n\n
- Are you kidding me? Autocomplete on my email? Grrrr.\n\n
- I give up. You win.\n\n\n
- I give up. You win.\n\nOr maybe I should say, you loose. Because I gave up, and iDrive lost a new customer.\n
- Here is a fix for the autocomplete, although, I understand you may have to make it a form attribute, as well, for Firefox browsers\n\nAs for the password thing, it’s not really a mobile thing, but... don’t make arbitrary decisions about these restrictions.\n
- Now a lot of the stuff you’ve seen is \n
- \n
- And here I enter in my homepage address with the custom keyboard for URL’s... \n\nOh, Twitter. FAIL again.\n
- The simple fix here, which is almost too embarrassing for words\n
- \n
- Oh... I don’t think I have to demonstrate this AGAIN do I?\n
- The simple fix here, which is almost too embarrassing for words\n
- \n
- \n
- \n