Mobile Web Anti-Patterns

I'm trying to capture some common mobile web anti-patterns, so we can learn from the mistakes of others. I found a couple of mobile-optimized sites that were well, not so optimized. Please add to the comments if you've seen some of these or other anti-patterns!

Beware the Landing Page



Contrary to what ABC News had in mind, I was trying to find the website not the app. I may have even clicked on a link from Google News or something, but when I saw this I immediately thought, "nevermind".

Native-only




I clicked a link from my Twitter client to hear a song and what do I get? There's no way to actually listen to the song without downloading the app and presumably searching for it. I don't even know the name of the song, just the artist. Worthless. :(

Where Are You?

 

Use your Google Maps app to look up the Post Office, because there website is too hard to use in a mobile situation. It's a mobile optimized site. It knows where I am. One of the biggest mobile web anti-patterns is asking for information you already have.

Too Small Text
 



There sandwiches are great, but if I can't read what they sell or even zoom-in, what is the point of having a website. Your site may be pretty and small, but it's not optimized for mobile if I'm not able to read anything. In this case the problem was using images instead of CSS3 and web fonts to create its look. Other sites don't let you zoom in at all.


Need Examples...

Phone Numbers as Text
Forgetting Map Links on Addresses
Serving Tablet's the Phone Site
What else?

On Tech Reading & Learning

I recently posted mini-book reviews of tech books. This got me thinking about the worth of books in the digital era for learning new technologies.

Personal E-Book History

When the iPad came out I was working at Rain and they were happy to buy me e-books to help me learn the latest and greatest technology, but I was slow to embrace the digital medium for reading, Mostly I really liked the way holding a book in-front of me felt. After I left Rain and wanted some new tech books and I noticed that O'Reilly regularly offered significant discounts on their e-books. Similarly, the fantastic A Book Apart series offers e-book versions of their mini-books for $8. It quickly became difficult to justify purchasing the paperback version of these books, so I started reading technical e-books pretty much exclusively.

Learning Styles

A great thing about books, both the paper and e varieties,  is that they have fewer distractions than a lot of other modern learning mediums. Think about Twitter. It encourages distraction. You might see 5 interesting links since yesterday. You have no way to read all of them thoroughly. The topics are wide ranging and the content decent, but you also want to stay up with the latest posts. Each of those links may have comments and a sidebar full of interesting stuff. It's not a focused experience. Books offer the ability to dive into something a little deeper and stay focused on them a little longer.
 Portability

Moving to e-books I found that I could read books wherever I went. I read most of CSS3 for Web Designers on my iPhone while my wife and I were shopping at Old Navy. Suddenly the structured learning experience that books provide was completely portable.

Lately, I've been doing a lot of reading at the gym as I run on the treadmill. Normal tech books just don't work well in this environment, because they're either too big or the pages don't stay open. E-books on the other hand are perfect. Being able to read a book at the gym helps me stay focused and not think about the treadmill moving under my feet, so I read a lot and get fit while I'm doing it!

Negatives 

In this age of digital learning are books still the ideal way to learn? I'll just lay out some of their obvious downsides.

Technical books are inherently static. You can't interact with them physically. They don't update automatically. They're essentially out of date the day they're published.

They're one sided. Web discussions and forums provide many viewpoints, because anyone can comment. A book may have one or two preset ways of looking at things, but it can hardly be expected to cover all of them.

Books can be really long. They must think they're really important for technical books to venture into the 800 page range (actually the post-120 range is pretty much enough for me). I don't have a huge attention span. While books encourage focus, they can only hold that focus for so long. It's hard to wade through all of the content of the multi-hundred page book.


Book I Like Best

While I'm really good at looking up information on the Internet. I don't always know what I should be looking up. For all of their former glory books with titles like Bible, Definitive Guide and Cookbook  are losing the battle for my attention span. In this I'll much more likely hit up the MDN or StackOverflow than pull out of a paper-back guide when I'm in the middle of a project. Despite their waning appeal there are still books out there that I value greatly.


Books that appeal to me are short.
Books that appeal to me are specific.
Books that appeal to me introduce me to new concepts.
Books that appeal to me often use color to make them clearer.

As I read books that meet these criteria I'm able to learn something new wherever I am and then when I get back to a computer somewhere I know what terms I want to use in my search for more about the topic. These books open my mind up to a new concept or idea. The practical knowledge of how to apply that idea to my specific situation is something I'd probably much rather find online where it will be up-to-date, littered with helpful comments, and checked out by the community at large.

Short Tech Book Reviews

Inspired by this thread on Google+  https://plus.google.com/u/0/116910304844117268718/posts/c3A4wgSAgx4 I decided to put together a bunch of short book reviews of tech books I've read recently.


Introducing HTML5
Great overview of new tags and JS APIs w/some good examples and demos.

HTML5 For Web Designers Loved it
Essential, short, colorful guide to HTML5.

Canvas Pocket Reference
It's like the MDN for when you don't have a computer.

Developing with Web Standards
A bit long, but still it has great chapters on accessibility, CSS, and web standards.

JavaScript: The Good Parts Loved it
Essential, concise, opinionated guide to JavaScript. Covers regexes, functions, objects, etc.

JavaScript Patterns Loved it
Every JS developer should read this book. It's a fantastic review of types, patterns and best practices.  Personally, I prefer the NPM Coding Standards for my server side JS, but this book is still essential.

CSS3 For Web Designers [e-book] Loved it
Read the entire thing on my iPhone. Great, short read. Extremely useful. Totally sold me on rgba().

Mobile First [e-book]
Decent essay on why mobile is becoming more and more important. Best given to someone who's not already steeped in mobile.

Supercharged JavaScript Graphics [e-book]
Stupid title, but plenty of interesting tidbits. Wished it were shorter and only covered Canvas.

JavaScript Web Applications [e-book] Loved it
The best book on web app fundamentals (w/backbone.js, spine, etc.) Covers MVC, HTML5 drag & drop and other APIs. Read it mostly at the gym and on airplanes.

Big Data Glossary [e-book]
Would be more useful as a PDF or even better a wiki.

  
Secrets of the JavaScript Ninja [e-book]
Lots of crazy stuff about prototypes, testing, etc. Been in progress since like 2009 and it's not finished, so we get updates every couple of weeks.

Android in Action [e-book]
Too long.

Hardboiled Web Design [e-book] Loved it
I wish I would have paid to get a hard copy of this, because it's beautiful. Great essay on why we should build cool websites now with some killer examples.



Hello Android
Perfect for Android beginners who want the basics. 

MongoDB: The Definitive Guide [e-book] 
Awesome guide for anyone doing anything with Mongo. 

Tapworthy [e-book] Loved it
Essential mobile UX & design. 

Recipes with Backbone [e-book]
A ton of great examples about design patterns and testing backbone apps.

50 Tips & Tricks for MongoDB Developers [e-book] Loved it
Essential MongoDB tips for n00bs like me.
 
Learning the iOS 4 SDK for JavaScript Programmers [e-book]
Basically worthless if you've read a beginner tutorial on using XCode. Used it once or twice as a reference for splitting strings into arrays.

Getting Started with GEO, CouchDB and Node.js [e-book]
I now know a little bit about GeoJSON and CouchDB. Kind of weird. Kind of cool. Don't know.

High Performance JavaScript [e-book]
Informative. Don't forget to strike a balance between performance, readability, and maintainability.

Responsive Web Design [e-book] 
Pretty nearly essential book about how the web is changing and how to react to it.

Mobile Web Roundup

This week was a huge week week for mobile web development.  Here are some quick summaries of the latest tools/announcements.

Adobe Shadow

Live preview your sites in your desktop and mobile.

Google Page Speed for Mobile (requires ICS)

If you're lucky enough to have Android for mobile you can now find out bottlenecks in your sites. It's hard to debug for mobile, so any help like this is welcome.

Sencha Touch 2.0

The best mobile-web framework just got way faster in Android and added a bunch of new features.

What iOS 5.1 and the new iPad mean for web developers

Of course the iPad 3 was announced this week and @firt reminds of how to get our sites ready with a quick blog post.

iPad3's Retina Display Will Wreak Havoc on the Web

A follow up to the above article with some warnings about serving up high-res images in every context.

Taking a Leap into Cloud9 IDE

After a lot of high profile coolness from the Cloud9 team, such as their work on Treehugger I thought it might be cool to check out the Cloud9 IDE. From what I understand it is an open source project with a paid version that offers additional features. Because it's written in node.js and JavaScript it's the first IDE I know of that really takes JavaScript seriously.

Some of things that I hoped to find in the IDE were:

• JavaScript code completion
• easy collaboration / code reviewing
• instant previewing
• use on any machine
• git integration
• built-in JSHint support via Treehugger

I went to the site c9.io and immediately signed in with my github account. It was smart enough to show me all of the projects I had on github. 

Initially, I was hoping to use this for my day job at oDesk, but I quickly ran into a hurdle: all of our files our stored on servers behind a VPN. I reached out to some people from the Cloud9 team and found out that at the moment I'm not able to use this service to do work that's behind a private VPN. I think it's also the case that you cannot do work locally either.

It's a good thing I have all of those github projects. One that I'm particularly excited about working on is a Words with Friends inspired word game called Words vs. Zombies.

I opened up the project and it seemed to clone the existing repo into one of the Cloud9 servers somewhere. It gave me a sort of shell as well as the files in the repo. From there I could preview my files, edit them, get good code feedback and more.

Sharing

At this point I was pretty much blown away. I'd heard about the collaboration features, so my first instinct was to look for the "invite a friend" option. I couldn't find it anywhere! I just wanted to show my friends how cool the experience was and hopefully get them to help me finish this project. There was no easy way to do it.

Doing Work

Okay the code editor is pretty much amazing. It doesn't seem to have that good of code-completion, but it does try to be helpful, though it's not super smart about typing or anything like that. I've heard that Web Storm offers decent JS code completion, so maybe I can check that out in the future. Despite the imperfect completion the error checking stuff is amazing. It's completely configurable and basically gives you built-in JSHint while you're coding. It's incredible and the speed and ease of typing in this web IDE is fantastic.  The syntax highlighting, customizable key-bindings, and other features really make this a great IDE.

Updating the Project

So after playing around with the current files, I decided I wanted to take my basic HTML/JavaScript project and turn it into a full-fledged Node.js project. First thing I tried to do was move my files around. I created some sub-directories and tried dragging some files into them. This didn't work. I tried moving them with the command line. That didn't work either. I tried in Safari and the dragging worked, but the files didn't appear to actually be moved. It was a mess. Giving up I thought I'd try and use express to create my files for me.  I tried things like this:

npm install express
(some response)

./node_modules/express/bin/express --help
./node_modules/express/bin/express . 

I basically got no response from any command I tried to run other than the initial npm install. So, I gave up, went back to Coda made the changes and pushed them to github.  I went back into my project and could not figure out how to pull the latest change. I tried re-loading the page, pressing the "refresh" button on the project, ran git pull, but nothing worked. git seemed mad because I had manually created files it wanted to create, but trying to remove files in the command line to prevent a conflict didn't actually seem to work.

Conclusion

I can't tell you how frustrating it was to not be able to do work in the IDE. The potential is great, the idea of it is amazing, but if I can't do work it's worthless to me. Despite that frustration I really see the benefit of the Cloud9 IDE and I can't wait until this thing is ready to use. I really think it will transform the way we do collaborative work. The server and preview features are amazing. I can run my app on their servers. That's huge. For a node.js app or even an html/javascript project there is no editor I've seen that can compete. They just need to work out a few bugs first.

Here's a more specific bug report I compiled if you're interested in what browser I was using when and what errors I received.