Optimizing your Apps for Emerging Markets
•
5 likes•1,114 views
In the past few years, Android has grown exponentially, and now more than one billion people use Android devices every month from more than 40,000 different device models. Emerging markets like India,China, Brazil and Indonesia are driving this growth. We need to be able to customize the experiences of these people in order to build amazing products. What works for high-end smartphones won't necessarily work on low end phones which are very common in these emerging markets. In order to accomplish this, we need to be smart about things like performance, network and data. This talk discusses about the challenges that your users face on feature phones and how to overcome those using some tips and tricks which would make a lot of difference. Also covers some examples of how some popular companies optimize their apps for emerging markets.
Recommended
More Related Content
Viewers also liked
Viewers also liked (15)
Similar to Optimizing your Apps for Emerging Markets
Similar to Optimizing your Apps for Emerging Markets (20)
Recently uploaded
Recently uploaded (9)
Optimizing your Apps for Emerging Markets
- 1. Optimizing your Apps for Emerging Markets #DevFestAhm
- 3. Emerging Markets Drive Growth
- 9. Challenges Slow Phones Small Screens
- 12. Optimizations Year Class Redesign
- 15. Optimizations Year Class Redesign Asset Tinting
- 16. Why Tint Assets? • Need lesser Assets • Less memory used • Faster Iteration Times
- 17. //Code
- 18. 6 23 3 5
- 20. 71% 3G Penetration Challenges 7.5% 3G Penetration 500 ms 280 ms
- 21. Optimizations Dynamic Network Quality Detection
- 22. //Code
- 23. Adjust Behavior • Increase/Decrease Compression • More/Less Parallel Network Requests • Pre-Fetch more content
- 24. Optimizations Dynamic Image Compression Pre Fetching Content
- 25. 3. Different Data Plans
- 26. Challenges Sales Image Downloads Dominate Consumed Content
- 29. Appropriate Image Size • Thumbnail, Preview Image, Full Image • Low-res devices might never need a full resolution image • Most times the thumbnail is enough
- 30. Optimizations Image Scaling Flat Design
- 32. Optimizations Image Scaling Flat Design WebP
- 33. JPEG WEBP PNG GIF Lossy Lossless Transparency Animation Comparisons 90% of images sent to Facebook for Android are WebP format
- 34. No Noticeable Change PNG 24 kb WebP 10 kb
- 35. Compression • Use Native WebP decoder on Android 4.2 and later • Use libwebp and libpng to transcode back to JPEG and PNG. To avoid the transcoding cost, use JPG with mozjpeg • Compatible with JPEG • 5% size reducation
- 37. Challenges
Editor's Notes
- Thank you <Name> and Good morning everyone and welcome to this sessions about “Optimizing your apps for emerging markets”. It’s great to see so many of you turn up on a Sunday morning to learn and share.
- I am Vinay Gaba and I currently work at Deloitte Digital out of their Mumbai office. I have been developing on the Android platform since close to 3 years now. Today, I will be walking through some ways in which you can optimize your apps for users of countries which have been seeing tremendous growth. So what we will basically be doing is go through various nifty tricks that are going to make a world of a difference in terms of performance of your applications. We will be learning about various topics and also see some examples in the process. Before I begin, I want to thank GDG Ahmedabad for giving me this opportunity to speak in front of you guys. So let’s dive in.
- Emerging markets drive growth (Period) In the US, the mobile penetration is a 70 %. 169 million people in the U.S. own smartphones! Now this is a huge number! But it also means that there is much less room from growth. Let’s look at the other end of the spectrum. The smartphone penetration in India hovers at around 10%! Imagine the room for growth here. And experts predict that within 5 years, this number will hover somewhere around 40-50%.
- Let’s look at some graphs. Markets like India, China, Brazil and Indonesia are driving the Sales volumes. Out of the top 5, you can say 4 of these countries are all emerging markets. China has around 45% smartphone penetration so you can say that it’s not completely emerging but there is still a lot of room considering its population. Let’s look at India. There were approx. 200 million smartphone sales here. That’s the population of Brazil! I think these numbers should be enough to convince you about why one should be optimizing their apps as per the needs, behavior and requirements of the users from these markets. Is there even one person who thinks otherwise?
- So now we know that “Why” we need to optimize our apps to better suit emerging markets. Let’s get into the “How’s”. How are we going to optimize our apps for emerging markets? One more important point to note is that there is no one solution to this. What might work for a particular market might not necessarily work for someone in another market. And the reason is very simple. “Everyone is different”.
- No complicated formula or explanation can give as much justice as this simple statement. The needs and requirements of every mobile user are different. What works in South Korea does not necessarily work in say a country like Japan. And not only will the usage and needs differ, but also a lot of other factors would differ and we will be looking into those aspects in just a bit.
- The first and the most common problem that most of you are probably aware about, different phones. So Android is evolving and it is evolving very quickly. Screen sizes are double the size of what it used to be. Processors speeds, memory, battery, everything has seen a significant difference than what it used to be. Let’s consider one example for now. The facebook app alone is used by 10, 000 different devices! Now imagine how difficult it must be for them to optimize their app to support all these different phones. Now in order to be able to build for such users, you need to ask some fundamental questions. Are your users on a high end phone? Are they on a low end phone? What time of bandwidth access do they have? They are probably not like us. They probably don’t have the sort of network connectivity we do. And believe me; this will be true for majority of the users. There are people who have probably never even heard of an iPhone or will never ever see an iPhone.
- The first and the most common problem that most of you are probably aware about, is different phones. So Android is evolving and it is evolving very quickly. Screen sizes are double the size of what it used to be. Processors speeds, memory, battery, everything has seen a significant difference than what it used to be. Let’s consider one example for now. The facebook app alone is used by 10, 000 different devices! Now imagine how difficult it must be for them to optimize their app to support all these different phones. Now in order to be able to build for such users, you need to ask some fundamental questions. Are your users on a high end phone? Are they on a low end phone? What time of bandwidth access do they have? They are probably not like us. They probably don’t have the sort of network connectivity we do. And believe me; this will be true for majority of the users. There are people who have probably never even heard of an iPhone or will never ever see an iPhone.
- So there are two main challenges that are caused because of different phones and by that I mean the low end feature devices that majority of the people own in emerging markets. These are older generation phones and often second hand phones. So basically we need to find a way to optimize our apps for slower phone, phones which have really bad processing powers and smaller screen sizes, phones which don’t have a lot of real estate.
- Let’s get into ways of how we would figure out a way to solve these problems. So in order to solve this problem, Facebook has this amazing way of dealing with this situation. They use a concept called as “Year Classes”. What year classes essentially means is that you ask the question, “In which year was this phone considered high end”. So for any particular year bucket, all phones will have similar features in terms of processing speeds, memory, etc. And mind you, it in no one means in which year was the phone launched. Those are two separate things. If you go back to 2010 and 2011, those phones were not actually launched in 2010 or 2011, but they would be considered high end only in those years. We only answer the question “In which year was the phone considered high end” and segment devices in buckets of year classes. And based on these buckets, you then optimize your apps for each bucket. This way, your testing efforts are drastically reduced and you need a very small number of devices. This is a good way to identify problems in your apps especially when you don’t know where you need to be searching yet. So from the year classes, the average user uses the phone that you see in the 2011 bucket, which has a dual core processor and less than a gigabyte of RAM. So this is a very effective technique to deal with the challenge that is caused by different phones.
- Let’s get into ways of how we would figure out a way to solve these problems. So in order to solve this problem, Facebook has this amazing way of dealing with this situation. They use a concept called as “Year Classes”. What year classes essentially means is that you ask the question, “In which year was this phone considered high end”. So for any particular year bucket, all phones will have similar features in terms of processing speeds, memory, etc. And mind you, it in no one means in which year was the phone launched. Those are two separate things. If you go back to 2010 and 2011, those phones were not actually launched in 2010 or 2011, but they would be considered high end only in those years. We only answer the question “In which year was the phone considered high end” and segment devices in buckets of year classes. And based on these buckets, you then optimize your apps for each bucket. This way, your testing efforts are drastically reduced and you need a very small number of devices. This is a good way to identify problems in your apps especially when you don’t know where you need to be searching yet. So from the year classes, the average user uses the phone that you see in the 2011 bucket, which has a dual core processor and less than a gigabyte of RAM. So this is a very effective technique to deal with the challenge that is caused by different phones.
- Alright now let’s look at our second optimization technique, which is Redesign. So it common knowledge that you can create different layouts for different screen sizes. In case some of you are wondering , this is how you would do it.
- You essentially create separate layout folders for different screen sizes in order to support different screen sizes. Most of us have the exact same layout, with just different sizes of layout elements. For example, most people would just change the size of a button move the position slightly. But that is not the best way to deal with the problem of different phones. Now consider
- Now these beautiful and smooth animations will easily run on a high end device. But imagine what will be condition of a feature phone trying to run such animations. You obviously can’t expect the same kind of performance on that device. In such a scenario you should consider to tone down and use lighter animations that are friendlier on the types of hardware that those phones have. This results in a more positive experience for all of your users.
- Lets move on to our third and my favorite optimization trick which is asset tinting. Asset tinting is the ability to colorize assets programmatically. This is most useful when you are using a flat design in our application. This allows us to eliminate separate assets for different UI states. All the pressed button states and active states that we use as separate assets, those can now be eliminated with this technique. Asset tinting is touted as a new feature in the upcoming Android L release, but it’s actually been possible in all versions of Android. You can apply a ColorFilter to a Drawable or an ImageView, and it will change the rendered output. As it is an expensive process, we maintain a cache of the static ColorFilter object to save processing power. And it has a lot of different filters which Photoshop offers which you can use to modify your assets. Or just use a simple alpha filter to change the opacity for example.
- The advantage of using this are quite obvious. You need lesser assets to display your UI. This results in less startup times as you are loading fewer number of assets . The size of the apk is also drastically reduced. This is a huge win as most of these feature phones don’t have a lot of memory available so these users done end up downloading apps which h are huge in size. You will also have faster iteration times. You don’t need to generate new assets if you are trying out different color schemes. You don’t need to depend on your designer to generate assets for you. All you need is a color value that u need to put it in code and your job is done.
- Lets look at some code. So we make use of Porter/Duff compositing to apply a color on top of an image. So to tint your assets, all you need is to set a color filter to your drawables and give it the desired PorterDuff mode. That’s how easy it is and yet it is largely ignored and is seen in very few applications. I think every app that has selected and pressed states should be using this technique.
- Instagram is probably the best example that used this technique and had massive returns. So their old Android app used a lot of gradients and they used different assets for the different states on the UI. In all they needed 29 different drawables for just the top and the bottom tab bar. 29 drawables! Last year, they redesigned their app to use flat design. This made it easier to use asset tinting and they were able to reduce the number of assets to 8! That’s like almost 1/4th the number of assets needed to execute the same thing.
- Alright, here is the second challenge we face with our users in emerging markets - Different Networks. There are users which still do not have access to a good stable internet connection. A lot of users still don’t have good 3G connections. Infact, we also don’t have good 3G conenctions if you compare it to some other countries like South Korea or the US.
- Lets look at numbers. India has around 930 million mobile users with around 70 million users having a 3G connection. Which means a 3G penetration of close to 7.5%. On the other hand , the US has a 3G penetration of around 71%. Look at the huge difference! And the story does not end here. Even the 7.5% users that have a 3G connection in India have a network connection lag of around 500ms on an average. The same stands at 280 ms in the US. A study by Erricson estimates that there will be 400 million 3G users by 2020. So you cant base the network speeds based on the type of connection you have. Most tutorials that I have seen have switch cases where you detect if its connected to the WIFI- do this. If its a 2G connection –do this. This method just wont work coz of the variance among the type of connections. Total mobile users- 933 mil 3G users- 70 mil Penetration ~ 7.5% Estimated to become 400 mil by 2020 Erricson study
- Okay we know our problem. What should I be doing to find a way to deal with bad network connections. Now look at some optimization techniques. The first one is “Dynamic network quality detection”. We need to find a way to detect the current network quality and make connection calls based on the current quality levels. And mind you, this connection is constantly changing. Its not going to be reliable throughout. So you need a way to continuously monitor the connection level.
- So some of the ways in which you can use this technique is : increase or decrease the image compression you are using based on the network quality. So consider a scenario where you are downloading images and displaying it to the user. You can either increase the compression and quality or decrease it based on the quality of the connection. This will be very helpful because no one likes waiting to start using the app. Increase or decrease the parallel network requests. Just so that you don’t saturate the network incase you have a lower bandwidth. And pre- fetching more content. Ill get into this in just a minute
- Now I want to spend some time talking about content pre fetching. So when I say pre fetching, what I mean is issuing network requests for content ahead of when they are actually needed. So we know that content pre fetching is important for networks with high latency, this is especially useful because your user does not have to stare at a blank screen waiting for the image to load. That’s really bad user experience. So lets say if you have a news reader app and are loading content dynamically from a rss feed, it makes sense to issue the network request early during the app startup. This enables you to parallelize waiting on the network with other initializations that happen during startup.
- Coming to the third challenge that app developers need to take care of when developing for emerging markets, “Different Data Plans”. Again a very common problem that most of us are aware of, but how do you deal with this. Now most people in India have a prepaid data plan with limited data. On an average we have data plans which are around 1 Gb in size. Now if we have limited data, we need to make sure we are not consuming a lot of data when downloading content through your app. This is probably going to be the biggest reason for a user to not use your app in these markets. And I'm not only talking about data from within the app but also when downloading your app. If you are having apps which are 25-50 mb in size, there is going to be some serious problem in driving adoption of your app.
- Coming to the third challenge that app developers need to take care of when developing for emerging markets, “Different Data Plans”. Again a very common problem that most of us are aware of, but how do you deal with this. Now most people in India have a prepaid data plan with limited data. On an average we have data plans which are around 1 Gb in size. Now if we have limited data, we need to make sure we are not consuming a lot of data when downloading content through your app. This is probably going to be the biggest reason for a user to not use your app in these markets. And I'm not only talking about data from within the app but also when downloading your app. If you are having apps which are 25-50 mb in size, there is going to be some serious problem in driving adoption of your app. When downloading content from within the app, image downloads dominate the consumed content. So it is very important to make sure the images that your app uses are optimized.
- The first optimization technique is image scaling. It does not make sense to download and use full size images when your motive is to only display a thumbnail. So we will be scaling our images in different sizes. But mind you, this processing should be done on the server size itself. So when I make a network call from my phone, I should not be sent the full size images but the scaled down thumbnails.
- Lets go back to our example of having a news reader. In the main feed, we are probably going to use thumbnails of the images. Infact there is a good chance we might never even need the full size image. Lets look at some strategies. So I will only send back thumbnails and will send the full size image only when the user clicks on a list item. A smart strategy here would be to pre fetch the content , which is the full size image. Now an even smarter strategy would be to prefect only those full size images which are of topics that your user usually prefers to read.
- Lets go back to our example of having a news reader. In the main feed, we are probably going to use thumbnails of the images. Infact there is a good chance we might never even need the full size image. Lets look at some strategies. So I will only send back thumbnails and will send the full size image only when the user clicks on a list item. A smart strategy here would be to pre fetch the content , which is the full size image. Now an even smarter strategy would be to prefect only those full size images which are of topics that your user usually prefers to read.
- Second technique is using flat design. I think everyone here is already aware of flat design. So most apps now are using this as it’s a lot simpler and it’s a lot more beautiful to look at. Also, it’s a lot more performant. Not only are u doing less in making these assets, but also your phone is doing less to display these on the UI. Asset tinting is easy to use even more on flat icons. Now I wont be discussing the design ideologies of flat design. But what I will be sharing with you guys are some resources that help you generate flat design elements.
- Second technique is using flat design. I think everyone here is already aware of flat design. So most apps now are using this as it’s a lot simpler and it’s a lot more beautiful to look at. Also, it’s a lot more performant. Not only are u doing less in making these assets, but also your phone is doing less to display these on the UI. Asset tinting is easy to use even more on flat icons. Now I wont be discussing the design ideologies of flat design. But what I will be sharing with you guys are some resources that help you generate flat design elements.
- The third and the most useful and the most neglected technique is using WebP images. WebP is a relatively new image format. It was released by Google in 2010. And it is well supported on the newer Android versions. So why should we be using weP. Well its because it saves 80% over PNG if tuned correctly.It also saves around 25% over JPEG images.
- Here are some comparisons between webP and some popular image formats. So it gives you the option of choosing whether you want a lossy and lossless image compression. It also supports in maintaining the transparency of images like in PNG. And not only that, you can also use it in place of gifs. I mean I am shocked why its not used as much as it should have.
- There is absolutely no noticeable change between an image in a different format and an image in webP format. This is especially shocking because a WebP image consumes much less space compared to the other image formats. Major win!
- So to use webP images, you can use the native webP decoder in Android versions 4.2 and later.. That’s right. For android versions 4.2 and above, you don’t need to make any change whatsoever to use a webP image. Put it in the drawable folder like you would put the jpeg or png image and set it as the background for your view and it will work without an hassles. For older versions, you could still download images in WebP format which saves your download size but you will have to convert those images to png or [ng format on the device by using a library lie libwebp and libpng. If you want to avoid the transcoding cost that happens when u convert the image, you could do something different. You could continue to use jpg and use the mozjpeg 2.0 encoder which gives u better compression results and a small & reasonable reduction in size of around 5%.
- Lets look at numbers. India has around 930 million mobile users with around 70 million users having a 3G connection. Which means a 3G penetration of close to 7.5%. On the other hand , the US has a 3G penetration of around 71%. Look at the huge difference! And the story does not end here. Even the 7.5% users that have a 3G connection in India have a network connection lag of around 500ms on an average. The same stands at 280 ms in the US. A study by Erricson estimates that there will be 400 million 3G users by 2020. So you cant base the network speeds based on the type of connection you have. Most tutorials that I have seen have switch cases where you detect if its connected to the WIFI- do this. If its a 2G connection –do this. This method just wont work coz of the variance among the type of connections. Total mobile users- 933 mil 3G users- 70 mil Penetration ~ 7.5% Estimated to become 400 mil by 2020 Erricson study