Capsized Eight

Doors open recap

Wed, 08 May 2013 09:50:00 +0000

We hosted a Doors open event for students yesterday. It was a cool chance for students to see how a software design and development shop operates. And we had Rakia.

As a student, you mostly don't have any idea how a proper workday looks like. Over 60 future designers and developers visited our Zagreb office yesterday, and got a glimpse of the everyday work-life at Infinum.

I gave them a quick rundown of the company, the technologies we use and how we're organisationally set up (which is not all that complicated because we keep it as simple as possible without actually falling apart).

Next, Matej, Nixa, Josip and Darko talked about their teams and respective technologies they work with - iOS, Android, Web and Design).

After that, it was free for all time, students could walk up to anybody in the company, ask them about what they're doing: how do they like it, is Objective-C hard, are Macs really the best development platform, and does the Web team really eat that much.

We're hoping the guys and girls from FER, FOI, TVZ, GRF and Design studies liked it, and hope that some of them will be our future colleagues.

And thumbs up to Goran and Martina for doing a smashing job organising the event.

New business cards

Mon, 06 May 2013 14:55:37 +0000

Still smoking hot and fresh out of the printing press, here they are, our new business cards.

Alongside the new brand refresh we have going on in the past few months, we went out and redesigned our business cards. Hope you like them!

Infinum Doors Open in our Zagreb office - Students invited

Mon, 22 Apr 2013 14:22:00 +0000

We would like to remind the students that all the hard work they put in, blood, sweat and tears during their college days are not in vain, not at all.

Besides the official recognition in the form of graduation ceremony, there are many great things waiting for them, just behind closed doors.

We are opening our gates to let current students (but prospective) employees, embrace the world of what we call the best of the best in the business of software development.

This event is for students that have an interest in mobile application design and development for iPhone, iPad or Android using Objective-C, Java, Ruby on Rails, HTML5. For anyone who sees itself in this line of business after the college days are over, this is the ideal chance to see what their working environment and a day in the office will look like.

Infinum - Doors Open Day, will take place on May 7th, in our Zagreb office in Andrije Žaje St. 10.

What's the idea behind Doors Open?

The basic idea is to inform students on how the mobile and web development works, and open a new window for them to explore the opportunity to work in this business once they graduate, and also see what awaits them if they join our team.

I bet everyone who uses a smartphone and mobile apps on a daily basis wonders how they get built. Every student will have a chance to talk to our developers, designers and find out everything they want to know.

This is the first time we have this kind of event at Infinum, and we plan to make it a regular.

A day is organised in 3 groups. Each group will consist of 20 students. We will show the students a brief presentation about Infinum, what we do every day and how do we do it. They will probably even see some stuff that's not released yet, as well as our our greatest hits.

Applications for the event are available on our website, in Croatian.

We will provide snacks, beverages and Rakia! We will not provide excuse notes for ditching the classes!

See you around!

My Formula 1 fantasy game

Wed, 03 Apr 2013 11:30:11 +0000

If you can't drive Formula 1 cars or visit races, at least you can test your predictions skills right from your armchair!

Formula 1 is a very exciting and expensive sport, both for the drivers & teams as well as spectators. While the official website offers a lot of technical information, it lacks any additional excitement. So what's a formula-1-fan-slash-adrenaline junky to do?

The Addiction

I've been a Formula 1 fan for as long as I can remember, and probably even longer, judging by some pictures from my early childhood, of me in a toy formula car, labeled "young Fitipaldi", even though I never drove even a go-kart as a kid.

They called me "young Fitipaldi"

Sometimes it's hard to explain to someone how watching 20 cars driving around a 5km track for 60 laps can be exciting. You could start with the agility and reflexes required to drive a car 300 kph, go through the corners and shicanes, overtake other drivers, react to changing weather conditions and keep a high level of concentration for almost two full hours.

But that would seem like pure math and physics, completely stripped of any emotions. Emotions you have when you try to imagine yourself driving that car, leaning left and right while watching a duel, pressing your feet on the edge of the bed trying to accelerate and pass the car in front.

Yeah, that's me. The car is not mine though, I prefer Ferrari.

Once you experience these emotions, you won't need any more explanations, you can just admit - you're hooked to the Formula 1 drug.

The Thrill

So, March till November, every other weekend, we're sitting by the TV on Saturday and Sunday, waiting for the race to start. Sometimes we even afford ourselves to go and watch the race live. We watch the race, get our adrenalin rush, and start counting down till the next race.

Massa passing through Parabolica after Alonso winning in Monza 2010

Can it get more thrilling? Yeah, we could go to a simulator or play a video-game, but does that make the real race any more exciting? I don't think so.

Get into the fantasy

Screenshot of MyF1 dashboard with ranking graph

I'm sure you've heard all about fantasy football leagues, where you compete against other users as a team manager, participate in drafting or trading players, preparing rosters, etc.

We're proud to say that we've built the new MyF1 - the Ultimate Fantasy Formula 1 league and brought a dash of this excitement to computers, tablets and mobile phones. By playing this game, you can predict the results of qualifying and race or which teammate will score better. Then take your predictions, and compete with the entire world, your country or a private group of friends in your own league.

Additional features include news about your favourite teams & drivers, leader boards and a ranking history graph. Of course, while the race session is on, you can track how your points & ranking change in real time.

Responsive web design

Like our new website, the new MyF1 game is also built around responsive web design.

Although a lot of people have the offical live timing on their computers during the race (ie. to keep track of their favourite driver), an even larger number of people like to sit in their armchair or lay in bed and watch the race.

Having a tablet or mobile phone in their hands, lets them check out the live leader board. No matter what kind of device you're using, you get all the information nicely formatted to fit your device.

MyF1 - responsive for desktop, tablet and mobile

Try MyF1 out, I hope you like it!

The Infinum Test Lab: Device testing

Mon, 25 Mar 2013 21:48:03 +0000

If you want to find bugs in your software before the user does, you need to test on a respectable set of real world devices. In other words - you need a decent test lab. What do you need to build a good test lab? Read on.

Software needs testing

Modern software tends to be reasonably complex with many dependencies and different use case scenarios. Because of that, there is a reasonably high chance that some sort of defect has snuck into an application. That's where testing steps in.

To quote the famous Dutch computer scientist Dijkstra:
Program testing can be used to show the presence of bugs, but never to show their absence!

That being said, the goal of testing is to find as many bugs as can be found.

Devices, devices, devices!

The most popular mobile operating systems today are iOS and Android, so I'll try to focus here on how we do testing for these devices.

Android

The Android ecosystem is very diverse and fragmented. This is what the version distribution looks like at the time of writing:

Darker color indicates a later release date.

What we can see from this is that Android 2.3.X (codename Gingerbread), still holds the largest market share, although it was released more than 2 years ago! To make things worse, device vendors (Samsung, HTC, etc..) make their own changes and "improvements" to the Android OS which sometimes results in weird bugs and inconsistent behaviour.

To be able to test android applications this is what you need to have:

devices with all major and minor versions since Android 2.2 (codename Froyo)
devices from all major vendors. These include: Samsung, Motorola, HTC, Sony Ericsson (now just Sony). Check out your target market here. Samsung is big everywhere, but Motorola is bigger in the US, not so much in Europe.
devices with diverse screen sizes and different screen densities (I'm talking HDPI, MDPI, LDPI, XHDPI etc...)

Of course, even if you run an app over all of these devices, you can never be sure that you picked up all the weird device specific bugs that pop up on Android phones. But that's the price of having an open (for the most part) operating system.

Different devices in the Infinum test lab

How about the Android emulator?

You can use the Android emulator to aid you in testing. The emulator, however, has two major problems.

The first one is the vendor-specific behaviour I mentioned earlier. More often than not, this results in the emulator not being very trustworthy.

The second problem is that the emulator is painfully slow, taking it several minutes to get up and running. This is due to the fact that it emulates an ARM processor so it can run the actual code of your application. It's also a CPU hog and generally a pain in the ass to work with for developers or testers.

iOS is better, right? Right?

Since only Apple manufactures iOS devices, the number of different iOS devices is much smaller, and the whole ecosystem is a lot less diverse than what is the case with Android.

Taking this into consideration, the iOS version distribution looks a lot saner:

What you can see here is that a major part of the user base is running the latest version of iOS. This is very common behaviour for iOS users - to upgrade fast and often.

Keeping that in mind, to test iOS applications, typically you would need:

the latest iOS devices with the latest iOS version
devices one major version behind the latest one
devices with all screen resolutions

When we say "iOS devices" this includes iPhones, iPads, iPad minis and the like.

These are the devices we test iOS apps with

You can also use the iOS Simulator to aid you in testing your iOS applications.

Simulator vs Emulator

Notice how Android has an emulator, but iOS has a simulator. There is a subtle, but very important difference. The iOS Simulator does not run the same application code that runs on the device. The code compiled for the iOS Simulator is really x86 code, as opposed to ARM code that runs on iPhones and iPads.

What does this mean for you?

It means that the iOS Simulator starts up in seconds, rather than minutes. It also means that the hardware conditions are not simulated, as is the case with Android. With that said, I have found the iOS Simulator to be accurate enough to use it as a help with testing. It is, however, not accurate enough to replace testing on real devices.

Device-testing

Notice when I talk about testing here, I'm not actually talking about automated testing. We call this sort of testing device-testing, and the goal is to find layout/design bugs, bugs on different operating system versions, bugs on different screen sizes, or with different vendors.

Apart from mobile, we also do a lot of web apps, so in my next article, I'll write about how we built the test lab for testing web applications and handling different browser versions.

The New Infinum Website 01/04: Going mobile

Tue, 19 Feb 2013 09:42:05 +0000

The future is here. Making our new site work properly across a variety of different mobile and tablet devices was a challenge, but one worth taking on.

Responsive web design (RWD) has been around for some time now. Analyzing the stats from our old site, we were getting around 30-40% traffic from mobile devices and this figure just kept growing. We knew we had to optimize our new site for mobile, and responsive web design was obviously the ticket.

Do you really need to optimize for mobile?

Unless you're building a site for people who hate mobile phones, you probably want your website to have some sort of mobile-optimized presence. Maybe it'll just be a chopped down version of your desktop site or maybe it will include all the content from the desktop site. Nevertheless, you want your mobile users to be happy.

Responsive web design or not?

In the tech community, there is a discussion going on if responsive web design is the best way of approaching mobile optimized web content, as opposed to just building a separate (http://m.yourdomain.com) mobile site. There are obvious pros and cons to both approaches.

One of the major benefits of responsive web design is that you only have to develop the website once, and the content adapts to different devices so you only have one codebase to maintain. Also, if you're any good at it - you're not hacking for specific mobile phones, so it's reasonably future-proof when new devices turn up.

The arguments against using responsive web design say that if your "mobile" and "desktop" sites don't have much in common, content gets transferred over the wire, only to be "hidden away" from the mobile user. Not to mention that you're transferring high-res images probably intended for desktops.

Generally, adapting a very complex website layout to a responsive web design system isn't all that easy. Same goes for adapting a website layout that wasn't originally planned to be responsive.

Nevertheless, the pros outweigh the cons by far for a site like ours, so this seemed to be the ticket. This is also the general direction the entire industry is taking.

The Grid

Responsive websites are all about grids and breakpoints. These are design boundaries that, when used on different screen sizes, determine how your design scales and floats around.

For the responsive features we used Twitter Bootstrap minus all the components and styling rules - just using the responsive grid. Since we use it on a number of projects, we're very familiar with Bootstrap, which was probably the main reason we went for it, although there are a lot of different responsive grids on the market.

Apart from the responsive grids, Bootstrap also has a couple of nifty CSS classes you can use to show/hide your content on different devices (.hidden-phone, .visible-phone, .hidden-tablet and so on).

Darko, our chief designer, envisioned the site as a 12 column grid layout. Designs were created in parallel for desktop and mobile. We noticed that whenever we'd abandon the mobile-first principle, we'd get screwed in the end, so the main takeaway is - do mobile first.

Target screens

The idea for the design was to have a couple of target screen sizes, for testing purposes:

Enormous screens - we're talking your 27'' iMacs. The maximum content area here get's up to 1280px wide, but the screen gets wider.
Big screens - we're talking 980px-1280px width. The idea is that you're just using up the safe area. The site doesn't scale yet
Medium screens - we're talking 480px-980px width, your average tablets (portrait or landscape), or mobile phones in landscape orientation
Small screens - we're talking mobile phones here mostly. 480px or smaller

Testing for all these cases, we managed to cover most of the market for devices today.

Navigation

When building a RWD-enabled site, navigation is usually an area where you'll encounter problems. For the new Infinum web, we had 2 navigation patterns - Main menu and Submenu.

For the main menu, on mobile, we used a special menu, that folds down. The menu also uses the position: absolute CSS property to stick to the top. With a bit of Javascript magic, we also get the navigation to hide so you get more screen real estate. This is how it looks:

The submenu was tricky. We needed to use it, and it looked great on the desktop site, but on the mobile phone we had problems pulling it off without using a lot of screen space.

We went with the choice of breaking it down into a "wizard-like" submenu, where you'd progress through all the menu items one by one. Still not sure if this is the best choice, we'll need to see if we can iterate on this idea.

Optimized images

I'll talk a little bit more about this in the next article, when I talk about performance - but the general idea was that we serve different sized images for different mobile screens.

Since the website is very rich with images, this a major performance point. We decided to serve smaller-res images for mobile phones. Here's the main image for the Monsters and pirates case, in various dimensions for various devices.

All this starts to matter, especially on lower mobile network speeds, like EDGE for instance.

A helpful tool for doing responsive web design

The Viewport resizer from MalteWassermann proved to be an effective tool for testing. You can quickly throw around a couple of different device formats and orientations. It's simple and fast to use.

But alas, nothing beats testing on real devices.

People rarely turn their screens around, but they do that all the time with their phones, and especially their tablets. So, a big part of optimizing for responsive was checking if the website works fine in any screen orientation.

How much does it cost?

I actually get asked this a lot - what's the overhead of building a responsive website, as opposed to a regular one?

Well, for building the new Infinum website, I'd say we spent around 40-50% more time than if we were to build it as a regular, desktop-only website. The majority of this time was testing and optimizing on different devices. A very big part of this was adjusting for speed.

Was it worth it?

Hellz yeah! Try our website on your mobile phone, it's leaking awesomeness. If we never get another mobile visitor ever again, I'd still be proud at how me managed to pull the entire thing off.

The New Infinum website is live, and it was about time

Thu, 17 Jan 2013 10:00:00 +0000

Good news everyone! We have a new site, and it's leaking awesomeness all over desktops, mobile phones and tablets.

Where we come from they say that the shoemaker wears the worst shoes. All too often, this is true in other professions. You get so tied up in your day-to-day work (which is building stuff for clients), that you never get around to building stuff for yourself. We had to change that.

The new website

The old website was extremely outdated, both in terms of design, content and the technology behind it. We moved to building the new one a couple of months ago.

We wanted it to reflect all of the core values behind Infinum - the professional approach, the attention to details, showcase the technologies we work with, showcase all the stuff we've worked on over the years and wrap it up in beautiful design.

A lot of work went into the polishing process, the iterations of "should we do this, or move it 10px to the right". With this project, the web and design teams probably landed the toughest client they could get - me.

Kudos to everybody working on the project, the web team punching away at the backend and frontend code, the design team with the awesome design, the QA team for doing iterations and iterations of testing on different devices and everybody else that pitched in on the work.

Focus points

With the new Infinum website we wanted to nail 4 things just right. They are, in no particular order:

Mobile
Speed
Portfolio
Blog

In the future, I'll dedicate an article addressing each of these topics and the how's and why's.

In the meanwhile - take a look around and tell us what you think about the new site.

A more transparent relationship between the user and the mobile operator

Sat, 12 Jan 2013 14:41:00 +0000

The tremendous breakthrough of software in recent years is creating problems for telecom operators.

With the advent of Internet companies such as Skype, Viber, Facebook or Gmail, the need for mobile operators has been reduced to providing the infrastructure for access to services which aren't in their offer and for which they have no direct profit.

Landline telephony over the last few years has become only an infrastructure for Internet access, and a similar thing is also starting to happen in the area of mobile telephony.

The quality of basic services (voice, SMS, data) has been raised to a high enough level for all operators so that a noticeable difference no longer exists, in contrast to the situation we had just a few years ago. Gone are the days when Tele2 users had to go out of the building to catch a signal and do a call or receive SMS messages.

In addition to that, users are now allowed to transfer their phone number between network operators without changing it, which further helped to increase the mobility of users between mobile operators.

Currently the most important factor in choosing a network for users is the price because the quality of service is more or less the same for everybody.

Moj Vip for smartphones

Following that path, Vipnet has last week in cooperation with Infinum released the Moj Vip application which enables easier and faster access to information about your expenses and the services you use. To view information about your expenses, there is no need to create an account, it's enough to install the application and run it.

If the user is using mobile internet, the application will automatically identify him and show the information for him. This makes it a lot easier to access your data.

Functionality

Interesting features of the app include:

overview of expenses
overview of free minutes/SMS/MB
roaming packet activation
mobile surf packet activation
overview of personal data

Every user that buys a new Android phone with Vipnet will get the application preinstalled on the device.

Transparency

Vipnet is currently the only telecom operator in Croatia, which has released an official app of this type, and the plan is to actively pursue the development of new functionality. This is an excellent example of monitoring the needs of the customers and adapting to new times and conditions.

No one can claim that Vipnet will billions from this application, but it is certain that the users will perceive this as a positive step towards a more transparent insight into their expenses.

Some time ago the portal moj.vip.hr was something innovative and new, but today in the smartphone era we should definitely think about approaching customers in this way. Companies that have room for such useful applications should not ask whether or not to offer them - but when.

Application download

Setting up a new PC

Thu, 10 Jan 2013 04:11:00 +0000

I went on the Internet, and I found a funny comic depicting what it's like to set up a new PC.

Windows, Linux, Mac. None of them are perfect actually.

Croatia Traffic Info - 100.000+ downloads and a few cool things you should know

Wed, 02 Jan 2013 20:09:00 +0000

HAK stands for Croatian Automobile Club, and in cooperation with them we have developed a popular mobile application.

To start, let's break down the application into relevant numbers. The application has:

49.000 downloads for iPhone,
56.000 downloads for Android,
more than 1.400.000 sessions,
an average rating of 4.5 on App Store,
an average rating of 4.7 on Google Play.

In a nutshell, this mobile application is a swiss army knife for people who travel, regardless of the distance. Taking these numbers into consideration, this has been recognized by a large number of users.

What can this app do for me?

Let's assume for a moment you've found yourself in another city and are having trouble finding where you've parked your vehicle. We have a solution for that. Trying to find a nearby ATM or branch from your favorite bank? The information is at your disposal. Your travel route includes a highway and you would like to check the traffic info before you go? Piece of cake. While at it, why not check where is the nearest gas station and how much they charge for the type of gas you need.

Although it may seem that this application is aimed at people who drive only, due to the extent of information available, it is very useful to people who have no intention of sitting behind a wheel in the foreseeable future.

A few cool things you should know about

Several other blogs and zines have covered this app already, but we would like to point out a few things that are not immediately obvious, mentioned before, or we just consider too cool to miss out.

1. Sortable menu

Same as our Erste mBanking mobile banking app, we've implemented the ability to sort and rearrange your main menu, as well as to hide the modules you don't consider particularly useful. This way, the application is always tailored to the specific needs of a single user and hidden stuff can always be restored via application settings.

2. Push notifications for car club members

Members of Croatian car uclub can, receive push notifications from the club, notifying them, among else, of impending membership expiration and how to renew it.

3. The best mobile parking available on the market

The single distinguishing feature of this mobile parking compared to any other available is the most updated and largest database of cities and parking zones in Croatia. Immediately after opening this module, the app will precisely determine the city you're in and the parking zone via GPS. The basic information such as hourly wages, working time of the zone and others are neatly laid out at your convenience.

Also, if the option is turned on, when you pay the parking fee, the app will remember your location and use it in the "Where's my car?" module.

4. Find out what's around you, or find the nearest point of interest

The "Nearby" module is powered by a database of over 25.000 points of interest, divided into categories. The map view displays no more than 200 locations for the selected area, so to see everything around you, sometimes zooming in is necessary, and the list view sorts the locations by distance from your current location.

5. Nearest gas station and current gas prices

A younger sibling to the "Nearby" module is the "Closest gas stations" module, specialized to show only gas stations and allow additional filtering options specific to that type of locations. Additional filtering includes gas types and vendors for particulary picky customers. Familiar list / map view also displays the price for the selected gas type.

Both of the modules also incorporate the ability to navigate to the selected location, as well as information specific for that type of location (working time and other useful info).

6. Weather backgrounds

To make the app more dynamic, the background image changes depending on the current time of day and weather conditions. We've cherry-picked the images so that they never clash with other visual elements, and for people who find this feature distracting, turning it off is a tap away in the application settings.

Croatia Traffic Info

Croatia Traffic Info is a light-weight version of HAK application aimed towards tourists and foreigners visiting Croatia. Functionally, it is the same application, only stripped of modules that are considered too local for foreign users and has the ability to pick from 3 languages more in addition to Croatian: English, German and Italian.