Sunday, July 20, 2014

Cards user interface in jQuery Mobile web-applications

It has been a while since my last post about development. I was working on a new UX-design for my (discontinued) app DroidPapers, which was based (more) on the cards interface that we nowadays grow accustomed to.

There is a blog post that explains why cards are the future of the web. The author, Paul Adams, explains the basics of cards and the digital representation of it in web-applications such as Twitter, Google+ and more. Basicly cards give a nice structured view of your content, with the focus on your content.

There is also a post that describes implementing the “Card” UI Pattern in PhoneGap/HTML5 Applications. In this post the author, Andrew Trice, sets out how to make a web-app based on cards that can be used in PhoneGap and other HTML5 based apps. Some CSS coding in that blog is used by my code. The difference here is that this implementation won't lean on mustache.js and zepto.js, but purely on jQuery Mobile. The best part is that this uses already existing widgets.

The reason why I write this blog is that there is some tweaking to get a cards interface and since I could nowhere find a description for implementation in jQuery Mobile I thought, sharing is caring :). The cards are a bit a work in progress, so any improvements will also be edited in this post.

This post is by the way based on jQuery Mobile 1.4.3, and I expect to work it with earlier versions also. And obviously, this also works when your web-app is published with PhoneGap.

So here we go...

Before there were cards...

Cards appear to be existing from at least the 9th century, but I am not talking about those ones. I am talking about before the trent would be implement digital ones in the user experience of web-apps and native-apps. Let me take my app DroidPapers as an example.

This is how the current release looks like.
Opening screen, made with ListView widget
Overview with Android distributions, also made with ListView

The screens above make use of the widget ListView of jQuery Mobile and the modern look and feel of cards is completely absent.

Let's begin with grids...

So now we need to start coding. For the cards itself there is just some HTML and CSS coding needed. Javascript (or jQuery for that matter) is only needed if you want to dynamically make cards, which is also included in this post.

The base widget we need from jQuery Mobile is Grids, responsive grids to be precise. You can read more about these grids on the demo pages of JQM.

In this case we choose for a 3-column grid. It is possible to do larger (4 or 5), but it might look distorted on landscaped phones. Feel free to test it out for your needs though. Three is imo perfect for tablets, so it responds neatly with different screen sizes. A grid has no borders, no margins and no paddings, but the show it graphically, this is how a grid looks like.

An important note about using grid for cards. There are two ways to build up the interface.

Method 1:
The first 1/3 of the cards are placed in block A. The second 1/3 of the cards are placed in block B. And the last 1/3 of the cards are placed in block C. This will make sure that the cards will fill white spots when the screen is changing orientation and/or size.

Block A
Card 1
Card 2
Card 3
Block B
Card 4
Card 5
Card 6
Block C
Card 7
Card 8
Card 9

In portrait you would get first block A, then B, then C.

Method 2:
Create a new block for every card in a subsequent order. This will order the cards different then method 2. When you create new block for every card you would get an interface that is lined like a table.

Block A
Card 1
Block B
Card 2
Block C
Card 3
Block A
Card 4
Block B
Card 5
Block C
Card 6
Block A
Card 7
Block B
Card 8
Block C
Card 9

In portrait you would get first block A, then B, then C of row 1, and then block A, then B, then C of row 2 and finally block A, then B, then C of row 3.

In this blog post I will work with method 1, because it lines out the cards better.

And here is the basic code to generate that in jQuery Mobile. Make sure to include the CSS class ui-responsive.


So we now have a basic grid that responses to different screen sizes. The trick to make cards is making use of the DIV-element. If you came this far I expect you to now what you can do with div's and other HTML elements by the way. If not sure, check out this great resource: http://www.w3schools.com/.

Filling the grids with cards...

In every block of the grid you can place a card. The code for the basic card (without image) is shown below.

A basic card with no special options

It is also possible to incorporate an image. The code below shows how this is done.

A basic card, but now with an image

If you want to work with titles in your cards, that is also possible. You need to add the titles in the proper places.

A card with an image and titles

And if you want to add a banner in the image (in this case, the image new.png), then you need to make the code below. You can the download the new.png image here: https://github.com/triceam/cards-ui/blob/master/assets/images/new.png.

A card with an image, title, and the banner (notice the new in the right corner)

As the last part there needs to be a layout of course. Therefore you need the CSS code below.

Dynamically add cards in your interface...

Now we got the looks, lets make some code to dynamically add cards to your interface.

First of all, you will need to change your HTML code a bit. Not much, just add some ID-tags. So an example below.


The reason you need to add the unique ids are because in the code we going to use the jQuery selector to reach them. In the javascript below we are finally going to use the CSS code "div.holoPressEffectDiv". This to make the card give visual feedback when tapped.

The example below uses cards that are stored in arrays. It is also possible to use of API's, SQL databases, et cetera. Whatever you like :). You can find more information in comments in the code.

And how it will look like when you're done...

Cards with image and banner on the opening screen
The new overview with wallpaper distributions
And here how it looks on a tablet, with the same code!

How it looks on a 10.1 inch tablet, without changing any code!
You can find all code examples here: https://gist.github.com/teusink/3597bb0655c95b5a374e.

Of course you can mix some elements and tweak the code if needed. And again, with big thanks to Andrew Trice for his blog that helped me allot.

Thanks you for reading my blog!


Copyright (c) 2015 Joram Teusink

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.