Fresh

This month at eROI there have been some great additions in our tool box. Now, squeezed between our trusty hammer (e-mail marketing), Ban Saw (Custom CMS Development), and shiny red power drill (eROI Event), we are proud to engage in the mobile design and development realm. Our process here at eROI has always been very important, and setting up solid action steps to be successful has taken a bit of trial and error, but what we came out with on the other side is a beautiful addition to an already magnificent house. Yea, that’s right, our tools build kick-ass houses, and here is how we did it for mobile.

First, it is all about the research. Do your research. It is very important to understand all the limitations that go along with designing and developing for mobile devices. There are plenty of online resources out there that can aid you in your journey. We have found a couple great tutorials such as Engage Interactive “Tutorial: Building A Website For An iPhone,” to be quite helpful for our internal team, and you can see a great post about some of our design inspiration right on this blog, “Menagerie of Mobile Madness.” It is always nice to learn the rules before you break them.

Second, I strongly recommend a fairly in-depth wire-framing session. I typically do mine through OmniGraffle, and here is a great iPhone wire-framing stencil from Graffletopia. It is incredibly important that the right content is being pushed forward into the mobile realm. There is no way you are going to be able to squeeze a fairly robust site into a mobile website. You have to carefully pick what your audience needs. Show your user quickly and efficiently exactly what information they want. It is here that it is easy to over do it. Keeping it simple and light will make the user experience much easier. Like we always say around here… content is key to the success of any site. With mobile, this concept is twice as important. Make sure you are delivering what users are seeking.

Third, enter the design phase at the same time you or your developer is building your interactive wireframes. This should be a very close relationship where ideas, functionality and possibilities get thrown around constantly. Allow your wireframes to evolve when unexpected snags hit. It is easy to skip over this step in the process, but if you value a library of mobile code, this is where most of that content can be created. There is really only a select amount of functionality a mobile site can have. From sliders to swipes it is a good idea to save and re-purpose anything you create to make your development in the future much easier.

Fourth, I will touch on a few quick design points. Design for fat, clumsy fingers. Small buttons and text links are usability killers on the mobile device. Keep them large, legible and understandable, but keep in mind that short, sweet and engaging are also important. Another trick I have discovered when designing for an iPhone is starting with the horizontal layout (Width = 480px). This way you set up your max width for any of your images or text. Adapting to the vertical layout is much easier than up-scaling to horizontal.

And finally, make sure you set up enough time to test test test. Whether it be internal QA on multiple mobile devices or setting up analytics for tracking, it is important for your growth as a mobile site designer/developer to learn from anything and everything you can. We stress this a lot around eROI so that we never make the same mistake twice.

Now, go forth, and become mobile Rock-stars!