Table XI Blog

Mobile Development

March 19, 2014No Comments

DisGo Mobile App: Discourse on the Go

The Sign In page of Discourse on the Go On the train? Working remotely? Now you can take your Discourse conversations on the go.

We use the online discussion platform Discourse for communicating about a lot of internal topics. It’s a well-designed, modern forum, message board, and chat room, all in one, and we find it a valuable companion to email as a tool for gathering and disseminating information. But workdays get busy and people don’t always have time to use it. Instead, a lot of us wanted to be able to check in on Discourse and participate in its conversations during our commutes. When we realized there wasn’t a mobile app, we decided to build one.

Read more

October 30, 2013No Comments

Introducing the New Facing Disability Mobile App

We just launched the new Facing Disability mobile application under the design leadership of Ed Lafoy, our resident iOS wizard. This new app allows anyone to create and upload videos to Facing Disability's website.

Facing Disability is a nonprofit organization supporting and connecting individuals suffering with spinal cord injuries. The site aggregates more than 1,000 videos and shares answers to common questions about coping with spinal cord injuries. The videos are highly curated, edited, and are the culmination of more than a year of interviews.

The new mobile app makes it possible for even more people to contribute their voices and perspectives to FacingDisability.com. Now members can securely contribute videos anytime,  anywhere, and enjoy a new flexibility and accessibility that’s particularly important to the Facing Disability community.

Read more

August 8, 20131 Comment

Infographic: Mobile App vs. Responsive Website

Earlier this spring, we wrote an article about the 10 questions to ask when choosing between a responsive website or a native mobile app for your business. It's question a lot of people are asking these days, so we decided to turn it into a helpful infographic, which VentureBeat featured on its site last week.

Use the chart below to help you decide whether your company needs a responsive website or a native mobile app.

Mobile App vs Responsive Design

Special thanks to Kenton Quatman his infographic design.

Want all the best React Native tools in one stack?  Download your free copy of our own mobile development stack

July 9, 20131 Comment

FoxySync: How to Synchronize Your Website with FoxyCart

FoxySync logo.If you've ever done an e-commerce integration, then you know what a pain it can be. Traditionally you'd build a shopping cart, create a checkout workflow, and integrate with a third party payment gateway. Ultimately you spend a lot of time writing and testing new code for an old task. I've done a few of these integrations, and the last time I did I tried something new: FoxyCart.

I wanted to try FoxyCart because it would allow me to outsource the shopping cart, checkout, and payment gateway integration. As a result I could clean up my code base, reduce my maintenance costs, and setup for an easy payment gateway switch in the future. Making FoxyCart work with my Ruby on Rails app, however, was not a cinch. There were no Ruby gems to work with and examples in Ruby were sparse. I knew I'd have to figure out a lot of the integration on my own so I thought I'd make it easy for the next Rubyist and cut a gem out of the work. That gem is called FoxySync.

FoxySync encapsulates four FoxyCart integrations: cart validation, single sign on, XML data feed, and API communication. Using all together fully synchronizes and secures all communication between your app and the FoxyCart service. Let's take a look at each.

Cart Validation

Since FoxyCart knows very little about your products, it depends on you to post any metadata—including price—when customers add items to a cart. As a default, the metadata is stored as plain text in the web page where the “Add to cart” button lives. This is risky because, if someone knows what they're doing, they could change the price of your product before it’s sent to FoxyCart. To prevent such tampering, FoxyCart offers HMAC product verification, or what I like to call cart validation. The feature works by validating a hash on each piece of metadata to ensure authenticity. FoxySync makes this easy by providing a helper method to generate the correct HTML form variables.

include FoxySync::CartValidation
cart_input_name 'code', 'mai', 'mai'
# results in <input type="hidden" name="code||5651608dde5a2abeb51fad7099fbd1a026690a7ddbd93a1a3167362e2f611b53" value="mai" />

Single Sign On

FoxyCart keeps an account for each user that checks out on your site, but with a good integration, those customers shouldn’t even know they’re using it. That being the case, it's weird to ask them to reauthenticate on the checkout page if they’re already logged into your site. FoxyCart's single sign on feature prevents this weirdness by asking your application to acknowledge authentication before the checkout page is displayed. FoxyCart makes a request to your site and your application redirects back to FoxyCart. FoxySync helps with this handshake by providing a helper method to generate the redirect URL.

include FoxySync::Sso
redirect_to sso_url(params, user)

XML Datafeed

FoxyCart's transaction datafeed feature ensures that your application is notified of sale details after each successful checkout. When enabled, FoxyCart will post to your application an encrypted XML document and expect a particular response. FoxySync helps with this feature by handling the XML decryption and providing a helper to generate the appropriate response.

include FoxySync::Datafeed
receipt = []
xml = datafeed_unwrap params
receipt << xml.customer_first_name
receipt << xml.customer_last_name
receipt << xml.receipt_url
# etc
datafeed_response

API Communication

FoxyCart has a robust API that lets you manipulate and retrieve data about your store, customers, transactions, and subscriptions. FoxySync makes working with the API dead simple, so you can easily access this powerful feature.

api = FoxySync::Api::Messenger.new
reply = api.customer_get :customer_email => 'foo@bar.com'
reply.customer_id # is the customer's FoxyCart id

FoxyCart is a great service for adding sophisticated e-commerce to your website without having to do a lot of the hard work. However, FoxyCart still needs to be integrated, and for Ruby on Rails apps, FoxySync makes that pretty easy.

Want all the best React Native tools in one stack?  Download your free copy of our own mobile development stack

May 29, 20132 Comments

Mobile App vs. Responsive Design: Ask These 10 Questions First

“Do I need a responsive website or a native mobile app for my business?”

We’re getting this question a lot these days.

Let’s back up. For those unfamiliar, “responsive design” refers to a design approach aimed at providing optimal viewing, reading, and navigation experiences on any size device, from desktop computer to mobile phone. Mashable called 2013 the year of responsive web design. We couldn’t agree more.

Even if you have a mobile app, your website should use responsive design to ensure that anyone visiting your site via mobile phones and tablets will have a good user experience. After all, despite the fact that you may have a beautiful app, a segment of your target audience will still visit your website from their phone's browser. And remember, just because you have an app, it doesn't mean it will be downloaded and used. (Just ask the makers of the thousands of undownloaded “zombie” apps about the competition out there.)

ebert-casestudy2

Example of RogerEbert.com responsive design.

That said, there are times when having a mobile-optimized site and a native app makes great business sense. Wondering if this is you? Consider these 10 questions, which could help guide you to the answer.

1) Will your native mobile app take advantage of smart phone functionality?

Do you need to use the camera, GPS, scan feature, or other phone functions? If you intend to provide unique functionality or content not available on the mobile web, then an app is likely the way to go. When Sprout San Francisco came to us wanting to build a mobile app, we knew that we could provide a useful tool to soon-to-be parents by incorporating the scanning function into the app. This allows parents to easily create registries on-the-go straight from their phones, something they couldn’t do through a responsive design website.

Advantage: Native

uberapp2) Is personalization important?

One of the great features in a mobile app is the ability to craft personalized experiences for the device with fewer limitations. Since a native mobile application is always tied directly to a user’s device, it creates many more opportunities to target and craft the user experience. For example, within a native app a user can create and save a profile, which allows them to customize their interactions. UBER has an excellent native application which lets users scan and remember credit card details, making future purchases quick and simple.

Advantage: Native

3) Do you have complex design and UI?

At a certain level of complexity, HTML5 (responsive web) may not work to achieve your goals. HTML5 can indeed deliver customized user experiences, but native apps tend to provide the most tailored UX. Because responsive designs need to adapt to all possible environments, designers have to make compromises to find a solution that works in all scenarios, browsers, and screen sizes. Conversely, a native mobile application is a targeted experience and can take full advantage of the interaction expectations of the user and their device. Web apps still have a lot of room to grow (see forecast.io, for instance), and while they’ll eventually get close to native apps in feel and function, they can’t match them—yet.

Advantage: Native

4) Do you have a limited budget?

Generally speaking, responsive design is a less costly undertaking because it’s quicker to develop and deploy than native applications, typically requires fewer dedicated resources to bring an idea to market, and only needs one code base to ensure it works across all devices. That said, ideally, ROI justifies development costs. If mobile transactions and in-app purchases represent a significant portion of potential revenue, investing in app development could be the smart decision. But if you can’t afford the spend immediately, start with a responsive website and add the native app as part of a future iteration.

Advantage: Responsive

iphone with money logos5) Are you trying to monetize content and encourage purchasing?

If you have a product that offers potential for ongoing micro-purchases, then a native application is the way to go. A shopping cart on your website can facilitate this, but the in-app purchasing system is so simple and tied into all the rest of a user’s purchases on the platform that it is second to none.

Advantage: Native

6) Is SEO an important consideration?

If part of your strategy is to increase visibility among search engines and drive traffic to your site, then stick with a responsive mobile website. Apps are closed environments and cannot be crawled by search engines—they won’t impact your organic search ranking.

Advantage: Responsive

7) Will you have difficulty getting App Store approval?

Apple asks developers to follow stringent guidelines when submitting to the App Store, and the approval process can take anywhere from a week to several months. There are certain areas that are regulated more strictly than others, such as in-app purchases and in-app subscriptions.

Moreover, other kinds of features easily achieved through HTML5 are banned in native iOS applications. For example, Apple regulations forbid iOS applications that take donations, a fairly commonplace transaction in responsive web designs. This is a serious drawback for nonprofits looking to reach potential customers and donors through mobile apps.

Advantage: Responsive

8) Are you sending and receiving massive amounts of data?   

An app will generally work faster than a responsive website since it doesn’t rely as heavily on Internet and network speed to serve up information. However, responsive websites may be closing the gap—a recent article in Ars Technica discusses the ways that developers are trying to "speed up the web" to compare with native speeds.

Advantage: Native (for now)

9) Do you plan to make frequent updates?

Native applications make frequent updates rather painful. First, application updates need to go through the same lengthy approval process in the App Store. Next, native applications require consumers to manually download the updates before they can be used. If you expect to have frequent design updates, a responsive design may be the simplest way to ensure your users are accessing the most recent version.

Advantage: Responsive

10)  Are you trying to create something that’s universally accessible?

If you want to appeal to everyone across multiple platforms and devices, responsive is the answer. It’s faster and easier to get your product in people’s hands, and it’s fairly straightforward to build a mobile-specific menu that gives mobile users what they need. Native apps, on the other hand, must be uniquely designed for Android, iOS, Blackberry Mobile, and Windows Phone 8, and present compatibility concerns for businesses that don't want to segment their user base.

Advantage: Responsive

So there you have it: 10 questions to help guide your decision-making process. Granted, these aren’t hard and fast rules, but thinking about these factors can get you started. Still stuck? Don’t hesitate to reach out with questions or comments. Email me at mark@tablexi.com. And if you do decide to build a native mobile app, make sure you’re familiar with the 5 mistakes to avoid when developing an app and the 5 things that annoy app users.

Special thanks to Table XI’s mobile development team for their contributions to this article: Ed Lafoy, Kate Garmey, Jon Buda, and Mike Gibson.

Want all the best React Native tools in one stack?  Download your free copy of our own mobile development stack

May 23, 2013No Comments

Top 5 Ways to Annoy Your App Users

Woman clenching her fist, while looking angry at her phone.Mobile apps are all the rage these days, but it's easy to create something that just leaves your customers raging. Make sure your app isn't guilty of these sins that drive users nuts:

1. Forced registration. Unless you’re a service I trust and I’m accustomed to using, why do you make me register before I know what I’m getting into? Getting a download is hard enough. Don’t raise the bar even higher by forcing another action before a user can interact with—and find value in—your app.

2. Complicated navigation. Part of the advantage of using an app (versus a mobile site) is the ability to deliver targeted content at the touch of an icon. While we recommend everyone adhere to the “Three Click Rule” of usability, it’s even better if you can deliver in one or two. And it’s just as important to give your users an easy way to navigate back to previous pages—no one likes getting lost three pages deep.

3. Preference amnesia. Now that we’re a population of app-savvy users, our expectations have changed. If I’ve entered information about myself and my preferences, I expect my app to be “smart” about it. Leverage the data I’ve provided before to serve up relevant recommendations or information.

4. Long forms. Nothing is more annoying than trying to pick through registration forms with your thumbs. Limit forms to the minimum fields required, and use shorter alternatives where possible, such as a ZIP code instead of city and state. Wherever possible display default values, like today’s date or nearby locations.

5. Ratings prompts. Once is understandable (if tastefully done), twice is annoying, three times is desperate. Don’t constantly ask me to rate your app—it’s getting in the way of enjoying your app.

For more on mobile app best practices, check out Mashable for my 5 Mistakes to Avoid when Creating Branded Apps.

Want all the best React Native tools in one stack?  Download your free copy of our own mobile development stack

March 21, 2013No Comments

Tech Tip: Make Your Mobile App POP

POP app logo.We’re always on the hunt for new technologies that will improve the process of developing and designing mobile apps for our clients. Recently we stumbled upon a great little app called POP—short for “Prototyping on Paper”—that animates your wireframes.

Normally, during our inception process with a client, we (the client included) break apart into groups to hash out what we think each chunk of the product will do, as well as what it will look like. Typically we use giant, 2 x 2.5 ft. sticky notes and a Sharpie to draw up basic wireframes. This serves us well since it allows us to brainstorm separately and then reconvene to talk through our thought process and ideas. But sometimes it can get complicated to try to show the flow of an app—i.e., where buttons will link to—using only pen and paper.

Screenshot of “link spots” created using the POP app.

POP solves this. Take photos of your wireframes, then link your sketches together with “link spots” to create an interactive, automated storyboard. Designers and clients alike can then get a more accurate simulation of your app prototype’s user interface and flow. You can do this directly on your iPhone, or use Airplay and an Apple TV to project the prototype for a group.

As a bonus, POP also lets you share your prototype—it’s viewable on iPhones, iPads, and web browsers—so it’s easy to send off to others who may need to weigh in on your design.

This app is obviously helpful for developers, but we encourage our clients and other non-devs to check it out, too. If you’re looking to build a mobile app for your business and have thoughts about what it could look like or how it might work, POP is a great, user-friendly way to convey your ideas.

Plus, the kids love it.

Want all the best React Native tools in one stack?  Download your free copy of our own mobile development stack

March 20, 20131 Comment

Prepare for Baby with Sprout San Francisco Mobile App

After months of planning and anticipation, we're proud to announce the arrival of the free Sprout SF Baby Planner mobile app, designed to reduce some of the guesswork and stress associated with becoming a first-time parent.

Preparing for a new child can be an information-overload. No one knows this better than Sprout San Francisco, a natural and organic children’s boutique and online resource for parents. We worked closely with their team to develop and design an app that helps parents get in-depth information about all of Sprout’s products, find the items they want, then quickly and easily create a baby registry straight from their iPhones.

The Sprout app functions both as a mobile registry and a checklist, so parents can ensure they have everything they need for a new baby. The app is easy to use: Simply add products to a registry by selecting them directly in the app, or, if you’re shopping in the Sprout store, use the Scan feature by taking a photo of the product’s barcode.

Just like the Sprout website, every listing in the mobile app displays detailed product information so parents can make informed choices, and a “Get Educated” section lets parents learn more about organic products and access healthy baby guides.

Want to know more about the Sprout app? Head to the App Store and download it for free!

Want access to more articles like this?  Subscribe now to stay up to date on the latest from Table XI 

July 16, 2012No Comments

Going Mobile

Two mobile devices displaying two different mobile strategies.At Table XI, we’re thinking more and more about mobile everyday—after all, by 2014 mobile Internet usage will overtake that of desktops. At last month’s Chicago Counts conference, Kate Garmey and I talked about what makes an effective mobile strategy for small businesses and nonprofits.

While mobile apps can offer a snazzy user experience, for small businesses that may have tight budgets, a mobile website is likely the way to go. Mobile sites typically require less investment, are easier to build and deploy, and are relatively simple for employees to maintain without special development training. Moreover, mobile sites are searchable, and Google AdWords can help drive traffic to your site.

We recently launched a mobile site for Kids In Danger and just hired our first full-time mobile developer, Ed Lafoy. If you’re ready to talk about the right mobile strategy for your business, so are we.

Image source: Salty Waffle

Want all the best React Native tools in one stack?  Download your free copy of our own mobile development stack

June 20, 20124 Comments

KID Mobile Gives Parents Peace of Mind

KID mobile app on iPhone.We’re proud to announce the new mobile site for our nonprofit partner, Kids In Danger (KID) an organization dedicated to improving children’s product safety. KID was founded in 1998 by the parents of sixteen-month-old Danny Keysar, who died when a portable crib collapsed around his neck. Though the crib had been recalled, many people weren’t aware and it and similar recalled products were still widely used.

To help put an end to tragedies like this, KID wanted to give parents an easy way to search the Consumer Product Safety Commission’s (CPSC) database of recalled products. We advised building a mobile website, and we joined forces with WeMakeItSafer to employ their Recalled Product Search application.

Now, with a fully functional site that’s accessible across all mobile devices, parents can quickly and easily search for recalled items wherever they are, whether it be a store, garage sale, or friend’s basement, and make informed decisions before acquiring new products for their kids.

At their recent annual Best Friend Awards presentation, KID highlighted this mobile site as one of their biggest triumphs of the year. “Working with Table XI put life saving tools in the hands of parents and caregivers,” said KID Executive Director Nancy Cowles. “They were able to take KID’s vision of the kinds of tools we wanted and add their own creative and technical skills to put out a valuable mobile site.”

Want all the best React Native tools in one stack?  Download your free copy of our own mobile development stack

Table XI

328 S. Jefferson St.
Suite 670
Chicago, IL 60661
312.450.6320

Workshops

Give your team new problem-solving techniques with our innovating workshops and check out our event series.

GoodFirms Badge