How to Inspect and Design Transitions – Pause/Stop Requests with Fiddler

Designing user-friendly applications often involves creating tranisitions between two states. For example after hitting the save button you want to show feedback (a loading overlay with a spinner),  so that the user knows your app is actually doing something – processing and saving the data.

design and layout transitional elements, interactions, loading overlay by pausing the loading of a page

Here is an example where communicate that we are saving the Premium settings in discoverize – the html of the overlay is being appended by javascript.

Because these transitional elements are only on screen while the transition takes places it is hard for a frontend designer to design and layout the elements show during the transition. If they are only being hidden with css properties you could make the elements visible with help of firebug or any other browser developer tool or inspector.

However if these elements are loaded/appended by javascript and removed after the transition has finished it is almost impossible to inspect and adjust them.

How to Stop or Pause a Request with Fiddler Filters Break for Inspection

There is an easy way to pause or stop your request: Fiddler filters.

fiddler-logo

Fiddler is a free desktop web debugging tool by telerik. It allows you to analyse traffic of your web app or website.

Here is how you set a breakpoint on POST to interrupt the request:

pause or stop a request with breakpoint on POST in Fiddler - to design and layout transitions in web apps

  1. Open Fiddler
  2. Navigate to the “Filter” Tab
  3. Turn on the checkbox “Use Filters
  4. Go down to “Breakpoints” and turn on the checkbox “Break request on POST

Done. Now, in your web app, as soon as you press the save button (or equivalent interaction) fiddler stops/pauses the request. In our case the loading overlay is being shown permanently.

You can layout and design the transitional elements as you are used to with firebug and so on.

Once you are done you can either resume the request by pressing “Go” (top left) in Fiddler or simply turn off the breakpoint or filter.

Thanks to Oliver for showing me this tip 🙂

How to Stay Sane and Productive and Up-to-date as a Digital Worker – Manage Incoming Information

Being productive is key to being a web and ux designer or any person working on the web.

One part of productivity is knowing where to find the information you need when you need it.

Another part is keeping up with new developments in your trade, constantly learning and improving.

However, I believe the most important part to being productive is actually getting back to work and getting things done: designing web sites, building web apps, publishing content.

Many Opportunities to Learn and Improve your Skills

As a passionate frontend developer or ux designer for that matter you get bombarded with more information than you can possibly handle, let alone use productively. If you just try to stay up to date with developments in your field of expertise, you follow leading blogs, important people on twitter and signed up for a couple of newsletters.

Every day you get dozens if not hundreds ideas for improving your workflow, speeding up production or trying something completely new:

  • Sass for smarter css development
  • Grunt and Gulp for automation
  • flexbox for more complex layouts

And if you are building a product you have to learn even more stuff:

  • marketing and sales
  • support and customer satisfaction
  • pricing and business models

So basically, your inbox, rss reader, twitter is overflowing.

“Getting Things Done” Rescues Your Sanity and Creativity

If you have read the enourmously popular “Getting Things Done” by David Allen, you know that a major key for being productive is a well structured system for managing incoming stuff.

Simply put, Allen suggests that you sort all incoming stuff into clearly predefined buckets. For the purpose of this post I am only going to focus on 3 buckets:

  • actions: things I should do next
  • someday maybe: things I might consider doing sometime in the future
  • reference: information I might need later

The crucial step to staying creative and sane is to keep your head free from todos, mental notes, reminders - so that you can actually focus on the work at hand. This may even apply more to designers then to other digital workers, because designing is about coming up with many solutions to a problem. And more mental space you have, the more ideas you will generate.

Tools That Help Me Stay a Productive Designer

Diigo for Maybe Later and Reference Information

A lot of information is nice to know, however does not  change your current course of action. But you might need it at some point in time - so it would be great if you could find it later quickly.

Examples for reference information might be:

  • a blog post on how to create circle icons with css
  • a guide how to build your own html emails
  • a video on how to run a facebook ad campaign for your product

All these things are currently not relevant to your actions, because you currently don’t work on them. But you think, they might prove useful to you in the future. And you already know that you can trust the source - which in most cases beats a new google search on the topic.

diigo logo - bookmarking productivity tool

So I save them in diigo. Diigo is basically an online bookmarking tool. You can save links and access them in your account from any device later. I just recently switched to diigo from delicious, because it is a lot faster and easier to use:

  • You can install the diigo add-on in any browser to save a web page with a click of a button (I simply click ctrl + d) - the diigo popup opens
  • I add some tags (for example to associate the post with a project of mine) to find the ressource later hit save and I am done

using diigo for reference bookmarking with firefox addon

I know the information is securly saved and I don’t need to worry about finding it again.

So I can get back to work.

Pocket for Actions and Maybe Later

If I get across a blogpost that I think will change the way I work or approach things, I will actually want to read it sooner than later.

Examples might be:

  • a blog post about improving your sass compiling time by switching from grunt to gulp
  • an article on how to auto-reload your web page across devices during development with browser sync
  • a guide how to improve your blog post writing by chosing better headlines

The difference to the reference information is crucial: These posts help me improve my work right now. Because:

  • I am using sass and it’s slow to compile
  • I loose time waiting for my browser to reload while designing web apps
  • I would love to improve the readibility of my posts 🙂

However I cannot stop the work I am currently doing just to implement these ideas. So I need a place to store them for later completion.

pocket logo - bookmarking productivity tool

Pocket to the rescue: Pocket is also an online bookmarking tool - however offers a better read-later experience - which is perfect for actionable information.

With a simple click of a button you save a page to pocket:

using pocket to save posts for later read

Because I don’t store these posts for reference but want to act on them, I do not add any tags here. I am going to get them sooner or later.

The next step is simple: Whenever I have a moment spare time or energy avaible to try something new, I fire up the pocket app and simply pick a post from my list and read it or implement it. I either pick the first post or if I am not into just scroll to the first thing that catches my eye:

my pocket reading list - simple productivity

Another great thing about pocket is the great reading user experience: It let’s you completely focus on the content - no distractions, no ads, no navigation, no newsletter popups:

pocket reading view - focus on the stuff you want to learn

I especially enjoy the reading experience on my smartphone with the pocket app. The content always looks good, sharing and saving new links is easy and let’s you get back to the article quickly.

With Pocket I have completely changed my blog reading habits: I don’t have dozens of tabs open with blog posts that nag at me for not reading them for weeks. And even though my list in pocket is growing every day, it does not bother me, because I know I will get to it if I have the time for it.

Clearing Your Mind and your Workspace to Stay Productive

Which brings us back to Getting Things Done: Using diigo and pocket gives me the peace of mind to organize incoming stuff where it belongs and getting back to doing actual work.

As David Allen best put it:

Your Mind is for having ideas, not holding them.

Try the tools: diigo.com and getpocket.com

How to Decrease Your Bounce Rate to Zero and Why Bounce Rate is not a Search Ranking Factor

While making changes to our google analytics events for our web portal software discoverize, we managed to drop our bounce rate to zero. In this post I share what how we fixed the problem and why I think that bounce rate can not be part of google’s search ranking algorithm.

What Exactly is Bounce Rate?

We all know, the lower the bounce rate the better, but what does it actually represent?

Google analytics defines bounce rate as the

percentage of session, in which the person left your site from the entrance page without interacting with the page.

(Check here for a more in depth explanation: https://support.google.com/analytics/answer/1009409?hl=en)

Basically it means, that after arriving at your site, the visitor does not go to another page or converts for you (for example newsletter signup).

Usually you would want your bounce rate to be as low as possible – because you want your visitors to convert in some shape or form. Be it by buying something, linking or commenting on your blog post or subscribing. There are exeptions to this rule – because a high conversion rate can mean that your visitor has found what she was looking for – wikipedia is a great example (unless you are actively procrastinating 😉

How We Dropped our Bounce Rate to Zero

Our discoverize portals usually have bounce rate around 40% – which actually is quite a good number for travel related sites. A couple of weeks ago it suddenly dropped by about 50%:

drop in bounce rate by 50% - google analytics

Naturally we wanted to take credit for improving our software and encouraging more interactions with our portals. However we had not deployed any changes in that period that should have affected the bounce rate this much.

So we dug deeper to find out what could have gone wrong. And pretty quickly we found that the bounce rate on our detail pages had dropped to zero (for example a glamping detail page: http://glamping.info/glampingunterkunft/blockhutte-auf-camping-via-claudia):

bounce rate dropped to zero

So this definetely could not be right… After going through our git commits we quickly found where the mistake came from:

We had added an google analytics event that would trigger as soon as the detail page was opened. A glance at the google analytics events documentation showed that these events count are interpreted as as user interactions. This means that these visits even though not triggering any real interation from our visitors did lower the overall bounce rate.

How to Prevent Events from Affecting Bounce Rate

Luckily there is a pretty easy way to fix this – via David Walsh:

ga('set', 'nonInteraction', true);

More on tweaking your events and bounce rate in David’d Blogpost: https://davidwalsh.name/analytics-bounce-rate

Sadly, our bounce rate is back to normal:

bounce rate back to normal

Why Bounce Rate Should not Affect Your Search Rank

There have been some speculations on whether or not google considers your bounce rate when calculating your search rank.

Our inadvertent drop in bounce rate show that you could manipulate your bounce rate very easily. So it seems reasonable to asume that bounce rate should not be part of google’s search algorithm.

How to Really Improve Your Bounce Rate

If you want to increase your visitor’s interactions with your site and convert them to customers, readers or fans check out this post by quicksprout with a great infographic:

https://www.quicksprout.com/2014/04/17/how-to-decrease-your-bounce-rate/

Search Result Design Patterns – Travel, Hotels, Apartments, POI

Search results are the central interaction element for users in order to decide whether or not an entry is worth diving deeper. If you design them right and show the important information in an appealing design, your visitors can decide faster and more confidently if they want to explore the result or not. I take a look at search results from leading online services that revolve around geographical search. Ranging from travel and hotel search (airbnb.com, booking.com) to apartement search (rent.com, apartements.com) point of interest (POI) search (yelp.com). Skip to Summary and Design Recommendations/Takeaways.

Notes:

  • The design rating is my personal take on the overall design of the entry and takes into account the layout, ease of use and overall look-and-feel.
  • I have ommited the “click on the result itself” as a call to action – because this one is implicit and true for almost all search results

Travel and Hotel Sites

Travel sites represent one of the biggest online industries with very “old” player such as tripadvisor.com and booking.com and newer competitors such as airbnb.com. The design approaches vary from very traditional to very modern.

Airbnb

search result design patterns: airbnb

search result on airbnb.com

Airbnb.com focuses on the visual aspect of travel: A almost maximum size image with gallery functionality. Little distraction, clean design. The compact designs also allows them to use a grid instead of a list and makes the mobile design approach easier, because a single search result will always fit any screen.

  • regular elements (6): image with gallery, price, name of entry, type of entry, location, image of entry owner
  • call to action (1): like/save search result to list
  • Design Rating : 5/5

Booking.com

search result design patterns: booking.com

As one of the biggest players in the travel space booking.com seems to have a very full design with a lot of competing elements. Many visual elements (icons, different colors, font-sizes) and a lot of information that seem to be randomly positioned make it hard to quickly process the result. Thus a clear focal point or idea does not emerge.

One theme that does appear seems to be the psychological “limited availability” element of suggesting to visitors that booking as soon as possible is very important. This is supported by 3 elements: Latest booking time, number of people looking at the entry, last chance.

  • regular elements (14): image, name, rating with average and number of ratings, 3 different badges, number of likes, room type, price with explanation text, region, latest booking time, amenities, more of room type, “last chance” text
  • call to action (1): book now
  • design rating: 1/5

Expedia.com

search result design patterns: expedia.com

A little less chaotic than booking.com however the elements of the expedia.com search result still do not seem to clearly communicate how the information is structured and prioritized. The user is forced to read in different blocks and lines, no clear flow or scanning is possible.

The approach to present marketing formulations is interesting however: “Free Cancellation”, “Sale!” and “Book now, Pay Later” seem to go in a different, more positive direction than booking.com’s psychological “limited availability” approach.

  • regular elements (12): image, name, average rating with text and number of reviews, hotel stars, location and link to map, contact: phone, price and discount, “free cancellation”, “expedia rate”, “book now pay later”, VIP button
  • call to action (1): “Sale!”
  • design rating: 3/5

Google Hotel Finder

search result design patterns: google hotel finder

Google Hotel Finder is one of the very interesting travel sites because it has launched with a very reduced and in many ways innovative approach. In today’s world with sites like hipmunk, airbnb and lovely driving the design change in this space google has been able to stay in this group with small and smart design decisions. The search result is well layed out, all information is grouped in a sensible way. The call to action is clearly visible. One interesting aspect is the positioning of the image to the right – which only 2 of the sites I have looked at do – the other being Kayak.com.
  • regular elements (6): name, price, rating average and number of reviews, hotel stars, ameneties, image
  • call to action (1): “Book”
  • design rating: 5/5

Hipmunk

search result design patterns: hipmunk.com Hipmunk.com is a relatively new player on the aggregated travel search market and has drawn quite some attention for a innovative and well balanced overall search page. Being created by Steve Huffman, founder of reddit certainly helped draw attention too. Himpunk presents one of the smallest search results I have come accross. It clearly focuses on the call to action which is by far the most prominent part of the result. The rest is visually clear and quick to scan. The image clearly looses in this micro-design. Not a lot of appeal and information can be transported in 70 by 70 pixels.
  • elements (5): image, name, hotel stars, rating average and number of reviews, price
  • call to action (1): “Select”
  • design rating: 4/5

Hostels.com

search result design patterns: hostels.com Hostels.com presents a very well designed search result. The call to action is well represented, the relevant information is grouped and font sizes and colors in balance to support the overall appearance and information. One drawback is the tiny image in favor of a seemingly generic sales slogan “Great Value!”.
  • regular elements (7): image, name, “great value” badge, prices, distance to city centre, short description with link to more info, rating average with well layed out number of reviews
  • call to action (1+2): “Book Now” (major focus), “More info…”, “Show all room types” (minor focus)
  • design rating: 4/5

Hotels.com

search result design patterns: hotels.com One of the biggest search results, hotels.com does not really seem to use the big amount of space quite well. Even though white space in most cases is a good thing, in this case the elements seem to be in no clear relation to one another. Especially the rating block seems lost between the price and the image. The visual seperation of the price from the rest by using a different background color for the 2 elements is an interesting approach that makes the composition and clearer. The “Special Deal” banner also heavily competes with the “Select” button which is to be the primary call to action with poor wording however. Why the complete address is relevant to the user at this stage beats me.
  • regular elements (11): image, name, price, last booked, address, hotel stars, average rating and number of reviews, district, distance to centre/poi, “free cancelation”, “special deal”
  • call to action (1): “Select”
  • design rating: 2/5

HRS.com

search result design patterns: hrs.com

HRS.com offers an interesting design approach: It uses multiple columns to layout the different information parts. I like this design because it makes scanning and comparing between search results much easier. Also using a visual representation (circle and color) for the rating average seems to make a lot of sense. The use of simple and universal icons reduces the amount of text and thus noise.

The “Free with HRS” section is an interestin addon however sadly it breaks the otherwise very well designed column layout.

  • regular elements (11): image, name, region, distances to poi, average rating and number of evaluations, price, number of rooms available, “hot” badge, “incl. breakfast”, “free with HRS” text
  • call to action (1): “Hotel details”
  • design rating: 4/5

Kayak.com

search result design patterns: kayak.com

Kayak.com has been a great source of inspiration for me – especially their entry page/overview is incredibly well designed and we have used parts of the layout for our design at discoverize.

The search result is equally well designed. Clear typography, well layed out elements, no clutter, a lot of white space and a clear call to action make this search result easy to read.

  • regular elements (7): price, image, name, hotel stars, rating average and number of reviews, amenities and link to details, deal
  • call to action (2): “Select”, “Show details”
  • design rating: 5/5 – Winner of the Best Search Result Design Award

Laterooms.com

search result design patterns: laterooms.com Laterooms.com presents a simple, reduced and well balanced search result. Again, I like the seperation of content parts using different background-colors. The visual representations of rating average with yellow blocks is unusual however helps users visually grasp the information. The image is failry large however the “1 person viewing” in red attracts a bit too much attention away from the otherwise clearly visible call to action.
  • regular elements (6): price, rating average and number of reviews, postal code with link to map, distance to centre, hotel stars, number of people viewing
  • call to action (1): “View”
  • design rating: 4/5

Roomkey.com

search result design patterns: roomkey.com

Roomkey.com chooses a very minimal approach for their grid based search result. The image and the price clearly are the main focus, however the primary call to action “book” is also very visible due to size but does not overwhelm because of the neutral color and small type.

There is a very interesting twist to the design: Even though the icon on the top right might not be very intuitive, it flips the search result around and presents you with more detailed information:

search result design patterns: roomkey.com flip side

The thing I really like with this approach is that the user does not leave the current search context and can still compare different search results – either the detailed information or the cover page.
  • regular elements (5) (front cover only): image, name, district, hotel stars, price and price with taxes
  • call to action (2): “book” button, flip result
  • design rating: 4/5 – Winner of the Search Result Innovation Award

Tripadvisor.com

search result design patterns: tripadvisor

Tripadvisor.com is probably the largest and most popular online travel community. They focus heavily on authentic reviews and recommendations. Their search result clearly reflects this: The “content” part of the result is clearly seperated from the “booking” part. Thus suggesting independence from the whole monetary aspect of booking a hotel/travel. This way you tend to doubt the authenticity of the reviews and ratings less and see tripadvisor as what it primary is: A community for passionate travelers. The design of the content part could be a bit better spaced and grouped, but does a decent overall job of conveying information. It is not quite clear though how the user specific ranking “#1 Just for You” is generated.
  • regular elements (9): image with slideshow, name, rating average, number of reviews, hotel ranking in region, user-specific ranking, short description, mini-comments, price listed by site
  • call to action (1): “view deal”
  • design rating: 3/5

Trivago.com

search result design patterns: trivago I have added trivago.com because it seperates and groups their information elements stronger than most search results. Almost presenting a table view, all elements are divided by borders. This makes it easier for the visitor to scan the result and even more importantly to compare different search results – the information is always located at the same easily findable spot. I would have liked to see a bit more white space to make the reading of the search result a bit easier. The call to action however is very well emphasized without much distraction. Offering a fairly large image also benefits the user.
  • regular elements (8): image, name, hotel stars, city, distance to poi/centre, prices on sites, average rating and number of reviews, price
  • call to action (2): “view deal”, “view all deals”
  • design rating: 4/5

Apartment Search Sites

Appartment results differ from travel results that the precise address/location is of highest priority to the users. And in most cases there are no reviews/ratings.

Apartments.com

search result design patterns: apartments.com

Similar to airbnb the focus here is the image. However it is interesting that apartements.com also prioritizes their call to action “Contact Property” directly from the search result. Even though a lot of information is displayed, it does not overwhelm and appears nicely layed out.

  • regular elements (9): name, entry owner, stars, address, price, apartment type, amenities, contact: phone, link to more
  • call to action (3): “contact property”, “play video”, like/save entry
  • design rating: 5/5

Hotpads.com

search result design patterns: hotpads.com

Hotpad.com is well designed mix of compactness and focus. The typography is simple, clean and allows for quick scanning. The emphasize is on the price and no additional call to action (except for clicking the result) distracts from the information.

  • regular elements (5): image, address, price, rooms, number of photos
  • call to action (1): “31 photos”
  • design rating: 4/5

Immobilienscout24.de

search result design patterns: immobilienscout24.de

Immobilienscout24.de is the largest apartement search provider in Germany and presents a very well balanced design. The result is unusually high which allows for a very large image with gallery (even though the big border reduces the actual size). The rest of the information is well seperated and I especially like the subtle line to divide the footer from the rest. The position and choice of the “star” icon for saving the result seems a bit odd because it is in conflict with the rating stars. Also there is no explanation or clue to why there is a white-on-blue exclamation sign next to the result title.

  • regular elements (10): name, address, link to map, price, size, rooms, link to ground plan, average rating and number of reviews of entry owner, entry owner, entry owner logo
  • call to action (1): “save/like”
  • design rating: 3/5

Livelovely.com

search result design best practice: livelovely.com

livelovely.com has a very similar approach to airbnb: The image is emphasized, the rest of the information is well balanced and easily readable. Using different shades of grey for the typographical elements makes the overall design appealing.

  • regular elements (4): image, address, number of rooms, size
  • call to action (1): “save/like”
  • design rating: 5/5

Rent.com

search result design best practice: rent.com

Rent.com presents a clean and well designed search result. The focus to check availability is clearly visible and even the secondary call to action - calling the realtor is also well presented. The overall spacing and grouping seems to pretty much on spot.

  • regular elements (7): image and number of available images, name, district, price, amount of units, rooms, contact: phone
  • call to action (1+3): “check availability”, call phone, “view more info”, “current rent specials”
  • design rating: 5/5

Walkscore.com

search result design best practice: walkscore.com

Walkscore.com’s apartement search offers a lot of interesting features (like their own WalkScore - a measure of how much you can accomplish in a neighbourhood by walking) - most of which can be used while interacting with the map. This is why the search result is relatively small. It does still a very good job of conveying the relevant information: The image is very big and the rest of information is overlayed and thus does not need additional space.

  • regular elements (5): image, price, name, type of apartment, walk score
  • call to action (1): like/save button
  • design rating: 5/5

Point of Interest Sites

Point of interest (poi) sites combine different entry types into one portal: You can search for restaurants, bars, clubs, art galleries, shopping, and so forth all within one web application. This certainly makes it more difficult to design a search result that fits all different categories equally well.

Yelp.com

search result design best practice: yelp.com

Yelp.com is the largest online community for finding almost anything - primarily local business in your vicinity ranging from restaurants to spas to home services. Similarly to tripadvisor at it’s core it is all about users and reviews. The search result presents a decent content elements seperation. Presenting a review at the bottom with the image of the reviewer is a good approach to presenting human-based recommendations. The average rating is not easily readible due to little contrast between the orange and the grey background.
  • regular elements (7): image, name, average rating and number of reviews, price range, type of business, address, review with reviewer image
  • call to action (0): none
  • design rating: 3/5

Summary - Similarities and Differences in Search Results

There are many different approaches to presenting search results:
  • Some present a very user friendly design in a very small space, some do not use the big amount of space too well.
  • Most search results present between 6 and 10 regular elements and 1 call to action.
  • Using an image and the name and some form of rating/reviews is present in most designs
  • The primary call to action (apart from clicking on the search result itself) varies from booking/selecting to saving/liking

Design Pattern Recommendations for Search Results

Good usability and user experience are key for a successful product. On most search pages the key goal for your visitors is to find an entry/search result that they feel confident is worth exploring further either by booking or opening the detailed view. Reducing the effort to compare results and make decisions will ensure a happy user who is assured that he has found the right entry. Which in turn ensures that she or he will book with your site and return the next time she or he searches for an entry. In order to improve your search result performance and improve the experience for your visitors you can experiment with the following design pattern takeaways:
  1. allow for easy scanning and quick decision making
    1. group elements according to information presented -> use different background colors or borders
    2. present a clear hierarchy of elements -> use font sizes, font styles and colors
    3. focus on the relevant information at this point -> use information that allows for comparison between results
  2. focus on 1 clear call to action -> avoid too many points of focus
  3. large images make the result more appealing -> avoid minifying the image to present more content
If you have other innovative or well designed search results, feel free to share them in the comments and I might put them on the list.

Striped Progress Completeness Bars with CSS3

In a recent project we needed bars that represented the completeness of an entry in our portal software discoverize.

completeness-bar-different-colors-finished-product

The idea was to introduce a gamification element to motivate entry owners to fill out their entry. The bars needed to allow for:

  • different colors (positive, normal, negative)
  • different sizes (depending on context)
  • display readable text in all settings

So lets get started with the css funkiness.

Step 1: Creating Stripes with CSS3 Linear Gradients

There are quite a few resources on creating stripes with css:

Because I wanted a more subtle, sketchy look with thin stripes, I decided to create my own pattern that looks like this:

css stripes thin sketchy as overlay

In order to achieve the effect I used the :before pseude-element to create the stripes as an overlay. You position it absolutely within your parent so that it fills it completely.

Basically you create a CSS3 linear gradient with transparent segments and semi-transparent black segments where you want the stripes to be. This way the stripes would always appear in the color of the parent element. You rotate the gradient to the angle you want (in my case 45 degrees). By using gradient segments that start and stop at the same point you get a hard line instead of a gradient between the colors.

You can adjust the width of the stripes by changing the gradient segments and the background size.

.stripes {
  background:#5bb75b;
  position:relative;
  }

.stripes:before {
  background-image: linear-gradient(-45deg, 
      rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 2%, 
      transparent 2%, transparent 50%, 
      rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2) 52%, 
      transparent 52%, transparent); 
  background-size:20px 20px;
  content:"";
  position:absolute; 
  left:0; 
  top:0; 
  width:100%; 
  height:100%; 
  display:block; 
  z-index:3;
}

Check out the finished look (demo):

See the Pen ogRdWp by Andrej (@AndrejTelle) on CodePen.

Step 2: Creating the Progress or Completeness Bar CSS3

There a quite a few of resources for creating css bars, however they are mostly for displaying a animated progress status. Basically the user is waiting for something to happen on your page – either an upload or download or some transaction being completed.

We needed a representation of the current completeness of an entry – so no animations and more of a flat overall look and feel. And the text should be readable both above a full bar and the empty bar-wrapper.

completeness progress bar with css3

In order to be able to adjust all compontents of the bar I created a SASS mixin that allows me to create bars of different colors and sizes. I can set the following variables:

  • size (height) of the bar
  • color of the actual bar-meter
  • color of the text and the text-shadow
  • background color of the bar-wrapper

You need an html parent element that is the bar-wrapper and an child-element that get’s the inline style width set to the completeness percentage. Here is the html:

<div class="bar">
  <span class="bar-meter" style="width:92%"></span>
  Completeness: 92%
</div>

Here is the CSS (Sass, SCSS) needed:

// mixin definition for bar-wrapper, actual dynamic bar and text
@mixin bar($size:17px, $bar-color:#5bb75b, $text-color:#fff, $text-shadow-color:#444, $bg-color:#ddd) {
  // wrapper properties
  border-radius: 5px;
  position:relative; 
  background:$bg-color; 
  border: solid 1px #999; 
  height:$size; 
  box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.2); 
  cursor:pointer;
  // text properties
  text-shadow: 
    1px 1px 1px $text-shadow-color, -1px -1px 1px $text-shadow-color,
    1px -1px 1px $text-shadow-color, -1px 1px 1px $text-shadow-color, 
    1px 1px 2px $text-shadow-color, 1px 2px 2px $text-shadow-color,;
  font-family: verdana; 
  position:relative; 
  z-index:2; 
  color:$text-color; 
  white-space:nowrap; 
  font-size:$size/1.6; 
  display:block; 
  text-align:center; 
  letter-spacing:0.5px; 
  line-height:1.7;
  
  // actual dynamic bar
  .bar-meter {background-image:linear-gradient(lighten($bar-color,7), darken($bar-color,7));
    border-radius:5px 0 0 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    border:solid 1px rgba(0,0,0,0.35); 
    border-right: solid 1px rgba(0,0,0,0.45); 
    border-bottom:solid 1px rgba(0,0,0,0.45); 
    display:block; 
    height:100%; 
    position:absolute; 
    left:0; 
    top:0; 
    z-index:-1;
  }
  // stripes on dynamic bar
  .bar-meter:before {
    background-image: linear-gradient(-45deg, 
      rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 2%, 
      transparent 2%, transparent 50%, 
      rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2) 52%, 
      transparent 52%, transparent); 
    background-size:16px 16px; 
    content:""; 
    position:absolute; 
    left:0; 
    top:0; 
    width:100%; 
    height:100%; 
    display:block; 
    z-index:3;
  }
}

And then you call the mixin on your bar-element and define the variables (size, bar-color, text-color, text-shadow, bar-background) you want:

.bar-1 {
@include bar(36px, #5bb75b, #fff, #333, #ddd); margin-bottom:24px;}

Here is the result with different sizes and colors according to completeness:

See the Pen NPVygb by Andrej (@AndrejTelle) on CodePen.

Check out the full completeness bar demo.

For sake of brevity I did not include vendor specific css3 prefixes. Make sure to include those for browser you need to support.

If you have any suggestions for improvements I would be glad to read them in the comments. Feel free to critique my code.

How to Build your Phonegap Android App on a Windows PC and Test it on your connected Android Device or Emulator

If you want to test your Phonegap (Cordova) App on Android devices during design and development you can follow this guide in order to set up the build and deployment process for your app. You will be able to access the app either through an emulator on your PC or directly on your smartphone or Android device.

Why? We are currently working on deploying a classic web application (the campsite portal camping.info) as an Android App using Phonegap. We need to make sure everything looks nice and is usable.

Note: I am running this installation process on a PC running Windows 8.1 64-bit. It should run with most Windows installations, though. I test my App by connecting my Samsung Galaxy S4 mini via standard usb cable.

Step 1: Installing Android Studio SDK

  1. Download Android Studio SDK for Windows:
    1. download from here (bundle with tools and IDE): http://developer.android.com/sdk/index.html#download
    2. install it to a folder of your choice (remember it)
  2. Install additional Android 4.4.2 – API 19 Package (needed build your app – 5.x is currently not fully supported by Cordova) :
    1. after installing Android Studio open it android studio - running Android Phonegap App on PC and connected Android device
    2. on the ‘Welcome’ screen click on ‘Configure’ – the configure menu opens
    3. click on ‘SDK Manager’ – the SDK Manager opens in new window
    4. scroll down to Android 4.4.2 – API 19 and install all packages in the folder
  3. Set paths to Android SDK folders in system variables so that you access it from anywhere:
    1. openedit system environment variables’ (in windows system properties -> advanced tab)
    2. click on ‘environment variables’ (bottom right)edit system variables for running Android Phonegap App on PC and connected Android device
    3. in either User or System variables click on ‘edit’ (with variable ‘Path’ selected)
    4. add 2 paths pointing to your installation path like so: c:my-android-sdk-installation-folderadt-bundlesdkplatform-tools; c:my-android-sdk-installation-folderadt-bundlesdktools (make sure to add a semicolon ‘;’ between all paths specified)
    5. in either User or System variables create a new variable with variable name ‘ANDROID_HOME’ and variable value of your Android SDK installation folder like so: ‘c:my-android-sdk-installation-folder’
    6. click ok and close system properties

Step 2: Install Node.js and Node Package Manager

  1. in order to quickly and easily install Phonegap download and install node.js (which includes npm, the node package manager) from here:  http://nodejs.org/download/installing node.js for running Android Phonegap App on PC and connected Android device
  2. alternatively update: update npm by running ‘npm update npm -g’ from the command line

Step 3: Install Apache Ant

  1. Phonegap needs Apache Ant to run properly
  2. Follow the instructions to Ant installation here: http://ant.apache.org/manual/install.html   (download Ant from here: http://ant.apache.org/bindownload.cgi)
  3. Check your Ant installation by running ‘ant -version‘ from the command line – it should return something like: ‘Apache Ant(TM) version 1.9.4 compiled on April 29 2014’

Step 4: Install Phonegap

  1. install Phonegap using npm (node package manager): open command prompt and execute ‘npm install -g phonegap’ – this will install the current version of Phonegap globally to run with any project
  2. or alternatively update to the current Phonegap version by entering ‘npm update -g phonegap’

Step 5: Prepare your Device for Testing

  1. on your Android device: make sure ‘developer options’ are turned on in your android device -> guide here: http://www.greenbot.com/article/2457986/how-to-enable-developer-options-on-your-android-phone-or-tablet.html
    1. on my Samsung Galaxy 4 mini it meant:
      1. go to settings -> more -> about device
      2. tap the build number 7 times
  2. on your device: go to settings -> more -> developer options and allow ‘usb debugging’
  3. Connect android device to pc via usb cable:
    1. check to see if device is recognized:
    2. open command prompt in your app folder and ‘adb devices’ and press enter
    3. your device should be listed
    4. if not, open a command prompt and:
      1. type ‘adb kill-server’ and press enter
      2. then type ‘adb start-server’ and press enter
      3. then try again ‘adb devices’ and press enter

Step 6: Build and Run your Phonegap Android App

  1. open command window in your app folder
  2. enter ‘phonegap run android’ and press enter (alternatively enter ‘phonegap build android’)
  3. after a couple of seconds your App should open on your connected phone
  4. if no phone is connected it will open in an emulator on your PC

Well, you are all done and can test your Android app on your device or using the emulator. After changing the app make sure to deploy it again to your phone using step 6. You can access the app on your phone after disconnecting from your PC at any time – you can find it with all other apps in your apps folder.

If you have any suggestions or improvements to this how-to-guide, feel free to share them in comments.

Starting a New Trail – My Blog about Solving Problems by Design – Web, UX, Graphic

It has been a while since I have been blogging regularly over at my old design blog with my old company. After starting our new web applications startup teamaton, I was up to the neck with work. Now that things are running smoothly I can catch up with long overdue todos: Starting my design blog. I will be posting about my work as a: Look forward to guides, tutorials and reviews. From time to time I might share my 5 cents on design I like, from web related to product design. Maybe I will chip in my thoughts on the evolution of the web as an industry, how a business can operate in this space and what my experiences are as part of it. So stay tuned for some awesome content!