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 ServerAn 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

+ (void)validateCredentials

{

    // …

    s3 = [[AmazonS3Client alloc] initWithAccessKey:<YOUR ACCESS KEY> withSecretKey:<YOUR SECRET KEY>];

    // …

}

2) Subclass NSURL Protocol

// File: S3URLProtocol.h

@interface S3URLProtocol : NSURLProtocol

@end

// File: S3URLProtocol.m

#import "S3URLProtocol.h"

#import "AmazonClientManager.h"

#define kS3BucketName <YOUR BUCKET NAME>

@interface S3URLProtocol() <AmazonServiceRequestDelegate>

@property (strong, nonatomic) S3GetObjectRequest *getRequest;

@end

@implementation S3URLProtocol

// 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"]])

        return NO;

    

    // Yes we can handle it! Go ‘startLoading’!

    return YES;

}

// Required method

+ (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request

{

    return request;

}

- (void)startLoading

{

    // 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];

}

- (void)stopLoading

{

    // If someone cancels this, cancel the ‘S3GetObjectRequest’ in turn.

    [self.getRequest cancel];

    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.client URLProtocolDidFinishLoading:self];

    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;

}

@end

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:

image

Here is a journey through the process:

iOS 5

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)

image


iOS 6

A year and a half later, we released MAZ Publishing 3.6, which looked like this:

image

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.

image

I added a Clippings Button to the right of the cover so that a user could very easily create a clipping of the cover.

image

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.

image

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:

image


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.

image

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.

image

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.

image

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).

image

Here is a version of the UI that is very close to the final version, in light grey and in dark blue.

image

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.

image

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.

image

Similarly, for the interactive buttons inside the content, we flattened all of them and made them feel lighter.

image

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.

image

Paul Canetti is one of the founders and CEO as well as lead UX/UI designer at MAZ. He tweets about publishing, design, and media at @paulcanetti and teaches at General Assembly in physical reality.

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.

iOS 7

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.

Web Content

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.

Featured Content

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 Buttons

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.

Clippings

Indicators

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.

Indicators

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.

Check it out now.

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…

image

…and check out how it was actually created!

image

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!


Carolyn Canetti does digital marketing for MAZ.

17 7 / 2013

2.8.5 App Release Update

image

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.

image

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.

24 8 / 2012

I’ll be on a panel called Multi-Platform Publishing for Mobile News and Magazine Content

29 7 / 2012

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 had just had my directorial debut for a country band with a music video that was in steady rotation on CMT. (YouTube version has no commercials)

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.

03 6 / 2012

This app will allow readers to explore reading in an entirely new way. By giving readers access to a new, secret website that only they can gain access to through the portals in the app version of the book, readers can respond to questions, ask questions, write their own versions of sections of the story and share it with others among many other new ways of connecting, reader to reader and reader to writer. In addition, there are links within the app itself to a variety of informative sites, resources that give readers a deeper understanding of the context, times and content within the e-book.

The most creative use of the MAZ platform that I’ve seen to date.

11 5 / 2012

There has been much sparring this week as comments and responses have come pouring in about this post by Jason Pontin at Technology Review.

I wrote a brief response when I first read it, and I have a lot of thoughts on these matters, many of which were so well-articulated in this post by Mike Hanley that they do not need to be re-written here. 

While the debate is healthy, sensationalist headlines about publishers (plural) disliking apps, based on ONE company, and ONE person’s experience, is not fair or right to all of the others who are making it work, but are perhaps less rambunctious about their successes. Jason’s frustration comes across loud and clear though, and I truly do feel for him and other publishers who feel scorned by their iPad app experience.

I am not going to pick a side re: Apps vs. HTML5 in the longterm. Anyone who claims to know the future of mobile and tablet publishing and consumption norms is just speculating. Every publisher should be thinking about betting on every possible horse they can. 

We do have some historical data from these early years of content on mobile and tablet devices, and if you look at consumer habits (which you should), there is a lot in support of apps.

81.5% of time spent with smartphones is with apps, 18.5% on the mobile web [source]. There are 250+ million iTunes users with credit cards on file that can easily make App Store and in-app purchases (as opposed to entering their credit cards into a mobile site). App content can be read offline. Apps just “feel” better as they are quite literally native to the device. And the list goes on… That is why MAZ has chosen to work exclusively with apps for the time being. 

But Apps vs. HMTL5 ultimately is the wrong debate to be having. Technology Review is making a serious mistake in their assessment because they are ignoring the real wrench that has been thrown at them (clue: it’s not apps).

Mobile and tablet devices themselves are the real disrupters, not apps. The experience of using these devices is so radically different than using a computer, perhaps as radically different as the computer was 20 years ago when compared with print.

Publishers’ worlds got turned upside down with the birth of the desktop web, and they have only recently gotten their website acts together, if at all.

Now once again, a huge change is rocking their boat. And longterm, it’s true that you won’t be able to just throw your print edition up on the iPad untouched, but you also can’t just throw up a new version of your website.

Tablet and mobile consumption is so so different than computer consumption. Flipboard’s CEO, Mike McCue, spoke recently about the beauty “revolution” of the iPad. All hail! The dark ages of web design are finally over! Viva la revolution!

For the beauty of the iPad, print is actually a much closer analogy than a website is. 

In the end, we need to be aiming to perfect the tablet consumption and production experience. It’s not print, and it’s not the web. It’s somewhere in the middle. I personally call it “digital print”. No one has it quite right yet, but how could they? The device itself has only existed for 2 years. 

All that being said, there is very much a place, now, in 2012, for tablet versions of print, AND tablet versions of websites. You have to start somewhere. There must be an entry point for publishers into this new market. You can’t just skip to the end. (and if you wait until then to start, you’ll be way too late)

Magazine publishers now have two products to worry about with tablets: their print edition and their website. How do you do it all?

TR writes about moving to a purely RSS-like model. I think that makes sense for a web team that is used to outputting to a website— used to templates, a CMS, and sacrificing branding to other RSS readers. The expectations of website consumers is met also: they can read what they want and/or read it through a nice RSS reader like Flipboard.

However for a team used to outputting to print, they need a solution that builds on their existing workflow, which is very different than a web team’s. These are editors and designers who greatly value the curation, presentation, and branding integrity of their content. And in turn, their readers have come to expect that experience. 

Newspapers have it the hardest. Their content is consumed more like a website’s, but they are used to print workflows. Tough spot to be in. 

Over time, these various sorts of publishers may all converge to a single mobile/tablet type of content provider. I believe there will in fact be a convergence at some point. It won’t be web, and it won’t be print— it will be something new. 

But you still need to start somewhere, and you need to start now. Don’t go bet the farm, just start. Get in the game. Choose a way that is frictionless and cost-effective, leaving room to grow as the market grows. 

Readership will only get more fragmented over time, not less. Think of apps and HTML5 “web apps” as two different platforms, just like iOS and Android are different platforms. That’s how the app/HTML5 conversation should be framed.

What you should be concentrating on instead is mastering the experience of tablet and mobile devices, and working with tools that allow you to explore and experiment.