As you know, new mobile devices are being developed and released quite frequently. And designing effective graphics for each of the newly developed mobile device can be challenging. Besides, designing graphics for mobile devices is a lot different from desktop devices. And thus, it becomes needful for web designers to understand the complexities they need to deal with when working on graphics on mobile displays. Below are 5 tips following which will help you make your graphics work with different devices.
1. Design Multiple Graphics for Different Devices
Many iPhone and Android app development companies add graphics to their designs in a bid to deliver enhanced UX (user experience). However, when working on a mobile device graphics, remember that the screen of a mobile display is smaller compared to a desktop screen. But, designing for small size mobile displays can give a hard time to those who’re accustomed to designing for the large desktop monitors display graphics at 1920 X 1020 (or higher). The resolution and size of each mobile device is different, and thus, you need to design for more than just one size and resolution. You’ll have to design multiple graphics for different devices instead.
For instance, Apple’s latest iteration iPhone 6 has a resolution of 375 X 667, while iPad has a bit higher resolution of 1024 X 768. On the other hand, Android small screen devices has a resolution of 320 X 480. As you can see the screen size of mobile devices is considerably small than desktop screen size.
2. Fluid Image Layout
Have you ever wondered how most of the Smartphones responds to movements or gestures? For instance, when playing a video game on your Smartphone, you often tilt the device to take some specific action (such as change the position of car or any other). That happens because of the built-in sensors.
Smartphones (except for Blackberry) come with G-sensor which understands the orientation of a mobile phone, and automatically displays the information according to the position in which you’re holding the phone. This means that the images on a device will show up in the manner you’re holding your device. So, when creating a design for mobile devices, you need to make sure that the images have a fluid layout (i.e. dimensions such as width and height in pixels). Using fluid layout rather than fixed, will allow the images to scale as shown in the screenshot below:
3. Use Images Saved in PNG Format
Apart from paying attention to creating fluid image layout, make sure to choose the right image format. That’s because, selecting the right image format plays a vital role in creating useful graphics (ideally purely graphical images) for mobile devices. However, keep in mind to use “.png” as your image format instead of “.gif”. Wondering why? Since PNG files are lossless, they don’t lose their quality when they’re edited.
What’s more? PNG images are low-resolution images which loads quickly on a mobile device. Additionally, PNG is a good option for storing partially transparent images.
4. Reduce File Size
When designing a mobile site, make sure to take into account the user’s Internet connection. Remember that every user might not be using a 3G or 4G connection. This is why often when loading a heavy-content or image-heavy site, your users will have to wait for the page to load properly. So, it becomes needful for you to reduce the size of your files, so that it can load easily on the user’s system who aren’t using unlimited data plans. In simple words, optimize images, remove any unnecessary comments and so on to improve performance of your site on mobile devices.
You should, in fact, save your images and files in a compressed format to curtail the page download time. You need to consider the file size restrictions when creating a mobile app as well. In case, you app exceeds 50MB, then your target users will require a Wi-Fi connection to download the app. But, if you’re creating an app that can be accessed when a user is on the move, it would be better to keep the size of your app below 50 MB.
5. Choosing The Right Color
Each Smartphone provides different color support. You need to keep this in mind when designing graphics for mobile devices. While Blackberry supports over 65000 colors, Smartphones like Android and iPhone supports 16 million colors. It’s obvious, more colors means better picture quality. And so, designing for a screen with 16 million colors will help you display better graphics and more clear images.
If you’re creating graphics for iPhone on a Windows PC instead of Mac OS, in order to provide better color support, make sure to set “Proof Setup” to “Macintosh RBG” beneath the View menu. This will help in imitating standard Mac OS color palette, thereby giving you the ability to choose right colors and contrast.
There are several factors, you need to consider at the time of designing graphics on mobile devices. Most importantly, you need to learn the basics about creating designs for different mobile displays. Abiding by the aforementioned list of tips will help you create graphics for mobile websites and apps in the right manner.
Author Signature: Lucie Kruger is an application developer for Mobiers Ltd, a mobile app development services provider. She provides concrete information on latest Android, iPhone and other mobile technologies.