Ning Mobile: A New Interface Designed for Modern Smartphones

[Eric Suesz]

Update: This is now Live. If you've paid any attention to our Product Roadmap this year, you'll know that our massive mobile upgrade has been hotly anticipated. We'd like to thank everyone who joined our public alpha and beta testing ! Your feedback was invaluable and helped encourage us to expand the scope of what we had originally envisioned to make it even better.

We're happy to report that by the end of this week a new mobile experience will be rolled out to all Ning Networks. This upgrade is a complete re-write of the old Ning mobile experience. It's built-in, completely free, and offers a lot more options for driving activity.

The contrast between the old and new couldn't be more different. The old mobile interface was originally released around the same time Apple unveiled their App Store. We've been upgrading the mobile version regularly over time, but we knew it was high time for a thorough rebuild and redesign. We chose future-friendly HTML5 because it allows us to create a great-looking experience across numerous mobile devices. We were able to create something that's high quality and that provides a frictionless experience for users. And it's an excellent base for adding more to the mobile version down the road. Let's take a look at a few things the new Ning Mobile offers.

A better app-like experience for your members

The old and new are radically different, but the look of the new probably won't throw you for a loop. It's designed in a familiar app-like way. It provides the same kind of swiping and tapping gestures most people are used to performing with their iOS and Android devices. It's optimized for smartphones so your members can access it easily with the devices they already use every day. You won't need any advanced design skills or a $100 Apple App Store developer's license to publish, either. The new mobile version will be consistent and running in the background all the time. Most important: It's very stable.

More pages, more options, new choices

While the old version didn't provide many options for customization, the new Ning Mobile lets Ning Creators choose which features and pages they want to appear — in the order they prefer. There's also many more features available in the new mobile experience. You can add pages to display Latest Activity, Members, Blogs, Photos, Forum, a member's Profile Page, Groups, Events, an RSS feed, and even custom HTML pages. This greatly expands a Ning community's mobile presence and possibilities, and we're excited to watch as the entire Ning Platform adopts this new mobile version.

Most of the administrative settings will probably be pretty self-explanatory. A few details to keep in mind:

• Design details: The Ning Mobile site is standardized for design consistency, but there are a few branding options for Ning Creators to take advantage of. You can upload a logo to replace the name of a network in the header or change the background color of the header. A preview mode is also provided to see what it all looks like before committing to a change.
• Choose your pages: Ning Creators can choose the pages they wish to display and how the data on the pages is sorted (e.g., by "Latest Activity"). Some pages include choices about whether to show or hide preview-style content. Don't like the order of pages? Ning Creators can drag and drop them and reorder them to their satisfaction. The first one listed will function as the "Main Page."
• Opt-out option: Don't want a mobile version? We've got you covered. If a Ning Creator removes all of the pages from the Mobile section of the dashboard, visitors will instead be shown the desktop version of your Ning Network.
• Back-out option: We've included a "Desktop View" for any member or visitor who wants to switch off the mobile version and rely on the standard desktop view.

As always, we're big fans of our customers' opinions, so let us know what you think about the new mobile version. How have your members used the mobile version of Ning in the past? What can we do to help make their mobile experience even better going forward — and make your community even more vibrant and active?

---

FAQs

Are you going to add more features later?

Undoubtedly! We've included as much as we could with this initial release. It includes a whole lot more than the old version ever did, but the new mobile interface will still not contain every detail of your Ning Network. The most-used features are included, but we may add more features over time. For example, adding chat or private messaging capabilities are requests we've heard from Network Creators.

Can I customize the design using advanced CSS?

One major goal of this project has been to make the viewing experience as standardized, compact and reliable as possible, so there aren't any CSS design alteration options at this point.

Can I change some of the wording of the interface?

Yes! Many new language strings for the mobile version have been added to the Language Editor, so chances are you can change the wording where you like.

Can I run ads on my mobile site?

We'll be rolling out an optional ad solution for Network Creators shortly that will include the ability to run Ning Ads on the desktop and mobile versions of your site.

Will tablet users see the same thing as smartphone users?

We've initially chosen to point tablet users to the desktop version. However, we'll be watching usage by tablets carefully, and we may change this in the future and provide an option for you to control this detail.

Can my members upload photos?

This depends on your phone or tablet computer. Many mobile browsers include the ability to upload photos, but the iPhone and iPad do not currently include this capability. However, Apple has indicated that the upcoming iOS 6 version of their software will include the ability for the mobile Safari browser to upload photos. Apple has said this upgrade will happen this fall.

Can I create my own Apple or Android app?

We've focused the Ning Mobile project on designing the mobile web interface, but if you do want a specially branded app, we heartily recommend our third-party partner, ShoutEm. They make beautiful apps for networks that require a higher level of branding or a specialized member experience.

[Eric Suesz]

I don't think I'm being defensive about your question. I think I'm actually responding to your tone, which is often reactionary and angry. You sometimes insist that Ning is holding you back from success. Of course, that would never be our intention. I'm just saying that we have a lot of things to build and won't be able to just focus on what is most important to you or do it in the order that you want. 

[Baller]

Who is angry? I been with Ning since 2008. If I thought Ning was holding me back from success I would have left a long time ago. Furthermore I see the progress of Ning. and I encourage it to continue. But to say I'm angry about something is crazy. I come on here for tips and if I have a problem. If 30% was missing from your check you would be concerned too.. and hope that it would be fixed immediately.My members and I love the Mobile platform but the absence of ads is a serious problem. My members have already expressed how much they love it.. so for me to take it away is not an option. Like I said before I pay almost 600 yearly.. on time. Never complained when the prices went up. So why do you have such a problem when someone voices concerns about revenue for their website?? And just read my message.. don't assume the tone. It's not angry..

P.S. The forum you linked it was because you voiced your condescending opinion then locked the forum. That is the equivalent of talking to someone then hanging up on them after you said what you had to say.

[Curtis]

Question

Great New release-just enabled it and already seeing it as a great improvement

My question is concerning the header image-what size in  pixels should a new header image be made to?

Thanks

[Phil McCluskey]

Hi Curtis,

Per the instructions in the Mobile design tab, your header image should be 40px high. The width will vary per device, but 300px should work pretty well, and ideally you set the background color to be the same color as the logo background so that the header is seamless on wide devices.

Thanks,
Phil

[Curtis]

Ok great! -Thanks Phil

This new app/mobile thingy actually makes the sight easier to navigate than the desktop version on a PC! Maybe some of these changes will effect changes to the PC version-anyways great job on this ine and many thanks for not hanging it out there for a monthly fee!

I am really looking forward to the version where we can ad our Google adsense codes. ( I am guessing this is where we will pay a fee?)

Thanks Again

[Curtis]

Hey Phil-the text box that has the instructions below is off white at least in my browser and the font of the instructions is white-making them invisivble(in the Ning Labs Editor)  until you mouse over-which is why i never saw the info about image size-just wanted to report to you. Also 40pxX240px seems to work best-in case anyone wants the info. Thanks again

Best Practices: Upload a header image with a max height of 40 pixels. Because mobile devices vary in width, use a transparent PNG or match the HEX value of your image to the header background color.

[Phil McCluskey]

Got it Curtis, thanks for this feedback!

[yousef]

I enabled the mobile website from the labs, but I still see the desktop view on my android phone, the ning network is holypal.com

help ?

[Phil McCluskey]

Hi yousef,

I'm seeing the mobile version from android. It's possible that the old front page was cached for a few minutes if you are signed out. If not, please let me know what android device you're using.

Thanks,
Phil

[yousef]

I'm using galaxy S2, using opera mobile I was able to view the mobile version right now, was probably a caching cookies thing in the stock android browser. Thank you.

[Lexie Anne]

Hi Phil Blogs isn't showing up as a page option for my mobile version of Floortimerepository.com. It is showing up as a page option in my other network. 

[Phil McCluskey]

Hi Lexie,

It's showing up in the list but is called Forums. Did you perhaps make a language editor change that would have caused that?

Thanks,
Phil