A better iOS app switcher

You know the app switcher in iOS? Double tap the home button and up pops a tray with the last used apps. Swipe once to the right and you’ll get some hidden music controls. Swipe to the left enough and you’ll find apps you didn’t even know you ever used.

There are a few problems with the current app switching.

  • The very useful music controls are hidden. To reach them you need to double tap and swipe left. Most people don’t even know that it exist.
  • Closing apps isn’t really necessary, but when you do want to close something quickly it’s a hassle.
  • Icons aren’t the most useful way to identify an app and you can’t see the state in which you left the app.

I had some ideas about how to improve the current implementation. So here’s a quick mock-up.

  • You still launch the app switcher by double tapping the home button. The app zooms out and this screen appears.
  • You exit it by pressing the home button once (or twice).
  • Music controls are permanently displayed at the bottom. Himitsu no more!
  • Apps are represented by both a thumbnail of the last state and the app icon. This way it’s easy to recognize an app.
  • You can scroll to all “open” apps by using the cover flow mechanics (which finally *really* is useful for something).
  • The app icons scroll along with cover flow.
  • Closing an app can be done by swiping an app to the top of the screen (yes, a WebOS homage).
  • Tap a thumbnail or icon to zoom right into the app.
  • Knowing a bit about how iOS works you will sometimes probably get a slightly greyed out screen with a spinner while the OS loads all the data for the state in which you left the app.
  • The linen is not great, but it’s what Apple seems to love, so I used it.

iPhone 5: what I got right

At the end of May I did some iPhone predictions, just in case a new phone was announced at WWDC. Now that the phone has been announced, it’s time to see how I fared.

  1. The 3.95” (or whatever) screen is real

    This turned out to be correct. A added detail that turned out to be correct is that “old” apps will be letter-boxed.

  2. A6 dual core processor

    Seems to be correct as well. We don’t know all the details yet, but the processor is called A6 and it looks to be dual-core. I’ve heard however that it does include a quad-core GPU just like the A5X.

  3. There won’t be a three part back

    I got this one epically wrong. The leaked parts turned out to be legit (although details differed). I’ll hold of the verdict of how I like the design when I hold one in my hand.

  4. The Facetime camera will be centered

    Exactly right.

  5. The camera will see an upgrade, but won’t exceed 11MP

    Turned out be right as well. The theory that it would get a slightly higher than 8MP sensor wasn’t right however, since it has exactly the same pixel dimensions as the iPhone 4S.

So 4 out of 5. That’s good in my books.

Pioneer announces CDJ-2000 Nexus

Music stored inside Wi-Fi/USB-connected iPhone/iPod touch/iPad devices can be transmitted to the CDJ-2000nexus using the iOS version of Rekordbox for DJ play. The touch panel displays of iPads, etc. can be used for intuitive music selection with controls that users will already be familiar with.

This and slip mode, quantized syncing of tracks and easier looping tools open up a lot of new possibilities for “hardware” DJ’s. The best demo video is the one with Eats Everything.

It’s interesting to see that computer technology and DJ hardware is growing closer and closer together. There are many digital only DJ solutions, but with technology like slip mode, Pioneer is doing things that are currently not possible with Traktor or time-code setups.

I would love to get my hands on a few of these, but they are way too expensive to justify a purchase for home use.

More info over at PioneerDj.com

New (2012) iPhone predictions

WWDC is next week. And even though I don’t suspect Apple will reveal the new iPhone hardware during WWDC, now is a good time to do some iPhone predictions before it’s too late.

The 3.95” (or whatever) screen is real

The rumors suggest this, and it seems logical. A screen with the same dpi as the iPhone 4 and 4S, but slightly taller. Most apps would be easy to upgrade, and apps which can’t will be letter boxed.

Though it has benefits (better for vertical apps, video viewing) and downsides (16:9 portrait images…, the phone would be a bit less easy to handle with one hand), I believe this is the path Apple will take.

A6 dual core processor

While other manufacturers go quad-core, I believe Apple will stick with a more energy efficient dual-core chip for the iPhone, while the next iPad will get a quad-core version of the same chip. The A6 will be more powerful than the current A5, presumably with a more beefed up GPU. It will also consume less power.

There won’t be a three part back

There are pictures circulating the web showing an aluminum iPhone backside with glass strips at the top and bottom parts of the back. I don’t believe that it’s an Apple design. My prediction is the new iPhone will have a simple and clean back.

The Facetime camera will be centered

It’s just a little more natural if the Facetime camera is facing you directly instead of being a little bit to the side. Apple knows this and, if engineering allows it, they will probably place it centered above the screen.

The camera will see an upgrade, but won’t exceed 11MP

This is based on practicality. If they increase the sensors quality, but not increase the number of megapixels than the quality of the images will be greater. I guess most iPhone users don’t know or care how much MP the camera has, as long as it takes great pictures. So they won’t have to increase the megapixels for marketing reasons.

One gripe I currently have with my 4S is that when I want to take video, the image gets heavily cropped / zoomed in. I assume this is since they take a 1920 x 1080 part of the sensor which is smaller than the entire sensor.

If the new sensor woud make 16:9 images than a 16:9 sensor would only have to be 300.000 pixels bigger to exactly be twice as big as 1920 x 1080. If that would be the case the could create smart software which only uses 1 out of every four pixels or 4 pixel averages for each 1080p pixel.

If they want to keep 4:3 images, than the sensor would have to be about 11MP to do the same trick.

Ideas for the iPhone 6 camera sensor

These are my iPhone predictions. As for WWDC, I hope they announce new Mac Mini configurations, but if they have new hardware announcements than it’ll probably be a new iMac and updates the the Macbook line. Besides iOS6 and Mountain Lion I guess we’ll see an update for iLife with deep iCloud integration (please let me store my iPhoto collection in iCloud). And I’m praying for an Aperture update.

Why the new iPad is a big deal

Yesterday Apple announced a new iPad called just that: iPad. To some it seems like the best thing ever, to others the upgrade is not that big. To me, this is a device that will change a lot. It’s a big deal.

The single reason? The screen.

  1. Photos will look amazing. For the first time ever you will be able to view digital images with the same quality of a high-res print.
  2. Reading will be much more comfortable.
  3. Digital typography will become even more important.
  4. Both web and app developers will have to create big high-res assets. The weird thing about this, is that we can’t really preview them while we work on them because the screens we work on don’t have the same fidelity.

 

Whatever Apple’s calling it doesn’t matter, it’s simply a big and very pixel dense display. The entire device is built around it. The display needs a beefy processor to push every single one of the 3.1 million pixels and you need a decent camera to capture images worthy of the display. You need the bandwidth to download all the highres assets, so HSDPA+ and LTE are very welcome. And finally we don’t want worse battery life, so the battery needs to be bigger.

If you believe that the iPad has just received a marginal upgrade you are very wrong. The new iPad is a big deal. Really.

CSS Off 2011 reflection

Last October I participated in a competition called CSS Off. CSS Off descibes itself as a no holds barred display of CSS and markup skills. The competition in a nutshell comes down to this: You are provided with a design (provided by the fine folk at Paravel) which you need to turn into great HTML and CSS.

Because of the big amount of participants it took a while before the jury had judged all entries. But yesterday the results where finally published. And I did pretty well with an 11th place! Nice!

You can check out my submission here: My CSS Off entry.

Mobile first

I took a mobile first approach for this project. The starting point was the mobile (or small screen) version of the page and I worked my way up to the original design making sure the content was appropriate on all widths in between. I primarily used an iPhone, iPad and laptop to test.

Focus on clean code

My main goal was to create HTML that was as clean as possible. In my opinion this goal was met and the judges seemed to agree. Just check the source code to see for yourself.

To still be able to recreate the visual design I used a lot of background images and pseudo-elements (with a polyfill for IE8 and down). This worked well, but caused problems when trying to animate certain parts of the page.

Image compression

With all the textures in the background and the illustrations in the foreground I knew it would mean I would have to create a lot of transparant png’s. Not the best file format for compression, so I created several versions of the same image for several breakpoints. This way the small files get loaded for the small screen version, while the big images are only loaded on big screens which presumably have more bandwidth to work with.

Since the design had several great illustrations there was no reason to use 24 bit png’s. 8 bit would be more than enough, but they have ugly non-anti-aliased edges. For the best result of big illustrations with transparent backgrounds I used to following trick:

Place the illustration on a layer in Photoshop above the background texture. Select the illustrations outline (click the layer thumbnail while holding [CMD] / [CTRL] ). Expand the selection by 1 or 2 pixels and copy that complete selection into a new document. Export it to PNG-8. You can optionally select the matte color the match the background.

The small screen version loads a liitle over 500KB of assets while the big screen version loads almost 1MB. That still not great but not bad for an accurate representation of the design.

Retina optimization

Checking your website on an iPhone 4 or 4S makes you very aware of low resolution assets, so I provided several @2x versions for certain images. I used another trick to make the background texture look extra sharp: setting background-size to half of the original image dimension.

Stuff I knew that wasn’t perfect

The form, oh man, the form. It was bad. I wanted to create great dropdowns, but I dind’t have the time to do so. I also didn’t implement any validation.

Legacy browser support wasn’t great either. The background-size property not being supported was the biggest problem. I use background-size a lot to scale backgrounds while resizing the browser.

The last thing I didn’t do was concatenation and minimization of assets. The reason for this was simple, it would have been hard for the judges to judge, so I just didn’t bother.

Things I would’ve done differently now

Aside from fixing the points mentioned above I would have probably handled the image compression differently. I put a lot of effort into recreating the big screen experience of the page on small devices, but that came at the cost of bandwidth. Doing it over I would’ve dropped the textures on the smaller screens so I could’ve used more jpeg’s instead of png’s. That would have saved a massive amount of kb’s!

What I thought of the other entries

It was cool the see a very familiar design handled very differently by other people. Some of the things that crossed my mind:

  • Damn, why didn’t I think of that
  • Wow, that’s a nice animation
  • Hmm, not exactly the same as the original design, but you definitely some save bytes here

The overall quality of the submissions I saw was good! But the most interesting thing to see was how everyone handled the responsiveness of the design. The breakpoints and how the layout changed when viewed on a different device differed a lot!

To conclude

Participating was an amazing experience. Just knowing that people you look up to will be examining your code made me step up my game. I went the extra mile, crossed more t’s and dotted more i’s. The great thing is that my day to day coding has improved because of it.

And finally, while the competition itself is a lonely event, connecting with other participants afterwards has been great as well.

Thanks to the judges and everyone else involved with CSS Off. I will definitely be participating this year again!

jQuery Flex Vertical Center plugin

This jQuery plugin provides an easy way to vertically center an element in its parent. Even if the parents height changes after resizing the browser window, in a fluid or responsive layout for example.

I created it during the CSSoff competition because I had a container with a background that had background-size: 100% on it. I created another plugin (will be on Github soon) which kept the proportions of the container the same even if it changed width in the fluid and responsive layout. There was some dynamic content within the container which needed to be properly centered within the container so I created this plugin to do just that.

Usage

Simply include ‘jquery.flexverticalcenter.js’ (which you can download on Github) in your project (after loading jQuery) like this:

<script defer src="js/jquery.flexverticalcenter.js"> </script>

Then call the plugin on the element which needs to be vertically centered in it’s parent.

<script> $(document).ready(function() { $('#element-to-be-centered').flexVerticalCenter(); }); </script>

This will take the parents height, the elements own height and calculate the distance the element should have from the parents top to be vertically centered. This value is applied to the top margin of the element by default.

Options

You can pass one parameter to the plugin, which is the css attribute that the value should be set on. The default is ‘margin-top’, but you can pass any attribute you would like. Most probably ‘padding-top’ or ‘top’.

<script> $(document).ready(function() { $('#element-to-be-centered').flexVerticalCenter('padding-top'); }); </script>

Note

The initial code was more or less borrowed from the awesome FitText plugin. http://fittextjs.com/

New Year’s update

So it’s been a while since my last post and now a new year has begun. Let’s reflect on my last months in 2011.

A big chunk of October and November where filled up by a big web project that prepares children before they go to a hospital. It was a great project to work on, even though regular accessibility was sacrificed to make the site more appealing to kids.

I also entered to CSSoff competition. I was a great learning experience, but unfortunately I couldn’t put all the bells and whistles into the end result that I would’ve liked. But I believe my entry was still pleasing.

During CSSoff I also created two jQuery plug-ins to solve some problems I found while creating the page. I’ve released one on Github already and the other will follow shortly.

November was also the month of my trip to the South West of the USA. The trip was amazing and some highlights included San Francisco, Las Vegas, The Grand Canyon and Bryce Canyon.

The final stretch of the year mainly consisted of several small projects which needed to be finished, some support work on older projects and one very cool responsive website. That one is scheduled to launch early next week.

The weeks surrounding Christmas are usually reserved for side-projects and this year I dove head first into PHP again. The goal: To create an easy to use Ruby on Rails like PHP framework. Not something that hasn’t been tried before, but it gave me a chance to test a lot of new PHP features. The end result is actually very usable, although not finished yet. But it looks like it could very well become the base of all our feature software releases. I plan to release it as an open-source project in the future.

Several new projects are lined up and I’m finally putting the finishing touches on the new Interactive Studios website. Finally because I started development on that over a year ago. Ideas for a new site are already taking shape, but we desperatly need a new website!

Steve Jobs’ work has touched you

Most of the people I know have PCs. They have Android phones or Blackberries. They get their music by ripping CDs or by less legal means. Most of them have never heard of Steve Jobs. They don’t use his products. But they have been touched by his work. Everyone has been touched by his work. You have been touched by his work.

It’s funny how we take stuff for granted. Before the iPod it was impossible to fit a lot of songs in your pocket and even harder to get them on a device. Before iPhone there were no phones with a big screen that you could easily control with just your finger. Now that’s almost every new phone. And the Macintosh? Well, it changed personal computing forever.

Every good looking PC is a direct result of Apple’s design. Modern tablets are a direct result of iPad. Smartphones are all influenced by iPhone. Windows is a direct result of the first Macintosh. Apple’s revolutionary products have influenced almost all of electronics.

Apple is not the only company that creates revolutionary devices. But Steve understood that you do not only need to create something revolutionary, it must also be insanely great. Technology must serve people and it must bring delight to it’s users. That is the way to make a dent in the universe.

Steve Jobs has died and his legacy is Apple. Now it’s us who have to create something insanely great.

Remove Respond.js screen flicker

Respond.js makes simple media queries available in older Internet Explorers. It works because it parses the available CSS and saves the media query CSS. After every window resize event the script checks if any of the CSS rules should be applied or removed.

If you develop mobile first and responsive websites than using respond.js is a must. Luckily it’s awesome! But I ran into a problem mentioned by a client today. When used in IE7 and IE8 the browser first shows the mobile version and then quickly shows the correct desktop version. This flicker is quite irritating. So I created a simple hack which solves this. It’s not pretty, but it works.

My solution is to hide the HTML that is affected by the media query to be hidden as quickly as possible by adding a CSS class and than removing it in the media query. As soon as the media query is applied to content is visible again.

After opening the element which contains the content to be hidden (in my case a div with the id “container”) add this javascript. Note that this is HTML5 notation, so add type=”javascript” if needed.

<script>
    document.getElementById("container").className += " hide";
</script>

In your CSS create a new rule.

.hide{
    display: none;
}

Add code which sets the .hide rule to “display: block;” or whatever the default was. It needs to be declared for every “stop” in your responsive design. In my case there was only a mobile (the default) and desktop version. The code in my case:

@media screen and (max-width: 480px){
    #container.hide{
        display: block;
    }
}

@media screen and (min-width: 480px){
    #container.hide{
        display: block;
    }
    /* … rest of your CSS rules … */
}

And that’s it. It’s not bullet proof, but it’s probably water proof. If no javascript is available the content isn’t hidden. It could probably be improved by using Modernizr to check if media queries work and only then apply the javascript, because now the script is alays run.