I’ve already found use for this book as I’ve checked out different design pattern on filtering for an app that I’m currently designing. And that’s one thing this book excels at – providing fast answers to urgent needs.

The book is organized into ten different sections that each presents the design patterns in a concise and brief manner. The focus of this book is not so much on the theory behind each pattern but rather what established patterns exists and how to use them. Thanks to this approach it’s quick to find a suitable pattern.

I’ve read the e-book edition and it features beautiful screenshots in full color of different apps along some sketches that illustrate the major patterns.

Device Agnostic

The book tries to be device agnostic and displays patterns from both iOS, Android, WebOS and BlackBerry which is nice. Unless you have all these devices yourself it can be hard to explore how different apps on different platforms have solved a problem.

A problem with this kind of books is that the evolution of Mobile User Interfaces moves so fast that the patterns and examples, risks being outdated pretty fast. As I read the book, some screenshots already differed from the latest version of the apps.

About the author

Theresa Neil is a User Experience Consultant from Austin Texas. She’s previously co-authored another brilliant book with Bill Scott called Designing Web Interfaces: Principles and Patterns for Rich Interactions.

You can learn more about Theresa on her personal site, www.theresaneil.com.

Conclusion

This is a great book to have when cranking out Wire Frames and Prototypes for mobile UI’s. You can quickly explore the most common solutions to design problems and also some anti-patterns to avoid. If you’re into the mobile app business I highly recommend you pick up a copy!

You can see several of the design patterns online at mobiledesignpatterngallery.com. There’s also links to a few chapters that’s been published online.

Book information

Title:

Mobile Design Pattern Gallery: UI Patterns for Mobile Applications

By:

Theresa Neil

Publisher:

O’Reilly Media (March, 2012)

Pages:

280

ISBN:

1449314325

ISBN-13

978-1449314323

Buy Mobile Design Pattern Gallery from Amazon.com

Note: I wrote this review for O’Reilly’s Blogger Review Program. Their deal is pretty good: You get a free e-book to read and once you post a review you get another. Try it yourself if you’re interested in reviewing books.

In my book I have in fact described how to add multiple markers from JSON and how to attach unique InfoWindows to each of them. What I haven’t described is how to get the JSON-data to actually show up in the InfoWindows. This tutorial aims to describe how to do just that.

The JSON

In this example I’m going to use the capitals of the Scandinavian countries: Stockholm, Oslo and Copenhagen. Each capital will be displayed on the map with a marker. When you click a marker an InfoWindow will popup with some brief information about the city.

The JSON data looks like this:

var json = [
  {
    "title": "Stockholm",
    "lat": 59.3,
    "lng": 18.1,
    "description": "Stockholm is the capital and the largest city of Sweden and constitutes the most populated urban area in Scandinavia with a population of 2.1 million in the metropolitan area (2010)"
  },
  {
    "title": "Oslo",
    "lat": 59.9,
    "lng": 10.8,
    "description": "Oslo is a municipality, and the capital and most populous city of Norway with a metropolitan population of 1,442,318 (as of 2010)."
  },
  {
    "title": "Copenhagen",
    "lat": 55.7,
    "lng": 12.6,
    "description": "Copenhagen is the capital of Denmark and its most populous city, with a metropolitan population of 1,931,467 (as of 1 January 2012)."
  }
]

Note that the JSON data above contains the following information:

• A Title in plain text
  We will use this information for a tooltip on the marker
• A Latitude
  For the latitude portion of the position
• A Longitude
  For the longitude portion of the position
• A Description
  The content that will be displayed in the InfoWindows. I’ve included some HTML in it to illustrate that you’re not restricted to just plain text.

Note: In this example I have the JSON data in the same js file as the code, but in a real-life scenario you would probably grab it from an external source such as a back-end server or a web service.

Creating the map

First of all we need to create a map. The map will be centered over Scandinavia so that both Stockholm, Oslo and Copenhagen are visible.

// Creating a new map
var map = new google.maps.Map(document.getElementById("map"), {
  center: new google.maps.LatLng(57.9, 14.6),
  zoom: 6,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

If you feel unsure how this all works I recommend that you read Google Maps API 3 – The basics. It describes how to create a simple map.

Adding Markers

To create markers from the JSON-data we need to loop through it and extract the information for each marker.

for (var i = 0, length = json.length; i < length; i++) {
  var data = json[i],
      latLng = new google.maps.LatLng(data.lat, data.lng); 

  // Creating a marker and putting it on the map
  var marker = new google.maps.Marker({
    position: latLng,
    map: map,
    title: data.title
  });
}

This will add markers to the map and they will all have their own unique title which will show up as a tooltip when you hover over them with the mouse.

Adding InfoWindows

Ok, so now we've created a map and added some markers from JSON data. So far it hasn't been that hard, the way of doing this is pretty straight-forward. But to attach the InfoWindows properly is a different story. It's now that it starts to get tricky.

First of all We're going to create a global InfoWindow that we will reuse for all markers. This needs to be created outside of the loop. So just above the loop in the code we insert:

var infoWindow = new google.maps.InfoWindow();

This gives us an empty InfoWindow object that we can use on the map.

The next step is to attach a click event to each marker. In the code that executes we will fill the InfoWindow with the correct information and open it att the right location, pointing at the clicked marker.

At first glance it seems that you can do this the same way that you add markers:

// Attaching a click event to the current marker
google.maps.event.addListener(marker, "click", function(e) {
  infoWindow.setContent(data.description);
  infoWindow.open(map, marker);
});

The problem with this approach is that when you're trying to add more than one InfoWindow, they will all have the same content as the one in the last iteration. To prevent this from happening we need to use something called a closure.

Closures

What a closure does is to persist the data in each iteration of the loop so that it's bound to that particular marker.

One way of doing this is by encapsulating the code inside an anonymous function that is instantly executed. You need to make sure to pass the information from the current iteration to the anonymous function. In our case we're going to pass the current marker and the current data.

This is kind of a confusing concept and a bit hard to explain, so lets instead look at some code.

Implementing the closure

// Creating a closure to retain the correct data
//Note how I pass the current data in the loop into the closure (marker, data)
(function(marker, data) {

  // Attaching a click event to the current marker
  google.maps.event.addListener(marker, "click", function(e) {
    infoWindow.setContent(data.description);
    infoWindow.open(map, marker);
  });

})(marker, data);

By passing the data to the anonymous function we make sure that it will stay there. We're essentially creating 3 self contained objects (closures) from our 3 locations.

Now if we're try the code, it will work perfectly and each InfoWindow will display the right information.

Tip: Nicholas Johnson explains how closures work in 5 easy bullet points in his short post, What is it with Closure?

Live Demo

Check out the live demo

Conclusion

I hope that this example will clear out some confusion on this topic. Closures are a pretty confusing concept but once you understand how it works, it's something you we'll easily be able to apply in your own code. Anyway, you should be able to grab the code from this example and use it as a boilerplate to tweak your own needs.

Happy Coding!

My Google Maps book

If you found this article useful you might be interested in my book Beginning Google Maps API 3. It covers everything you need to know to create awesome maps on your web sites. Buy it on Amazon.com

When I started out I didn’t have any booked projects and was in fact a bit worried about how it would turn out. Luckily I’ve been fortunate enough to be engaged in several interesting projects that has really kick-started my new business.

Say Hello to Meetod

Until now I’ve been a sole proprietorship and have marketed myself under the name of this site, In usability we trust. But recently I’ve taken it a step further by registering a corporation with the name Meetod Sweden AB.

Meetod will have the same focus as I’ve had until now which is, Designing and Developing Top Notch Web Applications and Apps that work extremely well for the people that will actually use them.

In usability we trust will go back to being a blog and the sites for my business is found at www.meetod.se and www.meetod.com.

Meetod.com

What I’ve been up to so far

A lot has happened since last September that have enabled me to take this step. Here are some of the projects that I’ve been working on:

• Designing an Online Editor for bMobilized (still under production).
• Creating a Map solution with both Google Maps and Bing Maps that’s a part of a product that PositionTech offers to their customers.
• Designing and Creating an iPhone/iPad App for EL-Info called EL-Vis Q&A (Available in the Scandinavian App Store)
• Designing and developing an advanced Web Application aimed at electricians for EL-Info (still under production)
• Leading the UX-design process for an iPad Poker Client for GTECH G2 (Boss Media) (still under production)

Apart from that I’ve also been doing a few talks on UX-design and am currently holding a completely custom course in 10 parts on HTML and CSS for Visma Spcs.

Thank You!

I’m really grateful to all of my awesome clients whom have entrusted me with these projects and enabled me to pursue my dream. With all of my heart, Thank You!

So, what is CoffeeScript?

CoffeeScript is a programming language that compiles to regular JavaScript. What’s great about it is its concise syntax and the fact that it hides away some of JavaScript’s more ugly sides. It’s inspired by script languages such as Ruby and Python which both has a very terse syntax.

In short it’s a great way to efficiently write clear and maintainable code.

CoffeeScript has gained a lot of traction lately and has proven to be a more productive way to write JavaScript than to just write raw JavaScript. Ruby on Rails 3.1 for instance uses CoffeeScript by default. If you’re on the Microsoft .net platform, there’s several Extensions and NuGet packets available. You can also easily run your own complier whatever platform you’re on either via Node.js, Ruby Gem or JavaScript (There are probably even more ways).

What about the book

The book is short, only 60 pages, but manages to clearly explain how to use the language with well explained examples. Before reading this book I had not written any CoffeeScript code, but I was curious about it. It has kept coming up in lots of articles and tutorials lately plus the fact that the creator of CoffeeScript, Jeremy Ashkenas, is also the creator of Backbone.js and Underscore.js which are two libraries that I use extensively in my projects. Reading this book has given me a nice introduction which have enabled me to quickly get started using it in a project.

The author, Alex MacCaw, has a clear writing style and explains the concepts through easy to follow examples that are thoroughly explained which makes the learning experience both enjoyable and efficient.

My Verdict

If you’re interested in getting started in CoffeeScript this book is a great and quick way to get you up and running fast. Since it’s only 60 pages long there’s really no reason not to. I have a hard time imagining a faster way to get going.

The Little Book on CoffeeScript is Open Source and you can read it online at GitHub. If you prefer to read a the physical book or have it in e-book format you can buy a copy from Amazon.com or from O’Reilly.

Book information

Title:

The Little Book on CoffeeScript

By:

Alex MacCaw

Publisher:

O’Reilly Media (January 31, 2012)

Pages:

60

ISBN:

1449321054

ISBN-13

978-1449321055

Note: I wrote this review for O’Reilly’s Blogger Review Program. Their deal is pretty good: You get a free e-book to read and once you post a review you get another. Try it yourself if you’re interested in reviewing books.

Thank you

Thanks to all who attended the event. I had a lot of fun giving the talk and it’s always nice when there’s a good crowd attending it. Also many thanks to my good friends Chris Jangelöv, Danne Nordell and Simon Winter who was also doing talks and helped organize the event.

Watch the whole event

The whole event was filmed and will be available shortly. I will update this article with a link to it as soon as I get it.

If you want to know a little bit more about what’s going to happen during the event, you can check out my previous post named World Usability Day 2011.

Note: Sorry all you non Swedes, but the event is in Swedish.

Watch the live event

If you’re interested in watching the live event online here’s the details how:

1. Go to https://visma.webex.com/visma-sv/j.php?ED=1145602&UID=3701652&PW=NNzQ2ZTg3OTFh&RT=MTUjMTMw
2. Enter your name and email
3. If a password is required, enter cj
4. Click “Delta”
5. Follow the on-screen instructions

Note: I will update this post with information about how to watch the event afterwards as soon as I have the info.

How big is the mobile web?

The amount of web pages that are being accessed by mobile devices is increasing day by day. In fact traffic to mobile websites in 2010 grew by 600%, the year before that it grew by 300%. In the last quarter of 2010 it out-shipped the combined global market of laptop, desktop and notebook computers This happened 2 years earlier than analysts had calculated. So it seems that the mobile web is really exploding and at an accelerating speed. (Statistics from Mobile First by Luke Wroblewski)

The test produces a 6 page pdf-report with your test result as well as personalized advice and best practices for creating mobile web sites.

GoMo

With the background of these numbers it’s not surprising that Google is encouraging companies and organizations to create mobile-friendly sites. After all, Google’s entire business model is dependent on that people can use the web effectively.

If you not convinced yet, here are some more statistics from the GoMo site. For example:

• “By 2013, more people will use there mobile phones than PCs to get online”
• “Mobile Searches have grown by 4X since 2010″
• “There will be one mobile device for every person on earth by 2010″

Source: GoMo – Reasons Mobile Matters

Test your site

I encourage you to test your own site on GoMo. Not the least for the fancy pdf report that you will get. You will also get personalized advice for your specific site as well as some best practices for building mobile websites.

Need help?

If you find yourself with a site that doesn’t score so well on the mobile-friendliness scale, don’t hesitate to contact me for a free quote. Maybe I can help you bring that score up.

Here’s how it will go down: We will get together at Visma Spcs at 12.00. There will be a lunch-sandwich and a few short talks by me and my buddies Dan Nordell and Chris Jangelöv. The whole thing will last about an hour and will end with a short discussion.

Come join us

If you’re in the area you’re more than welcome to join us. It’s a free event, but you’ll have to sign up for it so that we know how much food to supply. Please note, that the event will be in Swedish.

If you’re unable to be physically present at the event, it will be broadcasted so you can attend remotely. Be aware though that you’ll have to bring you own sandwiches. I don’t know the details about the broadcast yet but will post about it as soon as possible.

Design for influence

The talk I’m doing is titled: Design for influence. I will show examples on how to affect the way people behave through different design techniques. I’ve actually been fascinated by that since the last time I spoke at World Usability Day, that time on Design for Sustainability. So it will be interesting to take that talk one step further.

These events tend to be very casual and are a great opportunity to network with other people in the area. So don’t hesitate, in this case there actually is such a thing as a free lunch.

You can also check out our event at worldusabilityday.org.

Extremely professional and knowledgeable in Web Development. Also, since Gabriel always delivers high quality on time, he’s the first partner we turn to when we need external resources for larger projects.

– Johanna Wallentin, www.webday.se

The patterns that are shown in the book are all Model-View-Controller (MVC), the popular design pattern being used in a lot of back-end frameworks such as Ruby on Rails, ASP.NET MVC and CodeIgniter (PHP) to name a few.

The first part of the book introduces the different aspects of the MVC pattern. Then there’s a few chapters dealing with JavaScript templating, dependency management, some of the new HTML5 API’s and JavaScript deployment. In the last part of the book 3 different libraries for applying the MVC pattern to a project are introduced.

Desktop-like applications

Traditional web applications require a lot of requests to the server, but using MVC on the Frontend you can create One-Page-Applications with all the logic in the frontend. This might sound crazy at first, but after reading the book and trying it out for myself, I’m confident that this is a good approach for certain kinds of web applications. It’s actually more like programming Desktop Applications.

This approach gives you applications that responds immediately on user interaction. Because it doesn’t have to perform constant server requests, it is snappy and responsive.

Not for all projects

I want to be dead clear here. Im definitely not saying that this is the right approach for all web applications, because it’s not. For starters, using a JavaScript only approach means that not everybody can use it, for example people using screen readers or have JavaScript disabled. So for content intensive sites this is not the way to go. But for more advanced Web Applications and for mobile web apps aimed at smart phones, it’s certainly a viable option.

JavaScript libraries

As I mentioned before Alex presents a few libraries that will make it easier to create a MVC architecture in the last part of the book. He has actually created one of the libraries himself, Spine.js. The other libraries are Backbone.js and JavaScriptMVC.

Although I’m sure that all theses libraries are good I myself was most compelled by Backbone.js which I’m currently using to build a mobile web app. I think it’s great in the way it makes the code so much more structured and easier to maintain. It essentially brings backend programming structure to the world of JavaScript.

Conclusion

If you have a few JavaScript projects under your belt and you feel that there must be better ways to organize and structure the code, this book is definitely for you. It will teach you how the MVC pattern works on the frontEnd and gives you the tools and knowledge to leverage your own applications.

Bookinformation

Title:

JavaScript Web Applications

By:

Alex MacCaw

Publisher:

O’Reilly Media (August 30, 2011)

Pages:

280

ISBN:

144930351X

ISBN-13

978-1449303518

Buy JavaScript Web Applications from Amazon.com

Note: I wrote this review for O’Reilly’s Blogger Review Program. Their deal is pretty good: You get a free e-book to read and once you post a review you get another. Try it yourself if you’re interested in reviewing books.