Compact, Scalable and Flexible solution

Due to the real-time nature of the City bus tracking app [1], it was quintessentially important to minimize the web data traffic (inbound/outbound), thus it was highly desirable to avoid any use of graphic files and limit the data communication exclusively to the text. As a good auld saying goeth - 'the picture is worth a thousand words', but it also weighs lots a kilobytes (that part was omitted from the original word of wisdom). Even in a highly-compressed form, the image file could outweigh the entire textual communication packet by order of magnitude or more.

Ideally, the real-time data communication exchange would be comprised just of text; no graphic files transmitted to the client. In order to produce some aesthetic enhancement, certain grahic images are available as Unicode characters: the use of them will solve the problem in the best possible way. In case of no appropriate Unicode character available, the other two options would be either creating a custom graphic image file (bad from size/flexibility perspective), or to apply advanced CSS3 technique, which in many cases is capable to produce a desirable compact pseudo-icon graphic enhancements. Scalability and ease of modification via CSS3 statements (rather that image editing) are additional advantages of proposed solutions over the use of graphic files, as discussed below.

Background

The original CSS technique used to produce a bus pseudo-icon for a real-time City bus tracking application [1] is shown below:

Desirable bus pseudo-icon can be added to HTML5 document with this simple line:

<divclass="b16"><divclass="b"><divclass="bb"></div></div></div>

In addition to small digital footprint, this compact solution provides tremendous flexibility over the graphic-file counterpart: color theme and overall appearance can be easily changed by modifying just couple lines within HTML5/CSS3, instead of going to image editing for every change needed. This technique is further extended with advanced use of CSS3:before and :after pseudo-elements.

Using the Code

The refined CSS3 styling technique that allows creation of the bus 'pseudo-icons' by using :before and :after pseudo-elements is shown in the following Listing:

Corresponding to the Listing 2, the bus pseudo-icons can be added to the Bing Map or any HTML5 document with a simple line:

<divclass='b12'></div>

or, included in the circle:

<divclass='b12C'><divclass='b12'></div></div>

Suggested technique provides flexible and rather compact CSS3 alternative to graphic files. The following demo screenshot is linked to the real-time fully-operational web app utilizing the described technique.

Demo

The following sample screenshot of the real-time City buses tracking web application shows bus pseudo-icons produced by the advanced CSS3 technique described above in Listing 2 . Click on the image link to view the live demo of real-time NY City bus tracking app:

Flexibility and Scalability

Pseudo-icon solution is scalable and allows ease of customization: for example, the color theme can be changed just by couple lines in CSS stylesheet as shown in the following Listing 3 (HTML5+CSS3 encapsulated in a single file):

Figure 3: Bus pseudo-icons sample screenshots

Points of Interest

I was very excited about exploring a seemingly limitless opportunity of the advanced CSS3 styling technique, particular important in a real-time web apps where data traffic/packet size is rather critical. More on this topic in my previous articles/tips [2,3].

Practical consideration

For didactic purpose the entire solution (see the code snipet in Listing 3) is encapsulated in a single HTML file with CSS stylesheet structured for a better readability with tab/spaces and additional comments. There are couple important practical consideration pertinent to a production-level implementation of this solution. First, all comments and extra tab/spaces can be removed in order to further reduce the overall size. Also, it's quite important to split the file into two: HTML file providing the content and a CSS file included into the main one w/ link rel statement as shown in the following Listing 4a,b:

Separation of programming concerns, i.e. content (HTML) from presentation layer (CSS) is a well-known programming paradigm, particular important in this use-case. Major web browsers implement efficient caching technique, so the external CSS3 file (Listing 4b) typically will be cached upon first request, thus reducing the web traffic and giving performance boost to the consequent data requests.

Another advantage of the proposed solution, as discussed above, lies in its flexibility/scalability: it's sufficient to specify just a single pseudo-icon CSS3 style, easily modifiable through the code, as shown in this example. In order to increase the size of bus pseudo-icon (to make it, for e.g. 2x of the base one) just apply a single CSS statement: font-size:2em; to the container div element: it could be done in the main HTML file (as shown here for the didactic purpose), or in the external CSS file, which is more appropriate for a production release.

Possible alternatives

As stated in a previous subchapter, the best possible scenario would be using ASCII or Unicode character if any appropriate one exists. Otherwise, this advanced CSS3 technique is an option providing rather compact, flexible and scalable solution. Other alternative exists, in particular, the ones discussed in comments thread. The first suggestion of using highly compressed graphic image/files lacks flexibility/scalability and adds significant labor overhead dealing with image editing. Using canvas drawing is another suggested alternative, which also lacks of any tangible merits: it requires additional javascripting and raises web browser compatibility issues. Beyond those suggestions, it seems like SVG could be a valid alternative to this CSS3-based pseudo-graphic solution (SVG topic will be covered in a separate tip).

History

Mar 2015: First draft solution released as described in [1] (contest article)

Apr 2015: Advanced CSS3 technique applied to the original code in order to produce more flexible/compact solution

Comments and Discussions

This is subject was already done by Twitter Bootstrap 3. They have many icons, which are just CSS3 Hex-Codes to get them. You should rather search the web before posting something like self-made CSS3 icons. I mean, there is a simplier method to get the same solution.

Hi,
Thanks for your comments. I have recently updated the article with more compact and flexible solution. There are couple aspects that I would like to highlight. Let’s take class ‘b1’ as an example. Without comments and white spaces it contains just 414 characters of plain ASCII. In case I need to generate a set of icons containing, for e.g. 3 different sizes of 10 different colors each (total 30 icons), then it can be done programmatically by tweaking several lines of code in suggested CSS3 pseudo-icon solution. Otherwise, creation of 30 image files (the alternative you’ve mentioned) adds a heavy labor overhead, plus a cumulative digital footprint of 30 graphic files could be quite significant. As stated in the article, the best case scenario would be finding a proper Unicode glyph, but unfortunately, it’s not feasible in this particular use case.
Thanks and regards,

Would using technology such as canvas would not have also provided the best of both worlds with an even better reduction in traffic and underlying technology utilization? A fallback for solution browsers without canvas is easily applied in such cases using plain html or server side image generation where required. This solution not only doesn't degrade it comes with a significant amount of overhead.

Hi,
Using canvas is a valid alternative, and it may even provide some size optimization (but not necessarily), though browser compatibility could be an issue. Also, a flexibility: for 30 different pseudo-icons (various color/size) there apparently should be 30 different canvas, while in proposed solution it can be just a single CSS class with simple scaling (via em) and color changes in couple lines as shown. I would say that these two solutions are not mutually exclusive, but rather complement each other, so developers can select the one pertinent to their use case.
Thanks and regards,

Hi,
This comments thread is getting lengthy. Frankly, I still think that using a single HTML5 div with couple added CSS3 pseudo-elements in order to produce a pseudo-icon pertinent to this case is a valid solution providing lot of flexibility and less labor overhead than drawing canvas with javascript (or jQuery), and/or doing image editing. So, would you please post your complete alternative solution for us to be able to look into implementation details and evaluate its comparative advantages (if any)? That would be helpful.
Thanks and regards,