Billy Stinnette

04/16/2014

What interactive PDF features work and don’t work on mobile devices

Billy Stinnette // in Technology

When you flip through an interactive PDF on your desktop, it’s often a pleasant experience. There are fun animations, hotspots, and videos that kindly ask for your attention and play right on cue. However, if you ever flipped through that same interactive PDF on your iPad, you’ve probably noticed that all of those fun and exciting features have been stripped from your mobile world. It’s like drinking decaf coffee. The taste is there, and it’s hot, but all the benefits have been removed. So really, what’s the point?*

Recently at Vodori, we wanted to help our Pepper and Pepper Mobile users better understand which features of an interactive PDF will work on different devices. Think of this table as our version of the orange and brown lids on Waffle House coffee pots that distinguish decaf from caffeinated.

A couple functionality notes:

  • Navigation elements work in the majority of instances, however if hotspots are set up to operate as the navigation … they are still considered hotspots and won’t work. Sorry.
  • Placeholder images for videos will still be displayed but they will have a grayed-out play button with a line through it on the iPad, which means exactly what you think: No play.

So what’s an interactive PDF to do?

As a workaround from these interactive PDF shortcomings, Vodori is developing HTML5 Pepper Mobile apps. These apps are being developed specifically for Pepper Mobile (and mobile Safari) but will be fully functional on laptops as well. Hopefully you’ll soon see another entry from me about how HTML5 is the best thing since HTML 4 but until then, be safe and don’t open any interactive PDFs on your iPad until you’re on your desktop.

Writer’s Note: I don’t drink coffee so if any of my coffee-based commentary is untrue, blame TV, co-workers, and friends who fill my head with useless coffee knowledge.

 

Share Article

Dave Krawczyk

04/04/2014

10 Best and Free Tools & Resources for iOS engineers

Dave Krawczyk // in Technology

In my time as an iOS Engineer, I have discovered many resources and tools that make my life easier. Below, I’ve compiled a list of links in an effort to spread the love and hopefully make someone else’s day a little easier. For simplicity’s sake, I have only listed my top 10 free and essential tools and resources. Enjoy!

  1. oh-my-zsh

    This framework configures the Terminal to help you fall in love with git in the command line (and just Terminal in general).

  2. Alcatraz

    Check out this package management plugin for Xcode! Browse through and/or install a list of helpful plugins, color schemes, and project templates.

  3. AFNetworking

    A well-supported, open-sourced networking framework, AFNetworking, gets your app making network calls in minutes. (There is an AFNetworking template in Alcatraz.)

  4. Parse

    Using Parse, a cloud-based backend for your apps, will help you easily integrate with some very powerful functionality. Their tutorials are thorough and easy to follow.

  5. r/iOSProgramming

    Join this online community of iOS developers. A good mix of novice and advanced topics are discussed and you can contribute when you can! It’s also a great place to discover and share new tools and techniques.

  6. Meetup

    Check out this site to see if there are any mobile/iOS development meetups in your area. Many meetups consist of a tech talk where someone will present a new technique or tool. It’s also a great place to meet and network with people in the industry. At Vodori, we’ve hosted quite a few meetups for Axure and elasticsearch enthusiasts.

  7. TextMate

    This well-rounded editor has support for a wide range of languages, including JSON and Objective-C.

  8. Resizer

    This developer tool takes a @2x retina image (or a collection of images) and exports/renames the 1x version(s).

  9. FuzzyAutocomplete

    Use this plugin that enables Xcode’s autocomplete to be a little smarter (e.g. typing ‘cellForRow’ now brings up the ‘tableView: cellForRowAtIndexpath’ method).

  10. Simpholders

    No more digging for your iOS Simulator’s Application Directory with Simpholders. This simple utility keeps them in the top toolbar for easy access.

    Bonus Tool:

    You have to pay for this one, but it’s well worth the $39.99 cost.

SparkInspector
This tool is insanely helpful when trying to debug issues with your app’s UI. It allows you to navigate through the view hierarchy of the application to see exactly what’s going on with any view that is on screen or not. This is the only tool on the list that’s not free, but it does have a 30-day free trial.

 

Share Article

Adam Bitner

03/26/2014

Learning about Axure 7 for Mobile

Adam Bitner // in Creative

A few weeks ago we hosted the Chicago Axure Users Meetup group in our offices to hear local UX designer and author Will Hacker talk about using Axure 7 for mobile. About 45 Axure enthusiasts joined us, which was pretty good considering it was another single-digit temperature February evening! 

Axure is one of our favorite design tools here at Vodori for its ability to quickly create static wireframes into advanced, interactive prototypes. With mobile and responsive design continuing to grow in importance, we were excited by the release of Axure 7. This update provided even more mobile support than before and introduced an easier way to create responsive designs.

During the hour-long discussion, Will covered a number of topics including adaptive views, mobile-friendly forms, drag and swipe events, and tips on displaying prototypes on mobile devices. Here’s a brief summary of Will’s presentation:

Adaptive Views

In the past when Axure users wanted to design a responsive website they had to implement a hack to detect browser sizes and create a separate page for each breakpoint of the same content. Now with adaptive views, you only have to create one page and then create additional views within it for pre-defined or custom breakpoints. Content only needs to be created once in a main view and can then be inherited by the additional views.

Mobile-Friendly Forms

Inputting data on mobile devices can often be a frustrating task so Will shared some tips on how to make your forms more mobile-friendly. One simple way is to specify input types for text fields within Axure. You can choose from input types such as email, number, phone number, etc., which will bring up the appropriate keyboard on your mobile device to allow for data input to be even easier.

Drag and Swipe Events

When it comes to mobile, touch gestures are an important part of how a user interacts with their mobile or tablet device. Axure supported these gestures in previous versions but in the latest version, they added more interaction events. Will showed off these new events, which included OnSwipe (Right/Left/Up/Down), OnDrag, OnDragDrop and OnLongClick (aka “long tap”). These events allow for even more powerful mobile prototypes. However Will noted that implementation of these events are not flawless as you can have conflicts when trying to assign “swipe and drag” events to the same widget.

Display on Mobile Devices

All of these new Axure 7 features for mobile are very helpful, but what good are they if you can’t test them on your mobile device? Will wrapped up the presentation by sharing some pointers on how to display your Axure prototype on a mobile device to simulate a native application. When generating a prototype, there are some important options that need to be configured within Axure to get your prototype displaying like a native app, such as including a viewport tag and preventing vertical page scrolling. You’re also able to assign home screen icons and an iOS splash screen to further enhance the experience of mimicking a native app. Your prototype can be published to Axure’s built-in hosting service, AxShare, which now allows up to 1,000(!) free prototypes.

Overall, it was a very informative presentation by Will and the audience had many follow-up questions after his talk. Vodori had a great time hosting Will and the members of the Chicago Axure Users Meetup. Hopefully we’ll have another event here in the near future! If you were unable to attend the event but would like to learn more, Will's slides and Axure RP file are both available to download on his blog.

 

Share Article

Kuu Hubbard

03/13/2014

5 Great Sites for Web Design Inspiration

Kuu Hubbard // in Creative

Looking for a bit of inspiration for your next creative project? Look no further! Here are a few websites I would recommend bookmarking the next time you have a creative block.

  1. Dribbble

    Dribbble showcases creative work with a clever basketball draft concept. Creatives must be “drafted” in order to post “shots” of their work. Frequent posting helps a designer to garner feedback from the Dribbble community and serves as great self-promotion. Prospects can use Dribbble to explore other design work until they’re drafted.

  2. Icebergs

    If you’re sick of all those screenshots on your desktop then Icebergs is the perfect tool for you. Icebergs is a cloud-based app that allows creatives to categorize inspiration into – you guessed it, different icebergs! Users can install a handy web extension onto their Chrome toolbar and simply drag and drop images into their icebergs, or upload images from their drive. Icebergs is also great for collaborating with teams.

  3. CreativeMornings

    Get inspired in-person with CreativeMornings (CM). Founded in NYC by Swissmiss, CreativeMornings is a breakfast lecture series that occurs monthly across the globe, with various themes and speakers. These designers, educators, and overall creative folks give a loose interpretation of the month’s theme while also providing an inspiring story; no two lectures are the same. Coffee and a quick breakfast snack is often provided as well as extra time to mix and mingle. If you can’t make it to a CM event, you’re in luck. CM lectures are video recorded and available online for free!

  4. Niice

    This “search engine with taste” pulls in inspiration from several popular creative sites, (including siteInspire, Behance, and Designspiration). Users can browse the most recent uploads, or search for specific keywords. “Surprise Me” is a new feature that shuffles the deck and searches a random keyword for you. Browsing Niice is a great way to keep up with current design trends.

  5. chiPD

    Chicago Product Designers (better known as chiPD) is a great resource that is closer to home for us Vodorians. The chiPD site showcases work from a collection of product designers based in the Windy City, provides job seekers with a Chicago-based job board, and houses a resource library with articles of varying topics, including visual design, mobile design, collaboration, and strategy. If you’re looking to fill a position at your company, chiPD might be a great place to start. All job postings are free and are also published to Twitter. And for anyone trying to brush up on the basics, the resources section is a must visit.

 

Share Article

Salvador Gaytan

03/05/2014

How to Debug Mobile iOS or Android issues in your Local Environment

Salvador Gaytan // in Technology

When it comes to debugging issues on mobile, it can be a bit tricky, especially when you are dealing with security issues. You don’t want to deploy your code to a publicly accessible URL just so you can view it on your phone or tablet and see if the issue has been fixed. Consequently, if the issue hasn’t been fixed, another build will be needed, and in today’s day and age, application builds and deployment can take ages. However, thankfully, there are many workarounds to solve this dilemma. One instance I’ll explain is an Apache module.

The first step is to install and successfully run Apache from your computer. If you’re not already an expert at this, you can use XAMPP in order to complete this simple step. Once this is complete, you need to create a virtual host for the site in order for your mobile device to connect to this local host. Don’t know how to create a virtual host? Turn to my previous blog entry for more detailed instructions.

Connecting Apache and your virtual host

Now that you’ve got all the parts in place, let’s connect your virtual host and the Apache server.

  1. In your httpd.conf file, make sure that you uncomment the mod_authz_host.so module. This tells Apache to be aware of any incoming requests from the network.
  2. Next, make sure you have the words Allow from all appearing inside your <Directory> tags in your virtual host. This tells Apache to fulfill the request to your application to anyone on the network. If this is a security concern, you can say Allow from xxxxxxxxxxxx, where xxxxxxxxxxxx is the ip address of your mobile device. Refer to the documentation to see how you can add more complex filtering.
  3. Restart Apache.

Configuring your mobile device

In order to configure your Android and/or iOS device, you need to make sure that your development environment and your mobile device are connected to the same network.

For iOS devices:

  1. In Settings -> Wifi, tap your current wireless network.
  2. Scroll down to HTTP Proxy and select the Manual button.
  3. Under Server, enter your computer’s IP address. Under Port, enter whichever port your Apache installation is running from. We usually use a number like 80.
  4. After this, exit Settings. You should now be able to enter your development environment’s URL in your mobile browser.

For Android devices:

  1. In Settings -> Wifi, tap the network you are currently connected to. Hold the tap for a few second in order for the Modify Network screen to appear.
  2. Modify Network and check the Show Advanced Options box.
  3. Under Proxy Settings, select Manual.
  4. Under Hostname, enter your computer’s IP address. The port should be 80, or whichever port your Apache installation is running from.
  5. After this, tap Save. You should now be able to enter the URL to your development environment on your mobile browser.

And voilà! You should now be able to see your development environment on your mobile device so you can fix any bugs before actual deployment.

 

Share Article

Technology Team

02/28/2014

Top 5 list of mobile apps for developers

Technology Team // in Technology

While many of us use our phone to dominate Candy Crush or check out Buzzfeed, others prefer to use their phone to keep close tabs on the office. Developers are the most prone to be in the work mindset even away from the office, especially when deadlines get imminently close. So in order to assuage this, we have compiled a list of development-oriented applications for mobile that will help you out.

Bitbeaker
If you’re as attached to your code as we are, you’ll love the ability to access it anytime, anywhere. Bitbeaker allows you to view, report, and track issues on the go.

JsConsole
Need to test a small snippet of code but aren’t near your computer? This app allows you to test and debug Javascript from your Android. Solve problems handily from the comfort of your bus seat or bar stool.

Stack Remote
Access most of the content on Stack Exchange  and your inbox from this simple yet functional app. Stack Remote is read-only (i.e., you have to sign into the full site to post something), but it helps us keep a pulse on one of our most useful resources, even when we’re away.

HipChat
Chat, share code, and send files to your project teams. Hipchat makes constant collaboration a cinch, and the huge selection of emoticons (and the ability to upload your own) keeps conversations colorful.

Terminal Emulator
You don’t need to grab your laptop to create scripts. Instead, this app allows you to create scripts directly on your phone with this terminal emulator. The app supports multiple windows, so you can multitask. We also like that it supports VT-100 and xterm.

 

Share Article

Adam Childs

02/19/2014

Enhancing the front-end through the back-end with Vaadin

Adam Childs // in Technology

 

As a back-end, server-side developer at Vodori, it’s always nice to find subtle ways to make an impact in the front-end realm. With the popularity of web application programming steadily growing, the emergence of new technologies for this genre of back-end and front-end immersion seems neverending. Vaadin is a Java framework for building modern web applications, providing the security of back-end development while still creating a beautiful user interface.

Vaadin is a “swing-like” derivative for the web; built on top of GWT (Google Web Toolkit) for rendering web pages. Vaadin closely resembles the Swing API with it’s layout management and component architecture. The framework provides many predefined components that can be combined within multiple different layouts to create complex web applications. Vaadin has a few default “themes” (styling for components) which can be used out of box or extended by using custom CSS. Vaadin handles rendering the components on many browsers and devices, abstracting this complexity away from the programmer. Furthermore, many extensions/add-ons exist for Vaadin, including an integration with the Spring framework and many custom components.

The most exciting part about Vaadin is that any developer, with little front-end experience, can build a web application in no time (if they’re happy with the default themes of course). Another plus about Vaadin that is close to heart for programmers is the extensive documentation (Book of Vaadin and the Vaadin API).

Getting started with Vaadin is as easy as including the JAR (Java Archive) in your project or using your favorite dependency management tool to handle that for you (Maven, Ivy, etc.). To render a simple “Hello world” web page, the following would suffice:

import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
@Title("Hello Window")
public class HelloWorld extends UI {
  @Override
  protected void init(VaadinRequest request) {
    // Create the content root layout for the UI
    VerticalLayout content = new VerticalLayout();
    setContent(content);
    // Display the greeting
    content.addComponent(new Label("Hello World!"));
  }
}

Visiting http://localhost:8080/HelloWorld will show the resulting page.

With Vaadin, not only is it possible for back-end developers to do front-end UI work, it’s also easy to use because of its extensive documentation. If you’ve ever been mystified by JavaScript’s closures and/or dynamic programming, but want to create more complex/interactive websites, give Vaadin a try.

 

Share Article

Adam Bitner

02/13/2014

Join Us for a Chicago Axure Users Meetup

Adam Bitner // in Creative

As experience designers we have plenty of tools available in our toolbelt when it comes to designing digital experiences. One of our favorite tools to use in the Vodori design process is Axure RP for its ability to create simple, static wireframes or complex, interactive prototypes.

That’s why we’re thrilled to be hosting the next Chicago Axure Users Meetup event on Feb. 26 at Vodori. The evening’s topic is “Axure 7 for Mobile” and will feature Will Hacker, a local UX designer and author.

Axure has been around for almost 12 years and recently released version 7. This latest update includes some great features such as support for responsive design, data widgets (repeaters), on-demand prototype previewing and more.

Vodori welcomes any designers or other digital aficionados who would like to learn about how to use the latest version of Axure for mobile design.

Hope to see you there!

Event Details
What: Chicago Axure Users Meetup
When: 6 p.m. Wednesday, Feb. 26, 2014
Where: 315 N. Racine, Second Floor, Chicago, IL
Other important details: Food and beverages will be served. To RSVP or for more event details, visit the meetup page for the Chicago Axure Users Meetup.

 

Share Article

James Kearney

02/06/2014

The value in values: Explaining the Vodori Way

James Kearney // in Strategy

When our leadership team first started to talk about the values that we held as a company, we had been exposed to so much industry hype about “mission”, “purpose” and “values” that we really questioned whether values were worth discussing at all. After all, we'd been accomplishing great experiences and services for our clients and employees without stating or explaining our values, so why spend the time? Would this values discussion just be a few bulletpoints that we published in our wiki, framed on our office walls, and then never mentioned again?

Last year, we decided to poll our employees and ask them to anonymously share their own values. Across all of Vodorians, the results were so similar that we immediately realized that these individual values were, in fact, the unstated values of our company. So we distilled the essence of these personal values into something that we could use to define who we are as a company -- something that we could build into everything we do and every interaction we have with our clients and with each other.

Building connections

It turns out, there’s a lot of value in values. And the best way to see Vodori’s values in action is to see how we’d been living them on a daily basis. We make it our mission to help our clients build connections with the world around them. But building connections takes time, and requires more than just an understanding of our clients’ industries -- it also requires a deep understanding of how our clients think, how they approach their markets, and how they view their customers. This level of understanding is the product of a long-term partnership, and we’ve found that the best ways to develop and grow these successful partnerships stem right from our core values.

The Vodori Way

At Vodori, our core values provide the basis on which we build and grow these relationships, and the most fundamental of these values is providing extraordinary service. This is our way of describing all the ways we go the extra mile to make sure our clients are absolutely delighted with our work. Whether we’re providing the thought leadership that gets them another step ahead of their competition, tucking in one last feature that their customers will love, or tweaking a new web site in the final minutes before launch, our team is always focused on adding more value.

But to provide extraordinary service requires great teamwork. For us, teamwork is about putting the needs of the team ahead of our own, celebrating victories with our clients, and helping each other navigate the challenges of the ever-changing world of digital marketing. The needs of our clients are constantly evolving, so we try to build teams that can respond to a wide variety of requests, pull in experts as needed, and still provide the continuity that helps create enduring relationships. Our self-organizing agile teams take this to the extreme, and our clients and their customers reap the benefits.

Even the best teams still have room to grow, so we put a lot of importance on staying humble. Vodorians listen carefully to our clients, learn from each other, and remain focused on our long-term goals when celebrating our latest successes. To stay at the top of our game, we focus heavily on continuous improvement. Our project post-mortem discussions, sprint retrospectives, and employee-led internal committees are part of our day-to-day work because we always looking for ways to take what we do to the next level.

At the end of the day, words have no meaning unless you have action behind them. And with Vodori, our values are simply that — actions that show our clients that we’re with them for the long haul.

 

Share Article

Elizabeth Benjamin

01/23/2014

Better Know A Vodorian: Liz Benjamin

Elizabeth Benjamin // in Vodori Culture

Title:

UX Designer

Specialities:

Information architecture, usability, wireframing, trivia

What do you do around here?

If you see a website and take away the paint (the colors, the pretty photos, the words), I’m the one who dictates the structure of the website, such as what the layout may look like or how the navigation works. I think about the end user and how they would move and interact with the site and make my decisions from there. I make sure that the user has a worthwhile and efficient experience while moving through a website.

You’re a born and bred New Yorker. What was the transition to Chicago like?

I’ve always wanted to move here. Good things always happened to me when I was in Chicago. When I was younger, I remember visiting the city and winning $50 from a scratch off ticket. I also got to sit in box seat tickets at a Cubs game. So for me, Chicago always just seemed to be a lot of fun — a place with good memories. So I decided to let the good times continue.

What do you when you’re not at work?

Trivia! Ever since I was a kid, I’ve watched Jeopardy and wanted to be on Jeopardy. There is even some video of me as a kid doing an impression of Alex Trebek. In college, I was part of a trivia team and now I’ve continued it here with a Meetup trivia team in Chicago. It’s been quite lucrative. I’ve won a few hundred dollars and lots of gift certificates.

What’s your specialty on the trivia team?

I’m a pop culture enthusiast. That’s a fancy way of way of saying that I read a lot of books and watch a lot of TV. I also love puzzles and word games. I’m a little nerdy. But I’m proud of it.

What’s it like being a Vodorian?

People move quickly around here. When a project begins, it moves fast. A lot of decisions are made in a short period of time. And it’s been great because I’ve gotten to take on a lot of responsibility and get to make a lot of decisions in a variety of areas. One day, I’m wireframing, one day I’m giving design recommendations, the next I’m making site maps and reading up on user research. My days are never boring.

In general, Vodori has a fun culture. Everyone is so nice and I’m not afraid to ask anyone questions. There are all different types of smart people here and I get to pick their brains. Everyone brings something to the table, which has been great for someone just out of college.

 

Share Article