Respresso – A new concept for multi-platform mobile development

Hey folks, let us introduce you to a brand new concept. I’m sure that you know that feeling when you have a converter for pdf files, another for VectorDrawables. A third one to resize png images. Forget them and use Respresso, which is a  Digital Asset Management system for multiplatform projects.

Respresso – A new concept

Respresso is a collaborative asset management tool for multiplatform software projects

What is digital asset management? Let’s see an example. You have a mobile project and you have to develop both an Android and an iOS application. Furthermore, you have to create a landing page for them. Android and iOS mostly have the same localization texts, images, colors and app icons. Landing page probably has a bunch of texts, which are available on mobile platforms. Probably, you have to translate the apps into multiple languages with a translator, as well. At this time we usually have some questions:

  • Do we know the exact localization texts? – Usually no
  • How will we send the texts for the translators? – typically Excel or Spreadsheet
  • (Please do not modify the sequence of the texts and/or don’t remove keys ?
  • We have SVG images. How do we convert them into pdf files, vector graphics and VectorDrawables? 
  • etc.

Respresso will automatically solve all the questions mentioned above and will help you seamlessly collaborate over them. How? Respresso has a web interface so it’s more than enough to have a browser (no, don’t treat IE as a browser) to utilize all the benefits from Respresso’s capabilities. First of all, you have to create an account in Respresso. Create a team and a project within it. (If you wish, you can invite your colleagues to work together on the same projects.) After that you and your team can upload images, localization texts, colors, fonts, app icons. All of your assets will be stored in Respresso and automagically converted to platform-specific file formats. We will discuss available formats later a little bit.
The best part is that Respresso can sync your platform-specific files immediately into your source code. Although, you can choose to download all converted files as zip and manage them manually.

How can Respresso be collaborative?

Currently, Respresso supports the following asset categories:

  • Localization
  • Image
  • Color
  • Font
  • Application icons

Each asset will have a unique key that identifies the asset from source code. This is managed by developers, but the asset values can change independently. This allows designers, translators, clients, product owners, and other team members to change the updated files in the project without any knowledge in software development. Every time the developer executes the sync (or downloads the changed files) the sources will be automatically updated to match the changed assets on each platform.

Version handling

Respresso has a built-in version control system, something like Git tags. This allows you to manage your assets in sync with your app releases. If you are curious, please follow our blog, we will have a deep dive in a later post.

Version list

Localization

You can edit (add, update, delete) your localization texts online. You can also add multiple languages and allow translators to manage them. The magic happens every time someone hits the save button. This is when Respresso generates platform-specific files that will be delivered to the source code. What does it mean? There is:

  • Strings.xml for Android 
  • Strings object for iOS
  • Json for Angular, React, VueJS,  and any other web framework
  • Flat json for vanillaJS

Image

Just remember how much time you wasted managing, exporting, converting icons and images before they got to your app. Yeah, we also wasted too much time doing that. That is why we created a tool for image asset management. You just click to the “Upload file(s)” button, drag and drop your raster or vector image(s) and Respresso sort out every other task. We support png, jpg, svg, VectorDrawable and pdf  formats. Imagine that you have a VectorDrawable xml file and you have to convert it to an iOS compatible format or you have to resize your pdf image. These were headaches so far. Now you can lean back and let Respresso works instead of you. It will create VectorDrawable and pdf files in case of vector images, png, and jpg in case of raster images.

App icon

Application icons are special images with special demands. You have to create lots of images with exact resolution in case of iOS. In the case of android you have to create vectorized and rasterized variants of background and foreground image. To boil down the technical details, it supports adaptive icons for Android and all necessary sizes, formats for iOS. All of that on an easy to understand interface.

At this point we had to make a decision because there is a conceptual difference between android and iOS. As I mentioned earlier, android uses background and foreground images to show application icons (adaptive icons). It can be unfamiliar for iOS and web developers. However it is a logical separation of images that is why Respresso combine them for iOS and web platform and android can use it’s method as well. You can use the single icon option if your project doesn’t have android client or you don’t want to support adaptive icons. What do you have at the end of the process? iOS app icons from 5.x and background,foreground, combined back- and foreground icons for different android screen sizes (hdpi, xhdpi, xxx… etc.). If you upload a vector image you will give vectorised foreground and background for android as well.

Color

Although we don’t have too many colors in an app it can be a real headache to use the correct ones. Picking a color from a design image can lead to a slight difference in the color which can break your brand color scheme. On the other side, many times developers copy and paste the color codes so many times it becomes unmanageable to change a brand color. Keeping your colors in Respresso will help your team use the correct color codes in an easy to manage way.

Font

The picture is not a whole until we add fonts to the mixture. As you know, this is a hard topic as different platforms handle them in a really different way. There is no commonly accepted solution but we tried to bring you the most okayish one. This means you can pre-pack your app with your fonts using Respresso which ensures you will match your design guidelines every time.

Get your resources

Now you know what Respresso is and why it is good for you and your team. You may have a final question, How can you use the generated assets? There are two different ways:

  • First and suggested option is to use integration clients. We created clients for Android, iOS, Angular, vanillaJS, React and VueJs. In this option Respresso delivers generated assets immediately into your project. 
  • Second option is go to your Respresso project and choose a category e.g. image. Click on a version and scroll to the end of the image uploader page and you will see the download button next to the save. This possibility is available in every section. In images you can download only one image as well. You will find that download button at the end of a line.
Download resources

Summary

Respresso had been introduced in this article. This is a Digital Asset Management or Development Asset Management system, which generates platform specific assets without developers. You and your  team can manage all of them online in Respresso’s page. Respresso currently supports localization text, image, app icon, color and font uploading. It generates the platform specific files after somebody uploads a resource and hits the save button. Furthermore, I showed two different ways to download or sync the generated assets into your project. Syncing is a more comfortable approach to get that resources from the cloud into your projects. With this simple plugin or script developers are able to get resources immediately into the project and this simple solution handles the changings (upload, update and remove). Try out this service with a simple click and give feedback for us. If you liked this post, please come back and be a regular visitor on our blog.

3 thoughts on “Respresso – A new concept for multi-platform mobile development

Leave a Reply