Click here for the last part of this series:
Caffeine. It's the staple of any developer's lifestyle; I can't even count how many loyalty card apps I have on my phone (that's a lie - I can and it's 5).
Caffe Nero is a personal favourite of mine. Their app makes it easy to order from any of their establishments; simply connect the app to your card, scan the QR code, and the stamp will automatically be applied to a digital loyalty card.
I'll clarify now: I am not sponsored by Caffe Nero nor is this post.
Now, when I originally started the ideas for this post, I was using an older version of the mobile app. Since then there's been an update so - curses! - a lot of the improvements were actually made.
Let's take a look at them.
Arrested Web Development: Part 2
Caffe Nero - Mobile App
On the older version of the app, each section of the app - the loyalty card, the available offers, etc - were split into cards that could be swiped between.
The use of cards as a design was fun. Swiping between them felt natural and was easy to if you were only using the phone with one hand. Even now, in the updated version, all of the controls are along the bottom of the screen which benefits the user in the same way.
Another perk is the design of the app. In the previous version, the background was of a coffee shop chalkboard; whilst pleasing and relevant to the app's purpose, it left the visual appearance feeling a little busy. In the new app, it's now a beautiful dark grey slate. It adds a nice level of contrast that improves accessibility and allows for clear differentiation between sections of the app.
In a similar vein, the font used throughout the app is legible and equally contrasts well against the varying aspects of the app. This supports my final compliment of the app: there is a strong brand throughout. The colour scheme is clear with the signature blue as the primary colour and accented by the gold that's used in any iconography and linked texts.
So where does it lack?
None of the concerns I found do not obviously detract from the usability of the app. For instance, something I noticed in the previous versions of the app and in the current one regards with image aspect ratios.
On the previous version of the app, one of the cards displayed an image anchored to the top.
On phones with larger screens, as is now becoming commonplace, the image becomes distorted.
The splash screen as the app loads on the new version acts in a similar way.
Now, there are two ways to solve this. On a webpage, it's very easy to keep the aspect ratio of an image the same. On your image tag, specify the size of the image using the height and width attributes. Then, using CSS, set the width of the image:
#imgName
{
width: 100%;
height: auto;
}
This width: 100% sets the width to match that of its parent, meaning it will stretch to fill if necessary. As a result, if the image is on a screen turned horizontally or is displayed on a wider screen like a tablet, this will be taken into account. Hooray for responsive design! However, you can set this value to whatever you want.
The important part is height: auto. This uses the aspect ratio (determined from the height and width attributes you defined earlier) to make the image as large as it can be without stretching. Et voila!
If you're using an image as a background image - see the splash screen for the newer version of the app - then consider using the background-size property. Using background-size: auto will allow the aspect ratio to remain the same but your image might disappear off of the side of the screen. Alternatively, you can set it to background-size: contain; this constrains the image to the width of the parent completely but will leave white space underneath if it isn't tall enough to fulfil it.
So there you go! Not as much to go on as I'd originally intended. Kudos to the developers behind the app for such a fantastic update. If you ever want to give me free tea, just reach out. ;)
If you have anything to add to the discussion or any apps/websites you want me to take a look at, just let me know in the discussion section. In the meantime, see you soon!
Top comments (0)