Media Queries and Apple Mail.App

Media Queries

tl;dr It looks like Apple Mail.app (iOS and OS X) ignores background images you change through media queries unless you define them for every device width on its own.

During the last days I was working on a responsive newsletter for MyGassi to prepare an upcoming mailing campaign. I used INK by ZURB to have a solid base to work on. Of course we wanted to use media queries to provide a good usability on all devices.

After some early testing it looked like Mail.app would ignore the media queries that should deliver smaller background images below a device width of 600px.

Here’s an example for a with the id “smalldogs” I wanted to use to display a smaller image on mobile devices:

But whatever I tried, Mail.app only displayed the original background image for every device width. What confused me even more was, that it worked perfectly in every browser when I resized the windows. My friend and experienced web developer Ludwig Weise then pointed out that Mail.app may prevents the change of an image through media queries because of potential security issues. He recommended that I should define the background image for devices above 600px device width also with an own media query.
That solution worked just perfectly for me. This may helps you to avoid a similar mistake, even if I haven’t found the true reason for this behaviour yet (if you do, please let me know.

Say hello to Coffeelog

Hello Coffeelogtl;dr I wanted to keep track of the coffees I purchased for brewing at home but didn’t find the right solution. So I designed an iPhone App and realised it with the help of Philipp Waldhauer. You can get it here.

Idea

Some months ago I dropped my Nespresso machine for making coffee. I can’t really remember what exactly made me stop using it, but I turned to real “tools” like FrenchPress, Coffee Dripper or Espresso Machine to brew my daily dose of caffeine at home.
As Hamburg offers a huge variety of great coffee roasters, I soon had bought and tried more beans than I could remember. But instead of just writing my purchases down in Evernote or something, I felt like there should be a tool that’s truely dedicated to coffee.

Design

During that time I got my first deeper hands-on experience with Photoshop and started to play around with great templates like the ones from Teehan+Lax to produce first results. The more I was thinking about some kind of coffee app, I saw a real need for it.
At first I created a truely reduced MVP in Photoshop to validate my idea and described it to Philipp Waldhauer, a friended iOS developer. I wanted to start with a real minimum of features and expand the idea step by step once it got live and feedback from users would roll in.

I kept the design close to iOS 7 standard elements because my skills in Photoshop where pretty limited (meanwhile I switched to Sketch) and I wanted to make version 1.0 fast to develop. If the app would become successful, I could add the fancy stuff later on.
In addition I asked Ludwig Weise to create initial icons for displaying the different ways of preparing coffee and he provided some really cool ones.

Development

Thankfully my thoughts where right and the estimated efforts to create version 1.0 of Coffeelog where very reasonable.
During the development stage I tried to stick with my initial design ideas and avoided new adjustments to not delay development at any point. I put my ego and enthusiasm back everytime I discovered some new inspiration which I could imagine for an adapted design of Coffeelog.

Shipping

Thanks to Philipp we where able to submit Coffeelog for review just before the holidays. Unfortunately, we didn’t made it to the App Store before the freeze and so we had to wait some more days until we have been published by Apple.
I put together a very simple and small landing page in the meantime. As Coffeelog itself isn’t overly complex, I felt like a very reduced website would be the exactly the right thing for it.
So while we technically went live on December 27th, we wanted to fix some small bugs with a minor update before we started to talk publicly about Coffeelog.

Summary and Forecast

This version is of course just the beginning for Coffeelog. We already have a lot of stuff in mind that could be added to the app. But we want to refine the app based on your needs and feedback to make it a better product for you above all!

So check out Coffeelog in the App Store and grab a nice deal while it’s 50% off and let us know what you think on Twitter.

Timelog Changes 17/12/2013

Ludwig and I proudly present the last changelog for Timelog in 2013 we shipped last night:

  • “Add Label” button is now disabled until you actually type something in
  • Fixed a bug where sometimes the “Delete Summary” button appeared, even if your summary was empty
  • Tim has now access to our FTP server

To show you what we’re already working on for Timelog in 2014, we want to give you a little sneak peek below (you can also find the shot on dribbble).

Timelog Changes 12 Dec

Timelog Changes 10/12/2013

We shipped some minor improvements on Timelog last night. Here’s what to expect:

+ More information about our motivation and privacy on “Info & About”
+ Sweetened error page when you deleted or disabled your cookies (take a closer look on dribbble)
+ SEO, og and twitter tag homework
+ Added a small hint that you can close the browser while running a log
+ “Delete summary” now only deletes existing logs and no active ones
+ Fixed a bug where your timer already starts some seconds or minutes in the future, while still logging the correct time
+ Fixed a smartphone resize bug
+ Fixed some typos

We’re still looking into white background when on “Summary” and problems on Windows Phone.

Thank you for all your feedback. We can’t wait to show you, what’s next.

Finishing a tutorial with a swipe? Why not?!

Swipe to Start

I know there are a lot of opinions when it comes down to tutorials in apps. Some do a walkthrough via swipe (e.g. Wunderlist) upfront or some display tipps as overlays on the regarding screens (e.g. Evomail).

But when I swiped yesterday until the end of the walkthrough of the pretty well made new Airbnb App for iOS 7, I couldn’t jump right into the app with another swipe. I had to tap on the “Get Started” button to end the tutorial and start using the app.

That really confused me because before I was four times taught that I can move with a swipe through the tutorial three times before. Why did they suddenly changed the navigation method?

I’m right now not quite sure which apps do it the same way like Airbnb but there are definitely some. Some companies probably do it this way because they want users to register or log in before using the app and display the appropiate buttons below the last step. But even in this case you could show the buttons more prominent on a separate screen after a user swiped on the last tutorial to go on.

I clearly see the button as the obvious solution for “everybody” showing how to end the tutorial and start using the app. But why isn’t there also the possibility to just “swipe on” if it’s the gesture I used 3-4 times before to go through the steps?

UPDATE:

The recent iOS 7 Update for Day One makes it so right:

Day One iOS 7 Walkthrough from Tim Herbig on Vimeo.

A short update on Alertify

Update on Alertify

It’s been a while since I posted something about Alertify, the alarm app Michael Dolejš and I founded some months ago. While we started to develop the app together with a iOS developer we found, it turned out to be some kind of partnership with him Michael and I didn’t wanted for the product. So after some weeks of work, we decided to cut the cords with him and started again to search for an iOS developer to take on Alertify.

We quickly got in talks with Hans Pinckaers who already worked with Michael on some projects in the past. So we’re back in productive development mode for some weeks and are making some progress. Of course it’s still a small side project for all of us and will take some time, but we’re committed to it and want to see Alertify become real.

Follow Michael, Hans or me on Twitter for further updates if you want to stay informed about the progress on Alertify.

Fear and Competition

Watch Marco Arment talking at this year’s XOXO festival about fear and competition in the market of digital products and why he finally admits to enter an already crowded market.

It’s especially valuable for people who are working on their own products and have probably to deal with the same challenges Marco had to in the past with his former products Instapaper and The Magazine.