HTML5/CSS3 – TechCommGeekMom

Instant Mobile Apps? Not quite.

Posted on February 11, 2013 by TechCommGeekMom

Last week, I was in contact with one of my former professors at NJIT‘s MSPTC program. We talked about several things going on, and in the process of the email conversation, she mentioned that she is starting another semester of the PTC 601 (Advanced Professional and Technical Communications) classes, and she asked me a question about mobile, because she wanted to add a new component to an assignment.

I remember doing the assignment well just three years ago. Essentially, the student is given a manual for a fictitious coffeehouse franchise’s espresso machine, and the student has to rewrite the manual into a quick reference guide, preferable something that included visual images that could the learner/user can learn from it or refer to it as needed. Conceptually, it’s an easy enough assignment (or at least it was to me), but creating it with the tools I had at the time proved challenging, even if I did pull it off.

Adding a mobile component to this assignment makes a lot of sense to me. This is a perfect example of what m-learning is, what it looks like, and what it can be! Taking a simple how-to manual and creating a mobile app for it is highly logical, especially in this scenario. I mean, think about it…how often do people whip their smartphones out of their pockets to look up any kind of information, let alone have a how-to app on their phones? So having a special app that could be downloaded and instantly used as a reference guide for that newbie coffee barista would be ideal!

I was happy to hear about this addition to the assignment. The professor knows how enthusiastic I am about promoting mobile solutions, and I was thrilled to hear that she is making an effort to include mobile solutions in the MSPTC curriculum. So, she asked me if I knew any software programs that could convert text into some sort of mobile output. The first thing that came to mind was Adobe’s Technical Communications Suite 4, especially with Framemaker and Robohelp. But, the school doesn’t have a copy of that for students yet (they are working on it), and even with the short trial, there’s a big learning curve for an assignment that would be due fairly quickly.

So, I began to do a little research to help the professor out. There were a few things–a few parameters–that I had to keep in mind as I looked for a tool for her to use. It has to be easy to use for someone who didn’t have too much or negligible programming skills. It has to be free or at the barest minimum of cost. And it had to have an easy ramp-up to have a project done on it in a week or so. I knew, from experience, that people from all walks of life come into this program, with a true mix of web expertise. I remember helping some of my fellow classmates by providing a crash course in HTML, and the quest for the free or cheap web editing software or site where an e-portfolio could be created. So, I understood the parameters well.

The sad thing I discovered was that while there are dozens of places to set up and create free or cheap websites with web editing available that anyone could use to set up a good looking site, the same can’t be said yet for creating mobile sites. There are a few sites that do help a person create a mobile app easily, but it’s not cheap. Or, if it’s cheap, it requires some programming know-how. It was tough. the other thing to keep in mind was whether the mobile app being created was for a “native” app, a “web” app or “hybrid” app. The differences between these is that a native app is saved on the mobile device and can be used offline. The web app is one that is essentially a mini website and needs an internet connection to access the app. A hybrid is…well, you can figure that out. If you’ve ever tried to access an app on your phone, but couldn’t get it to function because you didn’t have wifi or 4G, then that’s a web app. If it only partially worked, but you still needed wifi/4G to connect for part of it, it’s a hybrid. You get the idea. In the end, I gave the professor a few suggestions that I found.

The first was something called Viziapps. I think I had heard of Viziapps because I believe (just off the top of my head) that this was the software being used in an STC class on how to build mobile apps. Viziapps allows individuals to create a mobile app without knowing any or little coding, but they would have to have some idea of information architecture (which is part of the project assignment–understanding what’s important, what’s not, what comes first, content structure, etc.). It’s mostly a visual editor that allows the user to build the apps online, then publish on the web for free, provided the creator has created a web app. If it’s a native or hybrid app, then that has a price. It seems like it might be a viable choice as a tool that would allow for a quicker ramp-up for someone seriously trying to create a mobile app.

Other more creative choices would be using their mobile devices to make something. For example, there is an app called SnapGuide, in which an individual can take photos or video to demonstrate how to do something. Mobile by Conduit might be another possibility, as it’s free, and supposedly has an interface style similar to WordPress.

But then I thought about WordPress, and I realized that might be another option. TechCommGeekMom is a WordPress website, after all, and it can be read on mobile devices. Basic WordPress accounts are free and fairly easy to use. You can create a “blog” or website on WordPress, and then there’s a setting to create a mobile interface. Here’s a little bit of info about it: http://en.support.wordpress.com/themes/mobile-themes/ It seemed to fit the criteria needed for a mobile app creator/editor, in that it’s free, it has a mobile output (as well as a regular web output), and it provides a primer for content management in the experience. I thought that if I was still in the class, I’d create several pages on a single WordPress website for different parts of the Guide–similar to the pages and navigation I have here, and then promote the mobile access to the website. It’s not a perfect system, but for quick ramp-up purposes for a fairly small assignment, it seems like it would fit the bill.

I think my former professor appreciated the help, but we both discussed the dilemma that it posed. Why must someone have a programming degree and some cash in order to create a mobile app–whether it be a native, hybrid or web app? Depending on the app, all three formats have their positive and negative aspects to them. But how does one learn how to use any of these mobile app writer/editor products quickly? There are some great tools out there, I’m not denying that, but for the true beginner or student on a budget who is trying to learn how to create mobile solutions skills as a technical communicator, it’s not that easy. I see a huge business opportunity here (not that I have the time, cash, or enough knowledge to start such a business), but creating a highly user-friendly software program that one’s grandma could create a mobile app for a very low cost would be a fantastic business. It would make even more information accessible to share with others.

It occurred to me later that for the average user, another possibility is another Adobe program that I’ve been using to create and maintain my e-portfolio, called Adobe Muse. It’s a cloud-based app that acts as a very easy UI interface to create websites and mobile apps. I’ve used the website editor, but I haven’t tried the mobile conversion yet there. I believe it’s about $14-15 per month, and you can set up an account at Adobe’s Business Catalyst and create your mobile site that way. It allows those who have next to no programming skills create something that looks great, but it also allows more advanced users some nice shortcuts to create great sites without having to do all the coding–Muse does it for you.

Perhaps, as mobile solutions become more mature like editing software for desktop interface websites, this mobile app creator problem will go away, and there will be more affordable options. In the meantime, we have to wait or muddle through it all…

If you know of any easy-to-ramp-up mobile app editors, please mention it in the comments below! Share, everybody!

Uncategorized

Adobe Day at LavaCon 2012 Roundup!

Posted on October 14, 2012 by TechCommGeekMom

This post is just a quick summary of the Adobe Day at LavaCon 2012 series from this past week. As you see, there was so much information that it took six posts to try to summarize the event!

Being in Portland, Oregon was great. It was my first trip there, and being a native Easterner, my thoughts pushed me to that pioneer spirit of moving westward in this country. Once there, I saw a hip, young, modern city, continuing to look towards the future. The information I gathered at Adobe Day was general information that was endorsement-free, and practical information that I can use going forward as a technical communicator, and that by sharing it, I hope that others in the field will equally take on that pioneering spirit to advance what technical communications is all about, and bring the field to the next level.

To roundup the series, please go to these posts to get the full story of this great event. I hope to go to more events like this in the future!

As I said, I really enjoyed the event, and learned so much, and enjoyed not only listening to all the speakers, but also enjoyed so many people who are renowned enthusiasts and specialists in the technical communications field and talking “shop”. I rarely get to do that at home (although it does help to have an e-learning developer in the house who understands me), so this was a chance for me to learn from those who have been doing this for a while and not only have seen the changes, but are part of the movement to make changes going forward.

I hope you’ve enjoyed this series of blog posts. I still have many more to come–at least one more that is inspired by my trip out to Portland, and I look forward to bringing more curated content and commentary to you!

The autograph from my copy of
Sarah O’Keefe’s book,
*Content Strategy 101*.
Awesome!

Uncategorized

Adobe Day Presentations: Part III – Joe Welinske and Multi-Screen Help Authoring

Posted on October 8, 2012October 12, 2012 by TechCommGeekMom

Joe Welinske of Writers UA followed Sarah O’Keefe’s presentation on Adobe Day. I was especially interested in hearing what he had to say, because the topic of his presentation was about “Multi-screen Help Authoring–How to Deal With the Explosion in Device Sizes.” Anyone who’s read this blog before knows that I’m very much into the mobile revolution, and while I’m usually talking about m-learning more specifically, mobile goes beyond learning, and using mobile in technical communications is connected to m-learning in many ways.

Joe explained that the device population keeps growing! Smartphones and desktops are changing; the sizes between smartphone and tablet devices, whether they be iOS, Windows or Android devices truly vary. The same content needs to be displayed on everything from large monitors to laptops to tablets to GPS to small phones–there are dozens of choices! How do you design a UI (user interface) for all these variations?

Joe explained that different devices have different dimensions, different operating systems, different user interfaces elements…lots of variations to contend with when creating content. He suggested that a “graceful, efficient adjustment is needed,” namely matching the amount of content and the type of content with a device without crafting solutions for each. He contended that responsive design the key as it allowed for adaptive content. Responsive design would allow flexibility for different environments.

Joe mentioned that Scott Abel has touched upon this during his presentation, but Scott later clarified for me on Twitter, by saying, “That’s one way, although I question whether it is the best way…Lesson: Adapt content first, design second. Wrong content, right design = #fail.”

Joe continued by pointing out that one way to accomplish this objective included using HTML5/CSS3, tagging all objects in source code, create device-type style sheets, and including media queries in source. The end result would be a single-source content file that looks and works well on different devices. To prove his point, Joe demonstrated how same source content looked on different devices, specifically the iPad versus iPhone in this example. Joe also showed an example of how he divides the devices by “buckets” when creating his style sheets into categories such as 10″ tablets, desktops, phones, etc. He recommended using a “parent” style sheet, then fine tuning with a device style sheet for each device type. This would help create a graceful adaptation using HTML/CSS and query to allow your content to flow automatically and intelligently. From that point going forward, a technical communicator can consider making mobile the starting point and expanding from there. Joe’s last point was that a small percentage of people from traditional technical communications are involved in mobile projects but the user experience and design skills are actually similar.

I agree with Joe that designing for mobile really does use many of the same skills as traditional design methods, but it does take a little extra time to lay out the thought process and structure needed to make the content be delivered from a single-source to multiple types of mobile devices. It’s a little tricky, but with some careful thought, it’s not really as complicated as it could be. By using single-sourcing and customizing style sheets, multiple output of content can easily be attained. I strongly agree as well that this is the mentality that people need to adopt, whether involved in technical communications or e-learning/m-learning now. I think this opened the eyes of many attendees in the room. Mobile really is an important consideration now in content output!

Next: Adobe Day Presentations – Part IV: Val Swisher asks, “Are You Global Ready?”