01 4 / 2014
Using SDWebImage with Images on Amazon S3: A Brief Tutorial from MAZ
For those who don’t know how to read and write code, the “backend” of an app often goes unnoticed when using your phone or computer. But everything that you, as an end user, consider to work well comes from what you don’t see: the code.
For those who do know about code, the below script will make a lot of sense! Let’s begin with two terms I’d like to discuss, relating to how an iPhone app user views images that are sourced from the web.
SDWebImage: A handy iOS library, which scours the internet to download, cache and display web-sourced images.
Amazon S3 Server: An encrypted cloud storage service provided by Amazon for storing images.
You may use or have heard about MAZ’s new mobile browser Stream Web (available free for iOS here), for which I am a developer. The whole concept behind Stream Web requires images to be stored and recalled instantaneously. I was introduced to SDWebImage when we began work on Stream, the flagship feature behind Stream Web and our app publishing platform.
I noticed that using S3 with SDWebImage could be pretty powerful for developers, but also realized that some developers might not be able to figure out how to use them together since SDWebImage does not support S3 validation (at least not yet!). Delving into the SDWebImage source to code around this issue would not be too helpful, because if a new version of SDWebImage were to be released, the developer would have to redo everything. Instead, a better approach (provided here) would be to keep SDWebImage untouched, and to intercept all its download requests and handle the S3 server downloads via the Amazon S3 SDK.
If you’d like to see what I mean, try the following:
1) Set up SDWebImage and Amazon's S3 SDKs (with credentials)
// File: AmazonClientManager.m
s3 = [[AmazonS3Client alloc] initWithAccessKey:<YOUR ACCESS KEY> withSecretKey:<YOUR SECRET KEY>];
2) Subclass NSURL Protocol
// File: S3URLProtocol.h
@interface S3URLProtocol : NSURLProtocol
// File: S3URLProtocol.m
#define kS3BucketName <YOUR BUCKET NAME>
@interface S3URLProtocol() <AmazonServiceRequestDelegate>
@property (strong, nonatomic) S3GetObjectRequest *getRequest;
// All registered protocols are asked if they can handle the request
+ (BOOL)canInitWithRequest:(NSURLRequest *)request
// If the host is not Amazon S3 Server return ‘NO’ to indicate default handling
if(![request.URL.host isEqualToString:[kS3BucketName stringByAppendingString:@".s3.amazonaws.com"]])
// Yes we can handle it! Go ‘startLoading’!
// Required method
+ (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request
// Extract the key from the request
NSString *key = self.request.URL.path;
key = [key substringFromIndex:1];
// Create a ‘S3GetObjectRequest’ with your bucket and the extracted key
self.getRequest = [[S3GetObjectRequest alloc] initWithKey:key withBucket:kS3BucketName];
// Set delegate to ourselves to handle various callbacks.
self.getRequest.delegate = self;
// And fire the download. The ‘AmazonClientManager’ will handle the ‘Authentication’ for us.
[[AmazonClientManager s3] getObject:self.getRequest];
// If someone cancels this, cancel the ‘S3GetObjectRequest’ in turn.
self.getRequest = nil;
// The ‘AmazonServiceRequestDelegate’ callbacks
- (void)request:(AmazonServiceRequest *)request didReceiveResponse:(NSURLResponse *)response
// We received a response, pass it on to the client (SDWebImage).
[self.client URLProtocol:self didReceiveResponse:response cacheStoragePolicy:NSURLCacheStorageAllowed];
- (void)request:(AmazonServiceRequest*)request didReceiveData:(NSData*)data
// We received some data, pass it on to the client (SDWebImage).
[self.client URLProtocol:self didLoadData:data];
- (void)request:(AmazonServiceRequest *)request didCompleteWithResponse:(AmazonServiceResponse *)response
// Download complete! Notify client (SDWebImage) and cleanup.
self.getRequest = nil;
- (void)request:(AmazonServiceRequest *)request didFailWithError:(NSError *)error
// Some error encountered! Notify client (SDWebImage) and cleanup.
[self.client URLProtocol:self didFailWithError:error];
self.getRequest = nil;
3) Finally, hook up our shiny new "S3URLProtocol" by adding (just once!) this line to your initialization code:
[NSURLProtocol registerClass:[S3URLProtocol class]];
Now simply use the SDWebImage’s categories e.g. [imageView setImageWithURL:
<IMAGE FILE URL> …]; the host of <IMAGE FILE URL> should be equal to "<YOUR BUCKET NAME>.s3.amazonaws.com ".
Now you can use the power of the Amazon S3 cloud servers with SDWebImage in your own apps! How neat is that?
Hemant Dabral is an iOS and Android Developer in MAZ's Noida, India office. Check him out on Twitter!
15 10 / 2013
Re-Designing Hundreds of Apps for iOS 7
I remember the exact moment it hit me– we had gathered couches in the office to watch the WWDC Keynote like it was a movie, and as they unveiled the iOS 7 video segment, it became immediately clear: we were going to have to redesign everything.
Like many app designers that day, I was feeling incredibly inspired after that Keynote and immediately got right to work.
We had already been planning on a UI overhaul of the Store section of our apps, and so now I had a really good excuse to do exactly that.
The tricky part was (and always is) that the app I was designing was actually a template for hundreds of apps that use MAZ to publish onto iOS, and so while I wanted to be on the bleeding edge design-wise, it still had to be vanilla enough to look good with all the types of content we help publish.
I’ll give away the ending of the story here, but these are our new iOS 7 designs for iPad and iPhone:
Here is a journey through the process:
Version 2.6 of the MAZ Publishing platform marked the last major update of our apps’ UI, which was back in February of 2012. We launched v2.6 with the premier of Inc. Magazine for iPad. This marked an important transition as we added a web button and a Twitter button in the Store section of our apps, allowing users to visit websites in the Store. Prior to that users could only purchase/download content to view it - this was the first move toward offering free web-based content inside the apps as well.
(look at the RSS and Twitter icons toward the top right)
A year and a half later, we released MAZ Publishing 3.6, which looked like this:
Same general concept but with some tweaks. There had actually been five updates to our apps between v2.6 and v3.6, culminating in this modern and polished UI, but one clearly built for iOS 6.
Concepts for a New Storefront
Soon after v3.0, which was April 2013, well before iOS 7 was announced, I was already working on some concepts for a brand new Store UI.
My basic goals were to:
- give a fresh new look to the apps
- emphasize new content
- give even more access to web content
- not stray too far from our current layout so we wouldn’t need to re-process all the assets on our servers
- make Clippings more prominent (trivia: Clippings was introduced in MAZ Publishing 2.8)
My first design was one which in retrospect is actually pretty iOS 7-y with it’s bright colors and white background, even though I didn’t know about iOS 7 yet!
I took our “full cover view” and made it the default view, instead of “grid view” which had always been our default previously, so that the newest cover would be the main event when a user launched the app, instead of many small thumbnails with none weighted over the others.
I added a Clippings Button to the right of the cover so that a user could very easily create a clipping of the cover.
I also introduced more social buttons so that the user could load any of that web-based content right inside the Store. I borrowed from our iPhone UI which had a sliding drawer and applied it to iPad.
This was the birth of the “hub” idea which is now a cornerstone of MAZ Publishing - basically that a publisher’s app should be much more than the converted print product - it should be a one-stop-shop for all content, including web, social, etc.
I killed content descriptions since the content was big enough to be legible (as opposed to the thumbnails), and most descriptions were redundant with what was already designed into the cover.
Another thing I brought to the new Store was the draggable overlay that we were already using within our content Reader, instead of a full-page web view inside a UITableView as we had previously done for web content accessed through the Store.
Now when a user tapped on one of those buttons along the left, the site would open in a draggable overlay like this:
Initial Concepts for iOS 7
The very day of the WWDC Keynote, after catching a glimpse of iOS 7, I got to work on updating my designs. Ironically, I didn’t really think I had that much to do.
First, I changed the fonts and toned down the gradients of the buttons. Then I changed the drawer background color to light grey to make the whole thing feel airier.
I thought I was done!
Of course, a lot of my initial impressions of iOS 7 were incorrect - my buttons were wrong, there should be no separation between nav bar and status bar, and as it turned out, going lighter was the wrong move…
Seeing is Believing
Even though I was still tweaking buttons, colors, and fonts, the new Store UI was actually already well underway with our dev team at the time of the WWDC announcements.
Soon enough, I had a live build to run on my iPad. I thought it was going to blow me away (after all, it was my own design come to life, how could I not love it?), but the truth is, I didn’t really like it as much as I thought I would.
It didn’t really make sense– I had really seen it a million times as I worked on it, had previewed it on the actual devices (Skala Preview is the greatest invention in the world) and simulated interaction (I use Keynote for all my prototypes and even most of my final design work - builds/transitions = fast prototyping), but using the actual real app is just different. And it wasn’t good enough.
Not to mention, my initial attempts at updating to match iOS 7 weren’t actually right. Once I had time to read through the new iOS Human Interface Guidelines and actually use iOS 7 firsthand, I realized that there was a lot more work to be done.
Buttons Without Buttons
For the purchase/preview/download buttons, I toyed with various arrangements, but came to find that the new iOS 7 button-less button (i.e. only text) would work well. I made the colors of the text to match the colors our users were accustomed to. Green to buy, blue to read, and so on.
I also used the fact that we were dealing with pure text to add some more descriptive language to the buttons.
I couldn’t really do all the buttons as text-only because they would all be competing for attention. So for the subscription buttons, I added a simple thin border, and slightly emphasized free trials with a lighter blue.
Back to Black
Okay, well not black, but dark blue. One problem when I was using the live build of the new Store was that the covers were being drowned out by the pure whiteness of the background. Sort of like in the new Photos app for iOS 7, your eyes don’t know where to focus when the pics are against the white, and really pop against the black (especially when using a black device where the black screen/black hardware border is ambiguous).
Here is a version of the UI that is very close to the final version, in light grey and in dark blue.
See how much more the cover pops out on to the dark background? Our v3.6 design for iOS 6 had a subtle dark blue gradient, and so I decided to backtrack to that palette, but without a gradient.
I removed all the drop shadows, even on iPhone behind the drawer. We also added some gesture based navigation, like swiping back to the Store from the Reader instead of needing to tap the back button.
For the navigation bar icons, I made some modifications to our buttons to make them a bit larger, more geometric - I made them solid white with no drop shadows, and generally made them look cleaner.
Similarly, for the interactive buttons inside the content, we flattened all of them and made them feel lighter.
Here are a bunch of other side-by-side comparisons between our iOS 6 iPhone design and iOS 7 (two different apps but you get the idea).
So that’s the story! It was a long process, but I believe we landed on the right final product. Submitting those hundreds of app updates was no fun, but that is a story for another post another time…
To send you off, here is a classy animated GIF of the various iterations of our iOS 7 design. I recommend listening to a Justin Bieber song while you watch.
Permalink 2 notes
27 9 / 2013
Introducing MAZ Publishing 4.0
We are extremely excited to announce the release of MAZ Publishing 4.0, our fourth major release and the most ambitious one yet.
Not coincidentally, this update follows on the heels of Apple’s iOS 7, and MP 4.0 is a total reimagining of our iOS apps.
We also took it as an opportunity to rethink the platform as a whole. There are updates for Android on Google Play and Amazon’s Appstore, plus powerful new marketing and design tools in MAZ Control.
iOS 7 Design
The most striking difference in our new iOS apps is a total overhaul of the UI (user interface) that we had been using for the last three years. Our new iOS apps are cleaner, flatter, and more subtle, allowing the content to really pop.
Web & Social Content in the Store
Inspired by the use of web buttons inside the content our publishers create with MAZ, we now have web and social media buttons right in the Store- where users can access them as soon as they open the app.
Featured Web Content
Users can now see the publisher’s latest news or promotions as soon as they open the app. Regardless of scheduled frequency of the publication, Featured Web Content allows any publisher to update their app with new content whenever they would like.
Custom Push Notifications
Push notifications can now be sent on the fly and say whatever you want, instead of only coinciding with new content going live. There is no better way to provide value to users than by providing them with important news as it happens, even if they are not in the app.
Used in conjunction with Featured Web Content, push notifications can alert users to specific content and breaking news, and when they open the app that content will already be queued up. Push notifications now work with Google Play apps as well.
Clippings has become a staple of MAZ apps. 1 out of every 5 times someone downloads content, they create a clip. Each clip has a Clippings Link attached to it, which refers traffic back to the app or to the publisher’s website.
We have now introduced a Clippings button right in the Store and on every website, so it is easier than ever for users to spread the word across social media.
Users do not always understand how to take advantage of the amazing features available to them when reading on a mobile or tablet device. Now these simple prompts can be placed anywhere on the page to help educate users about how to best navigate and use their apps.
New Design Tools
We have added grid lines and zooming to the Design Tab of MAZ Control. Now you can have even more control and precision as you lay out interactive elements on the page.
The Organize Tab now displays page numbers in real time as you make adjustments and shows you what page you currently have selected.
Visual Page Linking
It is now easier than ever to link from page to page. Instead of needing to know the exact page number, you can simply select the thumbnail of the page you want to link to.
Our Best Release Ever
We’ve been hard at work building these improvements over the last few months, and MAZ Publishing 4.0 is by far the best version of the platform we’ve ever had.
We hope you enjoy using it as much as we enjoyed making it!
-The MAZ Team
23 9 / 2013
Transitioning from Fine Art to UI Design
User interface design is an intricate art. Learning what I can of it from Paul Canetti — my older brother, and the visionary behind MAZ — has been a challenging gift.
As a student, I always loved visual mediums: drawing, painting, printmaking, mixed media and all. While honing my skills in college, I found my favorite techniques were ones of abstraction. My work was frequently marked by blurred lines, distortion, and collage tendencies. The only computer design I tried resembled what I liked to do paper: layers upon layers, with inverted pictures and upside down texts.
When I began my internship (and, more recently, part-time work) at MAZ, I entered the world of precision boxes, perfect squares, beveled rectangles, and pixels, shadows, angles, specs, margins, bleeds, PNG, TIFF, GIF, and Keynote galore. My past skills were refined into a different set, one I’m still just beginning to grasp. User interface design trades some of traditional 2D art’s abstraction for a crucial layer of hands-on utility. With its focus on the mathematically exact and experientially intuitive, web and app design has encouraged me to confront the things I avoided as another kind of artist in college.
But even though apps require buttons, text fields, and practical functionality, abstract creativity is not lost. In fact, I’ve never seen such an in-depth and conceptually demanding process before. MAZ’s design blends colors, bends shapes, tricks the eye, and envisions what could be a dull and generic interface as something far more pleasing.
For example, take this seemingly simple hand Paul designed for our upcoming upgrade to MAZ 4.0…
…and check out how it was actually created!
It’s especially cool to see it in motion:
If you want to learn more about UI and UE design, here are some resources I’ve found useful lately!
- The courses and seminars offered at General Assembly
- Code School’s online instruction
- Keynotopia’s tutorials
Carolyn Canetti does digital marketing for MAZ.
Permalink 1 note
17 7 / 2013
2.8.5 App Release Update
Earlier this summer, the 2.8 version of our apps went live on the iTunes App Store. This update featured our brand new Clippings functionality. Clippings is a fun way for readers to share content with one tap. Our initial release included the ability to share Clippings via Facebook, Twitter and Email. With 2.8.5 we are happy to announce that we’ve extended this functionality to Pinterest as well.
Clippings and Pinterest are really a match made in heaven. Pinterest has quickly become one of the fastest growing social networks in the world. Now with just a tap of your thumb and pointer finger on the iPad screen, MAZ apps allow users to perfectly capture that new must-have gadget or beautiful cocktail dress from the pages of their favorite magazine, straight to their pinboards.
We’ve worked very hard to make the experience of pinning Clippings from MAZ apps to Pinterest completely seamless. It is truly nostalgic of what we loved about print editions, sitting around with our trusty scissors and cutting out all the things that inspired us about the world. We hope you are excited as we are about the beginnings of Clippings and where we intend to take it in the future.
16 7 / 2012
Happy 2nd MAZiversary! Thoughts After 2 Years Of MAZ
Two years ago today, I registered magappzine.com.
I had left Apple about 16 months prior and was working hard with my band Love and Logic, riding the heels of two popular videos that had taken off on YouTube. One had over a million views and one found it’s way onto MTV - that one featuring a single seamless video playing simultaneously on 4 iPhones. Go figure.
I was paying the bills doing home computer consulting and training under the name Paul The Wizard, teaching people how to use their Macs, iPhones, and iPads, setting up routers and printers, and so on. I spent a lot of time observing and understanding the way that “normal” people use technology.
The iPhone 4’s “antennagate” was underway with things like this circulating on the web.
Steve Jobs was alive.
I was working with a couple of friends on custom iOS development, including Simon, where I did UX/UI design for iPhone apps.
The iPad had been on the market for only 3 months and already was changing the world.
Articles like this were cropping up left and right. In those 3 months, we had been getting many inquiries from magazine publishers to develop iPad apps for them. I was out there, pitching my heart out to these publishers. I was selling something we didn’t have— a native iPad app where a publisher could add (and sell) new content over time. But nobody hired us, because it was just way too expensive. In retrospect, we were actually quoting too little at the time.
We knew that there was a very real need. We kept getting calls. And we knew that the only real solution to that need while staying price sensitive was to build a platform, a way to empower publishers to publish to this new and magical device, without having to write a single line of code, or hiring a custom developer. We wanted to build a platform that would put ourselves out of a job.
So I registered magappzine.com that day, and we began figuring out how we were going to build it. And we spent a lot of time, a lot of late nights, building it.
It was 6 months before I started selling again, when we started our beta. (that was less than 2 weeks after my apartment burned down and I climbed down the fire escape with my backup HD, but that’s a story for another time) And this time I actually had something to sell. I could walk into an office with a finished app, for my first meeting! That’s the beauty of a platform.
A few brave souls tried us out then, including BUST and City Journal, who are still with MAZ today. They will never know how big of an impact they had on our fledgling company (well unless they are reading this, in which case THANK YOU!!!!!!)
In these two years, I have become even closer to my best friend and co-founder, Simon. We found an amazing partner and CTO in Shikha, who lives halfway around the world, and yet I talk to her more than most people I know in NY. We met on LinkedIn, the best way for the partners of a global startup to meet if you ask me.
I have learned so much about technology, about design, about finance, about law, about fundraising, about selling, about marketing, about running a business.
We have touched the lives of countless readers who now can find their favorite publications on the iPad, and we have empowered publishers from around the world (40+ countries!) to create rich, interactive digital experiences, all without writing a line of code, just like we set out to do.
We have built our team out from sitting on the floor of our apartments to staffs in the US and in India comprised of hands down, the most talented, devoted, ambitious, hard-working, and most thoughtful people I could have ever imagined working with. In case I don’t say it enough, thank you to our incredible team. You amaze me every day.
All of this in the first two years, and yet I feel like we have only just begun. We’ve just scratched the tiniest surface of what is possible, of what we want to accomplish. We are still hungry. More now than ever before.
We still spend a lot of late nights. We are still building.
To my family and friends who have been so supportive over the last two years, to our clients, to our end users, to our investors, to our advisors, to our team— thank you. Thank you for believing in us.
We have only just begun.
Permalink 6 notes